WordPress無料テーマ『Cocoon』カスタマイズメモ

先日、管理を頼まれているサイトの更新をすることになり、WordPressの無料テーマ『Cocoon』を使ってみたらとても良かったのでカスタマイズ方法などメモしておきます。

自分用メモなのでざっくりですが、どなたかのお役に立てれば幸いです

Cocoonとは

無料で高機能なWordPressテーマです。

公式サイト:https://wp-cocoon.com/

Cocoonの特徴

1. シンプル
2. 内部SEO施策済み
3. 完全なレスポンシブスタイル
4. 手軽に収益化
5. ブログの主役はあくまで本文
6. 拡散のための仕掛けが施されている
7. カスタマイズがしやすい

WordPress始めたいけど、有料のテーマを買ってまではチョット…という人はCocoonで十分だと思います。

完全無料ですが、SEO対策、高速表示、カスタマイズが簡単など、有料テーマにも負けない作りになっています。現在はエックスサーバーに業務譲渡されましたが、開発と管理は引き続き制作者のわいひらさんがされているとのことで、今後も安心して使うことが出来ます。

また、Cocoonの設定画面では100種類以上のスキンから簡単に着せ替えをすることができるので、カスタマイズが苦手な初心者にもやさしい作りになっています。

ちなみに当サイトではSTORK19を利用しています

導入方法

ロリポップ、エックスサーバーではテーマのインストールが簡単にできます。

エックスサーバーでの利用方法

https://www.xserver.ne.jp/blog/cocoon/

ロリポップでの利用方法

カスタマイズメモ

固定ページのタイトルや日付を非表示にする

外観＞カスタマイズ＞追加CSS に下記を追加

全ての固定ページでタイトル非表示、日付非表示

.page .entry-title {
display: none;
}
.page .date-tags {
display: none;
}

指定した固定ページで日付非表示

.post-2 .date-tags,
.post-3 .date-tags,
.post-10 .date-tags,
.post-31 .date-tags
 {
display: none;
}

最新の投稿リストをタイトルだけ表示する

アイキャッチも本文抜粋もなしで、シンプルに新着のタイトルと日付のみ表示する方法。

「新着情報」を使う

• ブロックから新着情報を検索

表示は以下のように企業サイトの「Information」的なかんじで使えます。シンプル。

「最新の投稿」

投稿コンテンツ設定・アイキャッチ画像をオフにする

表示は以下のようにタイトルと日付のみになります

投稿者、更新日を表示しない

Cocoon設定＞本文

「投稿者名の表示」「更新日の表示」のチェックを外す。

目次の表示・非表示

Cocoon設定＞目次

目次の表示・非表示　どのページに表示するか、など選択。

記事ごとに目次を非表示にする

固定ページや投稿の編集画面、右側　「ページ設定」で設定。

スキン「イノセンス」でグローバルナビのテキストカラーを変更する

スキン「イノセンス」を利用した場合、グローバルカナビの文字色が#888に固定されており、Cocoonの設定画面で変更しても反映されません。

テキストカラーを変更したい場合は「ダッシュボード」「外観」「カスタマイズ」

「追加CSS」

以下のコードを追加。#にカラーコードを入れる（以下は白色に設定）

#navi .caption-wrap .item-label {
    color: #fff;
}