テーマファイル編集不可、かつ、フィルターフック無し、の条件下でhtml要素を追加

条件

テーマファイルを編集することができない、また、そのテーマの適切な場所にフィルターフックがない条件下で、html要素を追加したい場合の処理を紹介します。
<header>要素と<div class=”content”>の間にスライダーなどのブラウザ全幅要素を設置したい場合などに利用できます。

wp_footerフックでjQueryコードを設置する。

下記コードを functions.php に設置します。

add_filter( 'wp_footer', 'wp_footer_hook' );
function wp_footer_hook() 
{
	$strTag = '';

    // indexページの場合に限定　indexはトップページ
	if(is_page('index')){

		// ショートコードを取得（※1）
		$strShortCodeHtml = do_shortcode('[AnyShortCode]');

		// 複数行にわたる場合、改行を除去しないとjQueryでエラーとなる（※2）
		$strShortCodeHtml = preg_replace(array('/\r\n/','/\r/','/\n/'), '', $strShortCodeHtml );

		$strTag = <<<EOD
            <script type="text/javascript">
	            jQuery(function ($) {

                	// <header>の直後にショートコードhtmlを挿入する（※3）
                	$("header").after('{$strShortCodeHtml}');

            	});
            </script>


EOD;
	}
	print($strTag);

}

add_filter( 'wp_footer', 'wp_footer_hook' );

function wp_footer_hook()

{

$strTag = '';

// indexページの場合に限定　indexはトップページ

if(is_page('index')){

// ショートコードを取得（※1）

$strShortCodeHtml = do_shortcode('[AnyShortCode]');

// 複数行にわたる場合、改行を除去しないとjQueryでエラーとなる（※2）

$strShortCodeHtml = preg_replace(array('/\r\n/','/\r/','/\n/'), '', $strShortCodeHtml );

$strTag = <<<EOD

jQuery(function ($) {

// <header>の直後にショートコードhtmlを挿入する（※3）

$("header").after('{$strShortCodeHtml}');

});

</script>

EOD;

}

print($strTag);

}

解説

ショートコードを取得（※1）
設置したいhtmlコードを取得します。もちろん直接htmlコードを設置しても問題ありません。
複数行にわたる場合、改行を除去しないとjQueryでエラーとなる（※2）
これをやらないと下記のような記述になってしまいjQueryの文法エラーとなります。

$("header").after('<div class="sample">abcde</div> <p>opqrs</p>');

1
2

$("header").after('<div class="sample">abcde</div>
<p>opqrs</p>');
<header>の直後にショートコードhtmlを挿入する（※3）
after()でhtml要素を追加します。ここではヒアドキュメントの記法を使用しております。