Simplicity2の後継テーマ「Cocoon」の新機能を調べてみた

スポンサーリンク

無料なのに有料テンプレートを超えると人気の「Simplicity2」
次世代テーマが間もなく正規公開されます。

そのテーマの名は「Cocoon」
「Cocoon」には

  1. 繭
  2. 居心地のいい場所
  3. 繭に包む
  4. (繭で包むように)保護する
  5. 新たな始まり

こんな意味があるそうです。なんとなくわくわくさせる名前です。

さて「Simplicity2」の後継テーマ、どんな新機能があり、どんなすごいテーマになったのか、まもなく正式版が公開されますが、「Simplicity2」で運用していたサイトを公開直前のバージョン0.7.0に変更し「Cocoon」の魅力に触れてみました。

  1. 「Simplicity2」から大きく変わった機能
    1. ID入力だけでコードの記述やファイルアップロードが不要になった
    2. トップページなど一覧ページのデザインバリーエーション
    3. モバイル対応が充実した
    4. その他のCocoonの新機能

「Simplicity2」から大きく変わった機能

テーマカスタマイザーからオリジナル「Cocoon設定」に変わったことが大きく目立ちます。
「Simplicity2」ではサイト全体のデザインに関する設定は、WordPress標準のテーマカスタマイザーでやっていましたが「Cocoon」は、オリジナルの設定画面が表示されます。「Cocoon設定」画面を使ってみた印象はこんな感じです。

  • カスタマイズするテーマメニューはタブでサクサク切り替え
  • メニューがタブで一覧できるのでやりたいことをどこでするのかがすぐ分かる
  • 画面が大きく説明用のポップアップが邪魔にならない
  • 参照リンクが分かりやすいので意味の分からないこともすぐ理解できる

Cocoon設定

設定の方法が変わったことで「Simplicity2」よりも格段に使いやすくなったメニューについて紹介します。

ID入力だけでコードの記述やファイルアップロードが不要になった

アクセス解析タグの設定については、Google AnalyticsのIDをテーマカスタマイザーに入力する方法が「Simplicity2」で採用されていました。SearchConsoleサイト認証タグも同様でしたが、GoogleタグマネージャーもID入力で済むようになりました。

Googleタグマネージャータグはこれまで

  1. スクリプト部のタグは「header-insert.php」に追記する
  2. ノンスクリプト部のタグは親テーマの「header.php」に追記する
  3. これらのファイルを子テーマと親テーマにアップロードする

必要がありました。

この作業は初心者にはすこし不安な作業であり、テキストエディタを立上げコードを追記し、FFFTPを立上げるという作業そのものが面倒なものでしたが、「Cocoon設定」の［アクセス解析］タブを開いてIDを入力するだけで済むようになりました。

さらに、Google以外のアクセス解析タグは子テーマの「footer-insert.php」に追記する必要があったのですが、これも無くなり［アクセス解析］タブの画面内でタグを入力するだけで設定できてしまいます。

トップページなど一覧ページのデザインバリーエーション

「Simplicity2」では一覧リストのスタイルが10種類でした。

  1. エントリーカード（デフォルト）
  2. 大きなエントリーカード
  3. 最初だけ大きなエントリーカード
  4. 本文表示
  5. 最初だけ本文表示
  6. サムネイル大
  7. タイル2列
  8. タイル3列
  9. タイル2列 画像縦横比保存
  10. タイル3列 画像縦横比保存

「Cocoon」では7種類になりました。

  1. エントリーカード（デフォルト）
  2. 大きなカード（先頭のみ）
  3. 大きなカード
  4. 縦型カード2列
  5. 縦型カード3列
  6. タイル2列
  7. タイル3列

縦型カードが導入されたので、サムネイル画像の縦サイズが異なる場合でも、横に並んだ記事の頭が揃うので、縦サイズの違いは気にならなくなりました。

一覧ページの設定は［インデックス］で行います。

さらにトップページ含め全ページに「カルーセル」の表示ができるようになりました。
オートプレイの設定もできるようになっており、サイト内の回遊率を高める効果がありそうです。
設定は［カルーセル］で行います。

カルーセル

モバイル対応が充実した

モバイル対応関連ではまず「AMP」ですが、「Simplicity2」では［AMPの有効化］をチェックするだけでしたが、「Cocoon」も同じです。

次にモバイル関連で感動したのが「管理者パネル」です。
設定は［管理者画面］で行いますが、管理者パネルの表示に設定すると、ページ下にオーバーレイバーが現れ以下のメニューが表示されます。

  • PV表示
  • 投稿編集リンク
  • WLW編集リンク
  • Google AMPテスト
  • The AMP Validator
  • AMPBench
  • PageSpeed Insightsリンク
  • GTmetrixリンク
  • モバイルフレンドリーテストリンク
  • 構造化データ テストツール
  • Nu Html Checkerリンク
  • HTML5 Outlinerリンク
  • SEOチェキリンク
  • ツイートチェック
  • Responsinatorチェック用リンク
  • Sizzyチェック用リンク
  • WhatIsMyScreenResolutionチェック用リンク

赤いアンダーライン項目がモバイル対応のチェックに欠かせないものです。
これらのチェックをワンクリックでページごとにできるのは作業効率を大幅にアップさせます。
“さすが～”と感激したインターフェースです。

管理者パネル

AMPテストした結果が下

AMPテスト

モバイル対応でもう一つ感激したのが「モバイルボタンレイアウト」です。

モバイルボタン

特に気に入ったのが「スライドインボタン」です。
ウィンドウ下に

  • メニューを開く
  • ホームへのリンク
  • 検索窓を開く
  • ページトップへ移動する
  • サイドバーを開く

のリンクが並びスライドインで開きます。

  • じゃまにならない
  • リンクの場所が分かりやすい
  • 開いても使いやすい

感激です。

モバイルボタン

その他のCocoonの新機能

他にもさすが～と思わせる機能がついています。

  1. 更新日の変更を、更新・更新しない・更新日の消去・更新日を設定に細かく設定できる
  2. Simplicityの投稿設定内容をCocoonに引き継ぐことができる
  3. パーマリンクを記事タイトルにした場合、日本語スラッグを半角英数字にできる
  4. ヘッダー背景画像を固定させて、スクロールしてもヘッダー画像が常に背景に表示できる

こんなところが気に入った部分です。

あと最後にひとつ注意点があります。

アドセンスの自動広告設定はこれまでと同じく「header-insert.php」にコードを追記する方法になります。

コメント

ホーム
トップ