WordPressのテーマ変更 ～ GiraffeからAFFINGER5へ

今年の目標の一つだった、サイトのデザイン変更をついに･･･

「WordPressのテーマを変更だ！」

お世話になっていた無料テーマのGraffeから、有料テーマのAffinger5に変更しました。

まだ使い始めたばかりで全ての機能を使えていませんが、今までGiraffeでやっていた基本的なところは、ほぼ動かすことができました。

ちなみにこれ、テーマ変更後初めての記事^^

WordPressを考えている方に、テーマ選びの参考例です

テーマ変更を考えている方に、「こうしたら出来たよ」という作業例です

どこかひとつでも、参考になれば幸いです。

サイトデザイン変更って、大変？

今年の目標、デザイン変更

コロナウイルスに振りまわされた2020年ももうすぐ終わろうとしていますが、今年やろうと思っていたことのいくつかに、駆け込みで取り組んでいます。

息子の赴任先である福岡に〇十年ぶりの夫婦旅行に行ったのもそれですし、パソコンのSSD化もそれ。

やれたこと・まだ出来ていないこと、他にも沢山ありますが、このサイト関連でいえば

★ コラム100記事　　←5月に達成！
★ 有料テーマに変更　←今ココ
☆ 記事リライト　　　←次これ
☆ サイト構成再検討　←次これ
☆ ・・・・　　　　　←盛り沢山の図

など、やりたいなーと思っておりました。特に、

100記事書けたら有料テーマでサイトデザインを一新しよう！

を今年の目標の一つにしていたのですが、ヒーコラ書いてたらいつの間にか100記事はとっくに超えていたものの、まとまった作業をする時間とタイミングがありません。

･･･とか言いながら沖縄には行くわ 福岡にも行くわ、そういうことは優先するんですけどそれはおいといて ^^;

やっと腰をあげました

それでも、テーマ変更のやり方や、どのテーマがいいのかとかはちょこちょこ調べてはいたので、福岡から戻って数日後ようやく「よーしやるかぁ！」とテーマ購入、作業開始。

夜、晩ごはん食べてお風呂入った後の作業で4日かかりましたが、とりあえず不具合が無さそうなレベルになったところでリリース！　･･･現在に至る。

パソコンのSSD化と同じく「早くやればよかったじゃん」って話なんですが、どのくらい大変なのかはやってみないとわからないものでして。

WordPressのテーマ変更の場合、トラブったらサイト全体が止まっちゃう大事故になるかもしれない･･･　もしそんなことになったら･･･

とか考えると、どうしても慎重になってしまうのでした。

WordPressテーマの選び方

そもそも最初は「WordPress」って単語自体にビビってた私です、知識ゼロだったんで。

でも、起業するからにはコラム書いて行こう、サイト育てていこうと決めたので、プラットフォームとしてはCMSのスタンダードであるWordPressを避けて通るわけにはいきません。

WordPressで書いておけば、デザイン的なところは有料無料種類豊富な「テーマ」の中で工夫したり、「テーマ」自体を差し替えることで、自分の好みに変えることができます。

しかしこの「テーマ」の差し替え、壁の画をかけ替えるように簡単にはいかないようで…

以下、私のWordPressテーマの変遷です。

まずは無料テーマ「Giraffe」でスタート

２年前にブログを始めるにあたり、どういうサイトにしたいのかモヤモヤしている段階でWordPressテーマを決めてしまうのもどうなんだろう…　と思い、

最初は無料のWordPressテーマを使って、記事を書きながら勉強して行こうと思いました（１万円２万円をケチったわけでは、なく… ^^;）。

そんな時にたまたま教えてもらったのが、デジタルマーケッター松原潤一さんがリリースしている、シンプルで無料なWordPressテーマの「Giraffe」。

Giraffeは、有名な無料テーマのStinger5をジュンイチ氏がカスタマイズしたもので、見た目と機能のバランスがちょうどよさそうに感じました。

何より、ジュンイチ氏の解説記事や動画解説が豊富で、これならどうにか出来そう！　WordPressの本も買いましたが、ほとんど読まなかったかも。

それまでもお世話になっていたさくらのレンタルサーバで、ドキドキのWordPress運用を開始しました。

書きたいことが固まってきたところで有料テーマへ

サイトのデザインに気が行きがちですが、大切なのは中身。ブログを始める人は多いですが、続く人は少ないそうです。

ブログを始めるにあたって大事なのは、

何を書くか
誰に伝えたいか

です。私の場合は

