テーマ
WordPressで作られたWebサイトは、テーマを変更すれば簡単にWebサイトのデザインを変更することができる。テーマの変更は、簡単にできる。管理画面のメニューから、「外観」→「テーマ」を選び、「テーマのインストール」タブをクリックする。テーマはここから検索して、簡単にインストールすることができる。色やレイアウトはもちろん、機能などで絞り込み検索することも可能。以下はおすすめにある「Responsive」というテーマを例に説明をおこなう。
インストールが終了したら、次の画面になるので「ライブプレビュー」をクリックする。
ライブプレビューでは、現在のサイトにこのテーマを適用した場合にどのようになるかを簡単に見ることができる。
この画面で背景色などを変更することが可能だが、どのような項目が変更できるかはテーマによって異なる。 これで問題なければ「保存して有効化する」ボタンをクリックする。気にいらなければ「キャンセル」をクリックすると前画面に戻るので、「テーマインストーラーに戻る」リンクをクリックして、再度、気にいったテーマ探せばいい。 デザインを変更するには、このテーマを変更すれば良いので、WordPressでのオリジナルサイト構築はこの「テーマ」を作成することになる。
テーマが持つ独自の機能
テーマに独自の機能がある。この独自の機能はテーマによってかわってくるが、基本的に使用されている機能を1つ1つ説明していく。
カスタムヘッダー
メニューから「外観」→「ヘッダー」をクリックする。
Webサイトのヘッダー画像を変更することができる機能である。自分で用意した画像をアップロードすれば、ヘッダー画像として利用がすることができる。
ウィジェット
メニューから「外観」→「ウィジェット」をクリックする。 ウィジェットとは、「小さなプログラム」とか「ちょっとした機能」という意味である。WordPressでは、サイドバーなどに「カテゴリー」や「最近の投稿」、「検索」などを表示するためのウィジェットがいくつか用意されている。使用できるウィジェットの種類は、有効にしているテーマやプラグインによってかわってくる。 ウィジェットの追加方法は、「利用できるウィジェット」に表示されているのを「メインサイドバー」にドラッグ&ドロップするだけで利用できる。また、テーマによってはメインサイドバー以外に「フッターエリア」や「ヘッダーエリア」などが用意されていることがある。
テーマ編集
メニューから「外観」→「テーマ編集」をクリックする。 ここでは、右端に表示されているファイルを編集することができる。編集方法はは、右端から編集したいファイルをクリックし、編集が完了したら、「ファイルを更新」をクリックすれば編集内容が反映される。
テーマを構成するファイル
テーマは、wp-contentフォルダ内のthemesフォルダの中に格納されている。themesフォルダ内には、WordPressインストール時に、デフォルトで用意されている「twentytwelve」、「twentyeleven」の他に先程ダウンロードした「responsive」など、ダウンロードしてインストールしたテーマがフォルダごとに格納されている。また、テーマを手動でインストールするには、このthemesフォルダにアップロードすればいい。
WordPressでは、これらのPHPファイルを「テンプレートファイル」と呼んでいる。テーマのフォルダの内をみると複数のファイルがあるが、テーマによって必要となるテンプレートファイルはまちまちで、最低テンプレートファイル(index.php)とスタイルシート(style.css)があれば、テーマとして成り立つ。基本的にWordPressでは、ブログのトップページを表示するために、index.phpというテンプレートファイルを読み込んでている。デザイン/レイアウト的な目線でみると、index.phpは以下のような構成になっている。
index.phpというファイルでは、ヘッダー部分はheader.php、サイドバー部分はsidebar.php、フッター部分はfooter.phpという別のテンプレートファイルを読み込んで1ページとして表示している。この構造は、基本的にどんなテーマでも同じである。index.phpを開いてみると、get_header、get_sidebar、get_footer関数が使われている。これらはWordPress内で定義されている関数で、テンプレートダグと呼ばれている。テンプレートタグはコード内で以下の働きをする。
get_header :テンプレートファイルheader.phpを読み込む get_sidebar:テンプレートファイルsidebar.phpを読み込む get_footer :テンプレートファイルfooter.phpを読み込む
トップページと同じような構成のブログの個別記事ページ(single.php)がある。個別記事ではsingle.phpというテンプレートファイルが使われている。index.phpと同じくget_header、get_sidebar、get_footerが使用されており、その他にcooments_templateというテンプレートタグが使われている。
comments_template:テンプレートファイルcomments.phpを読み込む。
上記のindex.phpとsingle.phpの以下のようになっている。
<?php get_headar(); ?>
・・・省略・・・
ここに記事の全文を表示するための処理
・・・省略・・・
<?php comments_template('',true); ?> ← single.phpのみ
・・・省略・・・
<?php get_sidebar(); ?>
<?php get_footer(); ?>
個別記事ページ以外に検索結果ページカテゴリーページなどあるが基本的には、上記に述べたようにindex.phpと同じ構成となっている。WordPressでは、テーマの中に各ページのテンプレートファイルがなかったとしても他のテンプレートが使用される。例えば、あるテーマの中に個別記事ページのsingle.phpがなかったとしたら、index.phpを使って個別記事を表示する。その代わりに表示されるテンプレートファイルには優先順位がある。詳細については以下のリンク先で確認してください。
WordPress Codex 日本語 - テンプレート階層
style.cssとfunctions.php
WordPressのテーマでは、基本的にstyle.cssという名前のスタイルシートが使われている。複数スタイルシートを用意していいが、最低限style.cssは必要である。
functions.phpは必須ファイルではないが、あると便利なファイルである。WordPressのテーマはPHPで書かれているため、テーマ内で独自の関数を作成したいときがある。そんな時には、このfunctions.phpに書き込む。なぜならWordPressはページを表示する時に、毎回自動的にfunctions.php読みにいくようになっているからだ。 ※テーマによってはfunctions.phpファイルがない場合があるが、functions.phpという名前でテーマフォルダ内作成すればいい。