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

公開日:  最終更新日:2015/02/18

SiSO-LAB

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

 

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

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

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

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


  • [code]~[/code]で囲う(複数行可)
  • 「<p~」は「<p~」としてください。
  • 「</p~」は「</p~」としてください。

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

実際にGush(V1.1.0)に組み込むには、functions.phpとstyle.cssの2つを修正します。組み込む場所を行番号で示していますが、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' );

この処理の弱いところとして、「&lt;p~」という文字列があると変換してしまうのですが、そんなに使うことはないだろうということで、このままとしました。

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


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

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

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




<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にとって程よい難易度でおもしろそうなので自力実装挑戦中です。
  • このエントリーをはてなブックマークに追加
  • Pocket

関連前後記事

Your Message

メールアドレスが公開されることはありません。


*

PAGE TOP ↑