テンプレートのレイアウト（デザイン）をカスタマイズする時、下記のような対応を取ります。
- 適当なプラグインを使う又は作る
- 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引数で指定）
