絵師による絵師のための無料写真素材サイト『Blank Phostock』公開!

【WordPressテーマ移行】テーマの引っ越しに必要なタグの置き換え方法

14 min

こんにちは出雲寺ぜんすけ(‎@blankcoin)です。

WordPressテーマの引っ越しやったことありますか?

最初こそテーマはいくつか無料のを試したりしてみても、有料テーマを買ったりして一度落ち着いたらあまり変えたりしなかったりします。

しかしクラシックエディタは公式サポートは2021年12月31日まで。ということでGutenberg対応テーマにいずれ変えなくてはということでテーマ移行せざるを得ないケースもあるんじゃないでしょうか?

僕も正直最初Gutenberg試しに触ってみた時も、うんよくわからんし昔のエディタで良くね? と秒でクラシックエディタのプラグインを導入したクチです。

ぶっちゃけ公式サポートが終了しようがクラシックエディタと旧ストークを使い続けるぜと思っていたぐらいですが、ちょっとしたきっかけでテーマ移行のやる気のスイッチが入ってテーマ移行したので、これからテーマ移行する人の役に立てる内容をお伝えできればと思います!

じつは個人的な話ですが今回プラグインの更新でインデックスが外れるバグを食らったのをきっかけにブログを色々といじったのでそれの備忘録だったりします。

WordPressテーマの引っ越し

WordPressはテーマというのを変更すると見た目をガラッと変えたりすることができます。

WordPressっていうのはデフォルトのままだと極めてシンプルな状態なんですが、テーマというのを設定して、いいテーマに変えればよく見る良い感じのブログの見た目になります。

「Twenty Twenty-One」左 「ストーク」右

WordPressテーマ「STORK19」
僕が今まで使っていたのはSTORKという有料のテーマです。STORK19 というGutenberg対応の新テーマにバージョンアップされたのが最新ですが、使っていたのは旧ストークと呼ばれるもの。

ぜんすけ

ぜんすけ

旧ストークからバージョンアップできれば良かったのですがストーク19は別物のテーマとして購入しなければならなかったわけで今回の別テーマ引っ越しの話になったわけです。

WordPressのテーマでショートコードというのを用意してくれていて、それを使うことで↑のようなブログでよく見るフキダシやボタンなどを作ることができます。

旧ストークはGutenberg対応でなく、クラシックエディタは公式サポートは2021年12月31日まで。ということでいずれテーマは変える必要があったわけです。

これから始める人にとってはSTORK19はGutenbergに対応していますしアリだと思いますが、僕の場合は同じテーマに二度お金出すのはちょっとな……というのがあったので変えています。

本当のところは旧ストークからSTORK19への移行なら次に解説するショートコードの置き換えも必要なく楽だったんですが、1つのテーマに縛られることから自由を求めて今回はテーマ移行をしてみました。

テーマ移行で必要だったこと

しかしテーマを変更しようとするとこのショートコードがやっかいで、他のテーマにしたときに反映されずにただの文字列になってしまいました。

本来ならワンクリックで手軽にテーマは切り替えることができるもののハズがショートコードが足かせになって、テーマに囲い込まれる状態になってしまっていたってわけです。

使っていたショートコード
  1. ふきだし
  2. 関連記事
  3. ボタン
  4. カラム

そんなわけでこのショートコードたちをなんとかしないことにはテーマの引っ越しはままならないわけです。

僕がどう対応したかを紹介しますので、これからWordPressテーマの引っ越しを考えている人の参考になればと思います。

追加CSSでとりあえず対応

そもそもブログのデザインはCSSっていうので表現しているんですが、WordPressテーマ自体に含まれているCSSとは別に自分でCSSを追加できるようになっています。

外観 > カスタマイズ > 追加CSS
この画面にコードをコピペして、HTML本文に対応したタグを入れることで色やデザインをコントロールできる。

テーマの移行の際は念のためこの「追加CSS」はテキストなどにコピペしてローカルでバックアップを取っておくと安心です。

今まで使っていたストークのショートコードと同じようなCSSを探してくる

前述の使っていたショートコードと似たものはありがたいことに誰かしらブログで公開してくれています。

