Webデザイナー初心者向けWordPressの使い方を徹底解説
この記事ではWebデザイナー向けにWordPressの使い方を徹底解説します。
Webデザイナー向けですので、既存のデフォルトテーマを使ったWordPressの使い方ではなく、オリジナルテーマを将来的に作っていきたいWebデザイナーが学ぶべきことをポイントをかいつまんで解説していきます。
フリーランスでWebデザイナーになって直案件をとっていくのであれば、WordPressは絶対使えた方がいい技術です。
この記事でWordPressのすべてを解説することはできませんが、WordPressがどのような概念で作られているのか、何ができるのか、そういった概念的なことを理解しつつ、具体的なWordPressの画面を使って解説をしていきます。
今日この記事を最後まで見ていただいた方が理解できる内容は次の通りです。
- WordPressをやるべき理由が明確になる
- WordPressで何ができるのかわかる
- WordPressの概念を理解できる
- オリジナルテーマを自作して開発する方法が理解できる
逆の次のことは他のブログに任せてここでは解説しません。
- ドメイン・サーバーの取得
- WordPressのインストール
それでは早速行ってみましょう(´ε｀ )
フリーランスWebデザイナーがWordPressをやるべき理由
結論から言うと単純にWordPressは稼げるからです。フリーランスで直案件をこなすのであれば、自分でデザインから開発までできると好都合です。もちろん仲間と分業してもいいのですが、１人でやるのであれば、WordPressを使えると請け負える範囲が圧倒的過ぎるぐらいに広がります。
そもそもHTML/CSSができない状態で、コーポレートサイトを作るのは難しいです。まずお問合せフォームが作れませんし、ブログも立ち上げられませんよね。
なので、フリーランスWebデザイナーが直案件で、HTMLとCSSのみですべての開発をやるのには無理があります。直案件ではなく下請け案件であればコーディング部分だけを請け負うことは可能ですが、単価は低いです。
僕はコーポレートサイトに関してはほぼ100%WordPressで作っていて、HTML/CSSだけで作っているものはほぼ皆無です。
直案件をとって自分で全部納品までやることで１発あたりの単価を高い金額で受けるのであればWordPressは必須だと考えておいて良いでしょう。
WordPressは学ぶ手順が大切
WordPressはやむくもに使っていても習得に時間がかかります。
僕は最初に出会った本が良質な本でWordPressを理解することがある程度スムーズにはできたのですが、やはり６年使ってきて今振り返るとまだまだ効率的な勉強はできたなと思います。
何でもそうですが概念を捉えていると物事の習得は早いです。
なのでこの記事では僕が６年間実践で使ってきた経験も踏まえて、WordPressの基礎的な概念を抽出して徹底的に解説をしていきます。
こういうのは知っているかどうかだけでだいぶ変わるので是非最後までご覧ください。
WordPressでできること
まずWordPressの使い方に入る前にWordPressでできることとできないことははっきりさせておきましょう。できることは主に次の２つです。
- コーポレートサイト制作
- ランディングページ制作
有料会員制サイトなど決裁・顧客管理が必要なサイトには不向きです。なのでECサイトや有料会員制ファンサイトなどは向きません。理由は説明すると少し難しくなるので、とりあえずできないと理解していただいて問題ありません
フリーランスWebデザイナーで稼いでいくためにはコーポレートサイトとランディングページが作れれば何も問題ないですよね。
ちなみにコーポレートサイトは、PHPまで勉強してWordPressを使いこなせば、かなり多機能なものまで制作可能ですので、ほぼ何でも作れると思って問題ありません。PHPの知識があまりなくても一般的なコーポレートサイトは制作できますのでご安心下さい。
WordPressの使い方 基礎概念６つの理解
WordPressの使い方を学ぶ上で、WordPressの基本概念理解６つをおさえておきましょう。
- テーマの変更/カスタマイズ
- データベースとテンプレートタグの概念
- WordPressのCMS機能：投稿と固定ページの概念
- テンプレートファイルの概念
- インクルードタグ（共通パーツ）
- プラグイン
基礎概念１．テーマの変更/カスタマイズ
WordPressにはテーマという概念があります。
簡単に言うと、テーマというのはデザインテンプレートのことです。WordPressにはたくさんのテーマが配布されていて、テーマを変更するとホームページのデザインを変えることができます。
管理画面にログイン後、「外観」→「テーマ」と選択するとテーマ変更画面が表示されます。
ここからテーマを変更するのですが、下図で有効になっている「test」というのがありますよね。これは僕が自作したテーマで、このようにオリジナルのテーマを入れることもできます。
オリジナルのテーマの作り方は後ほど取りあげます。また、＋マークの「新しいテーマを追加」から誰かが配布しているテーマを利用することもできます。
ここではテーマというものが存在していて、
- WordPressのデフォルトのテーマを利用
- 誰かが配布したテーマを選択して利用
- テーマを自作して適用
の３つのパターンがあることだけ理解してください。
基礎概念２．データベースとテンプレートタグの概念
データーベースについてはHTMLとCSSを勉強してきた人にとってはおそらく新しい概念ですよね。
HTML/CSSのみで作るサイトでは自分がHTMLに書いた情報をそのままホームページ上で表示していましたよね？でも情報を更新しようと思ったらHTMLファイルを直接更新する必要がありました。
ですが、その方法ですと更新性のあるようなコンテンツ、例えばブログを書こうと思ったら、毎回HTMLファイルでブログをアップロードする必要があります(´・ω・)
そして、ブログ一覧もその都度更新が必要ですよね。さらにブログの更新情報をトップページに入れようと思ったら、トップページもその都度更新が必要になります。
一方で、WordPressはブログを管理画面から書くと、データベースにブログの内容やタイトル、日付などが登録されて、その情報をブログ一覧やブログ記事ページで読み込むことでホームページ上に表示しているので、管理画面で更新作業を１回やれば、すべての関連ページに反映されます。
また、HTMLやFTPの知識がない人でも管理画面からブログを書けるので素人のクライアントでも問題なくブログの更新ができますよね。
ブログに限らずこのような更新される可能性があるデータはWordPressでは全部管理画面からデータベースに直接登録することができます。そしてホームページを開くたびにデータベースの情報を読み込んでくるという形になります。
例えば下図のブログでは、サムネイルとタイトル、日付、本文のところは全部データベースから情報をとってきています。また、この画面内だとサイトタイトル（左上にある「フリーランスとセルフマネジメント」）もデータベースから引っ張ってきているので、サイトタイトルを管理画面から変更すると自動的に全てのページでサイトタイトルが切り替わります。
このようにデータベースという箱にデータを保存して、それを出力するようにするとデータの一元管理ができて管理がとてもしやすくなります。
そして例えばタイトルを引っ張ってくるためにやるべきことは、下記のように１行コードを書くだけです。
|
1 |
<?php the_title() ;?> |
上図のブログ一覧にあるサムネイルの右側のブロック（タイトルなど）のソースコードをまるっと書くと以下のようになります。
|
1 2 3 4 5 |
<div class="entry-title"><?php the_title(); ?></div> <div class="entry-date"> <i class="fa fa-refresh" aria-hidden="true"></i>公開/更新：<?php echo get_the_date('Y/m/d') ?> </div> <div class="entry-descri"><?php the_excerpt(); ?></div> |
the_title()やget_the_date()などの部分で必要な情報を出力していますが、これをWordPressのテンプレートタグと言います。
このようにWordPressにはテンプレートタグという特定の情報をデータベースから呼び出すようなタグがあります。
このテンプレートタグは大量に種類がありますが、頻出するものは決まっていますし使いまわしでOKなので、特に暗記する必要はありません。またググれば簡単にでてきます。
このようにWordPressではHTML/CSSだけで作ったホームページとは異なり、データベースから情報を引っ張ってくることができます。そして、ブログのように更新性のあるホームページを作成する場合はこの概念が必須です。
WordPressを使わなくともプログラムがかけるエンジニアはこういうものを作れますが、
WordPressはオープンソースで技術が公開されているので、ガチのプログラマーでなくてもWordPressの使い方を勉強すればこういったシステマチックなホームページが作れるということで多くの制作者に使われています。
まずはデータベースという概念を理解して頂く必要があるのでその点について解説しました。デフォルトのテーマを使う場合はこのテンプレートタグ自体を触ることはありませんが、オリジナルのテーマを作る上で必須です。
ところで、皆さん、WordPressをサーバー側でクイックインストールする際にデータベースを新規作成したりパスワードを決めたりしたと思います。あれはWordPressとデータベースを連携する作業だったのです。
クイックインストール時に作ったデータベースに、WordPressの管理画面から入力した情報が保存されます。
そして、WordPressからデータベースにアクセスする際にアカウント情報が必要なので、WordPressの初期インストール時にその設定をしていたわけです。
基礎概念３．WordPressのCMS機能：投稿と固定ページの概念
WordPressはCMSだと言われますよね。コンテンツマネジメントシステムの略で要するに管理画面からホームページを修正できますよということです。
WordPressの代表的なCMSとして投稿と固定ページの概念があります。
WordPressを新規インストールすると投稿と固定ページというものがあります。
投稿とは
簡単にいうと「投稿」はブログ機能で、どんどん記事を増やしたりカテゴリーでまとめたりできる機能です。その他にも新着情報の機能として使ったりもしますが、更新性のある記事についてはこの「投稿」で管理します。この投稿機能で作成した記事は例えば新着ブログ一覧のような形でホームページに出力できます。
固定ページとは
固定ページというのは普段更新しない固定したページで、基本的にはブログや新着情報のような更新性のある記事以外のページを作成するときに使います。
つまり、WordPressはデフォルトでブログを投稿する機能、ホームページの各ページを作成・編集する機能が備わっているということですね。
皆さんがWebデザイナーとしてクライアントに提案する時に
ホームページをお客様で更新できる形で納品できますよ
と言えるわけです。最も、それ自体は（皆できるので）強みにはなりませんが(´・ω・)
基礎概念４．テンプレートファイルの概念
HTMLコーディングだけでサイトを作る場合は特定のURLにだけ対応したファイルを作成していましたよね。
例えば、xxx.co.jp/abc.htmlというURLならドメイン配下にabc.htmlというファイルを作りますよね。文章が異なるだけでレイアウトが同じページxxx.co.jp/xyz.htmlを作る場合でもxyz.htmlというようにURLごとにファイルを作成する必要があります。
このようにHTMLだけでホームページを作ろうと思ったら、どれだけ共通の雛形だったとしても、ページの数だけファイルを作らなければいけませんでした。
一方でWordPressはページの種類に応じて適用されるテンプレートファイルという雛形ファイルがあり、システム的にページを生成することができます。つまり、同じ雛形を使う場合はHTMLで制作する時のようにページ単位でファイルを全部作る必要はありません。
わかりにくいので最初に例から出すと下図のように固定ページでXYZというページを作るとします。
固定ページでXYZというページを作成
この内容で公開ボタンをクリックしてページを公開すると、例えばxxx.co.jp/xyz（ここは任意に設定）というURLに、下図のように固定ページで編集した内容が反映されます。
xxx.co.jp/xyzというURLにページが生成される
HTMLベースで作る場合はxyz.htmlをいうファイルを作ってアップロードしますが、WordPressではページファイルはその都度システム的に生成されます。固定ページからページの内容を作成して任意のURLを指定するだけです。ではこのXYZページはどうやって生成されているかというと、
WordPressの決まりとして固定ページはpage.phpという雛形のファイルで表示されるようになっています。このpage.phpのような雛形のファイルをテンプレートファイルといいます。
page.phpには何が書かれているかと言うと、先程説明したテンプレートタグ（データベースから情報を引っ張ってくるWordPressのタグ）が書かれていて、固定ページ編集画面で登録された内容を出力するようになっています。
テンプレートファイルの種類と階層
テンプレートファイルには種類と階層（優先順位）があります。
テンプレートファイルの種類は例えば下記のようなものがあります。
- front-page.php・・・トップページを表示するテンプレートファイル
- page.php・・・固定ページを表示するテンプレートファイル
- single.php・・・投稿ページを表示するテンプレートファイル
- archive.php・・・記事一覧を表示するテンプレートファイル
さらにテンプレートファイルは優先順位があります。簡単に言うと、front-page.phpがもしなかったらどうするのか？ということで、その場合はhome.phpを表示、さらにhome.phpがなければindex.phpを表示するという優先順位になっています。
その優先順位を示した図が下図になります。
※WordPressCodexに拡大閲覧できる図が掲載されています。
これを見て分かるのが、例えば固定ページの場合、page.phpで表示されると言いましたが、xxx.co.jp/xyzというページを作った時にpage-xyz.phpというテンプレートファイルがあればそれを優先して表示させることがわかります。（page-$slug.phpに該当します）
これから言えることとしては、固定ページはページごとにテンプレートファイルを変えることができるということです。つまり固定ページごとにデザインをまるっきり変えることも問題なくできるということです。
これは固定ページに限らずできます。
例えばカテゴリーページを表示するテンプレートファイルはcategory.phpですが、category-$id.phpがあればそちらを優先するのでカテゴリー別にテンプレートファイルを切り分けることが容易にできます。
整理すると次のようになります。
- HTML/CSSの場合はファイル名＝URLだった、そしてページごとにファイルを作成する必要があった。
- WordPressはシステム的にページを作るテンプレートファイルという概念がある。
- どのページをどのテンプレートファイルが担っているかを知っておく必要がある。
- テンプレートファイルには優先順位がある
- ページ単位でテンプレートファイルを切り替えるなどカスタマイズの柔軟性がある
５．インクルードタグ（共通パーツ）
例えば記事ページを作る場合はsingle.phpがテンプレートファイルでしたよね。
でもだいたいヘッダーとフッターは共通なので、テンプレートファイルがsingle.phpだろうがpage.phpだろうがヘッダーとフッターは共通化したいですよね(´ε｀ )
なのでsingle.phpの中にヘッダーをHTMLでベタ書きするのではなく、page.phpでもsingle.phpでもヘッダーやフッターは別の共通ファイルheader.phpやfooter.phpを読み込むようにします。
WordPressでheader.phpを呼び出す指示は次のように一文書くだけです。
|
1 |
<?php get_header(); ?> |
このタグをインクルードタグといいます。
インクルードタグはいくつかありますが、よく使うものは以下の３つです。
|
1 2 3 4 5 |
header.phpの呼び出し ・・・ <?php get_header(); ?> footer.phpの呼び出し ・・・ <?php get_footer(); ?> sidebar.phpの呼び出し ・・・ <?php get_sidebar(); ?> |
このパーツの共通化の概念もHTMLのみでホームページを制作する際にはありませんでしたよね。これで管理がめちゃくちゃ楽になります。
６．プラグイン
WordPressのもう１つ大きな特徴としてプラグインがあります。
プラグインはWordPressの標準機能に加えて様々な機能を非プログラマーでも簡単に導入できるものです。例えばお問合せフォームを作ったり、サイトのバックアップを自動的にとったりできるようなプラグインがあります。
お問合せフォームのプラグインで有名なContact Form7というプラグインがありますが、こちらをインストールするためには、下図のようにプラグインメニューからプラグイン名で検索をして「今すぐインストール」をクリックするだけです。
プラグインを実際に使う手順を簡単にまとめる次の通りです。
- プラグインメニューからプラグインを検索してインストール
- インストール後に表示される有効ボタンをクリックしてプラグインを有効化
- それぞれプラグインごとに設定が必要ですので、プラグインの使い方をググるなどして設定
色んなプラグインがありますが、プラグインはWordPressの開発元が作っているのではなく、第三者が制作したものをWordPress上で配布しているので、やみくもに使うのではなく次のような指標を参考にして利用すると良いでしょう。
- できるだけ多くの人が使っている有効インストール数が多いプラグイン
- 最終更新が比較的最近でメンテンナンスがなされているプラグイン
- 使用中のWordPressバージョンと互換性があるプラグイン
オリジナルテーマの制作方法
ではこの記事の最後の項目としてWordPressにおけるオリジナルテーマの開発方法について解説をします。
WordPressを使って稼げるようになるためにはオリジナルテーマが作れることは必須です。とはいっても簡単です。
簡単に手順をまとめると以下の通りです。
- デザインをする
- サイト構造に基づいて必要なphpファイルを作成する
- style.cssにオリジナルテーマの名前を定義する
- 必要なファイルをFTPでアップロードする
- テーマ編集画面でテーマを自作したオリジナルテーマに切り替える
デザインが終わったら、必要なphpファイルを作りますが、
例えば、ブログ付きのホームページを制作する場合は、トップページと固定ページと記事一覧ページ（新着順のアーカイブページとカテゴリー別一覧ページ）と記事ページのテンプレートファイルを制作する必要があります。
ですので、具体的に必要なファイルは次の通りになります。
- front-page.php（トップページ用）
- page.php（サービス案内や会社概要のような固定ページ用）
- archive.php（アーカイブページ用）
- category.php（カテゴリー別一覧ページ用）
- single.php（記事ページ用）
- index.php（このファイルは必ず必要）
- style.css
また、「手順３」ですがstyle.cssの冒頭に以下のようにテーマ名を定義するテキストを入れて下さい。
|
1 2 3 |
/* Theme Name : ここにオリジナルテーマ名を書く */ |
ここまでできたら必要なファイルをFTPでアップロードして、テーマ編集画面にて有効化します。
まとめ
WordPressの使い方を概念から解説してきました。この記事に書いた６つの概念はWordPressを自作テーマにて開発するにあたって非常に重要なことなので是非おさえておいてください。
実際に開発する際には、WordPressで頻出するPHPを学ぶ必要がありますが、基本的なことを理解したらある程度使いまわしもできるので、ガチのPHPユーザーにならなくても大丈夫です。
ちなみにWordPressで頻出するPHPは次の３つです。
- 配列
- 条件分岐
- ループ
僕もPHPはWordPressを扱う範囲ぐらいでしか使えませんが、問題なくかなり広範囲の制作業務を受注しています。
この記事ではWebデザイナー初心者向けにWordPressの解説をしてきましたがいかがだったでしょうか。
この記事は動画化します。YouTubeでデモサイトを実際に使ってより詳しく解説していきますので、完成したらアップします。
