WordPressカスタマイズしてソースコードをプラグイン無しで表示…の改良。

公開日：2015/02/08

ℹ️本記事にはPRが含まれています。

SiSO-LAB WordPress、Gushカスタマイズ

ここ最近、WordPressをカスタマイズするネタをアップしていますが、実は、以前作成したソースコード表示機能に不具合が見つかり、ひそかに悶絶していました。

WEBサイトでHTML系ソースコードを表示するのは面倒

HTMLのソースコードをブログに書くと書式として認識されちゃう

ブログでのソースコードの表示は意外に面倒です。HTMLで表示する場合、HTMLデータそのものもテキストデータで、いくつかのキャラクターは特別な意味を持っています。

そのため、「＜」（引っかからないように全角で書いています）等のキャラクターは、あらかじめ「＆ｌｔ；」などの文字列に置き換える必要があります。そうしないと、HTML文法の「＜ｈ１＞」などの書式と誤解されてしまい、期待しない表示になってしまいます。

かといって、記事を書くときに毎度毎度HTMLに引っかかってしまう文字列を手動で変換して書くのは大変です。また、後から編集する時も一苦労です。

WordPressを使われている多くの方は、プラグインを使って解決しているかと思います。

お手製ソースコード表示プログラム

ソースコード表示をするためのプラグインをいくつか試してみたのですが、何だか高機能すぎて使いにくそうだったため、SiSO-LABでは自前で開発してWordPressのショートコード機能を使って書式の変換をしています。

プログラム開発の時間としてはなかなか楽しい時間で、「あちらを立てればこちらが立たず」を繰り返すハメになりました。結果、諦めた部分があったり、まだまだ改良はいるものの、とりあえず使えそうなものができました。

完成版？プラグイン無しでソースコードを表示～ WordPressの無料テーマGushをカスタマイズ。
2014-07-09

「＜ｌｉ＞」で不審な改行

しかし、今回のRSSに関連する表示機能のソースコードを掲載した時に変なところで改行が入ってしまうのを発見。どうも「’」とか「＜ｌｉ＞」付近で発生しています。
SiSO-LAB WordPRess、プラグイン無しでソースコード表示

WordPressの記事編集画面では、このように、「記事が見つかりません」付近は１行で記述しています。
SiSO-LAB WordPRess、プラグイン無しでソースコード表示

まだ何やら機能不足なところがあるようです（実は、ダブルクォーテーション時も予期せぬ動きをしてしまうことが発覚し、不具合を見つけたまま放置しているのを、自分のブログから見つけました…）。

ソースコード表示機能を改良してみる

新しい関数を用意したら、これまた微妙なことに

過去の記事で既にソースコード表示機能を使っていますので、過去記事に影響を与えないようにするため、新しい関数を作ることにしました。ということで、コピペして関数名と登録するショートコード名を変えたものを作ってみたら微妙な事案が発生しました。

もともと以下のように（改行が入って変ですが）表示されていたのですが、
SiSO-LAB WordPRess、プラグイン無しでソースコード表示

このように、アポストロフィが制御コードに変換されてしまいました。
SiSO-LAB WordPRess、プラグイン無しでソースコード表示

うーん、関数をコピペして名前変更しただけなんですけど、どうしてなんでしょうね…。一度、functions.phpをしっかりと再点検した方がいいかもしれません。これもまたそのうち解決しないといけない問題だと思いますので、ダブルクオーテーション表示の時の改行も合わせて見直します。

そんなこんなで、しょうがないので既存の関数をいじることにしました。

余分な改行の発生源、WordPressっぽい

正直言うと、全然、見当がついていなかったため、闇雲にアポストロフィ（「’」）を制御コードで書いてみたり、いやいや、大なり小なり記号のソバにあるのが悪いのかもと、こっちの記号の方をいじくってみたりしたのですが、一向に改善しません。

そんなわけで焼酎のお湯割り飲みながらあれこれ考えてみました。

自分の過去記事を読み直していたら、「＜ｐ～」と「＜ｐ／～」についてですが、この文字列があるだけでなぜかWordPressの方で改行してしまうため…」と書いてあるのを発見。なるほど。この機能（ショートコード）が実行される前に既に改行されているかもしれません。

WordPressって、テキストモードで編集していても実際にHTMLコードを吐き出す時は改行やらなんやら入れてくれます。そんなわけで、このショートコードが実行される前の時点で、既に開業が入っている可能性があります。

というわけで、以下のようなコードを加えてみました。


$content = str_replace( "'\n<", "'<", $content );
$content = str_replace( ">\n\n'", ">'", $content );

１行目は「アポストロフィ、改行、＜」という順番で文字列が来たら「アポストロフィ、＜」に変換するというもので、２行目は「＞、改行、改行、アポストロフィ」と来たら「＞、アポストロフィ」と変換します。

全体としてはこんなコードになりました。ソースコードを［code］～［/code］で括ります（括弧はショートコードに反応しないように全角で記載していますが、半角で記述してください）。


function disp_code( $attr, $content = null ){
    $content = clean_pre( $content );
    $content = str_replace( '&lt;'.'p', '<'.'p', $content );
    $content = str_replace( '&lt;'.'/p', '<'.'/p', $content );
    $content = str_replace( "'\n<", "'<", $content );
    $content = str_replace( ">\n\n'", ">'", $content );
    $content = str_replace( '&', '&amp;', $content );
    $content = str_replace( '&amp;#038;', '&amp;', $content );
    $content = str_replace( '<', '&lt;', $content );
    $content = str_replace( '>', '&gt;', $content );
    $content = str_replace( '"', '&quot;', $content );

    $content = '<pre class="disp_code"><code>'.$content.'</code></pre>';

    return $content;
}
add_shortcode( 'code', 'disp_code' );

実行結果は期待通り！ばっちり表示されました。
SiSO-LAB WordPRess、プラグイン無しでソースコード表示

うーむ、これだとまだ欠点有だな

これだと、本当に「アポストロフィ、改行、＜」という順番で文字列が来た時も「アポストロフィ、＜」と変換されてしまいます。でも、そういうコードを書くことは無いと思うので、とりあえずこれで行こうかと思います。

以前、「＜ｐ～」の自動改行で悩みましたが（過去記事を読んだら書いてあったので、きっと、悩んだんでしょう）、同じ方法で解決できそうです。完璧な対処方法ではありませんが、結構いいかも。

というか、そろそろ有名どころのプラグインにしようかなぁ。それともWordPressの勝手改行を機能を無効化するプラグインを探してみようかな。悩みます。

今日の一言二言三言

あれこれと　調べながら　悩むのは

楽しい時間　なんだけどね…

こんな風に悩んだり調べたりするのも、それはそれで楽しかったりしますが、時間が迫っているとちょっとヒヤヒヤします。もっと時間があったらな～、と思いつつ、でもきっとたくさん時間があったらのんびりしちゃうかも。

WordPressをカスタマイズしてプラグイン無しでソースコード表示に挑戦♪

ブログ等でソースコードを表示するのは案外めんどくさいものです。特にHTMLコードの場合、タグがタグとして動作してしまい、ソースコードとして表示できないこともあります。WordPressではプラグインを使ってうまく表示させることができますが、ビギナーなSiSOにとって程よい難易度でおもしろそうなので自力実装挑戦中です。