【WordPressテーマ:スワロー】テーマ変更前後にやるべき設定やカスタマイズとは?

どうも!いっくんです!

 

ブロガーのみなさん!ワードプレスのテーマって変更したことありますか?

テーマの乗り換えってなかなかやる機会がないので、やる前は不安を感じると思います。

 

私は先日、無料テーマから「スワロー」に変更しましたよ!

テーマの変更をする時には、色々と調べて準備しないと痛い目に遭います。

 

事前にどんな流れか把握して段取りを考えつつ設定しなきゃいけません。

今回は私がどんな流れでスワローの設定や、カスタマイズをしたのか簡単にまとめていきますね!

 

これからスワローに変更しようと思ってる方は参考にしてください。


ワードプレステーマを「スワロー」に変更する!

みなさんはワードプレスのテーマって、変えたことありますか?

「テーマは最初に選んだモノから変更してないよ!」って人も多いと思います。

 

私はブログを始めて2年間は無料のワードプレステーマ「Simplisity2」を使ってましたけど・・・

段々と物足りなさ&力不足感を抱き始めて、有料のWordPressテーマ「スワロー」に変更しました!

いっくん
スワローは綺麗でシンプルなテーマが人気です!

ちなみに私は有料テーマは先行投資だと思ってます。より優れたテーマに変更すればユーザビリティ向上でアクセスアップが見込めるので。

このブログはスワローに変えた当時10万PVだったのが、4ヶ月後には20万PVを超えました!

公式サイト

テーマ変更直後はカスタマイズの必要が出てくる

有料テーマに変えれば、より洗練されたデザインや機能を利用できるようになりますけど・・・

「変更した瞬間に、何もせずにすべてが向上する!」ってものじゃないですので笑

 

テーマの変更は引っ越しと同じで、多少の苦労は伴います。

覚えておいて欲しいのは、テーマを変更した時にはこれまでカスタマイズした「ウィジェット」「ブログレイアウト」「CSS」の設定が消えます!

上の画像がテーマを変更した直後のトップページです! 少しレイアウトが不自然なのがお分かりになりますかね?

 

テーマを変更した直後はレイアウトが崩れるってことを、事前に知っていないと呆然としちゃいます笑

引っ越しをした後にはカスタマイズをする必要があるので、ちゃんと事前に準備や対策をしましょうね。

いっくん
これはどのテーマに変更する時にも言えます! 

これは変更直後のフッターですけど、個人的にはこのまま放っておきたくない状態です笑

こういうのを微調整する作業が必要になるので、テーマ変更のタイミングは意識すべき。

 

ポイントはテーマを変更直後にアクセスした読者はモロに影響を受けるってこと! ゴチャゴチャした状態が丸見えです笑

だからできるだけ読者にメンテの様子を見られないように意識しましょうね。

 

テーマ変更はアクセスが少ない夜中とかにやるのがおすすめで、私は読者が減る時間帯(夜中の1時頃)を狙ってテーマ変更しましたよ。

 

もしくは、対策としてプラグインの「Theme Test Drive」を使うのもアリです。

これを使えば新しいテーマをいじってる間に訪れた読者には、前のテーマのレイアウトで表示されます。

 

テーマを変更する前にすべき事とは?

①バックアップをとっておく!

まずテーマ変更する前にすべきなのは「バックアップ」ですね。

 

テーマ変更するときには、CSSを移し替える作業が入ってくるのでね。

バグった時のために、直近のバックアップを取っておくべきですよ!

 

人気の高いバックアップ専用プラグインの「BackWPup」を使うのがおすすめです。

ちなみに私はサーバー「ロリポップ」の有料オプションでも2重にバックアップをとってます笑

 

②元のテーマのCSSをコピーしておく

さっきもいった通り、テーマを変更するとこんな感じでCSSは消えちゃいます。

 

だからテーマを変更する前に、CSSの内容はどこかにコピーしておきましょうね!

テーマ変更後に、スワローに必要そうなところだけコピペで貼り付ければ簡単です。

