WordPressテーマ切り替えでSearch Regexを利用する方法

ウサギ
ウサギ

テーマを切り替えたら、いろいろ表示されない。

困っています。。。

イヌ
イヌ

それは大変だ!

Search Regexを利用した置き換え方法を解説するね!

ウサギ
ウサギ

わーい!よろしくおねがいします!

CocoonからSANGOにテーマ変更しました

先日、無料テーマCocoonから有料テーマSANGOに切り替えた記事を書きました。

その際にいくつかCocoon独自のブロックを利用していたため、SANGOで利用できなくなり、いくつかの部分の表示が崩れました。

Cocoonテーマの吹き出し

Cocoonでは、以下のように吹き出しを利用していたのですが、

Cocoonテーマの吹き出しのまま、SANGOテーマを有効にしたとき

SANGOのテーマ適用時には、以下のようになりました。

(いきなりテーマを切り替えず「ライブプレビュー」での確認をおすすめします)

対象外のブロック定義されている場合は、編集画面で「”cocoon-blocks/balloon-ex-box-1″ ブロックはサイトでサポートされていません。」というようなエラーが表示され、利用できない状況になります。

(HTMLとして保持はできるので、コード自体は確認することはできます)

まだ40記事弱なので、手作業で変更してもよかったんですが、Search Regex というプラグインが便利そうだったので、利用してみました。

補足:汎用的に使えます

今回はCocoonからSANGOへの置き換えを例に説明しています。

基本の考え方は「そのテーマ固有の文字列を検索して置き換える」です。

これは他のテーマでも同様なので、参考にしてもらえればと思います。

注意:バックアップは必ずとってね

テーマを切り替える際、今回のようにコードを置き換える際は、必ずバックアップをとることを推奨します。

今回はあくまで参考としての記事です。

この記事を参照して、何か問題が発生したときの責任はとれないため、くれぐれもご注意ください。

WordPressテーマ置き換えに必要なコードを確認

置き換える対象は、ブロックエディタを表現しているコードです。

以下のように右上のメニューから、ビジュアルエディターからコードエディターに切り替えます。

直接、記載されているコードを確認します。

抽出すると、以下のコードです。

<!-- wp:cocoon-blocks/balloon-ex-box-1 {"name":"ウサギ","index":"13","id":"13","icon":"https://dog-and-rabbit.com/wp-content/uploads/2020/09/animal_usaghi_netherland_dwarf-e1600225855473.png","style":"flat","position":"r","iconstyle":"sn"} --> <div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-13 sbs-flat sbp-r sbis-sn cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://dog-and-rabbit.com/wp-content/uploads/2020/09/animal_usaghi_netherland_dwarf-e1600225855473.png" alt="ウサギ" class="speech-icon-image"/></figure><div class="speech-name">ウサギ</div></div><div class="speech-balloon"><!-- wp:paragraph --> <p>はじめまして!「ウサギ」です!</p> <!-- /wp:paragraph --></div></div> <!-- /wp:cocoon-blocks/balloon-ex-box-1 -->
Code language: HTML, XML (xml)

ここのポイントは、以下のHTMLのコメントアウトのなかにある、

wp:cocoon-blocks/balloon-ex-box-1

が、「Cocoon独自の吹き出しブロック」であることを示しています。

このCocoonの文字列が入っているブロックを、SANGOのブロックに置き換えていく必要があるわけです。

では、Search Regexを入れていきましょう。

Search Regexで置き換え作業をする

Search Regexをインストール

WordPress管理画面の「プラグイン」→「新規追加」画面から「Search Regex」で検索、インストールし、プラグインを有効化します。

Search Regexを設定する

「ツール」→「Search Regex」をクリックすると、「検索と置換」画面が表示されます。

右側にある「検索フラグ」を開き、

「正規表現」にチェックを入れ、「大文字小文字の区別なし」のチェックを外します。

正規表現のお話

Search Regexでは正規表現を利用して、コードの置き換えをします。

