STORKからSANGOにテーマ変更した際にやった作業・参考記事をまとめた!

ども!
さとひか【∵`】( @satohika_bass )です!

今回はブログの話!
あなたがこのページにたどり着いたということはWordPressテーマの変更を考えていると思います。

ブログのデザインって重要ですよね。
使い心地も重要!

ブログ初心者だと無料のWordPressテーマを使う人が多いかもしれませんが、デザインをカスタマイズするのってめちゃくちゃ大変ですよね、、、

そこでオススメしたいのがお金はかかりますが有料のWordPressテーマ!

僕が初めて買ったのは有料のWordPressテーマ「ストーク」

ブロガー界隈ではかなり流行ったWordPressテーマです。
デザインも綺麗だし、カスタマイズは簡単!
とても使い勝手の良いテーマでした。

ですが、今回の主役は有料WordPressテーマの

『SANGO』

このページに来ているということは『STORK(ストーク)』も『SANGO』のこともある程度は知っている方だと思うので説明は省略します。

参考

SANGOSANGO | 心地良さを追求したWordPressテーマ

というわけで、この記事では僕が有料WordPressテーマ『STORK』から『SANGO』へとテーマ変更をした時に参考にしたサイトや記事・やった作業をまとめてみました!

これからテーマ変更を考えている人の参考になれば幸いです!
では、いきましょう!

STORKからSANGOにテーマ変更した際にやった作業・参考記事まとめ(準備編)

スポンサーリンク

『SANGO』を購入!

まずはここから!
購入する際にはpixivアカウントが必要です!

参考

SANGO購入ページSANGO - BOOTH

購入が済んだら、テーマと子テーマをDLする!

購入が済んだら『SANGO』がDLできるページに行くので、DLしましょう!
ついてで子テーマもDLしておくと良いと思います

子テーマのDLと詳しくは下記を参考。

参考

WordPressで子テーマを活用して安全にカスタマイズを行う方法SANGOカスタマイズガイド

バックアップを取る

これはめちゃくちゃ重要です!
WordPressrテーマを変更する時は必ずバックアップをとっておきましょう。

世の中なにが起こるかわからないですからね、、、
僕はWordPressのプラグイン『BackWPUp』を使いました!

参考

BackWPUpで確実にWordPressのバックアップを取る方法バズ部

現在のページをキャプチャー!

僕は現状がどうなっているかを残しておくためにページをキャプチャーしました!
テーマを変更してしまうと前のデザインは見れなくなってしまうので念のため!

こんな感じ!

ウィジェットの内容をメモ帳に保管

WordPressのテーマを変更するとウィジェットの内容が消えたり、飛ぶことがあるそうです。
ウィジェットの内容って案外忘れちゃったりするので、テーマを変える前にメモ帳に全部コピペして保管しました。

スタイルシートの内容をメモ帳に保管

スタイルシート (style.css)は子テーマでいじる人が多いと思いますが、テーマを変更するということはスタイルシートの内容も全部消えるということです。

これはメモ帳などにコピペをして保管しておくのが良いと思います!
そうすればテーマを変更した後もスムーズにスタイルシートの設定ができます。

念のためテーマのための関数もメモ帳に保管

『STORK』の時はテーマのための関数 (functions.php)もいじっていたので、これもメモ帳などにコピペをして保管していました!

(ブロガー向け)サイトの速度調査キャプチャー

これはブロガー向けなのですが、こうやってレビュー記事を書いたりする時のためにテーマ変更前のサイト速度を『PageSpeed Insights』や『GTmetrix』で測定してキャプチャーしておくのも良いと思います!

テーマ変更前後の測定結果は後ほど!

固定ページのTOPを元に戻す

僕はブログのTOPページを固定ページで作成していたので、それを通常に状態に戻しました!

参考

WPストークのトップページを固定ページにしてカスタマイズしてみた略してとりてみ

スポンサーリンク

STORKからSANGOにテーマ変更した際にやった作業・参考記事まとめ(本番編)

ちなみに僕はここからはアクセスの少ない深夜帯の時間にやりました!
色々と崩れてしまうので、なるべくそれを見られないように、、、笑

WordPressテーマ『SANGO』をインストール!

ここは一番ドキドキしましたね。

参考

WordPressにテーマをインストールする方法SANGOカスタマイズガイド

テーマを『STORK』から『SANGO』に変更!

有効化にするのは、子テーマの『SANGO Child』です。

変な感じになってるウィジェットを削除

これがテーマを変更した直後なんですが、なぜかトップページ上部にシェアボタンと広告が表示されてしまっていました。

このようにウィジェットが変な感じになってしまったので削除・調整しました!

ロゴ画像の追加、色の変更

初期設定だと上記のような水色の背景色・見出しの色になってしまうので変更しました。
あと、ロゴが文字になっているので画像に変更!

少しずつ「さとひかるた(ブログ名)」っぽくなってきました!

参考

色の設定をしようSANGOカスタマイズガイド

メニューの配置・設定

初期の状態だとヘッダーにメニューがないので、それを設定!

だいぶ、それっぽくなってきました!

参考

メニューの設定をしようSANGOカスタマイズガイド

ウィジェットの設定

テーマ変更によって崩れてしまったウィジェットを再設定!
プロフィールをカスタマイズしてウィジェットに入れたり、広告のウィジェットをいれたり。

参考

サイドバーや記事下にプロフィール(この記事を書いた人)を設置するSANGOカスタマイズガイド

モバイル用フッター固定メニューの設定

僕としてはこれがめちゃくちゃやりたかった!

フッター固定メニューの設定することによって回遊率は上がりそうだし、何より便利!
すごく嬉しい!!

参考

モバイル用フッター固定メニューの設定方法SANGOカスタマイズガイド

ショートコードの置換

『STORK』にも『SANGO』にもショートコードというものがあります。
だけど、この二つは共通のショートコードではないので置換をする必要があります。

この記事のおかげでくっそ助かったので、ご紹介!

参考

ストーク→SANGOにテーマ変更。正規表現でショートコードを簡単に置換する方法節約リッチ生活

置換はプラグイン『Search Regex』を使用しました。

スタイルシートに追記

テーマ変更により、前のスタイルシートが真っ白になってしまったので追記!
僕は「あわせて読みたい」などのデザインや見出しのデザインをスタイルシートに書いてます!

👆こういうのですね!

見出しのカスタマイズで問題がっ!

見出しのカスタマイズをしていたのですが、h2のデザインを設定した時に問題が起きたんです!
スタイルシートでh2見出しタグのコードを書いたのですが、なんとその設定がトップページにも反映されてしまいデザインが変な感じに、、、

こちらのサイトでその解決方法がわかりました!

参考

【SANGO】h2タグの見出しデザインを変更する方法KENTABI

プラグイン『All in One SEO Pack』とさよなら

『SANGO』のカスタマイズガイド(公式ページ)でも書いてあるのですが、相性の悪いプラグインがあります。
それが僕の使っていたプラグイン『All in One SEO Pack』

サイトが遅くなる原因にもなるようで、こちらは削除!

参考

他テーマからSANGOに移行される方へ(作成中)SANGOカスタマイズガイド

『All in One SEO Pack』とさよならしたことによって問題が

僕は自分のアクセス除外をこのプラグインで行なっていたのですが、『All in One SEO Pack』を停止したことによって、自分のアクセスもアナリティクスでカウントされるようになってしまいました。

PCはブラウザのアドオンでオプトアウトすればいいのですが、スマホはどうしよう。

そして調べたらスマホでのアクセス除外ができる解決方法を見つけたのですが、これはあんまり広めたくないのでTwitterのDMで聞いていただければこそっとお教えします!
(解決方法を調べて発見するのに何故か2時間もかかった。笑)

▼こちら▼

サイトマップの設定

サイトマップは先ほどのプラグイン『All in One SEO Pack』で設定していたので、プラグイン停止によりサイトマップの再設定をしました!

使用したのは『Google XML Sitemaps』というプラグイン!

参考

WordPress】サイトマップ作成からSearch Console登録までの全手順サルワカ

目次のデザイン崩れを直す

僕は目次の生成を『TOC+』というプラグインで設定しているのですが、デザインが崩れたのです!

目次の文字にアイコンが被ってしまった、、、
こちらは『TOC+』の上級者向け設定で「CSS フィイルを除外」にチェックをいれればOKです!

直った!

参考

目次プラグイン「TOC+」の設定方法SANGOカスタマイズガイド

あとはデザインをちょこちょこ修正!

モバイル用固定フッターのアイコンを変えたり、プロフィールにTwitter・Facebook・お問い合わせのアイコンを追加したり。
ちょこちょこと追加や修正!

完成!!

(番外編)SNSのリンク押してもアプリに飛ばない

フッターの固定メニューにSNSのシェアとフォローを入れたのですが、タップするとブラウザでSNSのページを開いてしまいました。

僕的にはアプリに飛んでくれた方がいいなーと思って調べてたら発見!

参考

ツイートを常にSafariで開く(Twitterアプリに移動してしまう)またはその逆それマグで!

自分でそうしてみたいです、、、

WordPressテーマを『SANGO』にしてよかったこと

スポンサーリンク

可愛らしいデザインが良い!

何よりもゆるふわな感じのデザインがめちゃくちゃ可愛い!
ストークもデザインは美しいかったけど、キリっとしてるそんな感じ。

『SANGO』はゆるーい感じやふわっと感じがして心地よいのがたまらない!

サイトの速度が早くなった!?

SANGOユーザーの記事でよく書いてある、「SANGOにしたらサイトの速度があがった!」
これは本当なのでしょうか?

測定!

『STORK』の時(PC)

Poor (31/100)

『STORK』の時(スマホ)

Poor (50/100)

『SANGO』にしたら(PC)

Poor (44/100)

『SANGO』にしたら(スマホ)

Poor (42/100)

 

\\\\٩( ‘ω’ )و ////

(すいませんすいません、サイト速度早くなるように善処します、、、)

 

体感速度は前より全然早くなった気がします!(ほんと)

スマホ時のフッター固定メニューは最高!

先ほども書きましたが、フッター固定メニューは最高です!
アナリティクスで調べてみたら平均セッション時間があがってた!

SNSのフォローもフッターの固定メニューにあるので効果に期待!

さいごに

ざっと僕がWordPressテーマを『STORK』から『SANGO』にした時に参考にした記事・やった作業をまとめてみました!
これから『SANGO』へテーマ変更を考えている人の参考になれば幸いです!

また参考にさせていただいた記事を作成された方、ブロガーのみなさん、制作者のサルワカさん、ありがとうございました!!とってもとっても助かりました!!

 

ありがとう!さとひか【∵`】でした!

んじゃね!