SyntaxHighlighter Evolved 導入
2015/08/29
コードを表示するのに大変便利なSyntaxHighlighter Evolvedです。導入してみましたが、上手く動かないので改造してみました。
プラグインを導入して書いてみてもさっぱりコードがきれいに表示されないので、色々と調べてみました。
Syntax Highlighter for WordPressがうまく表示されない場合
だいたいはこの２つをヘッダ・フッタに追加すれば解決している様子なのですが、
1 2 | <?php wp_head(); ?><?php wp_footer(); ?> |
自分の場合は自作のテンプレートにちゃんと書いてある。なぜ動かないのか、仕方がないのでデバッグしてみたところ、
639 640 641 642 643 644 645 646 647 648 | 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行目の辺りで止まっているらしい。
さらにデバッグしてみると、
648 649 650 651 | document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );// エラーの理由// document.getElementById("syntaxhighlighteranchor")がheadの子ノードじゃないのが原因。// 調べてみたら、親ノードは「body」だった。 |
なぜか、headに囲まれているはずのタグがbodyの子ノードになっているようで、そんなわけは、とさらに調べると、どうもwordpressにログインしていると出てくる、最上部の管理バー。あれが動作すると、headとbodyの内容がぐちゃぐちゃっとなっている様子。
bodyに変なタグ「class=" customize-support"」なんてものもついていたり。
少し考えた結果、つきつめると面倒なのでsyntaxhighlighterの方を変更することにしました。
625 626 627 628 629 630 631 632 633 634 635 636 | 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で求めて指定する。 |
変える場所は２か所あります。
639 640 641 642 643 644 645 646 647 648 649 650 651 | 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、headの中身がbodyに入ってしまう
SyntaxHighlighter Evolved 導入の記事でも書いたのですが …
-
名古屋市が大雨非難勧告解除でnull宣言
2013年9月4日。名古屋市にもバケツの水をひっくり返したような大雨が降り注ぎ、 …
-
2015/8/10に「一番電車が走った」が放映されるそうです
2015年8月10日19:30からNHK総合で「一番電車が走った」が放映されるそ …
-
最近の投稿にサムネイルを表示するプラグイン
ウィジェットの「最近の投稿」にサムネイルを表示させるためだけのプラグインです。検 …
-
ドメイン移管完了（Value-Domainからお名前.com）
ドメイン移行の完了通知がやってきました。 当たり前ですが、メール設定やらDNS設 …