ちまちまとCocoon(コクーン)のカスタマイズをやっています。cssやphpのコードをまとめていきます。
目次
コクーン(cocoon)の評判!(WordPressのテーマレビュー感想!)
cocoonと海外のテーマの比較
ebookbrainではずっと海外のテーマを利用していました。海外のテーマは最先端の技術やデザインなどで学ぶことあるため、いくつか持っているといいかもしれません。
詳しくはこちらの記事をみてください。
しかし、simpicityに乗り換えてcocoonに。cocoonは個人的に世界一優良なテーマのような気がします。
コクーン(cocoon)を使う理由として以下のような点があげられます。
- カテゴリ人気記事がある(WordPress Popular Postsは重い。。Sangoの子テーマPORIPUはPopular Postsがいる)
- h2見出し上にアドセンスなどが簡単に挿入(SangoやSwellはカスタマイズが必要。こちらはカスタマイズしてもいいけど。)
- WordPressのテーマが自動更新できる
- highlight.jsに対応→今は別プラグインを使っています
- モバイルの固定メニューがある
- ウィジェットの表示・非表示がある。カテゴリごとに分けたい場合、地味に便利
- タイトルタグに文字数が表示される(タイトルタグの文字数は32文字)
- その他たくさん(上記のようにプラグインを大幅に減らせる)
大抵のテーマはここが足りないなあという不便さが後からでてくるものなのですが、cocoon利用時にほとんど不便さはありませんでした。
ほしい機能がぐぐるとそのまま入っているケースがほとんどです。
cocoonのデメリットとしてはデザインが味気ないところですけど、デザインはプログラミングをいじるというレベルでは、簡単なので自分でやればいいですよ。元から用意されたデザインではないためオリジナリティも高くなります。
デザインが面倒な人はSwellもおすすめ(Cocoonとの比較)
デザインが面倒な人はSwellがおすすめかもしれません。他のサイトでSwellを使っています。SwellはわりとシンプルでUIがよくて使いやすいテーマだと思います。
- Cocoonの方がよいところはカテゴリー別人気記事があることです。
- SwellはUIがよくて使いやすいです。
- Swellはある程度デザインされているので、そのままでもそれっぽくデザインが楽できます。
より詳しい比較記事はこちらです。
どちらもおすすめしておきますが、あとから乗り換えるのは面倒なので先に決めることが大事です。ただ、Swellは各テーマからの乗り換えプラグインがでているため楽な気がします。
CocoonからSWELLへ乗り換えるためのサポート用プラグイン
https://users.swell-theme.com/mypage/
個人的にはこのサイトはバリバリCocoonでカスタマイズしているため、このままいこうと思っています。
Cocoon(コクーン)のカスタマイズの方法(1ページ目)
基礎設定やCSSのデザインなどはこちらの記事にまとめました。
こちらの記事はプログラミングやプラグインの記載が多めです。
Cocoon(コクーン)のブログカードではてブを表示(内部リンクの完成版)
第一弾としては、現在、Cocoon(コクーン)のブログカードで、はてブを表示する機能はありません。そのため表示しました。
完成品はこんな感じです。はてブは画像ではありません。
そもそもはてブがあまり多くはありませんが…。。
Cocoon(コクーン)のブログカードではてブを表示(作り方)
コクーンのサイトをみると、lib内の関数をカスタマイズする場合、子テーマのfunctions.phpにオーバーロードして利用できるようになったようです。あいかわらず丁寧に解説してくれているため、ありがたいです。コクーンを使う理由のひとつとしてソースコードが読みやすい点もあるでしょう。
lib内に、blogcard-in.phpがあります。simplicityと違って、ブログカードは内部リンクと外部リンクはファイルわけしたようですね。
途中でssl化したサイトのため、httpとhttpsのはてブを足して表示することにしました。簡単ではありますが、コメントを入れて解説しておきます。
// urlを置換してhttpのアドレスを用意
$http_url = str_replace( 'https://', 'http://', $url );
// httpとhttpsのはてぶ数をテキストで取得して合算(画像はあまりよろしくない)
$http_hatebu_count= @file_get_contents("http://api.b.st-hatena.com/entry.count?url={$http_url}");
$https_hatebu_count = @file_get_contents("http://api.b.st-hatena.com/entry.count?url={$url}");
$hatebu_count = $http_hatebu_count + $https_hatebu_count;
寝ログさんのサイトなどを参考にしました。
参考 [PHP]はてなブックマークのAPIを使って特定のURLのブックマーク数を取得する « Codaholic
参考 WordPressで個別ページのはてブ数をPHPで取得する方法
注意点ですがhttpのサイトで上記のコードを使うとはてブが2倍返しになってしまうので、不要なコードは省いてください。httpのサイトは下記のコードでいいですね。
$hatebu_count = @file_get_contents("http://api.b.st-hatena.com/entry.count?url={$url}");
はてぶは画像なので、テキストで取得することにしました。コクーンの標準機能から画像ではてブを表示する機能は高速化の都合上、外されたようです。
余談ですが、いきなり合算値を取ろうと、get_hatebu_count();まわりのコードをみたのでけど、うまくいきそうな感じではありませんでした。リンク先ではなく記事のはてブをとってしまう。
記事上下に表示されているはてブですが、sns count cacheを使っている場合はそちらの値を拾ってくるようになっていましたね。sns count cacheを利用しているため、助かりましたね。sns count cacheは長らく更新されていませんが、Β版が公式からダウンロードできるようになっていましたね。
余談のめもが多くなりました。取得はokなので、あとは表示するだけです。
0の場合、表示しないためケースわけし、はてブの表示するコードを追加します。
//取得した情報からブログカードのHTMLタグを作成
//_v($url);
if ($hatebu_count == 0) {
$tag =
'<a href="'.$url.'" title="'.esc_attr($title).'" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"'.$target.'>'.
'<div class="blogcard internal-blogcard'.$additional_class.' cf">'.
'<figure class="blogcard-thumbnail internal-blogcard-thumbnail">'.$thumbnail.'</figure>'.
'<div class="blogcard-content internal-blogcard-content">'.
'<div class="blogcard-title internal-blogcard-title">'.$title.'</div>'.
'<div class="blogcard-snipet internal-blogcard-snipet">'.$snipet.'</div>'.
'</div>'.
'<div class="blogcard-footer internal-blogcard-footer cf">'.
$site_logo_tag.$date_tag.
'</div>'.
'</div>'.
'</a>';
}else{
$tag =
'<a href="'.$url.'" title="'.esc_attr($title).'" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"'.$target.'>'.
'<div class="blogcard internal-blogcard'.$additional_class.' cf">'.
'<figure class="blogcard-thumbnail internal-blogcard-thumbnail">'.$thumbnail.'</figure>'.
'<div class="blogcard-content internal-blogcard-content">'.
'<div class="blogcard-title internal-blogcard-title">'.$title.'</div>'.
'<div class="blogcard-snipet internal-blogcard-snipet">'.$snipet.'</div>'.
'</div>'.
'<div class="blogcard-footer internal-blogcard-footer cf">'.
$site_logo_tag.'<span class="hatebu">'.$hatebu_count.'user</span>'.$date_tag.
'</div>'.
'</div>'.
'</a>';
}
$site_logo_tag.の後方に追加しました。
ちなみに、ブログカードにはてブに飛ぶリンクにいらないかな、と思って省きました。記事に飛んでほしいので。。そのあとはてブするか否かでいいかなっと。
最後にスタイルシートで装飾です。はてぶのスタイルシートは寝ログさんのサイトからそのまま拝借しました。
.hatebu{
background-color: #FFD5D5 !important;
color: #FF7979 !important;
font-weight: bold;
font-size: 12px;
margin-left: 8px;
padding: 1px;
}
ありがとうございました。
ブログカードの外部リンクはblogcard-out.phpに記載があり、別コードのため、別途対応が必要です。とりあえず、外部リンクは対応していませんのでご了承ください。
コクーン(cocoon)のブログカードの色を外部リンクと内部リンクでわける
マウスオーバー時、外部リンクと内部リンクで色を変えてみました。
.blogcard-wrap{
background-color: #D9D0BE;
}
.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover{
background-color: #c5c56a;
}
.blogcard-wrap.external-blogcard-wrap.a-wrap.cf:hover{
background-color: #eebbcb;
}
アマゾンのブログカードを作る方法
別件になりますが、アマゾンもブログカードで表示できるようです。覚書程度に残しておきます。
楽天もAmazonアソシエイトも、たぶんTwitterなんかでシャアする短縮urlのアドレスがあります。
コクーンの場合、このアドレスを入力するだけでできあがります。コクーンはショートコードの設定もできますが、その機能とはまた別ものです。ブログカードの外部リンクで画像が出る機能を応用したようですね。素晴らしい発想ですね。アマゾンだけという場合も多いので、アマゾンだけならこの方が簡単ですね。
新着記事だけではなく更新記事も表示できる
新着記事はウィジェットを追加すると、簡単に表示できますが、実は更新記事も表示できます。最近、更新記事も多くなっているため、この機能は素晴らしいですね。
テキストウィジェットを追加し、下記のコードを入れるだけです。
[new_list modified=1]
こうなります。
10件の更新記事を表示したい場合はこうですね。
[new_list modified=1 count="10"]
公式の使い方はこちらです。
さらに新着記事と更新記事に日付を表示します。ニュースサイトみたく。
/************************************
** 新着記事と更新記事に日付を表示
************************************/
.new-entry-card-date {
display: block;
}
ebookbrainではフッターエリアに採用しています。
隠し機能ではないのですけど、コクーンにはいつのまにか実装されている機能が多いですね。実装スピードを早くて快適です。
コクーン(cocoon)導入でプラグイン不要になるもの
Classic Editor
実はClassic Editorもいらないのですよね。wpのプラグインがあるのにもかかわらず、ここまで対応してくれるのは素晴らしいですね。
Cocoon 設定 > Cocoon 設定 > エディター > Gutenbergエディターを有効にする
Gutenbergは別サイトで少し使ったのですが、あっさりと辞めました。
- 今までより執筆に時間がかかるuiの構造的な欠陥(慣れても)
- 今までのWordPressはカスタマイズだけではなく、マクロを用意しているため、早く書くことができます。
- まとめてカット&ペーストしにくい
- WordPress側のタグから、Cocoonのタグにすぐ切り替えられれない
- ソースコードが美しくないなどいろいろと理由があります。divが消える場合があります。
htmlで執筆することに何の抵抗もないため、せめてそちらでも使いやすくしてほしかったです。
Table of Contents Plus
Cocoon 設定 > Cocoon 設定 > 目次
ただし、目次の途中に飛ばしている記事がある場合、アンカーリンクが変わります。その場合、あえてTable of Contents Plusを使い続ける方法もあります。
Table of Contents Plusもコクーンもウィジェットでサイドバーに目次を表示することもできます。テーマsango風に使うこともできるのです。
Display WidgetsやWidget Options
cocoonでは、ウィジェットごとに表示・非表示の切り替えができます。この機能は昔から重宝しており、何気に便利です。
WordPressのプラグインにもあります。Display Widgetsはマルウェア問題がでていましたので、その代替にWidget Optionsがありました。
これらのプラグインはcocoonでは使う必要がありません。
WordPress Popular Posts
昔のSimplicityは、WordPress popular postsをインストールして人気記事を表示していました。しかし、WordPress popular postsは処理負荷の高いプラグインのためか、独自実装になりました。
しかも、カテゴリごとの人気記事、pvの集計もできるところは大きいのではないでしょうか。個人的にカテゴリ別人気記事は必須でした。
sangoやSWELLでカテゴリ別人気記事を表示する場合、WordPress popular postsやその補佐プラグインWPP Plus Widgetを使う必要があります。
リダイレクトのプラグイン
たまに利用していたリダイレクトのプラグインがいらなくなりました。
プラグインいらずでcocoonには投稿記事にリダイレクトurlがあります。古い記事を削除した場合に新規記事にリダイレクトできます。
たぶんこの機能を組み込んだのでしょう。
この機能も本来はプラグインやコードを組む混むなどの実装が必要です。cocoon以外のサイトでは上記のコードが役立ちます。
プロフィール関連のプラグイン
プロフィール関連のプラグインがいらなくなりました。
ユーザー > あなたのプロフィール > プロフィール画像のアップロード
必要に応じてプロフィール情報とsnsの設定します。あとはウィジェットを設定するだけです。
なお、このプロフィールの設定はコメントまわりの画像も同時に変更してくれます。
昔のコメント欄が自分が指定した画像にならない場合、2つの原因が考えられます。メールアドレスとipの情報が必要です。
コメントにWordPressのメールアドレスが入っていない場合、解決方法は簡単で、編集でメールアドレスを入れると表示されるようになります。
ipアドレスが消えているなんていうケースあるの？なんて思う人もいるでしょう。実は無料ブログからWordPressにツールなどで引っ越した場合、すべての情報が引っ越しされていない場合があります。ipアドレスが消えていることがあり、この場合、画像が表示されません。無理やり解決するなら、同じコメントを追加して日時をあわせるぐらいしか解決方法が思いつきませんね。。
AddQuickTag
Cocoon(コクーン)用というよりCocoonに乗り換えた際にAddQuickTagを辞めました。どうも管理画面のuiがあまり好きじゃなかったので。。またコードで簡単に実装できるため、プラグインをひとつ減らしておこうかな、という感じです。
「AddQuickTag」は使わず、現在はfunctions.phpだけで対応しています。
実はCocoonもこの仕組みを使っています。Cocoonの場合、個人的に使わないタグもあるため、もともと利用されているadd_quicktag_to_text_editorをオーバーライドして必要なタグのみ表示しています。このようにするとかなりすっきりとします。
// クイックタグを追加
if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
if (wp_script_is('quicktags')){
// テキストエディタに追加するスクリプトを書く
}
}
endif;
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor' );スクリプトは以下のようになります。不要なタグを削り、必要なタグを追加しました。だいぶすっきりとしました。
/****************************************
クイックタグを追加
****************************************/
if ( !function_exists( 'add_quicktags_to_text_editor' ) ):
function add_quicktags_to_text_editor() {
if (wp_script_is('quicktags')){?>
<script>
QTags.addButton('qt-h2','h2','<h2>','</h2>');
QTags.addButton('qt-h3','h3','<h3>','</h3>');
QTags.addButton('qt-red','赤字','<span class="red">','</span>');
QTags.addButton('qt-bold','太字','<span class="bold">','</span>');
QTags.addButton('qt-marker','黄色マーカー','<span class="marker">','</span>');
QTags.addButton('qt-red-under','赤色マーカー','<span class="red-marker">','</span>');
QTags.addButton('qt-pre','pre','<pre class="css">','</pre>');
QTags.addButton('qt-information','補足説明(i)','<div class="information-box">','</div>');
QTags.addButton('qt-question','補足説明(?)','<div class="question-box">','</div>');
QTags.addButton('qt-alert','補足説明(!)','<div class="alert-box">','</div>');
QTags.addButton('qt-alert','いいねボックス','<div class="good-box common-icon-box">','</div>');
QTags.addButton('qt-alert','悪いねボックス','<div class="bad-box common-icon-box">','</div>');
QTags.addButton('qt-tw-profile','twitterプロフィール','?lang=ja','');
QTags.addButton('qt-new-window','新ウィンドウ','target="_blank" rel="noopener"','');
</script>
<?php
}
}
endif;
add_action( 'admin_print_footer_scripts', 'add_quicktags_to_text_editor' );スクリプトを追加するとき、phpの括弧の記述を忘れないようにしましょう。
参考記事です。simplicityの記事なのでコクーン用に自分仕様に書き換えました。
functions.phpに追記する形でテキストエディタにタグ挿入クイックタグボタンを追加した場合
設定にありました。楽チンです。
Cocoon 設定 > Cocoon 設定 > 投稿 > パンくずリストの配置
- 表示しない
- メインカラム手前
- メインカラム
- トップメインカラムボトム（デフォルト）
- フッター手前
メインカラム手前とフッター手前は全幅で表示されてしまいます。あと上すぎ下すぎな気がします。
メインカラム手前にしました。
今まではBreadcrumb NavXTを使っていました。
コクーン(cocoon)導入後に追加した(残った)プラグイン
WP Fastest Cacheは残した
Cocoomには高速化の設定がありますので、それはそれでやりましょう。
しかし、WP Fastest Cacheにしかない設定もあるため、残しました。サーバーからのレスポンスが遅くなった場合、役立ちます。gzipの圧縮などは効きます。
Cocoonと設定がかぶらないようにしましょう。Cocoonで高速化の設定をした場合、html、css、js、ブラウザキャッシュの設定は抜いても問題ありません。
SyntaxHighlighter Evolvedからhighlight.jsに乗り換え
コクーンはhighlight.jsを採用しています。素晴らしい。
Cocoonは初心者に使いやすいテーマですが、わりとWordPressを使い込んでいる人にも嬉しい機能がもりだくさんです。
highlight.jsはすでに他のサイトで導入していたため、乗り換えることにしました。
Cocoon設定 > Cocoon設定 > コード > ハイライト表示をチェックいれるだけです。
[code]→<pre> [/code]→</pre>
に置換が必要です。置換しないと表示がおかしなことになります。。
正規表現が苦手な人は正規表現は使わず、Search Regexで単純に文字列検索で2回置換すればOKです。
他の言語もこんな感じで置換していきます。そんな数は多くないですけどね。
[php]→<pre class="php"> [/php]→</pre>
[css]→<pre class="css">
[/css]→</pre>html <pre class="html">
/html </pre>Search Regexは文字のエスケープ処理は勝手にやってくるようです。
WordPressならこのぐらいですね。
[csharp]→<pre class="cs"> [/csharp]→</pre>
[cpp]→<pre class="cpp"> [/cpp]→</pre>
c言語ならこんな感じ。
class名はgithubのSUPPORTED_LANGUAGES.mdを参照。
公式リファレンスはこちらです。
SyntaxHighlighter Evolvedはいらなくなり、またひとつプラグインが減りました。highlight.jsの方が見た目が格好いいのですよね。
javasciptが改行されず、少し困ったことがありました。
解決方法はclass=”javascript”です。どうやらclassをつけないとダメのようです。詳細は調べていませんが、いったん問題がなくなったため、よしとします。
highlight.jsからHighlighting Code Blockに乗り換え
コードブロックはファイル名が指定できる形で自力実装だったのですが、グーテンベルクに移行した際に、グーテンベルク対応、行数表示、指定行数指定、コピー、ファイル名指定などほしい機能が一通りあったため導入しました。htmlをアンエスケープしないのも便利
プラグインをアンインストールしても、一応、コードブロックの形は残るのも決め手でした(事前に削除したことまで考える方なので)
Cocoonのコードブロックは2.03で廃止されてWordPressのコードブロックを使うよう促されていました。
Cocoonに導入する際はやや注意が必要です。
設定 > Cocoon設定 > 高速化 > JavaScript縮小化 > prism.js
行数が表示されないバッティング問題は以下の対処。
設定 > Cocoon設定 > コード > 行番号表示のチェックを外す
コクーン(cocoon)のSEO対策
カテゴリページをnoidex
なぜかカテゴリページに順位がついてしまう問題があった。
ただし、カテゴリページはそんなに順位があがらずむしろさがる。幸いcocoonにはno idexの機能がついていたため対応した。
設定 > Cocoon設定 > SEO > カテゴリーページをnoindexとする
タグはデフォルトでno indexになっていた
お役に立てば幸いです。
コメント