いっくん
一から書き直すのとかマジでめんどくさいので、必ずコピーを忘れずに!

③以前のテーマ画面をスクリーンショットしておく。

上の画像は、以前使っていたテーマ「Simplisity2」のスクリーンショットです!

 

先ほど伝えた通り・・・テーマを変更した時に困るのがブログ全体のデザインや、サイドバーの並び順が分からなくなるってことです笑

元のレイアウトがどんな感じだったか分からなくならないように、参考として変更前のブログレイアウトをスクリーンショットしておきましょう!

 

特にカスタマイズした「ウィジェット」や「Style sheet」に記入してたCSSなどは必ず保存しておきましょう。

こんな感じでスクショしておけば、以前のレイアウトを参考にしながらスワローのカスタマイズができるので効率的ですよ。

 

外観の「カスタマイズ」からデザインを修正していく!

私のカスタマイズの流れを説明します

ここからはスワローに変更してからのカスタマイズのやり方を説明していきます。

ワードプレスの管理画面にある「外観」⇒「カスタマイズ」と進んで設定していきますよ!

 

テーマ変更した直後は早急にカスタマイズをやり直す必要があるので、手を付けやすいテーマデザインからどんどん変更しましょう!

いっくん
ここで触れない項目はデフォルト設定のままでOK。

①「サイトの基本設定・ロゴ画像を入れる」

「キャッチフレーズを非表示にする」

初期設定ではタイトル下にキャッチフレーズが記載される設定になってるので、これを非表示にしておきました!

 

「ロゴ画像をアップロード」

テーマを変更すると以前設定してたロゴも外れちゃうのでね。

 

また新たにアップロードし直しました! 

サイズが選択できるので「特大サイズ」にしてますよ。

 

「サイトアイコン」

サイトアイコンはブラウザーの「タブ」や「ブックマークバー」で表示される小さいアイコンのことです。

私はイラストで登録しました!

 

②「サイトカラー設定」

ここではサイトに使われる色を自由に変更できるのでね。

デフォルト設定のままだと個性がないので、自分好みにどんどん変えていきましたよ!

 

「ヘッダー背景、ヘッダーテキスト、リンク色、記事ページ見出し(H2)背景、フッター背景」って感じでね。

 

これこそ前のブログテーマのスクショを参考にして、色を合わせました!

リピーターの方に「あれ?違うサイトになった?」って感じの印象は与えたくなかったので。

 

③「全ページの共通設定」

「ヘッダー サイト内検索ボタン」

これはヘッダー右上の「SEARCH」って書かれた検索ボタンを表示する設定です。

今まではウィジェットで検索を挿入してたけど、見た目的にこっちの方が良さそうなんで採用しました!

 

「カテゴリーラベルの表示設定」

みなさん記事ごとにアイキャッチ画像を設定してると思いますけど。

ここの設定では、画像右上にカテゴリー名のラベルを表示するかどうか決められます!

さりげない見た目が気に入ったので、設定しておきました!

 

「トップページ設定」「記事一覧ページ設定」「背景画像」

この3つは特に設定しないでデフォルトのまま使ってます。

 

④「投稿・固定ページ設定」

「記事・固定ページでアイキャッチ画像を非表示」

最初テーマを変更したら、何故か記事タイトル下に同じ画像が2つ並んでて謎だったんですよ。

原因はアイキャッチ画像の設定でした!

 

ここから設定すれば、記事画面でアイキャッチ画像がだぶつくのが防げます。

コレは絶対やっといた方がいいやつです!

 

「記事下にfeedlyボタンを表示」

Feedlyボタンを表示させたい場合はチェックを入れます!

SNSやってる人は、その上のFacebookとTwitterも設定しといたほうがいいやつですね。

 

「アクセス解析コード」

ここでは「GoogleAnalyticsのトラッキングコード」を挿入できますよ。

 

テーマが変わってトラッキングコードも外れてるので・・・

