WordPress テーマ Cocoon(コクーン)が素晴らしすぎる件

WordPress
WordPress
スポンサーリンク

Cocoon(コクーン)は、SEO・高速化・モバイルフレンドリーに最適化されている、無料の WordPress テーマです。最近このブログサイトのテーマをこの Cocoon に変更したのですが、あまりの素晴らしさに思わず感動してしまいました。そこで今回は、WordPressテーマ Cocoon の魅力を、技術系ブログの立場からご紹介いたします。

AMP対応が完璧

数々の AMP対応のプラグインを試してみましたが、表示がくずれたり、AMPエラーが多発したり、通常ページの見た目と大きく変わってしまったりなど問題が多く、なかなか AMP対応ができませんでした。しかし Cocoon なら、通常ページとほとんど見た目が変わらない AMPページを生成してくれます。しかも AMP対応は、Cocoon の設定で「AMP機能を有効化する」にチェックを入れるだけでできてしまいます。

以前に自分でも AMP対応のためにコードをいじったことがあったのですが、Cocoon でここまで完璧に AMPページが生成できるのが不思議でした。Cocoon のコードを見てみると、正規表現を駆使してひとつひとつのHTMLタグをていねいに AMP用に変換されていました。1000行以上にもおよぶ AMP変換コードはとにかく「すごい!」の一言です。にわかプログラマの私にはとうてい真似できません(^^;)

cocoon/lib/amp.php

ブログ運営にほしい機能が必ずある

ブログサイトを運営してると下のような要望がでてくるため、子テーマでカスタマイズしたり、function.php でショートコードを作らなければならないのですが、Cocoon にはこれらの機能がはじめから付いています。

  • この記事だけサイドバーを非表示にしたい
  • この記事には広告を表示したくない
  • この記事は、新しい記事にリダイレクトしたい
  • 定型文をショートコードで使い回ししたい

Cocoon の投稿画面
WordPressテーマCocoonの投稿画面

Cocoon は、Simplicityフォーラム(Cocoonの前身となるWordPressテーマ)に投稿された「約3500トピック」と「約23000の投稿」によせられた、数々のブログ運営者の意見や要望を参考にして開発されているそうです。上のような機能があるのも当然かもしれませんね。

ウィジェットの表示位置が自由自在

ウィジェットを「SNSボタンの下」や「関連記事の上」に表示しようと思った場合、テンプレートのカスタマイズが必要になることが多いのですが、Cocoon には、たくさんのウィジェットエリアが用意されていますので、カスタマイズなしで自由自在にウィジェットを配置することができます。

Cocoon のウィジェット設定画面
WordPressテーマCocoonのウィジェット設定画面

これだけのウィジェットエリアが用意されているだけでもありがたいのですが、不要なウィジェットエリアを非表示にする親切な機能まで付いています。

カスタマイズをしやすいように設計されている

Cocoon は、子テーマでカスタマイズをしやすいように配慮した設計になっています。ちょっと地味なところですが、個人的にはこれが一番感動しました。

子テーマ下の「/tmp-user/」に、あらかじめ以下のテンプレートが用意されています。よくWordPressテーマをカスタマイズされている方なら、思わずニヤリとするのではないでしょうか(^^)

head-insert.php:<head></head>内にコードを挿入したい場合
body-top-insert.php:<body>タグ直後にコードを挿入したい場合
footer-insert.php:フッターの</body>手前にコードを挿入したい場合
main-before.php:メインコンテンツ手前にHTML等を挿入したい場合
amp-head-insert.php:AMPページの<head></head>内にコードを挿入したい場合
amp-body-top-insert.php:AMPページの<body>タグ直後にコードを挿入したい場合
amp-footer-insert.php:AMPページフッターの</body>手前にコードを挿入したい場合

https://wp-cocoon.com/custum-template-files/ より引用(2019年3月24日)

解説ページが充実している

Cocoon 設定の画面には、解説ページへのリンクが用意されていますので、使い方で悩むことがまずありません。

Cocoonの解説ページへのリンクが表示されている設定画面

また、解説ページでは Cocoon の使い方だけでなく、色々なノウハウも学ぶことができます。画像関連の知識がない私にとっては以下の解説ページがとても参考になりました。

Cocoon フォーラムがある

これが Cocoon の一番すごいところだと思うのですが、無料で使える WordPressテーマでありながら Cocoon フォーラムで質問や要望、カスタマイズ相談などを受け付けていて、Cocoon 作者の わいひらさん やベテランメンバーの方が回答してくれています。

コードが GitHub で公開されている

Cocoon のコードは GitHub で公開されています。プルリクエストも受け付けていただけるようなので、親テーマをカスタマイズしたい内容でも腕におぼえがあれば対応できるかもしれません。

https://github.com/yhira/cocoon

おわりに

年をとるとたいがいのことでは感動しなくなってしまいますが、満員の通勤電車の中で Cocoon テーマのことを調べていたら思わず「いや〜すごいな!」と口に出してしまいました。もし WordPress のテーマ選びに迷っていたら、Cocoon を使ってみることをぜひ オススメします。

この記事をシェアする
あぱーブログをフォローする
スポンサーリンク
スポンサーリンク

コメント

',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),m.passiveEvents=function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function a(){if(r=G("baguetteBox-overlay"))return l=G("baguetteBox-slider"),u=G("previous-button"),c=G("next-button"),void(d=G("close-button"));(r=J("div")).setAttribute("role","dialog"),r.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(r),(l=J("div")).id="baguetteBox-slider",r.appendChild(l),(u=J("button")).setAttribute("type","button"),u.id="previous-button",u.setAttribute("aria-label","Previous"),u.innerHTML=m.svg?f:"<",r.appendChild(u),(c=J("button")).setAttribute("type","button"),c.id="next-button",c.setAttribute("aria-label","Next"),c.innerHTML=m.svg?g:">",r.appendChild(c),(d=J("button")).setAttribute("type","button"),d.id="close-button",d.setAttribute("aria-label","Close"),d.innerHTML=m.svg?p:"×",r.appendChild(d),u.className=c.className=d.className="baguetteBox-button",function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;U(r,"click",x),U(u,"click",E),U(c,"click",C),U(d,"click",B),U(l,"contextmenu",A),U(r,"touchstart",T,t),U(r,"touchmove",N,e),U(r,"touchend",L),U(document,"focus",P,!0)}()}(),S(e),function s(e,a){var t=document.querySelectorAll(e),n={galleries:[],nodeList:t};return w[e]=n,[].forEach.call(t,function(e){a&&a.filter&&(y=a.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(a&&a.ignoreClass))return y.test(e.href)})).length){var i=[];[].forEach.call(t,function(e,t){var n=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,H(i,a),I(t)},o={eventHandler:n,imageElement:e};U(e,"click",n),i.push(o)}),n.galleries.push(i)}}),n.galleries}(e,t)},show:M,showNext:X,showPrevious:D,hide:j,destroy:function e(){!function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;W(r,"click",x),W(u,"click",E),W(c,"click",C),W(d,"click",B),W(l,"contextmenu",A),W(r,"touchstart",T,t),W(r,"touchmove",N,e),W(r,"touchend",L),W(document,"focus",P,!0)}(),function t(){for(var e in w)w.hasOwnProperty(e)&&S(e)}(),W(document,"keydown",F),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),w={},h=[],o=0}}})
タイトルとURLをコピーしました