【WordPress入門】アクションフックとフィルターフックを使いこなそう
ホームページ制作でWordPressのテーマを作っていると、functions.php で add_action や add_filter を使うことがよくあると思います。テーマをよりカスタマイズしたりプラグインを制作し...
ここでは
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 を削除する.
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 フックに次のような関数を登録することで、一覧に表示させることができます。
管理画面の一覧表示にスタイルを注入する
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'] ); に変更します。