スポンサーリンク

【WordPress】フックや子テーマでのテンプレート上書きを使用せずにレイアウトを改変したい時

Web系

テンプレートのレイアウト(デザイン)をカスタマイズする時、下記のような対応を取ります。

  • 適当なプラグインを使う又は作る
  • CSSで頑張る(子テーマ)
  • フックを探してfunction.phpに書く(子テーマ)
  • テンプレートを上書きする(子テーマ)

ただ、上記では対応が難しいか、あえて頼らない方法として「DOM操作するJavaScriptを出力する」といった方法があります。

例として”siteHeader”というクラスの要素の直下に「<p>こんにちは</p>」というHTMLを挿入します。コードは子テーマのfunction.phpに記述します。

function add_element() {
  $data = "let elem = document.querySelector('.siteHeader');
    let html = '<p>こんにちは</p>';
    elem.insertAdjacentHTML('afterbegin', html);";
  wp_add_inline_script( 'wp-embed', $data );
}
add_action( 'wp_enqueue_scripts', 'add_element' );

“$data”変数に入れたJavaScriptのコードが</body>前に出力されます。つまり、HTML解釈後に該当のDOM操作が実行されます。

“insertAdjacentHTML”については、挿入箇所の指定が色々あります。(説明は割愛)

なお、処理内容によっては、特定のスクリプトに依存する関係の理由で、出力する位置を適切に指定しないと、期待した動作にならない可能性があります。(”wp_add_inline_script”関数の第3引数で指定)