こんにちはハルです。
今回は完全に私の趣味の記事です（笑）
その趣味は・・・このブログです。（趣味化しました）
最近ワードプレスのテーマをcocoon（コクーン）に変更しました。
これが凄いです！しかも無料！作者であるわいひらさんには感謝感激です。
ということでお返しに宣伝をかねて（大した効果はない自覚はありますよ・・・）cocoonのレビューと私が行ったカスタマイズ（AMPページにて関連コンテンツユニットの利用）について書こうと思います。
ワードプレステーマcocoon（コクーン）のレビュー
早速レビューですが・・・
凄いの一言です（笑）
デザインが秀逸そしてサイトの表示速度が速く快適。
デザインを崩さずに気軽にAMPページも作成できる。
作者わいひらさんの説明文そのままの良さです。私が説明するよりとりあえずこちらを読んで下さい。詳しくはリンク先で。
ただテーマは新しくなりましたが、設計思想はSimplicityの時とほぼ同様です。
以下の7つが主な特徴となります。
- シンプル
- 内部SEO施策済み
- 完全なレスポンシブスタイル
- 手軽に収益化
- ブログの主役はあくまで本文
- 拡散のための仕掛けが施されている
- カスタマイズがしやすい
Cocoonでは、これらの基本的な考えは変えずに、Simplicityフォーラムに投稿された「約3500トピック」と「約23000の投稿」から、ご意見を出来る限り参考にさせていただいて、新しいテーマとして再構築しました。
引用 － cocoon
わいひらさんは元々simplicityというテーマの作者で今回新たにcocoonをリリースしたとの事です。
ちなみに私はcocoonにテーマを変更する前はsimplicityを使っていました。
先ほども言いましたが、わいひらさんはこのワードプレステーマを無料公開しています。
しかしその機能は有料テーマ（相場１万円程度）のものに比べて勝るとも劣りません。
（私は有料テーマを使った事がないんですけどね（笑）ツイッターやネットなどで色々調べたところそのようです）
無料でこのクオリティ凄すぎでしょ！
というのが私の感想です。
そして急に出てきたこの吹き出し機能。
プラグイン無しで簡単に使えるようになっています！どこまで優秀なテーマなんだ！
cocoon（コクーン）のAMPページにて関連コンテンツユニットを使う方法
ある程度の知識がある人であればこちらコクーンフォーラムをみて頂ければ簡単に設定できると思います。
ただちょっと分かりにくいかもしれませんので少し簡単にしつつ、自分用の備忘録も兼ねてここに書こうと思います。
手順１、AMP用関連コンテンツユニットのコードの準備
まずAMP用関連コンテンツユニットのコードを準備しなければなりません。
こちらを参考にご準備下さい。
AMP用の関連コンテンツユニットを作るために必要なのは、通常の関連コンテンツユニットのコードの中にある「data-ad-client」と「data-ad-slot」の2つの値。
その2つの値を下記のコードの〇〇の部分にそれぞれコピペするだけで、AMP用関連コンテンツユニットのコードになります。
<amp-ad layout="fixed-height" height="1221" type="adsense" data-ad-client="〇〇" data-ad-slot="〇〇"></amp-ad>（※data-ad-clientの値はdata-ad-clientへ、data-ad-slotの値はdata-ad-slotへコピペします）
こちらを元にAMP用関連コンテンツユニットコードの作成をしましょう。
height=”1221″ の部分は高さになり表示させる関連コンテンツの数に影響しますのでご自身の環境で微調整しましょう。
手順２、 「tmp 」フォルダを作成し「single-contents.php」を編集
次に子テーマにアップロードする「tmp」フォルダを作ります。
この中身は親テーマの「tmp」ファイルの中にある「single-contents.php」を編集したものになりますので、まずは親テーマから「single-contents.php」をダウンロードしてきましょう。
そしてここから編集です。
下準備
「ここに広告コードを挿入」の部分へ手順1で準備しておいた「AMP用関連コンテンツユニットコードを上書きします。
そして出来上がったコードを今度は「single-contents.php」に追記します。
追記する場所によって表示される場所が変わりますが例えば
<div class=”under-entry-content”>
<?php get_template_part(‘tmp/related-entries’); //関連記事 ?>
ここに作成したコードを追記する
<?php //関連記事下の広告表示
「single-contents.php」の「ここに作成したコードを追記する」の部分へ手順１で作成したコードを追記すると通常の関連コンテンツの下に表示され当ブログのような表示がされるようになります。
手順３、 作成した「tmp」ファイルを子テーマにアップロードする。
編集した「single-contents.php」のみが入った「tmp」ファイルをcocoon（コクーン）の子テーマ内にアップロードすれば終了です。
「single-contents.php」や「tmp」フォルダがある場所
一応書いておこうと思いますが「single-contents.php」や「tmp」フォルダのある場所はサーバー上にあります。
そして今回親テーマからダウンロードしてきたり子テーマへアップロードと書いていますがこれにはサーバーにアクセスするためのソフトが必要になります。
私は「FileZilla」という物を使っています。（オススメです）
後日追記（簡単になりました！
cocoon（コクーン）のAMPページで関連コンテンツユニットを使う方法ですがこの記事を書いた後、バージョンアップがされAMPページでウィジェットを使えるようになり簡単になりました。
このバージョンアップのおかげで手順２と３が必要なくなり、手順１で作成したコードをウィジェットで張り付けて（ヴィジュアルではなくテキストの方へ）AMPページでのみ表示させるように選択すると手軽に関連コンテンツユニットを使えるようになりました。
より簡単に設定できるようになり感動しています。
ただしAMP用のコードは特殊？な為か一度設定すると見えなくなります。
しかしきちんと設定できていて表示は出来るので大丈夫です。
さいごに
cocoon（コクーン）を利用して本当に感動しています。
色々と試してみたり新たな機能に胸を躍らせたり出来て楽しいです。
本当におススメのテーマですので、少しでも興味が沸く方は是非わいらひさんのcocoon（コクーン）のホームページをご覧ください。
コメント