前回の記事「【WordPress入門】アクションフックとフィルターフックを使いこなそう」で WordPress で主に使用するアクションフックとフィルターフックの一覧を紹介しましたが、今回はそれらのフックを使って WordPress をカスタマイズしたいと思います。

ここでは add_action や add_filter で登録する関数を無名関数にしていますが、それぞれ関数を別に定義して、その関数名を文字列として add_action や add_filter に渡すこともできます。独自テーマ内で利用し、remove_action や remove_filter することがなければ無名関数でも問題はありません。逆にプラグインや親テーマ内で利用する場合は、remove_action や remove_filter で登録解除することができなくなるため、無名関数を使ってはいけません。

wp_head で出力される不要な要素を head 要素から削除する

デフォルトでは wp_head 関数によって多くの要素が head 要素に追加されますが、不要なものも多くあります。これらを出力されないようにするには、 remove_action で wp_head フックに登録されているアクションフックを解除します。

wp_head でスクリプトを注入する際に付与される type=text/javascript や type=text/css を削除する.

wp_head 関数でJSやCSSを注入すると、WordPress 側で自動的に type="text/javascript" や type="text/css" という type 属性が追加されます。通常は気にすることはないと思いますが、W3C のマークアップバリデーターでは

Warning: The type attribute is unnecessary for JavaScript resources.

や

Warning: The type attribute for the style element is not needed and should be omitted.

のように警告が表示されます。この警告が邪魔な場合は、script_loader_tag / style_loader_tag フックを利用して type 属性を削除することができます。これらは wp_enqueue_script 関数や wp_enqueue_style 関数で読み込まれたスクリプトやスタイルファイルを注入する際の HTML タグに対してフィルターすることができます。

body 要素に [投稿タイプ]-[投稿スラッグ] クラスを付与する

CSS でページ毎に切り替えを行う際に、body 要素に固有のクラス名を付与すると便利なことがあります。WordPress で用意されている body_class 関数を使用すると body 要素にクラスが自動的に付与されますが、スラッグ名に関しては付与されません。そこで body_class フックに対してフィルターフックを追加すると、body 要素に付与するクラスにスラッグ名を追加することができます。

テーマサポートを有効にする

デフォルトでは投稿や固定ページのアイキャッチ画像は無効化されています。またタイトルタグを wp_head 関数で出力するのも無効化されています。これらを有効にするには、after_setup_theme フックにアクションを追加して、その中で add_theme_support 関数を呼ぶことで有効化することができます。

タイトルのセパレーターを”-“から”|”へ変更する.

wp_head 関数でタイトルを出力するときに、デフォルトではタイトルのセパレーターが “-” になっています。これを変更するには document_title_separator フックを利用します。 add_filter( ‘document_title_separator’, function( $sep ) { return ‘|’; } );

フロントページのタイトル出力を [サイト名] | [キャッチフレーズ] から [サイト名] に変更する.

wp_head 関数でタイトルを出力するときに、トップページに関してはデフォルトで『 [サイト名] – [キャッチフレーズ]』のように出力されます。ここのキャッチフレーズ部分を削除したい場合は、document_title_parts フックを利用します。

meta-description と canonical を wp_head 関数で出力する.

meta 要素の description や canonical を wp_head 関数で出力したい場合は、wp_head フックでアクションを追加してページの種類によって出力内容を分岐させます。例えばこのような感じになります。

デフォルトで注入される jQuery 1.12.4 を解除し、別のバージョンを wp_head に注入する

WordPress では wp_head 関数によって、デフォルトで ver.1.12.4 の jQuery が読み込まれるように script 要素が出力されます。そのため、jQuery のバージョンを変えたい場合は、wp_enqueue_scripts フックを用いてすでに登録されている jQuery を解除し、別のバージョンの jQuery を登録する必要があります。次の例では、ver.3.3.1 の jQuery を wp_head 関数で出力させています。

投稿タイプごとに表示件数を変更する