そのままにしてると読者のアクセス数がカウントされないです!

 

なのでここでしっかり設定しておきましょうね!

 

⑤「メニュー」

テーマを変更した直後は、ヘッダーがこんな感じになってました笑

 

このレイアウトを直すには「メニュー」から操作します。!

この画面から「グローバルメニュー」や「フッター」の表示を設定してスッキリさせましたよ笑

 

ウィジェットなども設定し直します!

外されたウィジェットを直す

テーマを変えるとウィジェットがすべて外れるから、組み直さないといけません。

スワローはPCとスマホで別々に設定できるのが便利ですよ。

 

「Googleアドセンス」や「アナリティクス」の設定も忘れずに!

テーマ変更後は「Googleアドセンス」や「アナリティクス」も外れてます。

この2つの設定は超重要なので、忘れずにやりましょうね!

 

あとアナリティクスで、アクセスをチェックするための「トラッキングコード」ってありますよね?

スワローでは「カスタマイズ」の画面に、入力できる箇所がありますよ!

 

私は「Quick Adsense Setting」というプラグインを使って、アドセンスをウィジェットに挿入してたのでね。

これもウィジェットごと外れてしまったので、設置箇所を設定しないといけませんでした!

 

スワローになったことでレイアウトが変わるので、配置もビミョーに変更しましたよ。

 

必要なCSSを記述する

テーマ変更後は、CSSはまっさらな状態になっちゃうのでね。

 

以前のCSSの内容をメモしておいて、それをコピペしていきます!

設定後はちゃんと反映されたのか、1つずつチェックした方がいいですよ!

いっくん
バグらずに反映されるかどうか、この瞬間が一番ヒヤヒヤします笑 

わたしのケースでは、テーマ変更後に「サイトマップ」のCSSレイアウトがうまく反映されませんでした。

それでしばらくサイトマップページの修正に時間を取られることになりました!

 

不要なプラグインを消す

プラグインのデータはちゃんと保存されてるので、これは基本そのまま信用してOKだと思います。

 

ちなみに有料テーマでは、これまでプラグインで補ってた機能が初期搭載されてたりします。

その場合、そのまま放置してると競合してトラブルの原因になるのでね。

いっくん
必要がないと思うプラグインは早めに停止しておきましょう!

「スライダー付き記事一覧」を設定する

スワローではトップページのヘッダー下に、任意の記事のスライドショーが設定できます!

 

「管理画面→投稿→タグ」でスラッグに半角で「pickup」と入力してタグを新規作成します。

次にタグの設定ページで「新規タグを追加」します。

 

名前は管理者だけが見るモノなので適当につけてOK。

スライドショーに含めたい記事の編集画面のタグに、さっきつけたタグ名を入力します!

 

そうすればタグ名がリンクして、その記事がトップページにスライドショーとして取り込まれます!

この機能は使わないともったいないですよ。

 

パソコン画面が最初動かないと思ったけど、たくさん入れていけば動きます笑

 

これだけカスタムすればOK!

あくまで私のやり方ですけど、とりあえずこれだけカスタムすればOKだと思いますよ。

テーマを変更後の設定に悩んだら参考にしてみてください!

 

ちなみに設定にかかった時間はザックリ2時間です!

少し手を加えてこんなに見栄えするんですからね。


私はこれから更に手を加えてより完璧を目指しますよ!

みなさんもスワローの洗練されたデザインを楽しみましょうね。

公式サイト

 

いっくんのまとめ

今回は、ワードプレスのテーマを「Simplisity2」から「スワロー」へ乗り換えた話でした。

 

テーマ変更後は色々とやることがあるので大変です。

変更直後は「このままじゃまずいかも・・・」って感じるはずです笑

 

手を付ける順番は人それぞれだと思うし、1つの参考としてください!

 

スワローはさすが有料テーマだけあって、自分のスキルじゃ再現できない綺麗なレイアウトです。

時間と労力をお金で買った感じでしたけど、これはかなり有益でしたよ!

公式サイト