[Simplicity2からTHE THOR(ザ･トール)へ]テーマ変更時ボックス装飾の書き換え方法

ワードプレスのテーマを「Simplicity2」から「THE THOR(ザ･トール)」へ変更した際に、ボックスやボタンなどの記事装飾を一括で置き換えする方法です。(コードは「Cocoon」にも適用できます)

以前、「Simplicity2」から「Cocoon」へのテーマ変更記事を書きましたが、同じ作者のテーマ「Simplicity2」と「Cocoon」では起きなかったことが、「THE THOR(ザ･トール)」では起こるのです。(当たり前だし仕方ない)

「Simplicity2」から「THE THOR（ザ・トール）」へ。記事装飾設定の変換

以下は、「THE THOR（ザ・トール）」へ変更した直後の記事の様子です。

一見、何も装飾されていないテキストのように見えますが、「Simplicity」の時には3か所もボックスが入っていたのです。

「Cocoon」へ変更した時は、そのままのコードで表示されました。しかし、他のテーマに替えたらコードが利かないのは仕方ない。

「Simplicity2」のボックス装飾一覧

これを「THE THOR(ザ･トール)」のボックスの中で似たような雰囲気の物に置き換えていきます。

そのために、あらかじめオリジナルボックスも設定しました。

あわせて読みたい

［THE THOR（ザ・トール）］「ボックス」一覧と装飾の使い方、カスタマイズ 「THE THOR（ザ・トール）」は、記事装飾のためのパーツが大変充実しています。記事を分かりやすく見せるための「ボックス」もその一つ。デフォルトでも10種類、ボック...

codeの内容はテキスト画面で確認します。

とりあえず、「information」枠のコード"<div class="information">"の部分を手動で"<div class="information ep-box es-Bicon icon-checkmark bgc-VPorange">"に変更してみます。

まぁまぁいい感じに成功したので……。"<div class="information">"は、プラグイン「Search Regex」で一気に変換しようかと。

あわせて読みたい

【WordPress】タグなど文字列をバッサリ置き換えてくれるプラグイン「Search Regex」 他所から引っ張って来ている画像などのアドレスが変わり、一気に書き換えしなくてはならなくなった時、記事数が30記事くらいならば頑張って一つ一つ書き換えますが、100...

プラグイン「Search Regex」で一気に変換

言うまでもなく、「Search Regex」を使ってしまうとサイト中のコードが一気に置き換えられてしまい、二度と元には戻りません。バックアップ必須。また、「Search Regex」を使う前には1記事くらい手動で置き換えて納得してからにしてください。

置き換えたボックスコード

<div class="sp-warning">(「warning」シンプルな黄色背景のボックス)

 
<div class="sp-warning">を<div class="ep-box bgc-VPorange">へ置き換える。

<div class="sp-danger">(「danger」シンプルな薄赤背景のボックス)

 
<div class="sp-danger">を<div class="ep-box bgc-white ftc-Lmagenta brc-Lmagenta es-borderSolidS es-radius es-Bicon icon-warning">へ置き換える。

<div class="alert">(注意！アイコンボックス)

<div class="alert">を<div class="alert is-style-big_icon_point es-borderSolidS brc-DPred bgc-white es-radius">へ置き換える。

<div class="sp-primary">(「primary」白フォント・ブルー背景ボックス)

 
<div class="sp-primary">を<div class="ep-box ftc-white es-BiconBg bgc-DPsky">へ置き換える。

<div class="sp-success">(「success」シンプルなグリーンボックス)

 
<div class="sp-success">を<div class="ep-box es-BiconBg bgc-VPlime">へ置き換える。

<div class="question">(「？」アイコンボックス)

 
<div class="question">を<div class="is-style-big_icon_hatena es-borderSolidS bgc-white brc-DPblue es-radius">へ置き換える。

<div class="sp-info">(「！」アイコンボックス)

 
<div class="sp-info">を<div class="is-style-big_icon_point es-borderSolidS brc-DPred bgc-white es-radius">へ置き換える。

「Simplicity2」からテーマを替えるなら「Cocoon」をお薦めしたい…

Cocoon

Cocoon SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。

他に文字色なども同じ手順で置き換えました。しかし、装飾は「Search Regex」を使うことが出来るので幸いです。ブログリンクカードなどは、もう手作業で一記事ずつ変更するか、あきらめて放っておくしかないです。

「Simplicity2」も「Cocoon」も、一行でリンクを書き込むだけでブログカードになったので、非常に楽でしたし、「Simplicity2」から「Cocoon」に変更する時は装飾に関しては何も手を加えず引き継げました。

他の記事にも書く予定ですが、一番痛いのはメタディスクリプションです。「Simplicity2」でこれを一記事ずつ丁寧に作っていた方は、「ザ・トール」に変更した途端に全て消えます。

「ザ・トール」は、とても良いテーマです。しかし機能的には「Cocoon」も素晴らしいテーマです(しかも無料です)。そして何よりも「Simplicity2」から引き継げる部分が多いので、テーマ変更後の手間が減ります。

デザイン面だけで選ぶなら、「THE THOR」で出来る事は「Cocoon」でもほぼ出来る……というのが、今のところ使ってみた感想です。