cocoonのカスタマイズとテーマ変更したらやるべきこと

スポンサーリンク
cocoon

cocoonは寝ログ運営者のわいひらさんが作ってくれたワードプレス無料テーマです。ほんとに高機能ですごい。導入してから大体カスタマイズが終わったので、わたしがやったcocoonのカスタマイズを書いておきます。

作業があるところはこのように黄色マーカーをしておきます。

 

必要ないプラグインの削除

cocoonにはほんとにテーマ自体にたくさんの機能がついているので、今まで使っていたプラグインと重複するものは削除します。

プラグインは少ないほうがサイトの動作も軽くなりプラグイン同士の不具合も避けやすくなります。

 

 

wp social bookmarking lightの削除

 

cocoonにはsnsボタンをつける機能があります。

わたしの場合は、このプラグインでツイッターやはてブなどのsnsボタンを設置していたのでまずはこれを削除。

削除の仕方はメニュー→プラグイン→停止→停止中のプラグインから削除でできます。削除せず停止したままでも大丈夫です。

公式のコードを使って自作していた方は、そのコードを削除します。

 

autoptimizeの削除

 

これは、HTMLとCSSとjava scriptの縮小に使っていました。

これらを縮小しないとページの表示速度がかなり遅くなってしまい、ページ離脱が多くなってしまうので必須プラグインでした。

cocoonはチェックを入れるだけでHTMLとCSSとjava scriptを縮小してくれます。

 

削除は先程と同じようにメニュー→プラグイン→停止→停止中のプラグインから削除。

 

さらにcocoonはブラウザのキャッシュも有効化してくれます。autoptimizeのプラグインはブラウザのキャッシュには対応していなかったため、別の作業が必要でした。

ブラウザのキャッシュについては、グーグルの提供するページの速度を測ってくれるpage speed insightsというサイトでブラウザのキャッシュを有効化してくださいと指定されていたんですが、この設定がややこしくて難しかったため放置していました。

PageSpeed Insights

が、cocoonはチェック一つで有効化してくれたのでほんとにありがたいです。

 

HTMLとCSSとjava scriptとブラウザのキャッシュの有効化方法はメニュー→cocoon設定→高速化。

 

サイト高速化という画面で

ブラウザキャッシュの有効化

HTMLを縮小化する

CSSを縮小化する

JavaScriptを縮小化する

に全てにチェックを入れて変更を保存をクリックで完了です。

 

 

ヘッダー画像の圧縮と設定

 

画像圧縮にはEWWW Image Optimizerというプラグインを使っていたんですが、これはすべての画像を自動的に圧縮してくれるものです。

 

でもなぜかヘッダー画像だけは圧縮できなかったので、page speed insightsでかなり点数が悪くなっていました。

スコア結果

なので別途ヘッダー画像だけ圧縮することにしました。

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

このサイトを使います。

これは登録も必要なく簡単にすぐ使えて便利です。

 

サイト画面

サイトに行くとこのような画面になります。

箱に矢印が書いてあるところ(drop your png or jpg file here!のところ)をクリックすると画像を選択できるのでヘッダーにしたい画像を選択。

圧縮方法

するとこのように自動で圧縮してくれます。88%圧縮できました。

そしたらfinishedの横のdownloadおせば画像を保存できます。

 

 

 

つぎにこの画像をヘッダーに設定します。

ヘッダー画像の設定方法はメニュー→cocoon設定→ヘッダータブをクリック。

ヘッダー背景画像のところで選択をクリックして先程ヘッダー用に圧縮した画像をアップロードしたら完成です。

スコア表示

 

ちなみにcocoonには画像圧縮機能はないのでEWWW Image Optimizerのプラグインで画像圧縮する必要があります。

画像サイズの設定

 

ふつうに画像を貼ると小さくなってしまったので、ワードプレスの管理画面で画像サイズの設定をします。

ここで設定すれば大きさを変えられるので、画像を集めなおす必要はありません。

メニュー→設定→メディアで

サムネイルのサイズ:300×300

中サイズ:500×500

大サイズ:800×5000

に設定するとちょうどよくなります。

 

 

 ファビコンの設定

 

ファビコンはサイトの横にちょこんと出る画像のことです。

設定方法は、メニュー→外観→カスタマイズ

