WordPressテーマをSTORK、SANGOからJINにする際のショートコードの置換方法（ボックスデザイン編）

こんにちは、理想の使用感を求めてWordPressのテーマをコロコロ変えるのが趣味になりつつあるジュンイチです。

ブログを開設してから１年ちょいの間に無料テーマのSimplicityへの寄り道を含めて４つものテーマを試してきましたが、現在利用しているJINがデザイン面でも機能面でも優秀なためしばらくはJINで落ち着きそうです。

WordPressテーマには記事を装飾するためのショートコードを登録することができ、特に有料テーマはこのショートコードのバリエーションが豊富であることが魅力の１つでもあります。しかし、このショートコードはそのWordPressテーマ独自のものであるため、テーマを別のものに変更した場合には利用できなくなり、記述したショートコードがそのまま表示されるという悲しい状態になります。

WordPressはテーマを変更するだけでデザインを一新できるのが大きな特徴ですが、このショートコード問題がテーマの変更へ踏ん切れないハードルになりがちです。

当ブログでは現在JIN（ジン）という有料WordPressテーマを使っていますが、それまでにも２つのテーマを試した経緯があり、STORK（ストーク）⇒ SANGO（サンゴ）⇒ JIN（ジン）という遍歴を辿っています。いずれもブロガー界隈では有名な有料WordPressテーマです。

有名なテーマであるため、僕の他にも同じ境遇でショートコード問題に困っている人がいるんじゃないかなと思って記事にしました。

見たい場所へジャンプ

当記事でやっていること
ちなみにSTORK⇔SANGOの場合はシンプルに置換ができます
JIN用に置換する方法の考え方
STORKのショートコードのボックスデザインをJIN用のコードに変換する
SANGOのショートコードのボックスデザインをJIN用のコードに変換する
まとめのヒトコト

当記事でやっていること

STORK⇒JINにテーマを変更した方およびSANGO⇒JINにテーマを変更した方向けに、記事を装飾する際に利用頻度が高いであろうボックスデザイン（枠で囲む）のショートコードを、JINに対応しているhtmlコードに変換するためにfunctions.phpに追記すべきコードを紹介しています。

ボックスデザインだけでなくその他にも対応したコードを書きたかったのですが、時間が足りなかったので当記事ではまずはボックスデザインだけです。当記事の公開後にもし需要が多そうであれば他の装飾についても考えてみようと思います。

ちなみにSTORK⇔SANGOの場合はシンプルに置換ができます

当記事はテーマをJINにした方向けですが、STORKとSANGO間の移行であれば、以下の記事で紹介されている方法で「Search Regex」というプラグインを使うことでSTORK用ショートコード⇔SANGO用ショートコードの置き換えが可能です。僕自身この記事を参考にさせていただきショートコードの置換をしました。

参考：ストーク→SANGOにテーマ変更。正規表現でショートコードを簡単に置換する方法 | 節約リッチ生活

※データベースの内容を直接書き換える処理のため、使用前のバックアップは必須、操作は間違えなく丁寧に進めて下さい。

JIN用に置換する方法の考え方

STORK⇔SANGOについては、どちらも装飾をショートコードで実現しているため↑のようなシンプルな置き換えができますが、一方のJINはショートコードとして登録されていない装飾があるため（要点まとめのボックスデザインなど、登録されているものも一部ありますが）ひと工夫が必要となってきます。

要するにショートコードをショートコードに変換するのではなく、ショートコードをhtmlタグに変換する必要があります。

STORKとSANGOで利用できていたショートコードと同じ名前でJINでもショートコードを登録する。（functions.phpに追記）
その際、JINで用意されているボックスデザインの中から置き換えたいコードを選び、そのhtmlを返すように記述する。

こんな感じかなーと考えました。
（もっと簡単な方法があれば教えてください。）

では、このような考え方で書いてみた具体的なコードを紹介します。

STORKのショートコードのボックスデザインをJIN用のコードに変換する

このコードでは、以下４パターンのSTORKのショートコードを置換の対象としています。

置換されるSTORKのショートコード

・［aside type=”warning”]ここに本文を入力［/aside] ・［aside type=”normal”]ここに本文を入力［aside] ・［aside type=”boader”]ここに本文を入力［/aside] ・［aside]ここに本文を入力［/aside]

以下のコードをfunctions.phpに追記してください。

functions.phpを修正する際は、phpの記述に不整合があるとWordPressの画面が表示されなくなる等の現象が発生してしまうため、間違いなくコピペして利用ください。万が一そうなってしまった場合は、FTPソフトでサーバー上のファイルを直接編集して不整合を取り除く必要がありますのでご注意ください。

//STORK[aside]⇒JINのコードに変換
function asideFunc( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'type' => 'default',
    ), $atts ) );

    if($type == 'warning'){ //ボックスデザイン10注意点
        return '<div class="concept-box2"><p>' . $content . '</p></div>';
    }else if($type == 'normal'){ //ボックスデザイン13参考
        return '<div class="concept-box5"><p>' . $content . '</p></div>';
    }else if($type == 'boader'){ //ボックスデザイン4
        return '<div class="simple-box4"><p>' . $content . '</p></div>';
    }else{ //いずれにも当てはまらない場合はボックスデザイン6
        return '<div class="simple-box6"><p>' . $content . '</p></div>';
    }
}
add_shortcode('aside', 'asideFunc');

SANGOのショートコードのボックスデザインをJIN用のコードに変換する

続いてSANGOのショートコードです。こちらは以下の７パターンです。

置換されるSANGOのショートコード

・［box class=”box1″]ここに本文を入力［/box] ・［box class=”box5″]ここに本文を入力［/box] ・［box class=”box8″]ここに本文を入力［/box] ・［box class=”box28″ title=”タイトル”]ここに本文を入力［/box] ・［box class=”ボックス名”]ここに本文を入力［/box] ・［memo title=”MEMO”]ここに本文を入力［/memo] ・［alert title=”注意”]ここに本文を入力［/alert]

こちらも同じくfunctions.phpに追記してお使いください。

//SANGO[box]⇒JINのコードに変換
function boxFunc( $atts, $content = null ) {
    extract( shortcode_atts( array(
        'class' => 'default',
        'title' => '',
    ), $atts ) );

    if($class == 'box1'){ //ボックスデザイン1
        return '<div class="simple-box1"><p>' . $content . '</p></div>';
    }else if($class == 'box5'){ //ボックスデザイン5
        return '<div class="simple-box3"><p>' . $content . '</p></div>';
    }else if($class == 'box8'){ //ボックスデザイン8
        return '<div class="simple-box8"><p>' . $content . '</p></div>';
    }else if($class == 'box28'){ //ボックスデザイン20
        return '<div class="kaisetsu-box5"><div class="kaisetsu-box5-title">' . $title . '</div><p>' . $content . '</p></div>';
    }else{ //いずれにも当てはまらない場合はボックスデザイン6
        return '<div class="simple-box6"><p>' . $content . '</p></div>';
    }
}
add_shortcode('box', 'boxFunc');