【Cocoonカスタマイズ】テンプレート変更不要で好きな要素を追加する方法

はじめに
追加方法の比較
フックの概要
完成イメージ
実装手順
- 解説
さいごに

はじめに

どうすれば、テンプレートを変更せず、好きな位置に、新たな要素を追加できるの？

WordPressでWebサイトを運営していると、「テンプレートを変更せずに、任意の位置へ新しい要素を追加したい」と考えることがあります。

そこで、アクションフックとJavaScriptを組み合わせ、好きな位置へ要素を追加します。

この記事では、この方法について説明します。

追加方法の比較

要素を追加する方法として「JavaScript」と「アクションフック（PHP）」の2つが考えられますが、それぞれにメリット・デメリットが存在します（表1参照）。

方法	メリット	デメリット
JavaScript	DOM操作により、画面上の任意の位置に要素を追加できる	ブラウザに送られた情報しか扱えず、サーバーサイドのデータ（投稿ID・ユーザー情報など）に直接アクセスできない
アクションフック（PHP側）	サーバーサイドのデータを直接扱え、WordPressの情報を柔軟に処理できる	フックが用意されている位置（テンプレート内の特定の場所）にしか要素を追加できない

JavaScriptとフックの課題を補うため、両者を併用します。
アクションフックを使用して、WordPress側で得られる情報を処理し、その情報を基に要素を追加するJavaScriptコードを出力します。

フックの概要

WordPressの基本機能「フック」には、アクションとフィルターの2種類があります。
表2にそれぞれの概要を示します。

フックの種類

項目	アクション	フィルター
目的	特定のタイミングで、ユーザー独自の処理を実行。	データが表示される前に、ユーザー独自の処理を実行し、元の返却値を変更。
戻り値	なし	あり
登録されているフックポイント	do_action()	apply_filters()
フックを実行	add_action()	add_filter()

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_action('wp_footer', function () {
  // モバイルボタン検索テンプレートを読み込み
  ob_start();
  cocoon_template_part('tmp/mobile-search-button');
  $html = ob_get_clean();

  // ヘッダーメニューの最後に追加
  ?>
  <script>
  jQuery(function ($) {  
    $('.menu-header').append(`<?= $html ?>`);
  });
  </script>
  <?php
}, 999);

解説

このコードでは、WordPressのwp_footerアクションフックを使用して、検索ボタンのテンプレートを読み込みます。
その後、JavaScriptを使用してPCヘッダーの最後に追加します。

jQueryを利用したDOM操作に関する詳細は、以下を参照ください。

jQueryを利用したDOM操作要素の追加メソッドまとめ - Qiita

はじめに jQueryでの要素追加メソッドをよく忘れるので、それのメモです。似たような記事はもう沢山あると思いますが、すぐに思い出せるようコードベースで動きを確認できるようにしています。言葉での説明はあえて省きます。Don't think...

さいごに

今回紹介した方法を使えば、テンプレートを変更せずにWordPressに好きな要素を追加することができます。
アクションフックを活用し、JavaScriptと組み合わせることで、柔軟にカスタマイズが可能です。