本サイトにはプロモーションが含まれています

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

フレームあるいはテーマ

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

あくまでも、「私はこうした」という自己流です。

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

目次

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

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

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

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

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

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

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

 

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

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

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

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

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

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

まぁまぁいい感じに成功したので……。"<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="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="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="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="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="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="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">へ置き換える。

<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」でもほぼ出来る……というのが、今のところ使ってみた感想です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

profile

主にWordpress中心のサイト・ブログ制作&コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ&Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

 

カスタマイズのご依頼は「一木堂」へ

follow us in feedly 映画@見取り八段 | 映画感想ブログ coconara ss

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

a
よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメントする

目次