ChocoMemo

学んだことをメモがわりにアップしていきます!

WordPress基本操作 4 - テーマ(デザイン)とテンプレートファイル


テーマ

WordPressで作られたWebサイトは、テーマを変更すれば簡単にWebサイトのデザインを変更することができる。テーマの変更は、簡単にできる。管理画面のメニューから、「外観」→「テーマ」を選び、「テーマのインストール」タブをクリックする。テーマはここから検索して、簡単にインストールすることができる。色やレイアウトはもちろん、機能などで絞り込み検索することも可能。以下はおすすめにある「Responsive」というテーマを例に説明をおこなう。

wordpress-テーマのインストール
テーマのインストール

インストールが終了したら、次の画面になるので「ライブプレビュー」をクリックする。

wordpress-テーマのインストール終了後の画面
テーマのインストール終了後の画面

ライブプレビューでは、現在のサイトにこのテーマを適用した場合にどのようになるかを簡単に見ることができる。

wordpress-ライブプレビュー
ライブプレビュー

この画面で背景色などを変更することが可能だが、どのような項目が変更できるかはテーマによって異なる。 これで問題なければ「保存して有効化する」ボタンをクリックする。気にいらなければ「キャンセル」をクリックすると前画面に戻るので、「テーマインストーラーに戻る」リンクをクリックして、再度、気にいったテーマ探せばいい。 デザインを変更するには、このテーマを変更すれば良いので、WordPressでのオリジナルサイト構築はこの「テーマ」を作成することになる。

テーマが持つ独自の機能

テーマに独自の機能がある。この独自の機能はテーマによってかわってくるが、基本的に使用されている機能を1つ1つ説明していく。

カスタムヘッダー

メニューから「外観」→「ヘッダー」をクリックする。

wordpress-カスタムヘッダー
カスタムヘッダー

Webサイトのヘッダー画像を変更することができる機能である。自分で用意した画像をアップロードすれば、ヘッダー画像として利用がすることができる。

wordpress-カスタムヘッダー画像表示確認
カスタムヘッダー画像表示確認

ウィジェット

メニューから「外観」→「ウィジェット」をクリックする。 ウィジェットとは、「小さなプログラム」とか「ちょっとした機能」という意味である。WordPressでは、サイドバーなどに「カテゴリー」や「最近の投稿」、「検索」などを表示するためのウィジェットがいくつか用意されている。使用できるウィジェットの種類は、有効にしているテーマやプラグインによってかわってくる。 ウィジェットの追加方法は、「利用できるウィジェット」に表示されているのを「メインサイドバー」にドラッグ&ドロップするだけで利用できる。また、テーマによってはメインサイドバー以外に「フッターエリア」や「ヘッダーエリア」などが用意されていることがある。

wordpress-ウィジェットの設定項目
ウィジェットの設定項目
wordpress-ウィジェットとサイドバー
ウィジェットとサイドバー

テーマ編集

メニューから「外観」→「テーマ編集」をクリックする。 ここでは、右端に表示されているファイルを編集することができる。編集方法はは、右端から編集したいファイルをクリックし、編集が完了したら、「ファイルを更新」をクリックすれば編集内容が反映される。

wordpress-テーマの編集
テーマの編集

テーマを構成するファイル

テーマは、wp-contentフォルダ内のthemesフォルダの中に格納されている。themesフォルダ内には、WordPressインストール時に、デフォルトで用意されている「twentytwelve」、「twentyeleven」の他に先程ダウンロードした「responsive」など、ダウンロードしてインストールしたテーマがフォルダごとに格納されている。また、テーマを手動でインストールするには、このthemesフォルダにアップロードすればいい。

WordPressでは、これらのPHPファイルを「テンプレートファイル」と呼んでいる。テーマのフォルダの内をみると複数のファイルがあるが、テーマによって必要となるテンプレートファイルはまちまちで、最低テンプレートファイル(index.php)とスタイルシート(style.css)があれば、テーマとして成り立つ。基本的にWordPressでは、ブログのトップページを表示するために、index.phpというテンプレートファイルを読み込んでている。デザイン/レイアウト的な目線でみると、index.phpは以下のような構成になっている。

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という名前でテーマフォルダ内作成すればいい。