定年後のセカンドライフへの準備や心構えを
定年間近の50代サラリーマンに向けて伝える

ことを軸にしようと決めましたが、その時々で書きたくなったことも、大きく外れない範囲で書いてきました。

そんなこんなで頑張って50本ぐらい書くと、大体自分が書けそうなジャンルがわかってくるもので、サイトのデザインやカテゴリー分けについてもぼんやりとイメージができてきます。

そのあたりから有料テーマへの変更を考え始めました。

とまぁこれは私の場合ですが、

理想的には、最初から記事やカテゴリーなどのサイト構成が固まっていて、デザインイメージがあって、それに適した有料のWordPressテーマを最初から選んだ方が、後々の手間が省けます。

たとえば、

• 料理のブログ
• 単身サラリーマン向け
• 簡単料理と酒のつまみをメインに
• たまには単身の愚痴を入れながら
• 写真を大きくデザイン性重視

のサイトを作りたい場合。

相当数のレシピや話のネタがあって、サイト設計の最終イメージができているなら、デザインイメージを実現できそうな有料WordPressテーマを選んで作り始めた方が早いですね。

有料テーマの方が確実に素敵なサイトに仕上がるし、マニュアル類もしっかりしています。

どれも素敵、有料テーマ

WordPressの有料テーマはたくさんあって、「WordPress　テーマ　おすすめ」などと検索すると、比較やレビューをしているサイトが多数。

ブロガーさんのレビューを見るとどれもよさそうで、特にご自身が使っているテーマへの推しは強かったりします、当たり前だけど。

時々思い出したように調べる中で重視したのは、

といったところでした。

安定の「Affinger5」に決定！

そんな中で「Affinger5」を選んだのは、上記の条件をすべて満たしているのと同時に、

という点にあります。

カスタマイズの自由度については、自由度が大きすぎて逆に難しいという意見もありますが、何もしなくてもそれなりに表示してくれるはず（本当か？）。

将来何かしたいときのために、自由度が大きいのはきっとメリットだ。

それより何より、「今使っているテーマとベースが同じ」＝「移行した時の問題が少ないはず」というポイントが大きかったです。

必要なプラグインなども共通するものが多いのではないかと。

この予測は大体当たっていたのですが、そうでなくても定評あるよく出来たテーマなので、

どうしてもこれじゃなきゃというテーマが他になければ Affinger5を買っておいて間違いないと思います。

　↓ 概ね間違いない ^^

テーマ変更にはテスト環境が必須

サイト全体のデザインを決めるWordPressテーマは、サーバー上のWordPress管理画面にアクセスして、使いたいテーマを選んで適用することで、一発で変更できます。

新しいテーマをアップロード、選択して、有効化。
たったそれだけで、サイトのデザインが一新！！

･･･なのですが、テーマごとに方言があって調整が必要。

最初はたぶん、テーマの変更はできても表示がぐちゃぐちゃになりかねません。

いきなり本番サーバで作業すると、修正の作業も見られてしまうことに。それは嫌だ･･･

さくらのサーバーは、テスト環境が簡単に作れます

何せ私、ドキドキのテーマ変更初心者ですから、そうすんなりと行かないだろうという確信はありました。

そんな私の強い味方だったのが、さくらのサーバーの「バックアップ＆ステージング機能」！！

簡単に言うと、

ということがサーバー上でできるものです。

しかも「無料」で使える！グレイト！！

お陰様で、安心していろいろ試すことができました。

ちなみに、さくらのサーバーではバックアップのことを「SNAPSHOT」といい、8世代のスナップショットが可能（定期／手動）。

これまた安心です。

　↓ 何かと安心、さくらのサーバー

ステージングサイトで納得いくまでテスト

バックアップ＆ステージングで作ったWordPressサイト（ステージングサイト）は、本番サーバで公開中のものとは独立して編集することができます。

ステージングサイトでインストールしたテーマやプラグイン、編集内容は、完成後に本番サーバーにそっくりそのまま入れ替えることができます。

つまり、公開中のサイトへの影響を気にせずに、新しいテーマのテストができるというわけ。

私のようなビビりの素人には、まことにありがたい機能です。

案の定、テーマを変えたら「思ってたのとなんか違う」ことになっている部分がいくつもあって、ステージングサイトでじっくり修正させていただきました。

ちなみに、スナップショットしたステージングサイトの有効期限は3か月だそうです（スナップショットし直せば延長可）。

3ヶ月もあればきっと、なんとかなりますね。^^

本番サーバーにリリースして公開！

