【AWS】知識ゼロから理解するRDS超入門
AWSのデータベースサービス「Amazon RDS」を初心者にもわかるように解説します。未経験には難しいMultiAZ構成やレプリケーションは、マスター/スレ...
前半のおさらい
WordPress（ワードプレス）のテーマを作成するには、さまざまなファイルが必要なことを前半の記事で説明しました。
| ファイル名 | 内容 |
|---|---|
| front-page.php | トップページを出力 |
| header.php | ヘッダーを出力 |
| footer.php | フッダーを出力 |
| sidebar.php | サイドバーを出力 |
この4つのファイルは1枚のサイトページを構築するために必要なパーツとしての役割を果たしています。
しかし、これだけでは、ただの無機質な紙切れのサイトページに過ぎません。
ワードプレスを使いこなすには、これに加えて、デザインをつけるスタイルシート（style.css）と動的にページをカスタマイズできるPHPファイル（functions.php）が必要なのです。
| ファイル名 | 内容 |
|---|---|
| style.css | ページのデザインを作成（CSSファイル） |
| functions.php | ウィジェットやカスタマイズ機能を作成 |
それでは、どのようにこれらのファイルが動いているのかを見ていきましょう。
自分なりにカスタマイズをする「functions.php」
ワードプレステーマのウィジェットやカスタムメニューなどの機能を自分なりに色々なカスタマイズすることができるのがこのfunctions.phpです。
functions.phpでできることはたくさんあります。
- 各種初期設定をする
- ショートコードで記事の投稿でもPHPを使用可能にする
- 管理ログイン画面のカスタマイズをする
- 記事投稿でのクイックタグボタンを追加・削除する
- ウィジェットやカスタムメニューなどの機能を追加・削除する
ここで、簡単な例をあげましたが、これもfunctions.phpでできることのほんの一部です。
今回は、主にWordPress特有の「フック」という機能について解説していきます。
フックとは、WordPressのプラグインやPHPによる処理の実行・解釈などのさまざまな段階における基本的なイベントトリガーです。
簡単にいうと、さまざまなタイミングの「きっかけ」のことです。
例えば、フックを使うことで、wp_head()というメソッドが実行されたタイミングにあわせて自分が用意した関数を実行させることができるのです。
このフックには、アクションフックとフィルターフックという2つの種類のフックがあります。
機能を追加・削除する「アクションフック」
アクションフックは機能を追加したり、削除したりすることができます。
例えば、アクションフックをwp_head()というメソッドに使うと、<head>に<meta>などの要素を追加することができるのです。
wp_head()というメソッドは、<head>の終わる直前をトリガーするメソッドです。
functions.phpに以下のコードを書いていきます。
add_action( 'wp_head', 'viewport' );
function viewport() {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
}
add_action()は、特定のアクションに関数をフックするためのメソッドです。
ここでは、フックするためのviewportという関数を下で定義しています。
ちなみにviewportは画面の表示サイズを使用しているデバイスに合わせるためのmeta要素です。
また、次のように関数を第二引数に直接組み込むような書き方もすることができます。
add_action( 'wp_head', function () {
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
});
今回は使用していませんが第三引数、第四引数にも値を置くことができます。
第三引数はアクションに関連づけられている関数が実行される優先順序（デフォルトは10）、第四引数はフックした関数が受け入れられる引数の数（デフォルトは1）です。
機能や手段の反応を修正する「フィルターフック」
フィルターフックは機能や手段の反応を修正することができます。
ここでは、the_title()メソッドを例にとって説明していきます。
the_title()は現在の投稿のタイトルを表示、あるいは返すメソッドです。
the_title()メソッドはwp-includes/post-template.phpに定義してあり、戻り値は、
return apply_filters( 'the_title', $title, $id );
となっています。
このメソッドの戻り値を「現在の投稿のタイトル」から「現在の投稿のタイトル[◯◯番目の記事]」というように修正するフィルターフックを次に書いていきます。
add_filter( 'the_title', function ( $title, $id ) {
$title .= '['.$id.'番目の記事]';
return $title;
}, 10, 2
);
# フィルターフックなしのタイトル結果 --> WordPressのテーマを自作するために必要な基礎知識
# フィルターフックありのタイトル結果 --> WordPressのテーマを自作するために必要な基礎知識[24番目の記事]
add_filter()は、指定したフィルターフックに関数を登録するためのメソッドです。
第一引数は登録するフィルターフックの名前、第二引数は呼び出される関数、第三引数は関数を実行する順番、第四引数は関数が受け取る引数の個数を表しています。
これで、the_title()メソッドの戻り値を修正することができます。
デザインを整えるための「style.css」
style.cssは、サイトのデザインを整えるためのCSSファイルです。
このファイル名は、テンプレートとして決まっている名前なので、変更しないようにしましょう。
ただ、style.cssにコードを書くだけではページに適応することはできません。これを適応させるためには、2つの方法があります。
- header.phpにCSSの情報を追記する
- functions.phpにCSSの情報を追記する
1つめがHTMLにコードを書いたことのある人が普段行なっているCSSの読み込み方法で、2つめがWordPress特有の読み込み方法です。
header.phpの<head>にCSSの情報を書いた<link>を挿入する
header.phpには、メタ情報や文書のタイトル、利用するスタイルシートを記入する<head>があります。
ココに、以下のようなコードを書き込みます。
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
get_stylesheet_uri()というワードプレス特有のメソッドを使うと、現状のテーマスタイルシートの URIを返してくれます。
これでスタイルシートとしてstyle.cssを適応することができます。
functions.phpにアクションフックを登録する
アクションフックはプログラム処理の色々な場面で機能を追加したり削除したりすることができます。
ですから、style.cssを使えるようにするためには、ワードプレスがページを生成する際に行う処理の中にstyle.cssを適応させるというアクションを追加させれば良いのです。
functions.phpにアクションフックの処理を書いていきます。
function style_scripts() {
wp_enqueue_style( 'theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'style_scripts' );
wp_enqueue_style()は、スタイルシートの重複を回避し、適切な順番で読み込むようにワードプレスが生成したページにスタイルシートを追加してくれます。
そして、add_action()でアクションフックをワードプレスがページを生成する処理の中に組み込むことで処理が実行されます。
ちなみにこのようにしても書くことができます。
add_action( 'wp_head', function () {
echo "<link rel='stylesheet' href='".get_stylesheet_uri()."'>";
});
また、余談ですが、style.css以外のスタイルシートをワードプレスに適応させることもできます。
例えば、トップページのみstyle-top.cssという特定のスタイルシートを適応させたいときは、header.phpに
<?php if(is_front_page()) : ?>
<link rel = "stylesheet" href = "<?php echo get_template_directory_uri(); ?>/assets/css/style-top.css" >
<?php endif; ?>
とコードを書くと、「/assets/css/style-top.css」のパスでスタイルシートを適応させることができます。
その他のテンプレート一覧
前半と後半の2記事に渡って説明してきましたが、ここまででできることは本当に最低限のトップページだけです。
実際はもっと多くのテンプレートを使ってサイトを充実させなければいけません。
これは、公式WordPressリファレンスのテンプレート階層の概要図です。
ここでは、最後に今まで解説してきたテンプレートファイル以外のファイルを簡単に紹介していきます。
個別投稿ページの表示
個別投稿ページを作成する際は主に以下のようなテンプレートファイルを使用します。
- single-{post_type}.php
- single.php
- singular.php
index.phpは、どんなページに対しても存在しない時の代わりとなるページ「最後の砦」となるページなので、割愛します。
固定ページの表示
固定ページを作成する際は主に以下のようなテンプレートファイルを使用します。
- カスタムテンプレートファイル
- page-{slug}.php
- page-{id}.php
- page.php
- singular.php
ここでいうカスタムテンプレートファイルとは、ページ作成画面の「テンプレート」ドロップダウンメニューで選択できるテンプレートファイルです。
get_page_templates()メソッドを使うことで呼び出すことができます。
カスタムテンプレートファイルは、以下のようにファイルの一番初めにコメントアウトすることで定義します。
<?php
/*
Template Name: 私のカスタムページ
*/
カテゴリーページの表示
カテゴリーページは、主にcategory.phpを使うことで表示することできます。
- category-{slug}.php
- category-{id}.php
- category.php
- archive.php
スラッグ（slug）ごとに表示されるカテゴリーページを変更したい時には、category-{slug}.phpといったテンプレートファイルを活用します。
タグページの表示
タグページは、主にtag.phpを使うことで表示することできます。
- tag-{slug}.php
- tag-{id}.php
- tag.php
- archive.php
カテゴリーページ同様、スラッグ（slug）ごとに表示されるページを作成する時は、tag-{slug}.phpといったテンプレートファイルを活用します。
カスタム分類の表示
以下がカスタム分類の表示をするためのテンプレートファイルです。
- taxonomy-{taxonomy}-{term}.php
- taxonomy-{taxonomy}.php
- taxonomy.php
- archive.php
これらのテンプレートファイルを活用すると、既存のタクソノミー（分類）「カテゴリー」「タグ」とは別に、ユーザーが独自でタクソノミーを追加することができるのです。
カスタム投稿タイプの表示
以下がカスタム投稿タイプの表示をするためのテンプレートファイルです。
- archive-{post_type}.php
- archive.php
初めから用意されている「投稿」「固定ページ」とは別に、ユーザーが独自で投稿タイプを追加することができます。
ユーザーが追加した投稿タイプのことを「カスタム投稿タイプ」と呼びます。
また、カスタム投稿タイプのアーカイブページ（一覧ページ）はarchive-{post_type}.phpで表示されますが、その単一投稿ページはsingle-{post_type}.phpで表示されます。
作成者別ページの表示
ユーザーページを表示させるためには、主にauthor.phpを活用します。
- author-{nicename}.php
- author-{id}.php
- author.php
- archive.php
ブログのようなサイトを作成する際には、執筆者別の記事一覧ページを作成することもできます。
検索結果ページ
サイト内検索を行なって出た検索結果を表示するのが、search.phpというテンプレートファイルです。
検索結果は、the_search_query()というメソッドを使用することで表示することができます。
サーバーエラーページの表示
サーバーエラーページの表示は、404.phpで行うことができます。
もし、このページを用意していない場合は、index.phpが404ページの代わりに表示されます。
