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

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

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

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

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

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

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

当記事でやっていること

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以下のコードを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のショートコードです。こちらは以下の７パターンです。

こちらも同じく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');

まとめのヒトコト

今回はボックスデザインについてのみの置き換えコードを紹介しましたが、他のショートコードたちもある程度置き換えができないと結局使いにくいですよね。その他、よく使うであろう吹き出しとか他記事へのリンクあたりを置き換えるコードもある程度作れたらと考えています。

考え方が分かればコード自体は簡単ですし、紹介したコードではそれらしく対応するボックスデザインを僕が独断で選んでいるのでphpをいじれる方はこのあたり自由にアレンジしてみてください。

ABOUT ME

ジュンイチ

今年3月からYouTubeスタートしました。『デスク周りの最適化』をテーマに商品レビューやPC関連のお役立ち動画を投稿しています。【NEXT目標：チャンネル登録者数300人】⇒ YouTubeチャンネルはこちら

BLOG：https://jun1ch.com/profile