WordPressの無料テーマCocoonを作成しました。
以前公開したSimplicityの後継となるテーマです。
新しくテーマを作成したのは、Simplicity自体元々、個人用に作成したものを公開したテーマだったので、機能を増設するにつれて、多少の無理も出てきて、動作確認が大変になってきたからです。
また、Simplicityは、約4年前に公開したものなんですが、「当時のWEB状況」と「最近のWEB状況」に乖離もでできました。ですので、一度現在の状況に合わせて作り直しておきたかったからです。
元々Simplicity自体、僕が初めてPHPで作成したプログラムだったので、当時はPHPの作法などをよくわかっておらず、書き直したい部分もいろいろ出できたというのもあります。
こういった複合的な理由から、今回作成したのが無料テーマCocoonです。
以下では、Cocoonの主な特徴について説明します。
Cocoonの内部SEO施策
4年前と比較して、SEO状況もかなり変わったような気がします。
特に、いわゆるフレッドアップデート以降、有用なコンテンツ以上に「テーマ側で行って有効なSEO」も、ほぼほぼないのではないかと個人的には思っています。
ただ、もちろん「内部SEOが整ってないテーマ」よりは、整っていた方が良いとは思うので、以下のような内部SEO施策を行っています。
- ページ高速化機能搭載（テーマ機能だけでPageSpeed Insights90点後半が取れる）
- モバイルファースト（モバイルフレンドリー）
- ワンクリックでAMP対応
- PCとモバイルでソースコードが100％同じ完全レスポンシブ
- W3CのHTML5バリデーションのエラー0
- W3CのCSSバリデーションのエラー0
- 基本的な構造化データタグの記入
- 構造化データエラー0
- 投稿ごとにメタディスクリプション記入欄の設置
- HTMLアウトラインの最適化
ページ高速化設定
なんか最近Google自体、ページの高速化にはかなり力を注いでいるようです。
www.suzukikenichi.com
webmaster-ja.googleblog.comなので、テーマ側にも高速化機能をつけました。
僕の環境で言えば、テーマ側の設定だけで、PageSpeed Insightsの90点後半ぐらいは獲得できるようになったかと思います（※プラグイン、外部リソース利用除く）。
wp-cocoon.comモバイルファースト・フレンドリー
また、Google自体モバイルファーストインデックス（MFI）の導入も既に一部始まっています。
webmaster-ja.googleblog.comなので、Cocoonでは、モバイルファーストとなるようなデザインを心がけて作成しました。
また、Googleが推奨しているレスポンシブデザインにも対応しています。
Cocoonのレスポンシブデザインは、PCで見てもスマホで見ても、同じページを見た場合は100％同じソースコードが出力されます。
ですので、Googleのクロールも「1ページあたり1度」で済むような作りになっています。
AMP対応
これも、モバイルファーストに含まれる部分もあるのですが、Cocoonは設定1つでAMP対応できるように作成してあります。
また、通常ページとAMPページの表示上の差がほとんどないように作成したつもりです。
通常ページの表示
AMPページの表示
通常ページとAMPページの比較はこちら。
https://wp-cocoon.com/?amp=1（AMP）
フレキシブルな収益化機能
ブログを始めるに当たって、収益化を視野に入れて始める方も多いかと思います。
その中でも多数の方が、まずはアドセンス利用を検討されると思います。
Cocoonでは、そんなアドセンスに慣れていない方でも、「簡単かつ手軽に設定できるように」広告機能を作りました。
基本的な使い方では、「レスポンシブ広告ユニットコード」を1つ設定するだけで、「収益性の高い位置に好みの広告フォーマットを何個でも選択して表示できる作り」にしました。
設定から手軽に変更できるフォーマットはこちら。
- アドセンス自動広告（手動設定と併用可）
- レスポンシブ広告
- バナー広告
- レクタングル広告
- ダブルレクタングル広告
- ラージスカイスクレイパー
- 記事広告
詳しくは、広告の設定ページに書いてあります。
加えて、「個々の広告それぞれのパフォーマンスを計測したい」なんて場合にも対応できるようにウィジェットで個別に広告設定できるようにもなっています。
wp-cocoon.comさらに、投稿本文中の好きな場所に広告を表示できるようにショートコード表示も可能です。
以前アドセンスは、「1ページあたりに表示する広告ユニットは3つまで」という制約がありました。
けれど2016年8月以降、広告数の制約はなくなりました。
なのでCocoonでは、この規約変更に対応し「コンテンツの内容に合わせて自由に広告を表示できるように」と広告機能を強化しました。
目玉となる機能
Simplicityと比較して、Cocoonでは多くの機能強化をしました。
その一例を紹介します。
吹き出し機能
以下のような吹き出しを手軽に作成・利用できるようにしました。
吹き出しは、以下のようにビジュアルエディター上から手軽に挿入できるようにしました。
ビジュアルエディター上に、吹き出しスタイルも適用されるため、完成形を意識しながら本文を書くことが出来るかと思います。
また、必要な吹き出しが欲しくなったら、管理画面上から何個でも作成できるようにもなっています。
wp-cocoon.com定型文をテンプレート登録可能
また、自分自身ブログを書いていてよくあるのがこんなこと。
あれ？この文章前も同じこと書いたな。
こんな文章を、すべてテンプレートにまとめてショートコードで使い回すことができるようにしました。
「テキストの関数化」といった感じ。
これにより、何度も同じ文章を書く（コピペする）必要はなくなります。
また、修正がある場合も、1箇所を修正するだけで利用箇所すべてに反映されます。
アドセンスタグの一元管理
あと、サイト運営をする上で面倒なのが、アドセンスタグの管理です。
ページ毎にタグを直接貼っていると、貼り替えの必要が出てきた場合は、全てのページを修正しなければなりません。
そんなアドセンスタグを一元管理できるような機能をCocoonには搭載し、エディターからショートコードで使い回せるようにしました。
これにより、「提供が終了したASPから他のASPのタグに変更する」もしくは「リンク切れを修正する」なんて場合でも、管理しているタグを修正すれば、全てに適用されるようになっています。
wp-cocoon.comランキング表示機能
アフィリエイトサイトなどでは、本文下のランキングも効果的かと思います。
Cocoonには、ランキングを作成し、ショートコードで呼び出したり、ウィジェットで表示したりなんて使い方ができます。
こんな感じのランキングを作成し、本文中、サイドバー、ウィジェットエリアも自由な位置に表示することが可能です。
wp-cocoon.comランキングは、何位まででも、何個でも作成できます。
ブログカード機能
Simplicityで好評だった内部・外部ブログカード機能ももちろんあります。
wp-cocoon.comこれがあると、見栄えよく手軽にリンクが貼れるので個人的には必須機能です。
文章装飾機能
文章を装飾する上でよく利用するスタイルを拡張スタイルとしてビジュアルエディターから手軽に利用できるようにもなっています。
カラム分け機能
2カラム、3カラムレイアウトもビジュアルエディターから手軽にできるようになっています。
カラム分けの実例は、テーマのマニュアルページで確認できます。
ウィジェットごとの表示条件変更機能搭載
WordPressのウィジェットを利用していて「ウィジェットはページ毎に出したいときと出したくない時がある」なんてことが結構あります。
なので、Cocoonには「ウィジェット表示条件設定機能」を標準搭載しました。
個別にカテゴリページを編集可能
検索エンジンなどから、カテゴリページへの流入は結構あります。
そんな流入訪問者をできるだけ逃さないように、カテゴリページ自体を作りこめるようにしました。
こんな感じでカテゴリページに対してアイキャッチやコンテンツを盛り込めます。
カテゴリー毎に「カテゴリ色」を設定することも可能なので、エントリーカードも色別で見やすくなります。
その他の機能
その他にも、主な機能を紹介しておきます。
独自の目次機能。
wp-cocoon.com内部リンク・外部リンク設定（開き方設定）。
wp-cocoon.comソースコードハイライト機能。
wp-cocoon.comCTAボックス機能。
wp-cocoon.comこの他にも、いろいろな機能があるので詳しくはマニュアルや機能一覧を参照してください。
まとめ
こんな感じで、僕がこれまでWordpressでブログ運営をしてきた経験から「この機能があるとブログ運営がはかどる」という機能を、ほぼほぼ取り入れました。
最初から機能豊富に作成するつもりだったので、そのことを念頭において作成したので今のところは無理しているところはほぼないです。
なので、機能豊富でもパフォーマンス的な影響はほぼないかと思っています（※パフォーマンスが悪そうな部分を見つけたらフォーラムで教えていただければ修正します）。
現在、テストバージョンとして、こちらからダウンロードできるようになっています。
ただ現在は、「不具合があった場合の修正」を重視したいので、登録ユーザーのみに公開しています。
メールアドレスのみで無料登録できるので、動作確認にご協力いただける場合は、登録するとダウンロードできるようになっています。
しばらくテストバージョンとして様子を見た後で、パブリック状態でもダウンロードできるようにしようと思っています。
すげー
思わず生唾コクーンです
古いものに
いつまでもしがみつくのでなく
廃れる前に
勇気を持って切り捨てないとね
検索アルゴリズムだって
どんどん進化していくし