LESSON / WP LOAD

フックとテーマサポートを設定する

アクションフックとフィルターフックの違いを理解し、テーマが対応するWordPress機能をfunctions.phpで宣言します。

目安 60分 コース進捗 0 / 17

GOAL

このレッスンでできるようになること

  • アクションとフィルターの役割を説明できる
  • after_setup_themeでテーマ機能を設定できる
  • functions.phpの役割と注意点を理解できる

WordPressでは、コアファイルを直接書き換えず、決められたタイミングへ独自処理を追加します。その仕組みがフックです。

このレッスンでは、テーマの初期設定を行うafter_setup_themeへ処理を登録し、タイトルやアイキャッチ画像などの機能を有効にします。

functions.phpの役割を確認する

functions.phpは、テーマで使う機能や初期設定を読み込むファイルです。テンプレートへ同じ処理を繰り返し書かず、フックを使ってWordPressへ登録します。

次の図では、「functions.phpの役割を確認する」の仕組みや関係を確認できます。

「functions.phpの役割を確認する」の仕組みや関係を示す図
「functions.phpの役割を確認する」の仕組みと関係

テーマを切り替えるとfunctions.phpも読み込まれなくなります。サイト固有の投稿タイプや重要なデータ処理は、本来プラグインで管理する方が安全ですが、この教材では仕組みを理解するためテーマ内で実装します。

アクションフックとフィルターフックについて

フックを使うと、WordPress本体を変更せず決められたタイミングへ処理を追加できます。

WordPressの処理の途中へフックを使って独自関数を追加する仕組み
WordPressの処理の途中へフックを使って独自関数を追加する仕組み

アクションフック

アクションは、WordPressの処理中に独自の処理を実行するためのフックです。add_action()でフック名と実行する関数を登録します。

フィルターフック

フィルターは、WordPressが扱う値を受け取り、変更した値を返すためのフックです。add_filter()で登録し、コールバック関数では必ず値を返します。

function wpload_change_excerpt_length( $length ) {
 return 80;
}
add_filter( 'excerpt_length', 'wpload_change_excerpt_length' );

接頭辞wpload_を付けるのは、ほかのテーマやプラグインが定義した関数名との衝突を避けるためです。

テーマが対応する機能を宣言する

テーマの初期設定は、テーマが読み込まれた後に実行されるafter_setup_themeへ登録します。

次の図では、「テーマが対応する機能を宣言する」の仕組みや関係を確認できます。

「テーマが対応する機能を宣言する」の仕組みや関係を示す図
「テーマが対応する機能を宣言する」の仕組みと関係
function wpload_setup_theme() {
 add_theme_support( 'title-tag' );
 add_theme_support( 'post-thumbnails' );
 add_theme_support(
  'html5',
  array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 'style', 'script' )
 );

 register_nav_menus(
  array(
   'global' => 'グローバルナビゲーション',
   'footer' => 'フッターナビゲーション',
  )
 );
}
add_action( 'after_setup_theme', 'wpload_setup_theme' );

title-tagを有効にするとWordPressがページに合うtitle要素を出力します。テンプレートへ固定のtitle要素を重ねて書かないでください。

設定結果を管理画面で確認する

  1. 投稿編集画面にアイキャッチ画像の設定欄があるか確認する
  2. 「外観」からメニューの位置を選べるか確認する
  3. 投稿と固定ページを開き、ブラウザのタブに適切なタイトルが出るか確認する
  4. HTMLソースを開き、検索フォームなどがHTML5形式になっているか確認する

PHPの構文エラーがあると管理画面にも入れなくなる場合があります。一度に大量のコードを貼らず、追加するたびに公開画面と管理画面を確認します。

次の図では、「設定結果を管理画面で確認する」の仕組みや関係を確認できます。

「設定結果を管理画面で確認する」の仕組みや関係を示す図
「設定結果を管理画面で確認する」の仕組みと関係

CHECK POINT

完了条件