【WordPress 入門】 Contact Form 7 をカスタマイズするためにアクション／フィルターフックを使いこなす
WordPress でお問い合わせフォームというと Contact Form 7 が有名ですが、ドキュメントが十分ではないこともあって、たくさん定義されているアクション／フィルターがあまり使われていないような印象がありま...
ここでは
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 フィルターで投稿をランダムに取得するようにします。