初めにこの記事の注意:この記事は一部のスマホのみタグが変換されてしまいますのでPCからをおすすめします。
今回は当ブログを「ストーク」から「ストーク19」そして結局「アフィンガー5」へ変更しました。
まず旧ストークですが今後必ずSEOに必要になってくる「PageSpeed Insights」のサイト速度がモバイル「8点」とやばい( ̄▽ ̄;)
ということでストーク19を購入して変更しましたが「28点」へアップしました。
これもヤバイ^^;
パソコン表示ではどのテーマも「80~90点程度」はいきました。
明らかに体感速度は速くなりましたがグーグルSEO上ではガチガチのスタイルを沢山使用しているストークはやはり遅い。
特に写真多めサイトにはまず向かないでしょう。
ただしストークの良い所は書くだけに専念できるところが良く、デザイン変更は超難しいのですが完成されてます。
明らかにアフィンガーよりオシャレですが、色々と崩す事の出来ないものがかなり多いのも事実です。
アフィンガーへ変更すると一気に「66点」まで上がりました。
今回それは一旦置いておいて、今回は別テーマへ移動する際に必要な、タグの一斉置き換えプラグイン「searchregex」のお話です。
ガッツリ調べましたが何故か私の場合教科書通りしても「正規表現」での検索が明らかにおかしい。
ひっかからないというより全てのページに引っかかってしまい危険ですので、今回は最も重要なタグを抜粋して記事を書いておきたいと思います。
今後の自分の為にもなりますので。
Search regexの正規表現|ストーク→アフィンガー編
このプラグインは元に戻せないのでバックアップ必須です。
実際にしたことでないと危険ですので「ストーク→アフィンガー」の場合のタグを使用します。
ワードプレステーマ・ストークで一番多いのはボックスタグ[/box]でしょう。
そして普通の人は改行使うと思うので一番置き換えが難しいのもボックスタグでしょう。
ボックスタグがきちんと変更出来れば他のボタンタグ・吹き出しタグなどは同様以下の手順なので簡単です。
ストークをアフィンガーへ着せ替えたあとのタグ残り
まずなにはともあれこれがストークのボックスタグです。
テーマをアフィンガーへ着せ替えたので、当然ストーク用のタグがそのまま出ている状態です。
※そしてボックスの中は改行で綺麗にしてますがこれ普通ですよね。(後述します)
これを一気に変換するのはどうやっても無理でした。バックアップ取りながら3日くらいかかりましたが無理でした。
吹き出しの中の文字は変更したくないのでSearch regexでもその表記が必要です。
ストーク用タグ正規表記検索→アフィンガータグ置き換え方法
ボックスの中に改行が無く、一気に変換する場合はこうなるはずです。
※調べるとこれで一斉置き換えできるはずですがこれだと検索側に引っかかりません。
これで可能なはずですが・・・
|\[box class="red_box" title="(.*?)"\](.*?)\[/box\]|
ということで上は使えませんでしたので以下にしました。
タグ開始テキスト込み部分と
[box class="red_box" title="(.*?)"\]
とボックスタグ締め部分
[/box]
※この2つに分けて、かつ両サイドの「|
」←これを無くす。これで検索するとしっかりとかかり置き換えもきちんとできました。
①:まず正規表記での検索と置き換え
ボックス見出し文字はそのままの場合は(.*?)
。そして記号の前には「\
」が必要です。両サイドの「|
」を外して以下の状態にしました。
ストークのボックスタグを検索。
検索タグ側
\[box class="red_box" title="(.*?)"\]
これをアフィンガー用ボックスタグへ変更。
※見出し文字の部分に「$1」を忘れないようにして。
置き換えタグ側↓
[st-mybox title="$1" fontawesome="fa-exclamation-circle" color="#ef5350" bordercolor="#ef9a9a" bgcolor="#ffebee" borderwidth="2" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
これで先ほどのストーク用コードの上が、アフィンガー用コードへ切り替わりました。
あとは[/box]
タグだけですので次は通常の検索置き換えで可能です。
②:次に通常での検索そして置き換え|こちらは簡単
※正規表記検索不要です。
検索側:ストーク用タグ
[/box]
置き換え側:アフィンガー用タグ
[/st-mybox]
すると先ほどのストークボックス締めタグ[/box]が、アフィンガー用タグへ変更されるのでこうなります。
全ページで200個以上あったので、これを手作業でしてたら死にます。
これでストーク用のボックスタグから、アフィンガー用のボックスタグへ変更完了です。
※記事は赤色用ボックスですが、ストークは色で6種類くらいあるので全ての色ボックスを使用してるのであれば「red」の部分を「green」や「glay」など切り替えて6回すればすべて切り替わります。
見出しのあるボックスが一番難しいので、これが出来れば他は簡単ですので同様の手順で全ての切替えが終了します。
これで晴れて「ストーク」→「ストーク19(1日しか使って無い)」を卒業して「アフィンガー5」へ移行完了しました。
結果的に、軽くなって、サイト評価上がって、AMPワンタッチ対応になり、トップページ自動広告制御もワンタッチになり、カスタマイズし放題のブログへと変身しました。
パソコンの場合の評価点数は「ストーク19」も「アフィンガー5」もたいして変わりませんでしたが、モバイルに関しては10倍近く評価が高くなりました。