WordPressのテーマの作成

まずテーマのディレクトリ名を決める必要があります。
次にテーマの必須ファイルである「style.css」を作成します。

style.cssの冒頭に次のルールでコメントを記述することでWordPressのテーマとして認識します。

/*
Theme Name: BISTRO CALME
Theme URI: http://example.com
Description: BISTRO CALMEのテーマです。
Version: 1.0
Author: Nakashima
Author URI: https://gihyo.jp
*/

テーマにはstyle.css以外にindex.phpが必要です。

「<?php echo get_template_directory_uri(); ?>」という記述はWordPressであらかじめ用意している「テーマのディレクトリまでのURL」を表示するための関数です。

テーマのインストール

作成したテーマの「bistro-calme」フォルダー一式をWordPressの「themes」ディレクトリの中にアップロードします。

テンプレートファイル

WordPressでは記事ページのデザインだけを変えたい場合は、「single.php」という名前でテーマ内にテンプレートファイルを作ります。
すると、記事ページにアクセスがあったときにはsingle.phpが表示されるようになります。

このようにWordPressはアクセスされたページに合わせて表示するテンプレートファイルを自動的に変更します。

front-page.phpがWebサイトのトップページを表示するのですが、index.phpしか存在しなくても正しくトップページが表示されました。
これはいったいどういうことでしょう？

実はWordPressにはテンプレートファイルの優先順位があるのです。アクセスされたページによって優先順位が高いテンプレートファイルを探します。
そして、該当するテンプレートファイルがあれば、そのファイルを表示する仕組みになっています。

つまり、bistro-calmeテーマにはfront-page.phpが存在しなかったので、代わりに次に優先順位の高いindex.phpが表示されたということです。

WordPressがテンプレートファイルを表示するルールを「テンプレート階層」と呼びます。
テンプレート階層では各ページで優先順位が最も低いファイルはすべてindex.phpになっています。
つまり、すべてのページが同じデザインで良いのであれば、index.phpだけですべてのページを表示することが可能です。

テンプレートタグ

<?php bloginfo('name');?>

トップページへのリンク

トップページへのリンク

トップページのURLを返す。

• $path:ホームURLからの相対パス
• $scheme:ホームURLに使うスキーム

home_url($path, $scheme)

<h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/logo@2x.png" alt="BISTRO CALME"></a></h1>

bodyタグのクラスを動的に出力

bodyタグのclass属性を表示する

body_class($class)

テンプレートの分割

Webサイトのヘッダーやフッターはトップページ以外のページでも同じように出てきます。他のページでも共通に使う箇所は「テンプレートパーツ」として別のファイルに分離させることができます。

header.phpを作成する

get_footerインクルードタグでheader.phpを作成する

index.phpからheader.phpを読み込む必要があります。header.phpは「get_header」インクルードタグで読み込むことができます。

get_header($name)

get_headerインクルードタグでfooter.phpを作成する

index.phpからfooter.phpを読み込む必要があります。footer.phpは「get_footer」インクルードタグで読み込むことができます。

get_footer($name)

jQueryの読み込み

WordPressを使ったWebサイトでは様々なプラグインを利用します。
こうしたプラグインの中にもjQueryを読み込むものがあります。
ところが、テーマの中ですでにjQueryを読み込んでいたとき、プラグイン側で同じjQueryを利用していると読み込みが重複してしまいます。
このようなJavaScriptの重複読み込み問題を解決するために、WordPressには「wp_enqueue_script」関数が用意されています。

wp_enqueue_scriptは読み込むライブラリ名をパラメータで渡します。
jQueryの場合は「wp_enqueue_script(‘jquery’)」と記述するだけでjQueryを一度だけ読み込むことができるようになります。

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

<?php
wp_enqueue_script('jquery');
wp_head();
?>
</head>

条件分岐タグを使ってトップページだけ表示を変更する

トップページの時だけ表示したい場合は「is_home」条件分岐タグを使います。
該当するHTMLをPHPのif文と組み合わせて

• $path:トップページかどうか調べる

is_home()

<?php if ( is_home() ): ?>
    <div class="jumbotron">
        <div class="jumbotron_item" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/home/jumbotron-1@2x.jpg')"></div>
        <div class="jumbotron_item" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/home/jumbotron-2@2x.jpg')"></div>
        <div class="jumbotron_item" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/home/jumbotron-3@2x.jpg')"></div>
    </div>
    <?php endif; ?>

is_home以外にもWordPressには非常に多くの条件分岐タグが用意されています。