サイトの基本情報という画面になるのでサイトアイコン欄から画像を設定して最後に公開をクリック。

 

 

 アドセンスの設定

グーグルアドセンスの設定をします。

貼りたい広告のコードをコピー→メニュー→cocoon設定→アドセンスの設定の広告コード欄に先程コピーしたコードを貼り付ける→まとめて保存

 

広告の表示位置の欄で広告を表示したい場所が選べます。

わたしはインデックスページのトップとボトム2つと投稿ページのタイトル下、本文中、本文下、関連記事下の4つに合計6つにチェックを入れています。

フォーマットは変更せずデフォルトのままにしてます。

アドセンスポリシーに違反しないよう気をつけてください。

広告のプレースメントに関するポリシー - AdSense ヘルプ
以下のリンクをクリックして関心のあるセクションをご覧ください。 誤クリックの回避 偶発的クリックの誘導 広告

 

広告を好きな位置に入れたい場合は編集画面の吹き出しやテンプレートを設定するところの一番右にショートコードというところがあるので、ショートコードの広告adをクリックすると好きなところに入れられます。ビジュアル画面でそのまま入力できます。

 

 アクセス解析の設定

 

グーグルアナリティクスとサーチコンソールの設定もできます。

自分のアナリティクスのトラッキングIDをコピー→cocoon設定→アクセス解析→googleAnalyticsトラッキングIDのところにさっきコピーしたIDを貼り付ける→変更をまとめて保存

 

私はall in one seo packというプラグインの方でグーグルアナリティクスの設定をしてあるのでこちらはやってません。

サーチコンソールもアナリティクスと連携してあるので特に設定はやってません。

【5分で完了】サーチコンソールとGoogleアナリティクスを連携する方法|アクセス解析ツール「AIアナリスト」ブログ
この記事ではSEOの必須ツールGoogle Search Console(サーチコンソール)をGoogleアナリティクスと連携させる方法について解説しています。5分程度で簡単に導入できるので、未対応の方はぜひお試しください。

 

AMP表示の設定

 

AMPは投稿ページをモバイル上で高速表示させるための仕組みです。

メニュー→cocoon設定→AMPタブ→AMP機能を有効化するにチェックを入れる→変更をまとめて保存。

 

 

内部リンク外部リンクの開き方設定

 

私は内部リンクや外部リンクを開くときは、新しいタブで開いてくれると便利で好きなので新しいタブで開く設定にしています。

メニュー→cocoon設定→ブログカードタブをクリック。

内部ブログカード設定のところで新しいタブで開くにチェックを入れる。

同じく外部ブログカード設定のところの新しいタブで開くにチェックを入れて変更をまとめて保存をクリック。

 

投稿者名の表示変更

 

表示名の変更

ちゃきをフォローするというちゃきのところの名前の変更する方法です。

私はedit author slugというプラグインを使っていますが、これは日本語表示にはできなかったのでワードプレス上で変更していきます。

 

メニュー→ユーザー→あなたのプロフィール→ニックネーム(必須)のところで表示したい名前を入力→ブログ上の表示名のところを今入力した名前を選択→変更を保存

 

 

フォローするのところにツイッターの追加

 

デフォルトではフォローするのところにfeedlyしかないのでツイッターを追加します。

 

メニュー→ユーザー→あなたのプロフィール→twitter URLのところにhttps://twitter.com/@を抜いた自分のツイッターアカウントを書き込んで保存。

 

twitterではなくtwitter URLのところに書く。
同様にフェイスブックやはてブやアマゾンなどのフォロー欄も登録できます。

カテゴリー・最近の投稿・サイト内検索・最近のコメントの位置変更

 

カテゴリ一覧

デフォルトだとこんな感じでタイトルの上に最近の投稿やらカテゴリーがあって見づらくなっていたので、すべて投稿関連記事の下に移動させました。

 

外観の設定

 

メニュー→外観→ウィジェット

 

ウィジェット設定

投稿本文上の小さな三角マークをクリックすると検索、最近の投稿、カテゴリー、最近のコメントが出てくるのでこれを移動させる。

ウィジェット設定

表示したいところにドラッグして保存

 

わたしは投稿関連記事下に移動させました。

 

