WordPress テーマとプラグインを徹底解説　第３回 WordPressテーマ作成(2)

こんにちは！瀬口理恵です。
前回の記事ではWordPressテーマをオリジナルで制作するための準備、テーマ認識の方法までお話しました。
今回は更にテーマ作りをしていきます。

①静的HTMLのトップページの拡張子を.htmlから変えindex.phpにする
②新たにコメントを書いたstyle.cssを用意する
③テーマ名をつけたフォルダにそれらを格納し、サーバー上のWordPressテーマを置く場所へアップロードして認識させる

ここまで出来ている状態からのスタートです！

オリジナルテーマを有効化してみると？

自分で作ったテーマをいざ有効化！
サイトを確認してみると、cssなど読み込まれていない崩れたページが出てくると思います。
ここで崩れているのは当然なので焦る必要はありません。
WordPressテーマ内の各ファイルへのパスに、相対パスは使用できないからです。※CSSの中は除く
まず見た目がきちんと表示されるように調整していきましょう。

css、jsをfunctions.phpで管理する

以前まではヘッダー内の<head></head>の中にbloginfo()を使ってcssやjsを読み込ませていましたが、現在非推奨となっています。
動作はしますが、これからWordPressを実装するならば、推奨されている方法で記述していきましょう。

テーマ内に新たにfunctions.phpファイルを作成します。
functions.phpはテーマファイル郡の中でもデザインやレイアウトを扱うものではなく、WordPressの機能や制御を専門に行うファイルで、全てphpで書きます。

まずcssを読み込ませてみましょう。

（例）

[code lang="php"]
function register_stylesheet() {
    wp_register_style('style', get_template_directory_uri().'/style.css');
    wp_register_style('reset', get_template_directory_uri().'/css/reset.css');
    wp_register_style('base', get_template_directory_uri().'/css/base.css');
}
function add_stylesheet() {
    register_stylesheet();
    wp_enqueue_style('style', '', array(), '1.0', false);
    wp_enqueue_style('reset', '', array(), '1.0', false);
    wp_enqueue_style('base', '', array(), '1.0', false);
}
    add_action('wp_enqueue_scripts', 'add_stylesheet')
[/code]

register_stylesheet()で、テーマで使用するcssファイルを登録しています。
上記の例ではstyle.cssと、cssフォルダに入ったreset.css、base.cssの合計3ファイルですね。

その次のfunction add_stylesheet()〜で読み込ませる順番を指定します。
wp_enqueue_styleでファイルの重複を防いで、意図した順番で読み込むように制御しています。

そして最後のadd_actionとは、アクションフックと呼ばれるものです。
WordPressで扱うフックには他にフィルターフックがあり、どちらも特定のタイミングで意図した関数を呼び出すことができます。

フックを使うことでカスタマイズの幅がより広がりますので、詳しくはCodexを参照してみてください。
http://wpdocs.osdn.jp/プラグイン_API

フックについてはWordPressを始めたての方は少し難しい内容ですので、最初から全て理解する必要はありません！
実際に動かしてみながら徐々に慣れていくので良いでしょう。

次に、同じような方法でjsも読み込んでいきます。

（例）

[code lang="php"]
function register_script(){
    wp_register_script('test', get_template_directory_uri().'/js/test/test.min.js');
    wp_register_script('xxx', get_template_directory_uri().'/js/xxx.js');
}
function add_script(){
    register_script();
    wp_enqueue_script('test', '', array(), '1.0', false);
    wp_enqueue_script('xxx', '', array(), '1.0', false);
}
add_action('wp_print_scripts','add_script');
[/code]

css読み込み時と流れは同じです。register_stylesheet()ではなくregister_script()を使いましょう。
add_script()〜で読み込み順を指定、最後にアクションフックを記述します。

パーツテンプレート化する

WordPressはページに応じてテンプレートを出し分けて出力、表示させています。
例えばTOPページはfront-page.php、投稿記事はsingle.php、固定ページはpage.phpのテンプレートファイルを使うといった具合です。
どのページではどのテンプレートが使われるのか、読み込み優先順位はどうなっているのかを把握することはとても大切です。
Codexで詳細解説がされているので是非目を通してみてください。

https://wpdocs.osdn.jp/テンプレート階層

下記のようなレイアウトをサンプルに考えてみましょう。

トップページのイメージです。
header.php／sidebar.php／footer.php
この3つは、サイトのどのページを表示しても同じ共通部分です。
共通部分はパーツテンプレート化して、同じものを読み込むようにしていきます。

header.phpを新規で作成し、今あるトップページのindex.php(front-page.php)からヘッダーの記述のみをコピペします。
コーディングの際にソースコード内にコメントを残しておくと分かりやすいですね。
その際、</head>の前に<?php wp_head(); ?>の記述をしておきましょう。
footer.phpも同じ要領で作り、</body>の直前に<?php wp_footer(); ?>の記述を追加します。