WordPressテーマ「Cocoon（コクーン）」を作成しました。
以前作成したSimplicityの後継となる複数者運営にも対応した無料テーマです（※完全な互換性はないです）。
ただテーマは新しくなりましたが、設計思想はSimplicityの時とほぼ同様です。
2022年9月に安定した開発を継続するため「Cocoon」を「エックスサーバー株式会社」へ事業譲渡し、あわせて業務提携を行いました。
現在も開発・運営・サポートは、引き続き私（わいひら）にて行っています。 事業譲渡・業務提携に関する詳細はこちらをご覧ください。
以下の7つが主な特徴となります。
- シンプル
- 内部SEO施策済み
- 完全なレスポンシブスタイル
- 手軽に収益化
- ブログの主役はあくまで本文
- 拡散のための仕掛けが施されている
- カスタマイズがしやすい
Cocoonでは、これらの基本的な考えは変えずに、Simplicityフォーラムに投稿された「約3500トピック」と「約23000の投稿」から、ご意見を出来る限り参考にさせていただいて、新しいテーマとして再構築しました。
これらについては以下で詳しく説明します。
シンプル
CocoonもSimplicityと同様にシンプルなデザインを心がけました。
テーマ名のCocoon自体にも、以下のような意味があります。
- 繭
- 居心地のいい場所
- 繭に包む
- (繭で包むように)保護する
- 新たな始まり
テーマ名をCocoon（繭）としたのは、繭のように白い、シンプルなテーマを作りたかったからです。
白いテーマが一番読みやすいと思うので。
加えて、WordPressを新たに始める方にも「居心地のいい場所」となれるよう、Cocoonの機能が包む（補完する）形で「面倒事から保護してくれるように」と作成しました。
検索エンジン最適化（SEO）
Googleのフレッドアップデート以降、テーマ側で行って効果のある内部SEO施策も、ほぼほぼ無いのではないかと思います。
もし、あったとしても今後ディープラーニングの発達により、テーマ側が行えるSEO施策なんかより、コンテンツ自体（＆良質リンク）が重視されていくのは確実でしょう。
ただ、料理（コンテンツ）に対して、出来るだけ良い皿（テーマ）となれるように最大限やれることはやったつもりです。
Cocoonでは、主に以下のような内部SEO施策を行っています。
- ページ高速化機能搭載（テーマ機能だけでPageSpeed Insights90点後半が取れる）
- モバイルファースト（モバイルフレンドリー）
- ワンクリックでAMP対応
- ワンクリックでPWA対応
- PCとモバイルでソースコードが100％同じ完全レスポンシブ
- W3CのHTML5バリデーションのエラー0
- W3CのCSSバリデーションのエラー0
- 基本的な構造化データタグの適用
- 構造化データエラー0
- メタディスクリプション記入欄の設置
- HTMLアウトラインの最適化
詳細はこちら。
ページ高速化対応
最近、Googleは「ページ表示の高速化」に対してえらく力を入れているようです。なので出来る限りGoogleの高速化（PageSpeed Insights）に最適化できるように作りこみました。
テーマ側の設定のみで100点～90点台後半は出るかと思います
Lighthouseでもオール100点も取れました。
モバイルフレンドリー
また、今後Googleもモバイルファーストインデックスとなるのは確実で、出来る限りモバイルに最適化されるように作成しました。
完全なレスポンシブスタイル
前章SEOの部分で少し触れたのですが、Cocoonテーマは、100％レスポンシブスタイルを採用しています。
100％というのは、「パソコンで見たソースコード」と、「モバイル端末で見たソースコード」が、一致するということです。
つまりCocoonでは、is_mobile()系の関数で条件分岐は一切行っていません。
これによりGoogleは、PCとモバイルを分けることなく一度のクロールでページ情報の取得が可能になります。
Google公式にあるレスポンシブデザインの利点を挙げるとこんな感じ。
- URL が 1 つなのでユーザーによるコンテンツの共有やリンクが簡単になる
- 対応するパソコン＆モバイル用ページが存在することを Googleに伝える必要がない
- ページへのインデックス プロパティの割り当てが正確に行われる
- 同じコンテンツのページをいくつも維持管理する手間が省ける（利用者側）
- ユーザーをデバイスごとに最適化したページにリダイレクトする必要がない（読み込み時間の短縮化）
- Googlebot がサイトをクロールするために必要なリソースを節約できる
- サイト内のより多くのコンテンツがインデックスに登録され、適切な間隔で更新される
上記のように、Google自体もレスポンシブデザインを推奨しています。
ただ、レスポンシブ化したからといって、ランキングに影響するかというと、ほぼないかと思います。当然ながら、コンテンツを強化する方が全然影響が出るかと。
とは言え、Googleが推奨するものを取り入れておくのは、この先WEBで生きていく上で悪いことはないと思っています。
手軽に収益化
Cocoonでは、手軽に収益化が行えるように「広告を貼る仕組み」を充実させました。
Google アドセンスも簡単
特にアドセンス広告では、1つの広告コードを貼るだけで、様々な広告フォーマットを自由に選択できるようにしました。
- アドセンス自動広告（手動設定と併用可）
- レスポンシブ広告
- バナー広告
- レクタングル広告
- ダブルレクタングル広告
- ラージスカイスクレーパー
- 記事広告
- リンクユニット広告
こんな感じで、「広告の表示位置」によって、自由に表示する広告を変更できます。
また、adショートコードを利用することで、本文中の好きな場所に手軽に広告を貼れるようにもなっています。
もちろん、ウィジェットを用いて好きなエリアに広告を挿入することも出来るようになっています。
Amazon商品リンクの作成も簡単
また、ショートコードを利用すれば、以下のようなAmazon商品リンクも手軽に作成することが可能です。
利用方法はこちら。
楽天商品リンクも作成可能
Amazon以外にも、楽天市場の商品リンクも作成することができます。
![【訳あり】コカ・コーラ( 500ml×24本入)【コカコーラ(Coca-Cola)】[炭酸飲料]](https://thumbnail.image.rakuten.co.jp/@0_mall/kenkocom/cabinet/625/4902102072625.jpg?_ex=128x128)
利用方法はこちら。
ブログの主役はあくまで本文
内部SEOとか、なんだかんだあったとしても、結局一番大事なのはコンテンツです。
ただ、コンテンツ自体は、ユーザーさんが作成するもなので、テーマ側が何とかできるものではありません。
けれど、「コンテンツを作成するのであればできる限り簡単に使いやすく」ということで、様々なコンテンツ作成を補助する仕組みを装備しています。
吹き出し機能
例えば、以下のような吹き出し機能は、訪問者の目を引いたり、読みやすくする上で有用な働きをします。
吹き出しをうまく使うと楽しいページが作れる
こんなふうに会話形式も可能です。
風が騒がしいな…
でも少し…この風…泣いています
この吹き出し装飾は、ビジュアルエディターでも反映され、ほぼ公開ページと同様に表示されます。
これにより、記事の完成形を意識しながら利用することが出来ると思います。
もちろん「吹き出し作成機能」もデフォルトで装備されていて、自由に何個でも作成可能です。
定型文のテンプレート化機能を装備
ブログ記事を書いていて、以下のようなことはないでしょうか？
あれ、この文章、前も同じようなのを書いていたな…。
そんな時Cocoonでは、テンプレートに登録して、ショートコードで呼び出して何度でも使いまわしできるようになっています。
いわば、テキストの関数化とでも言いましょうか。
これにより、似たような文章を何度も書く必要はなくなり、何度でも同じテキストを使い回すことが出来るようになります。
自分で使ってみても、この機能がかなり便利。
アフィリエイトタグの一元管理
あと、収益サイトを運営していると、アフィリエイトタグの管理が非常に面倒です。
タグのリンク切れ・仕様変更や、広告リンクの差し替えによって複数の記事にわたって修正した経験はないでしょうか？
Cocoonの場合、以下のようなショートコードを挿入することで、
何度でも同じアフィリエイトタグを使い回すことができます。
表示例がこちら。
例：エックスサーバー
これにより、「タグの修正」が必要になったときは、管理元を1ヶ所修正するだけで全ページに反映されます。
ランキング作成
アフィリエイトサイトを運営している場合は、ランキングを作成し掲載したい場合もあるかと思います。
そういった場合にも、当テーマは、ランキングを何個でも作成し、その中から手軽に掲載できるようになっています。
作成したランキングは、ビジュアルエディターのドロップダウンリストから選択するだけで挿入できます。
実際の挿入例がこちら。
高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99％以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。
まずは無料お試し10日間。
サービス運営期間：21年
ランキングは何位まででも作成できます（実際は5位ぐらいまで作れれば十分とは思いますが）。
また、作成したランキングをウィジェットとして配置することも可能となっています。
ブログカード機能
Cocoonも、Simplicityと同様に本文中にURLを挿入するだけで、内部リンク・外部リンクともブログカード機能が使えます。
ブログカード機能とは、先程からも出ている以下のようなカードリンク表示機能です。
ブログカード機能を使ってしまうと、「普通のリンクを貼るのが面倒になってしまう」という難点もありますが、個人的にはもはや必須機能です。
文章の装飾スタイルがあらかじめ用意
ブログ文章を読みやすくする上で、装飾も重要かと思います。
当テーマでは、よく利用する装飾があらかじめ用意してあり、ビジュアルエディターから手軽に挿入できるようになっています。
例えば、太字にしたり、赤い太字にしたり、マーカーにしたり、アンダーラインマーカーといった装飾をすることができます。
また、以下のような補足説明をするボックススタイルも。
その他にも、ボタン、バッジ等いろいろな拡張スタイルがあります。
カラムレイアウトも手軽に
2カラム、3カラムレイアウトもビジュアルエディターから手軽にできるようになっています。
2カラムとショートコードを併用して、以下のような表現も可能です。
CocoonのSEO効果は、どこまであるのかわかりませんが、こういったコンテンツを彩る機能で、サイトの魅力をアップしやすく出来ればと思っています。
拡散のための仕掛けが施されている
もちろん、SNS拡散ボタンも実装してあります。
SNSシェアボタン
Cocoonでは、設定画面から以下のように様々なデザインに変更可能です。
SNSシェア数も、簡易的にキャッシュされるようになっているので、1度取得したシェア数は次回は素早く表示されます。
SNSフォローボタン
SNSフォローボタンも以下のものに対応しています。
- ウェブサイト
- Google+
- はてなブックマーク
- YouTube
- Flickr
- LINE@
- Amazon欲しい物リスト
- GitHub
- feedly
- RSS
カスタマイズがしやすい
最後に、テーマのカスタマイズも出来る限り素早く手軽に設定できるようにしました。
管理画面での設定
管理画面側で行う設定も、出来る限りやりやすいものにしたつもりです。
テーマカスタマイザー使用をなるべく控えテーマ独自設定に
基本的に、WordPressテーマの設定といえばテーマカスタマイザーを使います。
ただ、テーマカスタマイザーを使うと「設定エリアが狭い」とか「設定動作が遅い」など個人的に結構不満がありました。
そこで、当テーマでは出来る限り設定を独自設定に入れ替え、大きな設定エリアをタブでサクサク切り替えてまとめて保存出来るようにしました。
このような設定画面にした詳しい理由はこちら。
豊富なウィジェットエリア
Cocoonは、あらかじめ多数のウィジェットエリアを用意しています。
これは、「テンプレートファイルをカスタマイズするよりは、ウィジェットエリアで手軽に挿入できた方が利便性が高い」という考えのもとこのような仕様にしています。
これにより、「入れたい場所にウィジェットを挿入できる」というのはもとより、「テンプレートをカスタマイズして失敗するリスクを減らす」なんてメリットもあります。
ウィジェットエリア以外に、独自ウィジェットも豊富に取り揃えてあります。
また、ウィジェットごとに表示条件を設定することも可能です。
テンプレート自体もカスタマイズしやすいように
上記のように、管理画面もカスタマイズしやすいようにしましたが、テンプレートファイル側でも出来る限りカスタマイズしやすくしたつもりです。
Cocoonは、ファイル側でカスタマイズしやすいように、以下のように作成されています。
- 動作部分はテーマで、デザイン部分はスキンで行える
- 使用している全ての関数は子テーマでオーバーロード（上書き変更）可能
- 基本的にDRY「Don’t repeat yourself（同じ記述を繰り返さない）」になるように
なるべく、同様の処理は1ヶ所に集中させたつもりです。
なので、表示上は複数箇所に利用されていても、関数やテンプレートどれか1つを編集すれば反映されるようになっていると思います。
ダウンロード
このように、Simplicityテーマで得た経験や、ご意見を出来る限り反映し、必要な機能は残すor追加し、不要な機能は削除して、良い方向に再構築できたと思っています。
よろしければダウンロードしてご利用ください。
Cocoonテーマのダウンロードはこちら。
親テーマ、子テーマともダウンロードできますので、双方インストールして子テーマを有効化してご利用ください。