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

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

• 適当なプラグインを使う又は作る
• 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引数で指定）