ステージングサイト上で変更・修正が終わったら、

ステージングサーバーのスナップショットをとり、それを本番サーバーにリリースする（これでステージングサイトが本番サイトに入れ替わる）ことで公開できます。

本番サーバーにリリースするときはドキドキでしたが、30秒ぐらいでリリース完了！

テストしていたのと同じサイトが公開されました。

おぉ、ちゃんと入れ替わってる！^^

無事、テーマの入れ替え作業ができました。

リリース前に本番サーバー側のスナップショットをとっておけば、何かあっても元に戻せます。安心ですね。

GiraffeからAffinger5、移行でのポイント

同じようにAffinger5を使い始めようという方のために、テーマ移行で気を付けるべきポイントをお伝えします。

特に、私のようにGiraffeからAffinger5への移行をお考えの方には、いろいろ参考になるのではないかと思います。

そして私のようにWordPress初心者寄りの方には、けっこう参考になR ＜もういい^^

マニュアルの動画は見ておこう

無料テーマでWordPressの作業をしていた人なら、購入後すぐにいじりたくなるかもしれません（ワタシだよ）が、ちょっと落ち着きましょう笑

購入したらダウンロードできるファイルの中に、マニュアルへのリンクとパスワードがありますので、そこからマニュアルが見れます（購入者限定）。

最初に言っておくと、マニュアルサイトはあまりわかりやすいとは言えません（個人の感想です）。

初心者向けのような手取り足取り感はないので、検索して調べた方がわかりやすいことも多々あり。

しかし、まずはマニュアルのHomeサイドバーにリンクされている、「スタートガイド」とその下の解説動画２つは見た方がいいです。

ちなみに、解説動画は「ぱるちゃんねる」さんのYoutubeからのリンクなので、購入前でも見ることができます。

こんな感じか～、ってのをざっくり知りたい方は先に見ておくのもいいかも。あとで見なおしたくなるポイントがあるかもしれません（それ私ですね）。

動画、ありがたい。

Youtube独特の早口で展開早い動画ですが、負けないで ^^

ヘッダー画像が表示されない？

　　旧デザインで使っていたヘッダ画像

テーマ変更していきなり、「あれ？」と思ったのは、

トップページの上部に表示されていた「ヘッダ画像（上の画像の、海に映る月の写真の部分）」が表示されなかったこと。

画像サイズを変えてみたり、設定をいじってみたりしましたが、何をやってもダメ。

そんなはずはないとムダに時間を使ってしまいましたが、他にも同じ経験している人いないかと検索してみたら、･･･いらっしゃいました。

早くネットに聞けばよかった･･･

私の場合もこの方と同様、ヘッダ画像エリアのウィジェットが問題でした。

Giraffeで設置したアドセンスのコードが、なぜか最初からウィジェットとしてこのエリアに追加されていて、ヘッダ画像の表示を邪魔していたらしい。

これを消去したら問題解決！

ヘッダ画像が表示されるようになりました。

無事に画像が表示されるようになったところで、ついでにスライド表示とか試してみたら超カッコいい！

ということで今は、ヘッダー画像エリアを記事スライドショーにしています。

設定する場所は、

Affinger設定＞ヘッダー＞記事スライドショー設定

お試しください。

プロフィールカードを使うとおしゃれ

サイドバー（右上）にプロフィールを表示させております。

今まではサイドバーウィジェットにビジュアルエディターで作っていたんですが、

Affingerでは「プロフィールカード」というのがあって、素敵なプロフィールのウィジェットが簡単に設置できます。

設定する場所は、

外観＞カスタマイズ＞オプションカラー＞サイト管理者紹介（プロフィールカード）

ここで作ったものが、右サイドバーに表示されています。

ありあわせの素材で作りましたが、ヘッダー画像が設定出来たりしてなかなか素敵！

下記を参考に設置しました。

Google連携の設定

Google関連の設定は引き継がれないので、テーマを変えたら再設定しないといけません。

Googleサーチコンソールの設定は、

AFFINGER5管理＞Google/広告・AMP＞サーチコンソールHTMLタグ

どういう検索ワードで訪問してくれたのかがわかるようになります。

Googleアナリティクスの設定は、

AFFINGER5管理＞Google/広告・AMP＞トラッキングID

サイトへのアクセス数がわかるようになります。

Googleアドセンスの設定は、

AFFINGER5管理＞Google連携／広告＞Google自動広告の設定

で行います。

でも AFFINGER5にしたからには、自動広告ではなくて 外観＞ウィジェット で好きなところに設置した方がいいでしょう。