ちなみに左に載せられる一覧があるので、載せたいものがあれば左から右にドラッグすれば自分の好きに設定できます。人気記事もここで加えられます。

 

 

カテゴリーの階層表示

 

カテゴリーはワードプレスの方で親カテゴリー子カテゴリーに分けているんですが実際の表示を見てみると全部並列になっていたため、階層表示の設定をしました。

 

カテゴリ階層表示

メニュー→外観→ウィジェット→カテゴリーを設置したところを開く→カテゴリーを開いて3つ全てにチェックを入れて保存→完了ボタン。

ドロップダウンや投稿数はお好みなのでチェック外してもいいです。

 

 

関連記事の名前を変更

 

これはそのままでもいいですが、関連記事と表示されるのをこの記事を読んだ人はこれも読んでいます。という表示に変更しました。

心理学的に人間は他の人もやってるならやろうという意識が働くからです。

メニュー→cocoon設定→投稿タブ→関連記事設定の項目で関連記事見出しのところで関連記事を表示したいものに書き換える→変更をまとめて保存

 

 

パンくずリストの位置変更

 

パンくずリストは上にある方がわかりやすいので、カラムボトムからカラムトップに変更しました。

メニュー→cocoon設定→投稿タブ→パンくずリスト設定の項目でメインカラムトップにチェック→変更をまとめて保存

 

 

サイトのトップページの編集

サイトのトップページは最近の投稿か固定ページに設定できます。わたしは最近の投稿にしています。それだけだと寂しいのでカテゴリーや人気記事、プロフィールなどを入れておきます。

 

メニュー→外観→ウィジェット→インデックスリストボトムにカテゴリーやプロフィールなど自分の入れたいものをドラッグ。

 

 

サイドバーを作る

本文のコンテンツとは別に右または左側にサイドバーを作ります。

スマホの場合は記事の一番下に表示されます。

 

メニュー→外観→ウィジェット→サイドバーの欄に好きなものをドラッグ。

 

左右またはスマホの記事一番下のサイドバーとは別に、cocoonのデフォルトで表示されてる画面の一番下に常にサイトバーと表示されるので便利です。動くハンバーガーメニューの代わりになります。
サイドバー表示
サイドバーの中身

 

グローバルナビゲーションメニューの設置

グローバルナビゲーションメニューとは、すべてのページに設置された案内リンクです。どのページにいても気になる記事に飛べるので読んでる人がわかりやすくなります。

グローバルナビ、ナビゲーションメニューと呼ぶ人もいます。

 

メニュー(ワードプレスの管理画面)→外観→カスタマイズ→メニュー→メニューを新規作成→グローバルナビゲーションメニューと名前をつけて次へ

 

今回はウィジェットに設置するのでメニューの位置のところには何もチェックしません。ここにチェックを入れればヘッダーに持ってくることもできます。

 

項目を追加のところで表示したいものを好きなだけクリック→さっき名付けたグローバルナビゲーションメニューの下に追加されていく→並び替える→公開をクリック

ナビゲーションメニュー設定

 

わたしは固定ページのホームとカテゴリーのところの親カテゴリーすべてを選択しました。

 

親と子カテゴリーを階層表示もできます。子カテゴリーを親カテゴリーの下に持っていって1段右にずらします。
カテゴリーを選択した人は、記事が増えるにつれて新しいカテゴリーを作ったらグローバルナビゲーションメニューのところにも追加しておくこと。
最後に今作ったメニューをウィジェットに追加してサイドバーに表示させます。
メニュー→外観→ウィジェットのサイドバーのところにナビゲーションメニューというのを左からドラッグしてくる→ナビゲーションメニューの三角マークを押してメニューを選択からさっき作ったグローバルナビゲーションメニューを選択→保存→完了

 

cocoonカスタマイズまとめ

追記しまくったのでむちゃくちゃ長くなりましたね(笑)

いろいろ設定するところがありますが、一度だけの設定なので早めに設定しておきましょう。そしたらあとは記事を書くのに集中できます!

 

うまるちゃんは神アニメ。
この記事ではアニメうまるちゃんの魅力について書いています。このアニメは見るとすごく癒やされます。普段の生活に疲れた人、人間関係がしんどい人に特におすすめです。ぜひご覧ください。

コメント

タイトルとURLをコピーしました