正規表現をきちんと話すと大変なので、ここでは簡単に説明します。

今回対象のコードはさっきもでてきましたが、以下のコードです。

<!-- wp:cocoon-blocks/balloon-ex-box-1 {"name":"ウサギ","index":"13","id":"13","icon":"https://dog-and-rabbit.com/wp-content/uploads/2020/09/animal_usaghi_netherland_dwarf-e1600225855473.png","style":"flat","position":"r","iconstyle":"sn"} --> <div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-13 sbs-flat sbp-r sbis-sn cf block-box"><div class="speech-person"><figure class="speech-icon"><img src="https://dog-and-rabbit.com/wp-content/uploads/2020/09/animal_usaghi_netherland_dwarf-e1600225855473.png" alt="ウサギ" class="speech-icon-image"/></figure><div class="speech-name">ウサギ</div></div><div class="speech-balloon"><!-- wp:paragraph --> <p>はじめまして!「ウサギ」です!</p> <!-- /wp:paragraph --></div></div> <!-- /wp:cocoon-blocks/balloon-ex-box-1 -->
Code language: HTML, XML (xml)

続いて、正規表現で利用するコードは以下です。

<!-- wp:cocoon-blocks/balloon-ex-box-1(.*?)ウサギ(.*?)--> <div class="wp-block-cocoon-blocks-balloon-ex-box-1(.*?)ウサギ(.*?)<div class="speech-balloon">((.|\s)*?)</div></div> <!-- /wp:cocoon-blocks/balloon-ex-box-1 -->
Code language: HTML, XML (xml)

ここで利用している正規表現は (.*?) が4ヶ所と ((.|\s)*?) が1ヶ所ですね

呪文感がすごいですね。

(.*?) は「改行以外のすべての1文字を、直前の文字の0回以上の繰り返しで、一回だけマッチ」

((.|\s)*?) は「改行以外のすべての一文字、または改行を、直前の文字の0回以上の繰り返しで、1回だけマッチ」

日本語なのに、何を言っているかさっぱりですね。

簡単にいうと、(.*?)((.|\s)*?) のところには、何が入ってもよくて、それ以外の<!-- wp:cocoon-blocks/balloon-ex-box-1 とか <div class="speech-balloon"> とか ウサギ とかはすべて同じものがマッチすることになります。

<!-- wp:cocoon-blocks/balloon-ex-box-1(.*?)ウサギ(.*?)--> <div class="wp-block-cocoon-blocks-balloon-ex-box-1(.*?)ウサギ(.*?)<div class="speech-balloon">((.|\s)*?)</div></div> <!-- /wp:cocoon-blocks/balloon-ex-box-1 -->
Code language: HTML, XML (xml)

以下の一行目でいうと、

正規表現では、

<!-- wp:cocoon-blocks/balloon-ex-box-1(.*?)ウサギ(.*?)-->
Code language: HTML, XML (xml)

検索するコードは、

<!-- wp:cocoon-blocks/balloon-ex-box-1 {"name":"ウサギ","index":"13","id":"13","icon":"https://dog-and-rabbit.com/wp-content/uploads/2020/09/animal_usaghi_netherland_dwarf-e1600225855473.png","style":"flat","position":"r","iconstyle":"sn"} -->
Code language: JavaScript (javascript)

です。