アドセンス運用については、もっと勉強しないといかんですね。^^

プラグインの整理（削除、追加）

Affinger5の必須・推奨プラグインは、購入特典のひとつである「稼ぐサイトの設計図」PDFに一覧が載っていましたので、そちらを参考にしてください。

基本的にはGiraffeで使っていたプラグインがそのまま使えるのでホッとしました。

但し、いくつか注意点があります。

あと、プラグインが多すぎると表示が重くなりますので、あれもこれもと入れない方がいいようですね。

プラグインとGoogle連携についてのわかりやすい動画、ぱるちゃんねるさんのYoutubeをご参照ください。

記事一覧表示のいろいろ

Affinger独自の記事一覧設定を含め、「記事一覧」を設定するところがいくつかあって混乱するので整理しておきます。

関連記事は、Related Posts プラグインか、Jet Pack プラグインのどちらかにした方が、画面がすっきりします。

記事一覧をお好きなところに表示させて、他の記事も読んでもらいましょう。

フォント設定

デフォルトでは、スマートフォンのフォントサイズがちょっと大きく感じたので、調整しています。

デバイスごとにフォントサイズを調整できるのもAffinger5のいいところですね。

Affinger管理＞デザイン＞フォントのサイズ

記事レイアウトの崩れなし！

今回の作業でありがたかったのは、何といっても

記事レイアウトの崩れがなかった！！

ことです。

全部の記事をチェックできていませんが、見た限りでは特に修正の必要なく、hタグや全体デザインの変更がちゃんと反映されていて、記事としての体をなしています。

もし記事レイアウトが崩れていたら100以上の記事を全部修正して回らなければならなかったので、これは嬉しい。

旧テーマのGiraffeと同じ Stingerベースで作られているからでは、と思っています。

これは本当にありがたいことでした。

印象：意外とスムースにできた！

WordPressテーマの変更についてはサイト立上げ当初から考えていましたが、具体的に検討を始めたのは半年ほど前でしょうか。

ずいぶん時間がかかりましたが、やってみて感じたのは「意外とスムースにできたな」ということ。

GiraffeからAffinger5というのが、割と素直な変更ルートだったからかもしれません。

さくらのレンタルサーバーにテスト環境があったことが背中を押してくれたのは、間違いありません。

テスト環境があるサーバーは他にもあると思いますが、レンタルサーバーを選ぶ時のひとつの基準になりますね（特にサイト運営を考えている場合）。

おすすめです、Affinger5！

さて、この記事は初めてAffinger5で書いていますが、いかがでしょうか。

文字装飾やアイキャッチが実に豊富で、色々試しているだけで時間が経ってしまいます（ずいぶん賑やかになってしまってやめてみたり）。

今はまだ慣れるのに必死で全部を使いこなせていませんが、「こんなのあるかな」というのが大体そろっているのはありがたいですね。

無理に写真を探さなくても文字装飾やボックス表現だけでアイキャッチになるので、表現に幅ができます。

結構楽しい ^^

どんな内容のブログでも、それにあった表現やサイトデザインが可能なAffinger5、おススメできます！

特にGiraffeを使っている方は、比較的乗り換えもスムースだと経験者から一言添えておきましょう。( ´∀｀ )

WordPressテーマの選択・変更で悩んでいる方のご参考になれば幸いです。

追記：「ディスクリプション」が消えた！

2021.1.20追記

テーマ移行時には気がつかなかったのですが、

Giraffe で設定していた記事ごとの「ディスクリプション」が、消えていました！

• Giraffe：「SEOディスクリプション」
• AFFINGER5：「メタディスクリプション」

項目名の違いが原因でしょうか。･･･これは痛い！

AFFINGER5の「投稿一覧」画面には「ディスクリプション」の欄が表示されないので（Giraffeには表示欄あり）気がつきませんでした。当然引き継がれていると思ってた…

SEO的に弱くなることが予想されます。

実際、このサイトへのアクセスが年明けに2/3ぐらいにがた落ちしてしまいました。お正月だしそんなもんかなと思っていましたが、回復の兆しなし。

もしかしたら、このせいかも･･･

AFFINGER5では「メタキーワード」の指定もできるので（Giraffeではなかった項目）、

この際だ！

メタディスクリプションの設定しなおし、
ついでにカテゴリーとタグの再整理、
これまたついでに全記事リライト、

に励んでおります。

気がつけば137記事、なかなかきつい･･･

がんばろうっと ^^