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

公開日：2014/07/09 最終更新日：2015/02/18

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

SiSO-LAB

一昨日から悩んでいた、「プラグイン無しでソースコード表示機能を追加する」ですが、ちょっと妥協したところはありますが完成しました。そんなわけでGushをちょっと改造してみました。ちょいとウロウロっと試行錯誤したり、ちょっと妥協したところもありましたが無事、完成しました。

本記事は、WordPress V3.9.1と無料テーマのGush V1.1.0にて動作確認を行っています。

Gushにコード表示関数とスタイルを組み込む方法

表示サンプルに自分自身のソースコードを使っていたのですが、変換用の文字列が書かれているのでなかなかすんなりと行かず。でも、程よいところで妥協できたかな？と思います。というわけで完成しました。

使用上の注意点としては（全部、半角でお願いします）、

［ｃｏｄｅ］～［／ｃｏｄｅ］で囲う（複数行可）
「＜ｐ～」は「＆ｌｔ；ｐ～」としてください。
「＜／ｐ～」は「＆ｌｔ；／ｐ～」としてください。

「＜ｐ～」と「＜ｐ／～」についてですが、この文字列があるだけでなぜかWordPressの方で改行してしまうため、そもそも書けない（少なくとも現バージョンで改行の自動挿入を抑制するプラグイン無しでは）文字列じゃないかな？と思います。

実際にGush（V1.1.0）に組み込むには、functions.phpとstyle.cssの２つを修正します。組み込む場所を行番号で示していますが、Gushオリジナルの状態に組み込む前提の行番号です。

functions.php

一番最後に組み込めばいいので、最後の「?>」の手前になるように組み込みます。そんなわけで、行番号で言えば177行目です。


//コード表示用置換
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( '&', '&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' );

この処理の弱いところとして、「＆ｌｔ；ｐ～」という文字列があると変換してしまうのですが、そんなに使うことはないだろうということで、このままとしました。

あと、WordPressによる改行防止のために、ちょっとトリッキーな表記をして改行されないようにしています。


    $content = str_replace( '&lt;'.'p', '<'.'p', $content );
    $content = str_replace( '&lt;'.'/p', '<'.'/p', $content );
&#91;/code&#93;

PHPでは、「．」で文字列を結合できるのですが、これを使って文字列を表現することで、文字列を切り離しているのです。少々無理感のある小技ですが、試しにやってみたらできちゃったのでヨシとします。

ついでに、というのも変ですが、このソースコード自身、当然、この文字列を変換するために「＆ｌｔ；ｐ～」を含んでしまい、当然、表示時、変換対象になってしまいます。そこは先と同じ小技で表示時、変換されないようにしています。





<h3>style.cssは滲みもいれて80年代風</h3>

なかなかどこに組み込めばいいのかわからなかったのですが、試行錯誤の末、401行目に組み込みました。コンテンツ表示用のスタイルシートが定義されているところの最後です。
[code]
#contents pre.disp_code {
    clear: both;
    font-size: 80%;
    overflow-x: auto;
    background-color: #010;
    color: #0f0;
    margin-top: -24px;
    padding: 0px 8px 18px;
    text-shadow: 2px 2px 2px #0A0;
}

フォントサイズは少し小さめのほうがしまりがあるかな？と思い、80%にしています。また、80年代のブラウン管時代（SHARP MZ-2000とか）を懐かしんで、背景は黒で文字は緑色にしてみました。「text-shadow」を指定することで、ブラウン管表示っぽい滲みも表現してみました。

長いテキストは横スクロールも可能

あ、これは、参考にさせていただいたサイトからの情報です（前々記事参照してください）。紹介したソースコードが短くて、横方向にスクロールする表示が無かったので、わざと横に長くしたソースコード表示を紹介します。「overflow-x: auto;」が効いているのですね！

function disp_code( $attr, $content = null ){
$content = clean_pre( $content ); $content = str_replace( '<'.'p', '<'.'p', $content ); $content = str_replace( '<'.'/p', '<'.'/p', $content ); [/code]

今日の一言二言三言

あっさりと　スラスラ書いて　おりますが

実は何度も　試行錯誤

字足らずですが、WordPress初心者、PHPはわからない、スタイルシートも超初心者が故、「数打ちゃ当たるメソッド」でなんとか実装しました。でも、ちょっとずつ慣れてきたというか、少しは理解できてきたので、次はもっとスマートに行きたいな、と思います。

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

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