ぜんすけ

ぜんすけ

そもそもこういったCSSを一つひとついじらずにすむためのテーマのハズなのに本末転倒な感がありますね……

フキダシ

CSSで作る!吹き出しデザインのサンプル19選

関連記事

コピペで簡単設置!内部リンクのブログカードを作成する方法【PV・回遊率アップに貢献】
https://dis-play.net/wordpress/tips/blogcard/

【CSS】シンプルな囲み枠(ボックス)コピペですぐ使える
https://love-wave.com/css-waku/

ボタン

CSSボタンデザイン120個以上!どこよりも詳しく作り方を解説!
https://jajaaan.co.jp/css/button/

カラム

【CSS】3カラム以上/マルチカラムレイアウトの作り方
https://ja.seo.jxyz.info/category/design/css/

WordPress内の全文検索置き換え

じつは追加CSSは1箇所だから前述のブログからコピペするだけでいいのですが、記事に書いているショートコードは色々な記事にまたがっているので一筋縄でいきません。

全記事を手作業でやろうと思うと漏れも多いでしょうし面倒すぎて発狂してしまいます

そこで必須になるのがSearch Regexというプラグインです。

このSearch Regexがショートコードの置き換えには必須なんですがじつは2020年に更新されるまでしばらくプラグインの更新がされていなくてうまく機能していない時期がありました。

じつは僕はその頃に一度WordPressテーマの変更を試みたものの、このSearch Regexというプラグインが使用できなかったため諦めましました。

現在はSearch Regexが更新されて使えるようになったのでテーマの引っ越しが可能です。

追加CSSの内容を反映させるためには、以下のように記事内のショートコードをカスタムCSS用に置き換えます。

ショートコード
[colwrap]
[col2]<img src="http://blankcoin.com/mn/mn_img/umi/02_01.jpg" alt="背景事典の海辺"width="300" height="209" />[/col2]
[col2]<img src="http://blankcoin.com/mn/mn_img/umi/02_02.jpg" alt="背景事典の海辺" width="300" height="208"/>[/col2]
[/colwrap]

                     ↓

CSSのコード
<div class="myrow">
<div class="col-1" style="margin: 1em;">
<img src="http://blankcoin.com/mn/mn_img/umi/02_01.jpg" alt="背景事典の海辺"width="300" height="209" />
</div>
<div class="col-1" style="margin: 1em;">
<img src="http://blankcoin.com/mn/mn_img/umi/02_02.jpg" alt="背景事典の海辺" width="300" height="208"/></div>
</div>

単語を置き換えるだけならSearch Regexで簡単に置き換えられるのですが、ショートコードのこの[ ]かっこの問題や記事ごとに一部ことなる箇所があるというときは正規表現というのを使わないといけないです。

タグの置き換えには正規表現が必要

前述のショートコードと追加CSSコードで同じところがあります。例の場合ですとイメージタグ(img…から始まる行)は変更の必要がなく、しかもこのタグを使っているところは記事によって別のものが入っています。

この場合正規表現というのを使う必要があります。

Search Regexで正規表現にチェックを入れる

とりあえず正規表現について詳しく知りたい場合は検索していただくとして、ここで必要な内容は(.*?)これと$1これです。

(.*?)←この部分をこれ→$1に配置する

僕の今日のお昼はラーメンでした。僕の今日のお昼はカレーでした。このような定型の日記がたくさんの記事にあったとして、それを『俺の今日のランチはラーメンだ』に変えたいとします。その場合

検索 僕の今日のお昼は(.*?)でした。
置換 俺の今日のランチは$1だ。

さらに▲のように1箇所でなく2か所変わっている場合は次のようになります。
例:僕の今日のお昼はラーメン。そして夕飯は餃子でした。

検索 僕の今日のお昼は(.*?)。そして夕飯は(.*?)でした。
置換 俺の今日のランチは$1。そして夕飯は$2でした。

ショートコードの[ ]カッコは\で打ち消す。

