cocoonは寝ログ運営者のわいひらさんが作ってくれたワードプレス無料テーマです。ほんとに高機能ですごい。導入してから大体カスタマイズが終わったので、わたしがやったcocoonのカスタマイズを書いておきます。
作業があるところはこのように黄色マーカーをしておきます。
必要ないプラグインの削除
cocoonにはほんとにテーマ自体にたくさんの機能がついているので、今まで使っていたプラグインと重複するものは削除します。
プラグインは少ないほうがサイトの動作も軽くなりプラグイン同士の不具合も避けやすくなります。
wp social bookmarking lightの削除
cocoonにはsnsボタンをつける機能があります。
わたしの場合は、このプラグインでツイッターやはてブなどのsnsボタンを設置していたのでまずはこれを削除。
削除の仕方はメニュー→プラグイン→停止→停止中のプラグインから削除でできます。削除せず停止したままでも大丈夫です。
公式のコードを使って自作していた方は、そのコードを削除します。
autoptimizeの削除
これは、ＨＴＭＬとCSSとjava scriptの縮小に使っていました。
これらを縮小しないとページの表示速度がかなり遅くなってしまい、ページ離脱が多くなってしまうので必須プラグインでした。
cocoonはチェックを入れるだけでＨＴＭＬとCSSとjava scriptを縮小してくれます。
削除は先程と同じようにメニュー→プラグイン→停止→停止中のプラグインから削除。
さらにcocoonはブラウザのキャッシュも有効化してくれます。autoptimizeのプラグインはブラウザのキャッシュには対応していなかったため、別の作業が必要でした。
ブラウザのキャッシュについては、グーグルの提供するページの速度を測ってくれるpage speed insightsというサイトでブラウザのキャッシュを有効化してくださいと指定されていたんですが、この設定がややこしくて難しかったため放置していました。
が、cocoonはチェック一つで有効化してくれたのでほんとにありがたいです。
ＨＴＭＬとCSSとjava scriptとブラウザのキャッシュの有効化方法はメニュー→cocoon設定→高速化。
サイト高速化という画面で
ブラウザキャッシュの有効化
HTMLを縮小化する
CSSを縮小化する
JavaScriptを縮小化する
に全てにチェックを入れて変更を保存をクリックで完了です。
ヘッダー画像の圧縮と設定
画像圧縮にはEWWW Image Optimizerというプラグインを使っていたんですが、これはすべての画像を自動的に圧縮してくれるものです。
でもなぜかヘッダー画像だけは圧縮できなかったので、page speed insightsでかなり点数が悪くなっていました。
なので別途ヘッダー画像だけ圧縮することにしました。
このサイトを使います。
これは登録も必要なく簡単にすぐ使えて便利です。
サイトに行くとこのような画面になります。
箱に矢印が書いてあるところ（drop your png or jpg file here!のところ）をクリックすると画像を選択できるのでヘッダーにしたい画像を選択。
するとこのように自動で圧縮してくれます。88%圧縮できました。
そしたらfinishedの横のdownloadおせば画像を保存できます。
つぎにこの画像をヘッダーに設定します。
ヘッダー画像の設定方法はメニュー→cocoon設定→ヘッダータブをクリック。
ヘッダー背景画像のところで選択をクリックして先程ヘッダー用に圧縮した画像をアップロードしたら完成です。
画像サイズの設定
ふつうに画像を貼ると小さくなってしまったので、ワードプレスの管理画面で画像サイズの設定をします。
ここで設定すれば大きさを変えられるので、画像を集めなおす必要はありません。
メニュー→設定→メディアで
サムネイルのサイズ：300×300
中サイズ：500×500
大サイズ：800×5000
に設定するとちょうどよくなります。
ファビコンの設定
ファビコンはサイトの横にちょこんと出る画像のことです。
設定方法は、メニュー→外観→カスタマイズ
サイトの基本情報という画面になるのでサイトアイコン欄から画像を設定して最後に公開をクリック。
アドセンスの設定
グーグルアドセンスの設定をします。
貼りたい広告のコードをコピー→メニュー→cocoon設定→アドセンスの設定の広告コード欄に先程コピーしたコードを貼り付ける→まとめて保存
広告の表示位置の欄で広告を表示したい場所が選べます。
わたしはインデックスページのトップとボトム2つと投稿ページのタイトル下、本文中、本文下、関連記事下の4つに合計6つにチェックを入れています。
フォーマットは変更せずデフォルトのままにしてます。
アドセンスポリシーに違反しないよう気をつけてください。
アクセス解析の設定
グーグルアナリティクスとサーチコンソールの設定もできます。
自分のアナリティクスのトラッキングIDをコピー→cocoon設定→アクセス解析→googleAnalyticsトラッキングIDのところにさっきコピーしたIDを貼り付ける→変更をまとめて保存
私はall in one seo packというプラグインの方でグーグルアナリティクスの設定をしてあるのでこちらはやってません。
サーチコンソールもアナリティクスと連携してあるので特に設定はやってません。
AMP表示の設定
AMPは投稿ページをモバイル上で高速表示させるための仕組みです。
メニュー→cocoon設定→AMPタブ→AMP機能を有効化するにチェックを入れる→変更をまとめて保存。
内部リンク外部リンクの開き方設定
私は内部リンクや外部リンクを開くときは、新しいタブで開いてくれると便利で好きなので新しいタブで開く設定にしています。
メニュー→cocoon設定→ブログカードタブをクリック。
内部ブログカード設定のところで新しいタブで開くにチェックを入れる。
同じく外部ブログカード設定のところの新しいタブで開くにチェックを入れて変更をまとめて保存をクリック。
投稿者名の表示変更
ちゃきをフォローするというちゃきのところの名前の変更する方法です。
私はedit author slugというプラグインを使っていますが、これは日本語表示にはできなかったのでワードプレス上で変更していきます。
メニュー→ユーザー→あなたのプロフィール→ニックネーム（必須）のところで表示したい名前を入力→ブログ上の表示名のところを今入力した名前を選択→変更を保存
フォローするのところにツイッターの追加
デフォルトではフォローするのところにfeedlyしかないのでツイッターを追加します。
メニュー→ユーザー→あなたのプロフィール→twitter URLのところにhttps://twitter.com/@を抜いた自分のツイッターアカウントを書き込んで保存。
カテゴリー・最近の投稿・サイト内検索・最近のコメントの位置変更
デフォルトだとこんな感じでタイトルの上に最近の投稿やらカテゴリーがあって見づらくなっていたので、すべて投稿関連記事の下に移動させました。
メニュー→外観→ウィジェット
投稿本文上の小さな三角マークをクリックすると検索、最近の投稿、カテゴリー、最近のコメントが出てくるのでこれを移動させる。
表示したいところにドラッグして保存
わたしは投稿関連記事下に移動させました。
カテゴリーの階層表示
カテゴリーはワードプレスの方で親カテゴリー子カテゴリーに分けているんですが実際の表示を見てみると全部並列になっていたため、階層表示の設定をしました。
メニュー→外観→ウィジェット→カテゴリーを設置したところを開く→カテゴリーを開いて３つ全てにチェックを入れて保存→完了ボタン。
ドロップダウンや投稿数はお好みなのでチェック外してもいいです。
関連記事の名前を変更
これはそのままでもいいですが、関連記事と表示されるのをこの記事を読んだ人はこれも読んでいます。という表示に変更しました。
心理学的に人間は他の人もやってるならやろうという意識が働くからです。
メニュー→cocoon設定→投稿タブ→関連記事設定の項目で関連記事見出しのところで関連記事を表示したいものに書き換える→変更をまとめて保存
パンくずリストの位置変更
パンくずリストは上にある方がわかりやすいので、カラムボトムからカラムトップに変更しました。
メニュー→cocoon設定→投稿タブ→パンくずリスト設定の項目でメインカラムトップにチェック→変更をまとめて保存
サイトのトップページの編集
サイトのトップページは最近の投稿か固定ページに設定できます。わたしは最近の投稿にしています。それだけだと寂しいのでカテゴリーや人気記事、プロフィールなどを入れておきます。
メニュー→外観→ウィジェット→インデックスリストボトムにカテゴリーやプロフィールなど自分の入れたいものをドラッグ。
サイドバーを作る
本文のコンテンツとは別に右または左側にサイドバーを作ります。
スマホの場合は記事の一番下に表示されます。
メニュー→外観→ウィジェット→サイドバーの欄に好きなものをドラッグ。
グローバルナビゲーションメニューの設置
グローバルナビゲーションメニューとは、すべてのページに設置された案内リンクです。どのページにいても気になる記事に飛べるので読んでる人がわかりやすくなります。
グローバルナビ、ナビゲーションメニューと呼ぶ人もいます。
メニュー(ワードプレスの管理画面）→外観→カスタマイズ→メニュー→メニューを新規作成→グローバルナビゲーションメニューと名前をつけて次へ
今回はウィジェットに設置するのでメニューの位置のところには何もチェックしません。ここにチェックを入れればヘッダーに持ってくることもできます。
項目を追加のところで表示したいものを好きなだけクリック→さっき名付けたグローバルナビゲーションメニューの下に追加されていく→並び替える→公開をクリック
わたしは固定ページのホームとカテゴリーのところの親カテゴリーすべてを選択しました。
cocoonカスタマイズまとめ
追記しまくったのでむちゃくちゃ長くなりましたね（笑）
いろいろ設定するところがありますが、一度だけの設定なので早めに設定しておきましょう。そしたらあとは記事を書くのに集中できます！
コメント