タイトルに書いてある組み合わせで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は読むことはできるよf(^^;そんな低いレベルなのでどっからとっかかろうか途方に暮れていました。

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

試したデバッグ方法

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

web_debug01

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

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行目が追加です。

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

トラックバック

トラックバックURL:

トラックバック & ピンバック

コメントはまだありません。

作ったもの

種牡馬メモサイト

フリーダムウォーズ素材メモサイト

月別アーカイブ

つぶやき

更新記録カレンダー

2018年7月
« 1月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

参考書籍

XHTML/HTML+CSSスーパーレシピブックXHTML/HTML+CSSスーパーレシピブック
エ・ビスコム・テック・ラボ

毎日コミュニケーションズ
売り上げランキング : 74419

Amazonで詳しく見る
現場のプロから学ぶXHTML+CSS現場のプロから学ぶXHTML+CSS
益子 貴寛,堀内 敬子,小林 信次,千貫 りこ,伊藤 学,山田 あかね,西畑 一馬,CSS Nite

毎日コミュニケーションズ
売り上げランキング : 39400

Amazonで詳しく見る