WordPressテーマ『Cocoon』に変更Simplicity2後継テーマはマジでスゴイ

cocoon wordpress テーマ

2018.3.19 Simplicityの作者で「寝ログ」管理人の”わいひら”さんが!

無料のWordpressテーマ『Cocoon』(コクーン)をリリースされました!

 Cocoon
検索

↑こんなお茶目な機能も備わっています(笑)

それはともかく・・・

– Cocoonは機能が豊富! –『Cocoon』で実装されている機能は、思いつく限りで【218個】もあるそうですが…要望に応えて、どんどん追加されています(汗)豊富な機能のほんのイチブですが、個人的に気に入っている機能を紹介します。
現在はβ版のため、ユーザー登録した人だけがダウンロードできます。
スポンサーリンク

サイト高速化機能

「サイト高速化」設定項目から、ブラウザキャッシュを有効化にしたり、HTML、CSS、JavaScriptの縮小化もチェックひとつでOKです。

  • ページの表示速度が劇的にUPしました
  • PageSpeed Insights(モバイル) 74→97

この手の作業を自分で行うには、トラブル発生時に少々知識が必要になりますが、Cocoonなら簡単に高速化できてしまいます。

フォーラムを見ていると、エックスサーバー側で『mod_pagespeed』設定をONにしている時の不具合が目立つ気がします。個人的にはCocoon側の「サイト高速化機能」で十分だと思っていますので、よくわからない場合エックスサーバーの『mod_pagespeed』設定をOFFにして使用することをオススメします。

管理者パネル表示機能

PV数、AMP動作確認、ページ診断チェックツール各種、レスポンシブなどのチェックツールを選んで表示できます。

PageSpeed Insights、構造化データチェック、HTML5チェック、アウトラインチェックなど・・・

チェックしたいページ上で『管理者パネル』からリンクをクリックするだけ!

この機能は便利すぎて、必要以上にチェックしている気がします(笑)

管理者パネル

こんな感じで上スクロールすると、画面下あたりにあらわれます

アドセンス広告コード設定(AMP対応)

アドセンス設定 レスポンシブ

AdSenseのレスポンシブ広告コードを一つ入力するだけで、サイト内のいろいろな場所へ、簡単に表示させることが可能です。(関連コンテンツユニット除く)

Simplicity2のように「広告ユニット」ごとのコードを、ウィジェットに入力して使用することも可能です。

アドセンス設定

また、レスポンシブ広告コードをセットしておくと

  • ウィジェットの「PC用広告」や「モバイル用広告」を使用した場合でも、コードを入力することなく(空の状態で)自由に配置可能。
  • 自動広告にも対応(アドセンス側で設定している場合)
  • ショートコード[ad]と入力するだけで、レスポンシブ広告を表示
  • AMP対応(関連コンテンツユニット除く)
『Cocoon 0.5.8』より「リンクユニット」もAMP対応になりました。今までもウィジェットを利用すれば可能でしたが、「レスポンシブ広告コード」のように取得した「リンクユニット用コード」をCocoonのアドセンス設定にセットすれば、簡単にリンクユニット広告を選べ、AMPページにも表示されるようになりました。
リンクユニット用コード

アクセス解析設定