カスタム投稿タイプをいくつか追加すると、一覧表示する際に投稿タイプごとに表示件数を変えたい場合があります。このときは pre_get_posts フックを利用します。 XXXXXX や YYYYYY にはカスタム投稿タイプのスラッグ名が入ります。

抜粋の文字数を変更する

抜粋の文字数を変更するには excerpt_length フックを利用します。例えばフロントページの場合のみ30文字に制限する場合はこのようになります。

固定ページの編集画面でビジュアルエディタを禁止する

制作現場では固定ページに関しては HTML を直に書くことが多いと思います。このような場合に固定ページの編集画面でビジュアルエディタを無効化するには user_can_richedit フックを利用します。 ここでは投稿タイプが page、つまり固定ページの場合に false を返してビジュアルエディタを無効化しています。

管理画面で「投稿」を非表示にする

カスタム投稿をメインで利用するようなサイトの場合、デフォルトの「投稿」が不要になることがあります。これを管理画面の左サイドメニューで表示させないようにしたい場合は、admin_menu フックを利用します。

管理画面のカスタム投稿タイプの一覧表示でアイキャッチ画像を表示させ、コメント欄を非表示にする

管理画面の一覧表示では、デフォルトではタイトル、コメント、日付が表示されます。ここに何か別の項目を追加したい場合は manage_XXXXXX_posts_columns フックと manage_XXXXXX_posts_custom_column フックを利用します。ここで XXXXXX にはカスタム投稿タイプのスラッグ名が入ります。例えばコメント欄を非表示にし、アイキャッチ画像をタイトルの前に表示させる場合は次のようになります。 add_filter( 'manage_XXXXXX_posts_columns, ...) の方では一覧のカラムにサムネイル用のカラムを追加しています。そして add_action( 'manage_XXXXXX_posts_custom_column', ...) の方で、そのカラムに何を echo させるかを記述しています。ここではアイキャッチ画像を表示するようにしていますが、add_action( 'manage_XXXXXX_posts_custom_column', ...) で指定する関数の引数には $post_id が渡ってくるため、カスタムフィールドをはじめとした様々な情報を表示させることができます。Advanced Custom Field などのプラグインを利用してカスタムフィールドを設定している場合は、そのフィールドを表示させるようにしておくと、投稿を編集するユーザーの利便性を上げることができます。

固定ページの一覧表示でスラッグとページパスを表示する

固定ページを作成していると、スラッグやページパスをページ一覧から確認したい場合があります。デフォルトでは「クイック編集」をクリックしないとスラッグを確認できませんが、manage_pages_columns フックと manage_pages_custom_column フックに次のような関数を登録することで、一覧に表示させることができます。

本文の最初の画像を投稿のアイキャッチ画像に設定する

publish_post フックを利用すると、投稿が公開されたときに、アイキャッチ画像がセットされておらず、なおかつ本文に画像が挿入されていれば、最初の画像をアイキャッチ画像に設定することができます。

管理画面の一覧表示にスタイルを注入する

manage_XXXXXX_posts_columns や manage_pages_columns フックでカラムを追加したときに、その幅を変更したいことがあると思います。こうした場合には、admin_enqueue_scripts フックでスタイルを注入することができます。例えば上の例のようにアイキャッチ画像を追加した場合には、次のようにするとアイキャッチ画像の幅を 150px にすることができます。 一覧テーブルでは column-[カラム名] というクラスが各カラムに付与されるため、上記のスラッグやページパスを追加する例の場合には .column-slug や .column-path というセレクタに対して CSS を書くことで、カラムのスタイルを上書きすることができます。

Contact Form 7 の JS/CSS を特定ページでのみ読み込む

コンタクトフォームの管理で Contact Form 7を利用している方は多いと思います。ただ Contact Form 7 はデフォルトでは全ページに JS/CSS を注入してしまいます。フォームがないページでは無駄なリソースを読み込んでいることになるため、これを Contact Form 7 で定義されている wpcf7_load_js フィルターフックと wpcf7_load_css フィルターフックを利用して改善します。 Contact Form 7 では wp_enqueue_scripts に wpcf7_do_enqueue_scripts という関数をフックしています。この関数内では wpcf7_load_js / wpcf7_load_css 関数が呼ばれ、true が返されると wp_enqueue_script / wp_enqueue_style 関数でスクリプトとスタイルが注入されるようになっています。wpcf7_load_js / wpcf7_load_css 関数では

function wpcf7_load_js() {
    return apply_filters( 'wpcf7_load_js', WPCF7_LOAD_JS );
}

のようにフィルターフックが用意されているので、ここに関数をフックさせればいいことになります。例えばテーマの functions.php で のようにしておくと、inquiry というスラッグをもったページでだけスクリプト・スタイルファイルを読み込むことができるようになります。複数ページある場合は、is_page 関数が配列を受け取ることを利用して、is_page( 'inquiry' ) を is_page( ['top', 'inquiry'] ); に変更します。

新規投稿・投稿編集時に何らかの処理をしたい

新規投稿時、投稿編集時に主役となる関数は wp-includes/post.php で定義されている wp_insert_post 関数です。ここにはいくつかのアクションフック・フィルターフックが用意されています。これらをコメント文と前後の制御構文とともに抜き出してみます。 さらに wp_transition_post_status 関数では3つのアクションフックが用意されています。 ここまでのフックで、主に使用するのは以下のフックになると思います。

• データベースへの保存前
  • wp_insert_post_data – 投稿がデータベースに挿入される前に投稿データをフィルターするフック
  • wp_insert_attachment_data – wp_insert_post_data のメディア版
  • pre_post_update – すでに存在している投稿がデータベースで更新される直前に発火するアクション
• データベースへの保存後
  • transition_post_status – 投稿がある状態から別の状態へ遷移したときに発火するアクション
  • {$old_status}_to_{$new_status} – 投稿がある状態から別の状態へ遷移したときに発火するアクション
  • {$new_status}_{$post->post_type} – 投稿がある状態から別の状態へ遷移したときに発火するアクション
  • edit_attachment – 存在しているメディアが更新されたら発火するアクション
  • attachment_updated – 存在しているメディアが更新されたら発火するアクション
  • add_attachment – メディアが新規に追加された直後に発火するアクション
  • edit_post – すでに存在している投稿（メディアを含む）が更新されたら発火するアクション
  • post_updated – すでに存在している投稿（メディアを含む）が更新されたら発火するアクション
  • save_post_{$post->post_type} – 投稿（メディアを含む）が保存されたら発火するアクション
  • save_post – 投稿（メディアを含む）が保存されたら発火するアクション
  • wp_insert_post – 投稿（メディアを含む）が保存されたら発火するアクション

save_post_{$post->post_type}、save_post、wp_insert_postはどれも同じ引数を取り順番に呼ばれるため、どれを使用しても同じ結果になります。ただし v3.7.0 から追加された save_post_{$post->post_type} は投稿タイプで限定されるため、フック関数内で if などによる制御構文を書かずに済むという利点があります。特に理由がない限りはこのアクションにフックさせるのが無難だと思われます。 例えば book というカスタム投稿タイプの新規投稿・投稿編集時に追加の処理をしたい場合は

<?php
add_action( 'save_post_book', function( $post_ID, $post, $update ) {
  // ここで追加の処理を行う
} );

のように関数をフックさせます。

テーマカスタマイザーの設定項目を非表示にする

テーマカスタマイザーで設定項目を加える際に、デフォルトの項目を非表示にしたいことがあります。この場合は customize_register フックを利用します。

投稿一覧ページで投稿をランダムに表示させる

WordPress では投稿一覧ページでの並び順が日付順になっています。サイトによってはこれをランダムに表示させたい場面があるかと思います。この場合はまず init アクションでセッションを開始する関数をフックさせ、posts_orderby フィルターで投稿をランダムに取得するようにします。