SyntaxHighlighter Evolved 導入

コードを表示するのに大変便利なSyntaxHighlighter Evolvedです。導入してみましたが、上手く動かないので改造してみました。

プラグインを導入して書いてみてもさっぱりコードがきれいに表示されないので、色々と調べてみました。
Syntax Highlighter for WordPressがうまく表示されない場合
だいたいはこの２つをヘッダ・フッタに追加すれば解決している様子なのですが、

<?php wp_head(); ?>
<?php wp_footer(); ?>

自分の場合は自作のテンプレートにちゃんと書いてある。なぜ動かないのか、仕方がないのでデバッグしてみたところ、

var corecssurl = "<?php echo esc_js( $corecssurl ); ?>";
if ( corecss.setAttribute ) {
	corecss.setAttribute( "rel", "stylesheet" );
	corecss.setAttribute( "type", "text/css" );
	corecss.setAttribute( "href", corecssurl );
} else {
	corecss.rel = "stylesheet";
	corecss.href = corecssurl;
}
document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );

どうも648行目の辺りで止まっているらしい。
さらにデバッグしてみると、

document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
// エラーの理由
// document.getElementById("syntaxhighlighteranchor")がheadの子ノードじゃないのが原因。
// 調べてみたら、親ノードは「body」だった。

なぜか、headに囲まれているはずのタグがbodyの子ノードになっているようで、そんなわけは、とさらに調べると、どうもwordpressにログインしていると出てくる、最上部の管理バー。あれが動作すると、headとbodyの内容がぐちゃぐちゃっとなっている様子。
bodyに変なタグ「class=" customize-support"」なんてものもついていたり。
少し考えた結果、つきつめると面倒なのでsyntaxhighlighterの方を変更することにしました。

var corecssurl = "<?php echo esc_js( $corecssurl ); ?>";
if ( corecss.setAttribute ) {
	corecss.setAttribute( "rel", "stylesheet" );
	corecss.setAttribute( "type", "text/css" );
	corecss.setAttribute( "href", corecssurl );
} else {
	corecss.rel = "stylesheet";
	corecss.href = corecssurl;
}
//document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
document.getElementById("syntaxhighlighteranchor").parentNode.insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
//親ノードをhead固定ではなく、getElementByIdで求めて指定する。

変える場所は２か所あります。

if ( 'none' != $this->settings['theme'] ) : ?>
	var themecssurl = "<?php echo esc_js( apply_filters( 'syntaxhighlighter_cssthemeurl', add_query_arg( 'ver', $this->agshver, $wp_styles->registered[$theme]->src ) ) ); ?>";
if ( themecss.setAttribute ) {
	themecss.setAttribute( "rel", "stylesheet" );
	themecss.setAttribute( "type", "text/css" );
	themecss.setAttribute( "href", themecssurl );
} else {
	themecss.rel = "stylesheet";
	themecss.href = themecssurl;
}
//document.getElementById("syntaxhighlighteranchor").appendChild(themecss);
//document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
document.getElementById("syntaxhighlighteranchor").parentNode.insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );

これで無事に動作するようになりました。
それにしても、なんだかなという感じです。
もう少しテンプレート作成について調べないと。
最初からついてるテンプレートだと問題なく動いているので、多分何か問題があるのだと思います。
では。

 - コンピュータ, サーバサイド, プログラミング Wordpress