記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
はてさて連日のブログネタでありますが、メモ的な意味も含めてWordPressのテーマ変更時に行ったことを、すべてまとめておきます。
今回は、油断して手痛い失敗をしてしまったので、この記事を見て同じ失敗をしないようにしていただければ幸いでございます。
実際のテーマ変更時は、順序的にも合理的でなかったので、この記事では理想的な順序で書いておきます。
Table of Contents
まずは、現在の環境のバックアップ
サクッと新しい環境にしちゃいたい気持ちを抑えて、まずは現在の環境のバックアップをとっておきましょう。
どうしても新しいテーマの設定がうまくいかずに、切り戻さないといけないこともあるかもしれませんし。
まあ新しいテーマを入れても、古いテーマが消えるわけではありませんが念押しでとっておきましょう。
あとウィジェットなどは、テーマを変えたときに新しいデザインに馴染むように設定を変えたりすることもあります。
こちらはテキストファイルなどに情報を保存しておいた方が良いかもです。
テーマのダウンロードと説明の確認
Stinger5は、公式ページからダウンロードできます。常に導入時点の最新版をご利用になると良いかと思います。
Stinger5公式ページ
公式ページには、Stinger5のテーマの使い方や留意点が書かれています。
先日の記事にも書きましたが、Stinger5は、あらかじめテーマそのものに色々な機能が組み込まれています。
これまで使っていたテーマでは必要だったプラグインが、不要になることがあります。
場合によっては、プラグインがStinger5と競合して、エラーが出ることもあります。
いわいの場合、No Self Pingsというプラグインが干渉して、エラーが出ました。
こういった不具合が起こらないように、説明をしっかりと読んでから、テーマの導入を進めましょう。
テーマのインストールと子テーマの作成
Stinger5のインストールは、公式ページの手順に従って行いましょう。特別なことは無く、WordPressの管理画面から、テーマを選んでインストールするだけです。
次に子テーマを設定します。子テーマを入れておくことで、元々のテーマ（親テーマ）には手を加えずに、テーマをカスタマイズできます。
子テーマに加えた変更が先に読み込まれて、親テーマに反映されるそうです。
子テーマのフォルダを作ったら、カスタマイズしたいファイルをそちらに入れて、編集します。この時点では、子テーマフォルダは、パソコン側（ローカル）に置いておき、最後に、サーバにアップロードします。
Macを使っている人には、TransmitというFTPソフトが、使いやすくて、オススメです。いわいも愛用してます。
子テーマフォルダをサーバに設置し、諸々の設定が完了すると、WordPressのテーマを管理する画面に、子テーマが出てきます。こちらを有効にしないと、子テーマが有効にならないので、ご注意を！
いわいは、これを有効にしておらず、数時間分のアクセス記録を取り損ねてしまいました（涙）
ファビコンの変更
Stinger5のファビコンは、logo.icoというファイル名で、テーマフォルダ直下のimagesフォルダ内に設置されているので、これを任意のファイルに差し替えます。
子テーマ内のファイルに行う設定
ここから先は、必要なphpやcssのファイルを、子テーマにコピーして、そちらを編集していきます。
Google Analytics、Ptengine、Twitterカードのコード貼り付け
Google Analyticsと、Twitterカードのメタタグは、header.php、Ptengineのコードは、header.phpとfooter.phpにそれぞれ、貼り付けます。
NEW POSTの表示場所変更
Stinger5では、サイドバーの「NEW POST」という文字の下に、新着記事のサムネイルと見出しが、表示されるようになっています。
NEW POSTの位置は固定になっていて、その下にウィジェットが並ぶようになっています。
NEW POSTよりも上にウィジェットを設置したい場合は、sidebar.php内のタグの位置を変更します。
「NEW POST」という見出しの文字も、こちらのファイルで変更できます。
WP Popular Postsの表示をNEW POSTと揃える
アクセスの多い順に、記事のサムネイルとタイトルを表示してくれる、WP Popular Postsという定番プラグインがあります。
Stinger5のNEW POSTと、WP Popular Postsのデザインを揃えたいと思っていたところ、次のページに、ズバリそのやり方というか、コードが公開されていたので、使わせてもらいました。ありがとうございます。
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする
各記事のSNSアイコンにPocketを追加
Stinger5では、各記事の一番下に、TwitterのRTや、Facebookのいいね！の数が表示されるアイコン（SNSアイコン）が並んでいます。
この中に、Pocketというサービスのアイコンが無かったので、次のページを参考に設置しました。ありがとうございます。
【Stinger3カスタマイズ】SNS関連の変更箇所と変更方法
サイドバーのSNSアイコン変更
ウィジェットで、サイドバーにSNSアイコンを設置し、自身のTwitterやFacebookページのリンクを貼っていましたが、Stinger5にしたところ、位置合わせがうまくできなくなりました。
一通りの設定が終わったら子テーマをサーバに設置！！
各種ファイルの設定が一通り終わったら、子テーマフォルダを、サーバにアップロードします。
上の方でも書きましたが、最後に、WordPressの管理画面で子テーマを有効にしないといけないので、お忘れなく！！
テーマ変更の際にやっておくと良いこと
プラグインの見直し
Stinger5公式ページに詳しく書かれていますが、Stinger5では、プラグイン不要で、色々な機能が標準搭載されています。
標準機能とプラグインが干渉して、不具合の原因となる場合もあるし、そうならないとしても、不要なものは、止めるか削除した方が良いです。
テーマ変更のついでに、プラグインを見直しておきましょう。いわいの場合、結構、要らなくなったプラグインがあります。具体的には次の通り。
- AdSense Manager
- Quick Adsense
- No Self Pings
- Lazy Load
- Head Cleaner
Stinger5では、Adsenseのコードが簡単に設置できるようになっているので、Adsense系のプラグインはいらなくなりました。
OGPの設定を再確認
いわいの場合、OGPは、WP-OGPというプラグインを使って設定しています。
FacebookのデバッガーでOGPの設定が正しいかどうか、改めて、確認しましょう。
Facebookデバッガー
それにしても、Stinger5は、色々と使いやすくて、良く出来てますね。これが無料とか、本当にありがたいです。
開発者の方には、心より御礼申し上げます。<(_ _)>
