SyntaxHighlighterがつかえない！ | WordPressのカスタマイズ

このwordpress DIY 備忘録をつけはじめて、記事中にhtmlやらjavascriptやらphpのコードを表示することが必要になった。
なにかいいものはないかと探して見ると、みなさんが使っている定番のプラグインで SyntaxHighlighter なるものがあるとのこと。
 

※注：この記事はずっと前に書いたもの。今、使っている syntax-highlighter は prism.js になってます。
 

さっそく SyntaxHighlighter Evolved というバージョンのものをインストールして使ってみたが、なんてこった、みなさんのようには表示してくれない。
ただ、htmlspecialcharsでエスケープした文字列を出力しているような感じ。
ブラウザにロードされたソースを見てみると SyntaxHighlighter 関連のjavascriptやcssのファイルなどが全くロードされていない模様。
世の中のみなさんのサイトに行って見せていただくとヘッダーで必要なファイルをロードしているようだからここに問題がある訳です。

以前、プラグインによっては、<:head>～</head> の間に <?php wp_head(); ?> がないと動かないものがあるとのことだったがこれはちゃんと記述してある。
wp_headのフックを利用して必要なものをロードしているのだから動かない訳ですね。
原因がわからないので更にしらべているとwordpress日本語フォーラムに出てました。

SyntaxHighlighter の場合は <?php wp_footer(); ?> がないと動かないとの事。

なるほど、ページを読み込んだ最後にロードさせていたわけです。
そのほうが、ブラウザがページを表示する速さという点で有利だし、最近は javascript 関係のファイルはまとめて最後にロードさせるのが常識となっている。
このプラグインが必要ないページでは、敢えて <?php wp_footer(); ?> を省くことで、いらぬファイルをロードせずに済むという利点もあったりする。
でも、ログインしている時にブログの方で最上部に表示されるツールバーも表示されなくなります。

≪ ショートコードの作成 ≫

この記事を書いている時に、 SyntaxHighlighter を使うまでもない、少しのタグなんかを表示したい時に簡単にエスケープできればいいんだがと思い、ショートコードなるものを作ってみた。こんなのでいいと思うのですが。

ついでに文字色を変えられるように、色が指定できるclassもつけられるようにしてみた。
日本語の codex を見ると、extract() を使って引数の連想配列を個々の変数に分けるということをやっているのですが、WordPress PHP Coding Standart によるとextract() はterrible な関数だから使用するな！ということです。実は、始めにこの記事をアップした時は日本語 codex に習ってextract() を使用していたのですが、2015/7/12 にそれを使用しない方法に訂正しました。

尚、 if の条件式において、

if ( 'b' == $drc['c'] ) 

のように変数を右側に書く方式は、前述の WordPress PHP Coding Standart において推奨されている書式で” Yoda Conditions ヨーダ条件式 ” と呼ばれているとのことです。

<?php
    function simpleescape( $atts, $content=null ) {
        $drc = shortcode_atts( array(
            'c' => 'd',
            ), $atts );
        $content = htmlspecialchars( $content, ENT_QUOTES );
        
        if( 'b' == $drc['c'] ) {
            $class = "bluecolor";
        } elseif ( 'r' == $drc['c'] ) {
            $class = "redcolor";
        } elseif ( 'g' == $drc['c'] ) {
            $class = "greencolor";
        } elseif ( 'y' == $drc['c'] ) {
            $class = "yellowcolor";
        } else {
            $class="none";
        }
        
        return "<span class=\"".$class."\">".$content."</span>";
    }
    add_shortcode( 'es', 'simpleescape' );
    ?>

使い方はなるべく簡単にしたかったので、

[es c="b"]<?php wp_footer(); ?>[/es]

と、こんな感じ。
c="b"で色指定してます。
b だと <span class="bluecolor">～</span> という具合にclassが付きます。

記事中の文字色を変える <span class="*"> タグもいちいち入力するのが面倒だなぁと。
ショートコードがこんな簡単で便利なものなら、上のコードを少しいじるだけでできそうなのでちょっと改良して、

<?php
    function putspan( $atts ) {
        $drc = shortcode_atts( array(
            's' => '-',
            'c' => 0,
            ), $atts );
        
        if ( 3 == $drc['c'] ) {
            $class = "bluecolor";
        } elseif ( 1 == $drc['c'] ) {
            $class = "redcolor";
        } elseif ( 2 == $drc['c'] ) {
            $class = "greencolor";
        } elseif ( 4 == $drc['c'] ) {
            $class = "yellowcolor";
        } else {
            $class = "none";
        }
        
        return "<span class=\"".$class."\">".$s."</span>";
    }
    add_shortcode( 'sp', 'putspan' );
    ?>

これはなるべく入力を少なくするために囲み型ではないようにして、色指定もダブルクォートが面倒なので数字指定にしました。

[sp s="SyntaxHighlighter" c=1]

と、こんな具合です。
引数のsは実際に表示させる文字列で、cで色指定です。
でも、あんまりfunction.phpに関数を多くつくると重くなりそうです。

それと前にも書きましたが、
DIYは完全自己責任。
DIYの基本中の基本は事前バックアップです。
function.phpの事前バックアップは必須です。