[←このカッコは正規表現に使う記号らしく、そのままだとうまく置き換えることができません。そこで打ち消しの記号を使用します。

[colwrap]このコードの場合\[colwrap\]このようにする必要があります。

そんなわけで先ほどの2カラムの画像のショートコードを例にすると、記事ごとに違う画像の箇所を(.*?)にして[カッコを打ち消す\コレをすべての箇所に差し込むと以下のようになります。

検索
\[colwrap\]
\[col2\](.*?)\[/col2\]
\[col2\](.*?)\[/col2\]
\[/colwrap\]

他のブログなど参照にしたときコードだと【¥円マーク】ですがコピペするとこの\マークになりこれでいいのかとちょっと不安になりました。

ですが、この\マークで問題ないので正規表現として使われる記号(この場合はショートコードの角カッコ)の前に\マークを入れていきます。

置き換え
<div class="myrow">
<div class="col-1" style="margin: 1em;">
$1</div>
<div class="col-1" style="margin: 1em;">
$2</div>
</div>

置き換えにはこのようにそれぞれのカラムの箇所に$1と$2を入れておきます。3カラムを置き換える場合はどうように$3にすればOK。

これで置き換えると前述のカラムの追加CSSを追記してあれば、追加CSSの内容が適用されるようになります。

テーマを変えて大丈夫かライブプレビューで確認

実際に移行先のテーマを有効にする前にライブプレビューで確認することができます。

ライブプレビューを使うと追加CSSなどもその場で変更された結果が見れるので便利です。

メタディスクリプションの移行

テーマ自体にメタディスクリプションを入れることができるものもあるのですが、その場合はテーマ移行時にメタディスクリプションも移行させる必要があります。

僕が使っていた旧ストークは特にテーマにその機能はなくプラグインのAll in One SEOを使っていたのでテーマ移行では本来であればメタディスクリプションの移行は必須ではないです。

All in One SEOからの離脱

Gutenberg対応のためいずれはテーマ移行しないと思いつつも、先延ばしにしてきたテーマ移行。

今回やることにしてきっかけはAll in One SEOのバグによる検索エンジンのインデックスが外れたことです。

このようにV字回復した後であればいいですが、下がっている最中というのは精神衛生上きわめてよろしくないです。

というわけで、All in One SEOとはサヨナラします。

移行先のWordPressテーマ「THE SONIC」にはTHE SONIC SEO Pluginというプラグインがあるのでそちらを使うことにしました。

テーマ自体にディスクリプションの機能が含まれてしまっているとまたテーマ移行したくなったときにやっかいなのでプラグインになっていることでテーマの引っ越しがしやすいというわけです。

プラグインという意味ではAll in One SEOも同じなのですが、All in One SEOはプラグインで収益を得なくてはいけないので余計な機能追加で今回僕が食らったようなバグの原因が発生するわけです。

THE SONIC SEO Pluginは課金がこのプラグインではなくテーマのほうにあるので、SEOプラグイン自体で余計なことが発生しないのではというのが僕の推察です。

ぜんすけ

ぜんすけ

それにしてもメタディスクリプションがそもそも必要ならWordPress標準で書けるようにしておいてくれればいいのに……

わりと面倒だけど手作業でメタディスクリプションを移行

SEOプラグインによってはエクスポート、インポートすることですむプラグインもあるようですが、THE SONIC SEO Pluginでは特になさそうなので、手作業でメタディスクリプションを移行します。

で、どうやってやるかって話ですがAll in One SEOプラグインを有効にした状態でメタディスクリプションをコピって無効にして貼り付けて、また有効にしてコピってを繰り返すのは、ちょっと面倒すぎて心折れそうです。

同じ手作業でもプラグインの有効無効を切り替えたりせずにエクセルにリスト化されているのをコピペして記事を保存するだけならまだマシです。

Export WordPress data to XML/CSVで置き換える

というわけで、参考にしたのが以下の記事。

「Export WordPress data to XML/CSV」というプラグインを入れることでメタディスクリプションとか色々とエクセルデータとしてエクスポートできます。

文字化けした場合、テキストで開いて文字コードをANSI保存しなおす。

僕が使った場合開いたエクセルデータが文字化けしていたので、以下の記事を参考にテキストで開いて保存しなおすことで見れるようになりました。

文字化けを解消する方法
https://mc2.civillink.net/excel/mojibake.html

これでこのようにリスト化されるのでひたすら記事を開いてコピペして保存を繰り返すだけです。

記事数が多いと手間ですが、エクセルデータにエクスポートできていれば1記事1分もあればメタディスクリプションのコピペ移行ができるので、1時間ほどで60記事ほど移行完了できると思います。

テーマ移行のための各種バックアップ

カスタマイズの項目

外観 > カスタマイズ > 追加CSS

追加CSSを保存しておいたほうが良いという話をしましたが、カスタマイズにある項目はひと通りバックアップしておきます。

ウィジェットの項目

外観 > ウィジェット 

そのまま移行先のテーマに引き継がれたりもしますが、念のためウィジェットの項目も保存しておきます。

まんがいち消えてしまったりするとそもそも何を表示していたかとか、そこに記述していたことも思いださないといけないのでここも適当にテキストとかでいいのでバックアップしておきます。

ウィジェットの項目

参考に僕自分のウィジェットの内容を書いておきますが、ご自身の内容をこんな感じでバックアップしておくといいのではないかと。

プロフィール(現在僕が使っているテーマでは書いた人情報から)

<span style="font-size: large;"><b>出雲寺ぜんすけ</b></span><a href="https://twitter.com/blankcoin" target="_blank" rel="noopener noreferrer">(‎@blankcoin)</a> ゲーム会社等で社内デザイナーイラストレーターとして16年勤め、2D背景だけでなく、武器やアイテム画像、バナー、スタンプなど2Dグラフィック業務を幅広く担当。 アートディレクターやグラフィックチームのマネージャー、美術監督などを経験し、2019年にフリーランスとして開業独立しました。 <a href="https://blankcoin.com/?page_id=3462">プロフィール詳細</a> <h4>著書</h4> <a href="https://amzn.to/2sAT58s">【デジタルイラストの「背景」描き方事典】</a> <a href="http://www.amazon.co.jp/exec/obidos/ASIN/4777515737/blankcoin-22" target="_blank" rel="noopener noreferrer">【背景CGテクニックガイド】</a> も書店にて発売中です。 <h4>リンク</h4> <a href="https://blankcoin.fanbox.cc/" target="_blank" rel="noopener noreferrer">PIXIV FANBOX</a> <a href="https://blankcoin.booth.pm/">BOOTH</a>

ブログランキング

<a href="https://illustration.blogmura.com/ranking/in?p_cid=11085434" target="_blank" ><img src="https://b.blogmura.com/illustration/88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 イラストブログへ" /></a>
<a href="https://blog.with2.net/link/?id=2056433&cid=3169"><img src="https://blog.with2.net/img/banner/c/banner_1/br_c_3169_1.gif" title="イラスト技法ランキング" width="110" height="31"></a>

・ナビゲーションメニュー・カテゴリー

・固定ページ

・Twitterタイムライン

・[THE SONIC]目次

・[THE SONIC]人気記事

・(PC)フッター左  : 最近の投稿

・(PC)フッター中央 : [THE SONIC]人気記事

・(PC)フッター右  : カテゴリー アーカイブ

カテゴリー

・カスタムHTML

<!--吹き出しはじまり-->
<div class="balloon1">
<div class="faceicon"><img src="https://blankcoin.com/img/coin_icon75.png" /></div>
<div class="chatting"><div class="says">
<p>こんにちは出雲寺ぜんすけ<a href="https://twitter.com/blankcoin" target="_blank" rel="noopener noreferrer">(‎@blankcoin)</a>です。
</p>
</div></div>
</div>
<!--吹き出し終わり-->

・カスタムHTML

<!--吹き出しはじまり-->
<div class="balloon1">
<div class="faceicon"><img src="https://blankcoin.com/img/coin_icon75.png" /></div>
<div class="chatting"><div class="says">
<p>
Twitterもやっているので良かったらフォローよろしくお願いします!!
	
<b>出雲寺ぜんすけ</b><a href="https://twitter.com/blankcoin" target="_blank" rel="noopener noreferrer">(@blankcoin)</a>
</p>
</div></div>
</div>
<!--吹き出し終わり-->
<hr />

・カスタムHTML

<div class="myrow">
<div class="col-1" style="margin: 1em;">
<img src="http://blankcoin.com/sl/img/300_clip_cta.jpg" alt="クリスタ版ブラシ" />
</div>
<div class="col-1" style="margin: 1em;">
<h3 style="text-align: center;"><span style="font-size: 12px;">
出雲寺ブラシセット</span>
クリスタ版発売</h3>
プロのこだわりのオリジナルブラシがついにクリスタ仕様で登場!
<div class="btn-gradient"><a href="https://blankcoin.com/?p=4034" class="btn btn-gradient"><span>
ブラシ詳細をみる</span></a></div>
</div>
</div>

カスタムHTMLなどのように内容を書き込んでいるところ以外は、項目だけメモっておけばOK。

テーマエディター

・スタイルシート (style.css)

・テーマのための関数(functions.php)

外観 > テーマエディター

特に追記していなければここはバックアップ必要ないかもしれませんが、カスタマイズしていたりする場合は念のためstyle.cssやfunctions.phpも念のためテキストにバックアップしておきます。

移行先WordPressテーマはどれにする?

無料テーマ

Cocoon

無料だとCocoonっていうのがいいらしいですね。

僕は使っていないので詳しくはわかりませんが無料だとほぼ一択レベルでよさげなテーマなようなので「無料でたのむぜ」という場合はこれではないかと。

Cocoon 公式ページ

有料テーマ

THE THOR(ザ・トール)

しばらく前にテーマ移行を検討したときに知ったテーマです。そのときは僕の中でテーマ移行の意欲が下がってそのまま変えずじまいでした。

THE THORはGutenberg対応がまだということだったので、Gutenbergにするぞということでテーマ移行するのであれば一度Gutenberg対応状況の確認をしてからのほうがいいようですね。

ロゴデザインも槌と稲妻ということで北欧神話の雷神トールから命名されているんでしょうね。

THE THOR 公式ページ

STORK19

僕が今まで使っていたのはSTORKという有料のテーマです。STORK19 というGutenberg対応の新テーマにバージョンアップされたバージョン。

僕は当記事の方法で飛び出してしまいましたが、旧ストークからの移行は最もお手軽。

11,000(税込)ということで有料テーマとしてはわりと低価格。複数のブログをやらず一つだけで使っていくのであれば悪くもないかなと思います。

STORK19 公式ページ

THE SONIC

僕が移行したテーマです。今回特に選んだというよりも、一度移行を試みて挫折していたときに購入していたので移行先にしました。

他の有料テーマは普通1~2万ほどと、いい値段するのですが、このTHE SONICはサブスク型ということで初期費用としては1000円以下なので試しに変えてみることに対する金銭的な敷居が低いです。

サブスク型ではありますが、一部の独自機能を使わないのであればサブスク課金を切っても使い続けることができるため使い方によっては1000円以下の出費で完結するのでコスパがよいです。

THE SONIC 公式ページ

ついでにサーバーも引っ越しも検討

当ブログでは長年ロリポップという安価で使用できるサーバーを使っていましたが、今回サーバーの引っ越しも検討しました。

正直ロリポップでも特に困っていなかったのですし、速度改善にも力を入れたプランが3年契約すれば今までと同じ月500円のサーバー代で済むということで、次の更新は3年でやってしまうかと思っていました。

しかし、今回WordPressテーマをTHE SONICに変更するにあたってTHE SONICの公式ページを見ていたら紹介されていたConoHa WINGというサーバーのサイトを見てみるとなにげにコスパが良さそうです。

WINGパックというのだと割引されていて、しかも1月29日までやっているキャンペーンでさらに割引されて3年契約なら月 640円まで下がります。

ドメイン料金も無料ということで、ドメイン費用も今まで年1400円ぐらいかかっていたので、それを引けば実質526円になって金額的には同じぐらいにになるわけです。

昔からブログのサーバーの記事で一番目にするのはエックスサーバーですがConoHa WINGは国内最速とのこと。

そんなわけでコストがほとんど変わらずに最速サーバーになるなら変えてみてもいいかなと思ったしだいです。

ConoHa WING 公式ページ

テーマ移行で消したプラグイン、残したプラグイン

テーマ移行してプラグインもだいぶスッキリ減らしました。

テーマ移行して消したプラグイン
  • Lazy Load – Optimize Images:
  • a3 Lazy Load:
  • Autoptimize:
  • Easy Table of Contents:
  • Simple Cache:
  • All in One SEO:

▲この推奨プラグインを見てまさに使っていたプラグインとかは消しました。

そもそもLazy Loadが2つあったり、内容被っているプラグインあったわけですが、この組み合わせで絶妙にPageSpeed Insightsのスコアが上がったので使っていました。

とはいえせっかくなのでスッキリさせたかったので今回削除しました。

無効プラグイン 使う時だけ有効プラグイン
  • Classic Editor:
  • AddQuicktag:
  • Search Regex:全記事検索置き換え
  • WP All Export:エクセルにエクスポート。
  • WP-Optimize – Clean, Compress, Cache:リビジョンとか掃除

クラシックエディタとAddQuicktagはGutenberg対応前の記事をいじるときのために残しています。

有効プラグイン
  • BackWPup:バックアップ もしかしたら消すかも。
  • EWWW Image Optimizer:画像圧縮
  • WP Multibyte Patch:日本語のブログには必要なやつっぽい
  • PS Auto Sitemap:サイトマップページ用
  • WP Cerber Security, Anti-spam & Malware Scan:セキュリティ
  • THE SONIC Gutenberg Blocks:これがあれば別テーマの引っ越しもスムーズ
  • THE SONIC SEO Plugin:これがあれば別テーマの引っ越しもスムーズ
  • ConoHa WING 自動キャッシュクリア:ConoHaサーバーを変えたら入っていたやつ
  • TypeSquare Webfonts for ConoHa:同じくConoHaにしたら入っていたwebフォント
  • Simple 301 Redirects:THE SONICテーマに含まれてはいますが、存在しないページの301のため
  • Jetpack :色々管理系。THE SONICでは必要ないとされるプラグインだが……

All in One SEO同様Jetpackもさよならしていいプラグインとして名前があがる筆頭ではあるんですが……メールフォームとかで使っているから消せていない。

テーマ移行まとめ


そんなわけで、All in One SEOのアップデートバグと思わしきPVの一時的な減少をきっかけに、先延ばしにしていたテーマ移行のやる気が急に出たので結果オーライという感じでしょうか。

テーマ移行まとめ
  • ショートコードの置き換えはSearch Regexというプラグインを使う。
  • タグの置き換えは正規表現を使う必要があることが多い。
  • CSVで吐き出すプラグインを使えばメタディスクリプションの移行も手作業できなくない程度のめんどさ。
  • 追加CSSなどカスタマイズの項目、ウィジェット、style.cssやfunctions.phpなどバックアップを取っておく。

THE SONICはGutenbergエディタに最適化されたWordPressテーマということで、せっかくそんなテーマ移行したことだしということで、この記事もGutenbergで書いています。

Gutenbergエディタは最初こそ、「やっぱ何度触っても自分はクラシックエディタでHTMLタグ打ってるほうがわかりやすくていいわ……」と思いましたが、ちょっとだけクラシックエディタを有効化するのを我慢したらわりとすぐに慣れました。

Gutenbergの習得コストはかなり低いですね。1記事書いている間におおむね慣れます。

Photoshop使っている人がクリスタとか他のイラストソフト使い慣れるよりもよほど簡単です。

ただクラシックエディタと見た目があまりにも違うので、とくにかく最初の数分間のガマンが重要

過去の記事のリライトはクラシックエディタでやりたい気もしますが、今後書く記事はGutenbergでやっていこうかなと思っています。

Twitterもやっているので良かったらフォローよろしくお願いします!!
出雲寺ぜんすけ(@blankcoin)


近年発売背景イラスト本
カテゴリー:
タグ:
クリスタ版ブラシ

出雲寺ブラシセット クリスタ版発売

プロのこだわりのオリジナルブラシがついにクリスタ仕様で登場!
関連記事

コメントを残す

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