Cocoon設定→「アクセス解析」から、各種のIDを入力するだけで、<head>や<body>などに、面倒なコードを貼り付けなくても利用することができます。

  • Googleタグマネージャ トラッキングID
  • AMP用Googleタグマネージャ トラッキングID(Cocoon 0.5.0以降
  • Google Analytics トラッキングID
  • Google Search Console ID

今までは、AMPページの計測を行うために、GoogleタグマネージャのAMP用コンテナ作成し、コードを《amp-body-top-insert.php》に貼り付けていましたが、これからはIDを設定するだけになりました。

AMP Googleタグマネージャ

詳しくは⇒ GoogleタグマネージャでAMP用のトラッキングIDの設定方法

その他のアクセス解析タグも、ここから設定することができます。

アクセス集計機能

  • 有効化にすると「人気記事」ウィジェットが使用できます。
  • WordPress Popular Postsプラグインが不要に!

アクセス集計機能

Simplicityからの「SEO設定」引き継ぎ機能

『Cocoon 0.4.2』より、Simplicityで投稿ページに設定していた「SEO設定」「広告設定」「AMP設定」の引き継ぎ機能が追加されました。

「Cocoon 設定」→「その他」→「Simplicityから投稿設定を引き継ぐ」にチェックを入れるだけです。

SimplicityからCocoon SEO引き継ぎ

引き継げる設定はこちら

  1. SEOタイトル
  2. メタディスクリプション
  3. メタキーワード
  4. noindex
  5. nofollow
  6. 広告の除外
  7. AMP表示しない

Simplicityと完全な互換性は無いということで、「メタディスクリプション」の設定がすべて消えてしまい、正直頭を抱えていたのですが・・・

皆さんの要望に応えてくださり、機能が追加されたようです。

カルーセル機能(ヘッダー下にスライド表示)

  • このブログではトップページに表示しています。
  • 最大10個までのカテゴリをランダム表示
  • オートプレイも可能

カルーセル設定

ワンクリックでAMP対応

  • あっという間にAMP対応サイトが作れます
  • 除外カテゴリーも選択可能

AMP対応

いつかはAMP対応に! と思っていたのですが、AMPにはいろいろ制限があり、デザイン的にも「どうなんだろう?」という心配も正直ありました。

ほとんど通常ページと変わりなく表示されています。いろいろ調べてわかったことは、機能面でもビジュアル面でも、Cocoonだから簡単にできる!ということだったんですね。

「目次」機能

  • デフォルトで《もくじ》が使えるのでTable of Contents Plusプラグインが不要に!
  • 目次を表示させたいページ「投稿ページ」「固定ページ」を選べます。(Cocoon 0.5.4以降

Cocoon 目次設定

  • ページごと「目次」の表示・非表示が可能に!(Cocoon 0.5.4以降

ページ毎 目次 表示設定

通常は「目次」を表示していても、記事によって必要ない場合もありますよね。この機能は地味に嬉しいかも(笑)

定型文のテンプレート化機能

  • よく使う挨拶文などを登録しておくことができて便利です。

テキストテンプレート

アフィリエイトタグ登録機能

  • 一度登録してしまえば、何度でも使い回せてすごく便利
  • アフィリエイト案件の終了や変更したい場合など、一箇所で変更すれば全ページに反映されます!

アフィリエイトタグ管理

吹き出し機能

  • サンプルもいくつか用意されていますが、好きな画像を用意すれば、何個でもカンタンに作れちゃいます。
吹き出しがデフォルト装備だよ~ん

記事内2カラム、3カラム、レイアウト簡単機能

  • レスポンシブ対応なので、スマホで見ている場合は1列に表示されます。

カラム

ビジュアルエディタ画面では、わかりやすいように色分けされていますが、プレビューすると ↓ このようになります。

クリックひとつで、簡単に2カラムも3カラムも作れちゃいます。

これは便利だ♪

新着記事・人気記事の一覧表示

  • ショートコードが用意されています。
  • 引数を指定すれば、タイプ・数・カテゴリを自由に表示することが可能。
  • 上記の「記事内2カラムレイアウト機能」を使えば更に簡単に!

新着記事一覧表示

当ブログのトップページで表示している「カテゴリー別 新着記事一覧」ですが、ちょっとわかりにくいと思うので(汗)

Cocoon公式ページで確認して下さい Cocoon

テーマ設定バックアップ・復元機能

  • 万が一の場合に設定を保存しておくとラクですね。
  • 複数のWordPressや、テスト環境などで同じ設定を使いたい時にも便利

バックアップ

まだまだ山ほど便利な機能がありますが、とても書ききれない(まだ使いこなせていない…)のでこのへんにしておきます(汗)

随時、更新していきますね~

さいごに

『Cocoon』は素晴らしいテーマで、有料のものよりも機能が豊富で優れています!

Simplicityとは互換性が無いものとして(全く無い訳ではないです)、別のテーマとして考えた方がよさそうですね

管理画面から行っていた設定も、ガラッと変わりました!(慣れれば『Cocoon』の方が簡単そう)

Cocoon 設定画面

Simplicityで慣れていた人は、少し戸惑ってしまうかもしれませんが

Simplicityフォーラムに投稿された「約3500トピック」と「約23000の投稿」から、ご意見を出来る限り参考にさせていただいて、新しいテーマとして再構築しました。

まさに「これでもか!」というほど、便利な機能が詰め込まれた『Cocoon』を使わない理由がないくらいです(笑)

すでにプラグインをいくつか減らすことができたので、嬉しいかぎりですが

もうすぐ一般公開になると思うと、ワクワクしちゃいますね♪

『Cocoon』細かいカスタマイズ(まとめ&備忘録)CSSコピペでOK!
ワードプレス無料テーマ『Cocoon』の細かいところをカスタマイズした記録です。メニューにFont Awesomeアイコンを入れたり、目次を中央配置にして背景色の変更をしたり、カテゴリーのラベルを非表示にしたりなど、自己満足的に?細かく変更した箇所などの備忘録です。徐々に増えていく予定!
【CSS】シンプルな囲み枠(ボックス)コピペですぐ使える
飾り枠を使って文中や文末に関連記事・まとめ記事、Pickupなど、さり気なく目立たせたい!シンプルで無難な囲み枠・囲い枠(ボックス)を紹介します。CSS・HTMLをコピペでOK!色や太さをお好みでカスタマイズして使って下さいね。新作『黒板風(チョーク付)』と『ホワイトボード風(マーカー付)』自分で作っておいてナンですが…気に入ってます(笑)
トップへ戻る