PHPの勉強をするようになってブログにソースコードを書くことが増えてきました。
普通に書いても問題はないのですが、以前調べものをしていたときにソースコードを
カッコよく表示していたサイトを見たのを思い出し、自分もああいった表示にしてみたいと思ったので
そういった系統のプラグインを漁っていました。
今回試したのは三つです。
- wp-syntax
- syntaxhighlighter evolved
- wp-syntaxhighlighter
なぜ三つ試したかというと、三つとも最初に失敗したからです。
上から順に検索でヒットしていったので、その順番にインストールして使えるか試しました。
まずwp-syntax。
http://wordpress.org/extend/plugins/wp-syntax/
ソースは表示されるも、見た目が見本と違うようでなんだかおかしい。
見た目はともかくとしてインデントがやたら広い。
cssでいじくれるところをいじくってみたものの改善できず。
次。
syntaxhighlighter evolbed
http://wordpress.org/extend/plugins/syntaxhighlighter/
wp-syntaxhighlighter
http://wordpress.org/extend/plugins/wp-syntaxhighlighter/
この二つはソースが表示されずに白いボックスが表示されるのみ。
三つが三つとも動かないのはなんだかおかしいな、と思い原因を調べていくことに。
wp-syntax
まず一つは使い方を少々間違っていたのに気付きました。
wp-syntaxではタグを
<pre></pre>
とだけするのではなく、
<pre lang="php" line="1"></pre>
と追記するということを知らなかった事でした。
しかし追記しても状態は変わらず。
syntaxhighlighter evolved
サツキふぁくとりーさんの記事
SyntaxHighlighter Evolved導入時のメモ
http://www.satsukifactory.net/memo/332/
がまず目に付きました。
なにやらwordpressのテーマファイルであるheader.phpに
<?php wp_header();>
とfooter.phpに
<?php wp_footer();>
が書かれていないと動かないようです。
しかしwp_headerではないものの、wp_headは存在している。
(vicuna ext customではwp_headerにしたらサイトが表示されなくなったのでwp_headでなくてはいけない)
wp_footerも存在している。
記述されている位置を変えたりしてみたけれど改善されず。
wp-syntaxhighlighter
一旦syntaxhighlighter evolvedの動作を止めて次はwp-syntaxhighlighterで同じことを
テストしてみるもやはりソースは表示されずに白いボックスが表示されるのみ。
どうやらheadやfooterが原因では無いと思い、プラグインを調べてみることにしました。
サツキふぁくとりーさんなどの場合はScript Compressorというプラグインが原因だったようですが、
私のWPではそれは使っていないので「?」な状態に。
しかし私のWPではScript Compressorは使っていないものの、PHP code Widgetを使っています。
(アップグレードで名称がExecutable PHP widgetに変わっている?)
phpがきちんと表示されない原因はこれかも、と思い停止してからwp-syntaxhighlighterを使ってみると
ようやく見本通りの見た目でソースが表示されました。
▼
ついでにテストしたのですが、正常動作した後にPHP code Widgetを有効化したところ、
再び白いボックスが表示され、ソースは表示されなくなりました。
よくはわかりませんが、PHP code Widgetを有効化しているとソースの部分がphpとして認識されてしまうのか
無かった事になるようです。
(echoやprintが表示されないところを見るとphpとして動作しているわけではなさそうです。)
結論
とりあえず現時点での結論はScript Compressorなどのソースが意図しない形で縮められてしまうものと、
PHP code Widgetなどのphpをテキストではなく実ソースとして扱ってしまう種類のプラグインを使っている場合は
要注意ということでしょう。
これらのプラグインを停止することで動作する可能性があります。
余談ではありますが、PHP code Widgetは当ブログでは使わなくともなんとかなる使い方をしていたので
停止していますが、使わざるを得ない場合はsyntax系のプラグインとは共存は難しいのかとも思いました。
おっと、wp-syntaxhighlighterはEZ zenbackでもお世話になった
モノについてのモノ語りのredcockerさん作のプラグインではないですか!
重ね重ねお礼を申し上げます。
追記:preタグ部分の確認用class=”brush: html; gutter: true
コメント
“[WP]ソースコードの表示を強調するwp-syntaxhighlighter” への2件のフィードバック
はじめまして。
WP SyntaxHighlighterの作者です。
WP 3.3.1環境で、PHP Code Widget(Executable PHP widget)を試しましたが、WP SyntaxHighlighterは問題なく動作しました。
PHP Code Widgetのソースも見ましたが特に競合の原因になる要素はなさそうに思います。
また、EvolvedもWP SyntaxHighlighterもソースコードを実行不可能な形にエスケープして出力しており、ブラウザのお陰で、見た目には正常なソースコードに見えますが、PHP Code Widgetのようなプラグインがインストールされた環境でも、コードは実行されない仕様になっています。
ただ、現象からしてPHP Code Widgetが絡んでいた事は間違いないと思いますので、PHP Code Widget上で、実行されていたPHPの処理と競合していた可能性が高いかもしれませんね。
コメントありがとうございます。
管理人のauto_masterです。
根本的な原因はわかりませんでしたが、こういったケースもあったという例の一つと思ってもらえれば幸いです。
たしかにWP SyntaxHighlighterなどで出力されたソースを見ると<>の部分が実態参照になっており、実行されるわけはないんですが…。
よくわかりませんね。
ひとまず私の環境では動くようになったので、ありがたく使わせていただきます!