wordpress＋テンプレートキング(firstserver)＋SyntaxHighlighter

タイトルに書いてある組み合わせでSyntaxHighlighterが動作しないので解決策を探ってたどり着いた結論。

本番前の愚痴

全然機能しない。

マジで困っていました。

google先生に聞いても大体のケースは・・・

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

で解決ですよね・・・

うちのネコちゃんテンプレの場合はちゃんと書かれてありました。ぇぇ書かれてありましたとも。

私のサイトではブラウザを色々と試していたら下のような結果になりました。

• Firefox 27.0.1　NG
• IE 11 NG
• Google Chrome NG
• Lunascape(Trident) NG
• Lunascape(Gecko) OK
• Lunascape(Webkit) NG

表示できちゃうケースがあるんですよ・・・orz

大半がNGなのでOKのケースが例外なんですけど、そこを取っ掛かりにしてデバッグ作業をすることにしました。

ぶっちゃけ、wordpress初めて、テンプレートも初めて、cssについては初心者、phpは読むことはできるよｆ（＾＾；そんな低いレベルなのでどっからとっかかろうか途方に暮れていました。

そんな中、頼るべきはgoogle先生と情報を公開してくれているサイト様ですね。こちらのサイト様が答えをくれました。

試したデバッグ方法

ちなみに、参考までに本記事の場合は下のように表示されていました。

で、これがうまく改善するかどうか確認するためのデバッグ方法です。

1. 表示されたページをそのまま保存します。
「ファイルの種類(T)」で「webページ、HTMLのみ(*.htm;*.html)」を選択

2. 保存したページをブラウザで開きます。

3. 大体CSSなども適用されていて、サーバーにアクセスしたときと同じように見えていたらOKです。

4. 保存したHTMLをテキストエディタで開くと、後半にJavaScriptが書かれています。

<script type='text/javascript'>
  (function(){
<< 省略 >>
    document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
  })();
<< 省略 >>
  SyntaxHighlighter.all();
</script>

5. 「document.getElementsByTagName」で検索すると2か所見つかるはずですので、それぞれに下記のような追記を行う。

//document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
document.getElementById("syntaxhighlighteranchor").parentNode.insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );

1行目が元々あった行で、コメントアウトしています。
2行目が追記したコードです。

//document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
document.getElementById("syntaxhighlighteranchor").parentNode.insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );

先ほどと同様で、1行目が元々あった行でコメントアウトしています。
2行目が追記したコードです。

7. テキストを保存してブラウザを更新

8. 正しく表示されていればOK、プラグインの修正へ

プラグインの修正

「wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php」を修正します。

やり方は2通り、

1. ファイルを直接修正する
2. 【管理画面】から【プラグイン】で【SyntaxHighlighter Evolved】の【編集】のリンクから行う。

どちらでも同じですが、検索が使えるファイルを直接修正する方法をおススメします。

  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") );
<?php
  endif; // Endif $needcore

628行目はコメントアウト。
629行目が追加です。

  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") );
<?php
  endif; // Endif none != theme

643行目はコメントアウト。
644行目が追加です。

以下はバージョン3.1.9の場合。

  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") );
<?php
  endif; // Endif $needcore

636行目はコメントアウト。
637行目が追加です。

  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") );
<?php
  endif; // Endif none != theme

651行目はコメントアウト。
652行目が追加です。

この修正を行うのに半日かかるとか、、、根本から理解していないと色々つらい。