WordPressでbbPressとCrayon Syntax Highlighterプラグインを同時にインストールしていると、コード(<pre>)内でHTMLなどが特殊文字化されて表示されてしまう問題の対処方法です。
ネットでいろいろ検索したのですが、解決方法が見つからず、プラグイン内のファイルを編集することで解決することができたので紹介です。
目次
bbPressとCrayon Syntax Highlighterを組み合わせることによる問題
WordPressにbbPressというフォーラム作成プラグインをインストールしていたとします。
bbPressではフォーラムのコメントフォームに「code」というボタンがあり、HTMLソースなどをグレイヴ・アクセント ` で囲むことにより、
「`プログラムソース`」が「<pre><code>プログラムソース</pre></code>」になることで、ソースコード表示されます。
ただ、bbPressと加えてCrayon Syntax Highlighterプラグイン(ソースコードをハイライト表示するプラグイン)が同時にインストールされていると、以下のようにHTML特殊文字がCrayon Syntax Highlighterによって特殊文字化されて表示されてしまいます。
不具合が出る原因
これは、Crayon Syntax Highlighterが<pre>タグ内のHTML特殊文字をエンコードしてしまうからです。
これを通常の投稿では、以下のようにデコードして呼び出すからOKなのですが、
<pre class="lang:default decode:true ">ソースコード</pre>
bbPressフォーラム内での投稿では以下のように呼び出されてしまいます。
<pre>ソースコード</pre>
この呼び出し部分を統一してやる必要があります。
bbPressのコード修正
修正は、1つのファイルの3箇所を修正します。
WordPressインストールフォルダ内のbbPressプラグイン内にあるformatting.phpというファイルを開きます。
場所
WordPressインストールフォルダ/wp-content/plugins/bbpress/includes/common/formatting.php
このファイルをエディターなどで開いて、以下の部分を検索します。
$content = preg_replace_callback( "!<pre><code>|<code>)(.*?)(</code></pre>|</code>)!s", 'bbp_decode_callback', $content );
これを次のように変更します。
$content = preg_replace_callback( "!(<pre class='lang:default decode:true'><code>|<pre><code>|<code>)(.*?)(</code></pre>|</code>)!s", 'bbp_decode_callback', $content );
2ヶ所目は以下を
$content = "<pre>" . $content . "</pre>\n";
次のように変更します。
$content = "<pre class='lang:default decode:true'>" . $content . "</pre>\n";
最後は、以下の場所を
case '<pre>' : $in_code = true; break;
次のように変更します。
case "<pre class='lang:default decode:true'>" : $in_code = true; break; case '<pre>' : $in_code = true; break;
このように変更することで、次回の投稿からは以下のように特殊文字が、そのままの表示で表示されます。
コメントの編集画面でも入力状態に戻ります。
注意点
この変更を行っても、以下の点に注意する必要があります。
- おそらくbbPressがアップデートすると変更が元に戻る
- formatting.phpを書き換えただけでは表示は変わらず、投稿を再ポストする必要がある
- ソースコード言語は必ずデフォルトになる
- ショートコード([html]code[/html]など)を用いたソースコード表示にはさらにformatting.phpを編集する必要がある
まとめ
というか、そもそもbbPressとCrayon Syntax Highlighterを併用することが、あまりないとは思います。
ただ以前、「bbPress」プラグインの使い方という記事を書いた約1ヶ月前からbbPressを使用してきて、Crayon Syntax Highlighterとの競合問題がすぐに出ました。この問題点をなんとかするべくネットで幾度か解決方法探したのですが、良い方法が見つからず、昨日なんとか解決できたので、方法をシェアしておきたいと思います。
もっと良い方法があれば、ご教示いただければ幸いです。