なので、1つ目の (.*?){"name":" とマッチ。

2つ目の (.*?)","index":"13","id":"13","icon":"https://dog-and-rabbit.com/wp-content/uploads/2020/09/animal_usaghi_netherland_dwarf-e1600225855473.png","style":"flat","position":"r","iconstyle":"sn"} とマッチします。

Search Regexで検索する

では、先ほどの正規表現の考え方を踏まえて、検索をしてみます。

デフォルトで「投稿」と「固定ページ」を検索するようになっています。

すみません。以下の例は「イヌ」のスクリーンショットになっているのですが「ウサギ」に置き換えてください。

  1. 検索したい文字列を正規表現で入力する
  2. 検索をクリックする
  3. マッチした「投稿」や「固定ページ」の内容が表示される

問題なく想定の文字列がマッチしているようであれば、次に進みます。

Search Regexで置換する

ここでは、すでにSANGO側の吹き出しコードを事前に取得しています。

(先ほどCocoonのように、SANGOで吹き出しを設定して、コードエディターから、HTMLをとってくる作業が必要です。WordPress環境が1つしかない場合は、崩れること覚悟で一度SANGOを有効にして、コードを確認する必要があるかもです。)

  1. 右側のプルダウンから「複数行」を選択する
  2. 「置換」のテキストエリアに、置き換えの文字列を入力する
  3. 置き換え後の文字列を確認する

ここで置き換えるSANGOのコードは以下の通りです。

<!-- wp:sgb/say {"isAvatarRight":true,"avatarImageUrl":"https://dog-and-rabbit.com/wp-content/uploads/2020/09/animal_usaghi_netherland_dwarf-e1600225855473.png","avatarName":"ウサギ"} --> <div class="wp-block-sgb-say sgb-block-say sgb-block-say--right"><div class="sgb-block-say-avatar"><img src="https://dog-and-rabbit.com/wp-content/uploads/2020/09/animal_usaghi_netherland_dwarf-e1600225855473.png" alt="ウサギ" style="border-color:#eaedf2"/><div class="sgb-block-say-avatar__name">ウサギ</div></div><div class="sgb-block-say-text"><div class="sgb-block-say-text__content" style="color:#333;border-color:#d5d5d5;background-color:#FFF">$5<span class="sgb-block-say-text__before" style="border-left-color:#d5d5d5"></span><span class="sgb-block-say-text__after" style="border-left-color:#FFF"></span></div></div></div> <!-- /wp:sgb/say -->
Code language: HTML, XML (xml)

ものすごくわかりにくいんですが、ここで最も重要な項目は $5 です。

$5 というのは、正規表現がマッチしたときに中身を呼び出すことができる参照用の特別な変数です。

なぜ数字の5かというと、部分置換をしているの5ヶ所目だからです。

さきほど、(.*?)((.|\s)*?) がありましたよね。この () が部分置換の対象部分です。

なので、ちょうど5つ目のカッコの部分は吹き出しブロックの中身をさしているんですね。

置換後も、吹き出しブロックだけ新しいテーマのブロックにして、中身はそのまま引き継ぐために、部分置換で $5 だけ再利用するわけです。

差し替え後のコードがオレンジ色の帯で確認できるので、問題なければ「すべて置換」のボタンを押します。

(実際試していないですが、オレンジ色の帯をクリックすると、個別にも置き換えができそうでした。心配であれば、1つずつ試すこともできそうです。)

すべての置換が完了すると、以下の画面になります。

「完了」のボタンを押しましょう。

置き換え完成です!

見た目じゃ全然わからないですね(笑)

Search Regexで検索だけでもOK

「イヌとウサギの日常」は吹き出しを多く利用していたので、今回一括置換をしました。

残りのCocoonブロックは数が多くなかったので、以下のように検索だけで、それぞれファイルから、手作業で置き換えました。

それほど対象ブロックが多くなければ、検索で対象の記事だけ確認して、手作業で置き換えるのも安全かもしれません。

正規表現が大変ですが、Search Regexは便利です

正規表現は、エンジニアでもなかなかとっつきにくい技術ですが、うまく利用すれば、とても便利です。

ぜひ Search Regex、利用してみてください!

イヌ
イヌ

ということで、 WordPressテーマの置き換えでしたー!

ウサギ
ウサギ

めちゃめちゃ難しかった。

検索だけでも使おうと思うー!

イヌ
イヌ

正規表現はむずかしいからねー。

この記事を読んでるエンジニア志望のみなさんは、ぜひ挑戦してほしいです〜

ウサギ
ウサギ

挑戦してねー!

またね〜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です