WordPressテーマをCocoonに変更したら、とりあえずやるべき、5個の初期設定

screenshot_02

さて、WordPressテーマをCocoonに変えました。その時の忘備録として、書いておきます。Simplicity2からCocoonに、WordPressテーマの変更を考えている方の参考になればと思います。

なお、私はあまりプログラミングの知識はあまりないので、Simplicity2の時はあまりカスタマイズしていません。ゴリゴリにカスタマイズされている方は、こちらの記事が参考になると思います。

WordPressテーマ変更時の注意点&エラー対処法&事前準備の手順【プラグインでテストせよ】
こんにちは!何も考えずSimplicityからCocoonにWordPressテーマを変更しちゃったはまちゃん…

初期設定として、することはたくさんあるのですが、まず私がしたことを紹介します。凝りだすとなかなか終わらないので、ヘッダーやスキンの設定をする前に、とりあえずこれだけはやっておけということです。

見た目に関すること

初期設定中でも、ブログを訪れてくれる方がいるかも知れません。その方が、何だこのページは?と思わないために、とりあえず見た目の違和感を取り除きます。

ヘッダーやスキンの設定をする前に、これだけは、やっておくほうが良いのではないかと。

トップ画像が2枚表示問題

Cocoonに変えた後すぐに記事をチェックすると、まずびっくりするのが、トップ画像が2枚表示されていたこと。これはアイキャッチ画像が本文上に表示される設定になっているからです。

過去の投稿は、基本的に本文中、最初に出てくる画像がアイキャッチになるようになっていました。なので、アイキャッチが本文上に表示されると、同じ画像が2枚表示されることになるのです。

これを解消するには、Cocoon設定>画像タブの、アイキャッチの表示で、「本文上にアイキャッチを表示する」のチェックを外します。

目次ダブリ問題

トップ画像につづき、目次も2つ表示されていました。

これは目次を作成するプラグイン(Table of Contents Plusなど)を入れてる場合におきることです。Cocoonは目次を作成する機能があり、デフォルトで目次を表示するようになっています。

私はできるだけプラグインはないほうが良いと思っているので、プラグインを停止しました。Cocoonの目次をなくす場合は、Cocoon設定>目次タブの、目次の表示で、「目次を表示する」のチェックを外します。

グローバルメニューが2段になっている問題

Global_menu

グローバルメニューとは、赤で囲んだ部分のことです。

Cocoonに変えてすぐのときは、2段になっておりました。メニューの文字数やメニューの数自体が多いと、2段になってしまいます。

Cocoon設定>ヘッダータブの、グローバルナビメニュー幅で、「メニュー幅をテキストに合わせる」にチェックを入れると、1段におさまる場合もあります。

必ずしも1段になるわけではないですが、とりあえずこれをやってみるといいかもしれません。

グローバルメニューのアイテム幅をテキストサイズに合わせる方法
グローバルナビのトップメニューアイテムの横幅をテキスト幅に合わせるカスタマイズ方法です。

これを読んで、私はメニューの数を減らしました。この機会に見直すのも、いいかもしれません。

以上で、必要最小限の見た目に関する設定は終わりです。

アクセス解析に関すること

次にするのは、アクセス解析に関することです。初期設定中でも、ブログを訪れてくれる方がいるかも知れません。このときのアクセスがカウントされないと、ただでさえ少ないアクセスがさらに少なく…

多くの方がアクセス解析として使っているのが、Googleアナリティクスとサーチコンソールと思います。

すでにIDを取得している方は、Cocoon設定>アクセス解析・認証タグの、それぞれの欄にIDを入力するだけです。

Google Analyticsでアクセス解析する方法
Google AnalyticsのトラッキングIDをテーマに登録する方法です。
Google Search Consoleに登録する方法
Google Search Console用のサイト認証タグを表示させてサイト登録を行う方法です。

グーグルアドセンスに関すること

こちらはグーグルアドセンスをされている方、限定です。長々と初期設定をしていて、機会損失してはいけません。ある意味真っ先にすべきかも。

Cocoonに変えると、サイドバーウィジェットが、自動的に使用停止になるものがあります。私の場合は、広告のウィジェットが停止になっていました。サイドバーの広告がなくなるのです。

これを表示させるには、ウィジェットを再設定しなくても、大丈夫。一括で簡単に、グーグルアドセンス広告を、表示させる機能があるのです。

まずCocoon設定>広告ダブの、広告コード欄に、アドセンスのレスポンシブ広告コードを入力。広告の表示位置で、それぞれチェックを入れるのと、横にある詳細設定で、フォーマットを選べば終了です。

広告(AdSense)を手っ取り早く設定する方法
Cocoonテーマ利用時における、最も簡単なAdSense広告設定方法の紹介です。

Simplicity2に比べて、格段に便利になりました。アドセンスの広告コードを貼り付けるだけでいいのですから。表示位置やフォーマットも簡単に設定できるので、変更するのも簡単です。

まとめ

以上が、必要最小限の初期設定です。

Cocoonに変えてすぐは、ヘッター画像がなくなったり、見た目が寂しいと思うかもしれませんが、それはじっくりと設定していけば良いと思います。

とりあえず見た目の違和感を取り払うことが、一番じゃないかと思うのです。

最後に、サムネイル画像のサイズが、揃わない問題がありました。私が使っている画像サイズが、正方形であったり、横長であったりとバラバラなので、サムネイル画像も高さが揃っていませんでした。

ブログのインデックスページ(ホーム)の画像の大きさがバラバラで、非常に気持ち悪いのです。これは「Regenerate Thumbnails」というプラグインを使い、サムネイルを再生成することで、解消されます。

テーマが利用しているサムネイルを再生成して最適化する方法
Force Regenerate Thumbnailsプラグインを用いて、テーマ上のサムネイルを再生成し、画像できるだけ綺麗に表示する方法の紹介です。

ただ、画像数が多いと、大変時間がかかります。私のブログは画像が大量にあるので、再生成に3時間弱かかりました。

途中でキャンセルすると、余計な画像ができたり、サムネイル表示がされないこともあるようです。また不具合などがあれば、すべておかしな画像になってしまう可能性も。

いろいろとリスクはあるのですが、見た目的には直したいところです。しかし、カラム幅などの設定を変更した場合、おかしくなるかもしれませんので、これは設定が固まってからおこなうのが良いかと思います。

なお、サムネイル画像は標準で横長になります。デフォルトで、サムネイル画像を正方形にする機能はないとのことなので、

サムネイルなど画像サイズの正方形化
いつも大変お世話になっております! 最近SimplicityからCocoonにテーマ変更させていただきました。 ブログカードやサイドメニューの記事リストの画像が横長なので、全て正方形に変更しようと思い、以下を試してみました。 ページ送りのサムネイル画像のサイズについて テーマが利用しているサムネイル...

こちらにあるように、子テーマの「functions.php」に記述すれば、可能のようです。