Cocoon(コクーン)のCSS/PHPカスタマイズ & 不要プラグイン集

Wordpress

ちまちまとCocoon(コクーン)のカスタマイズをやっています。cssやphpのコードをまとめていきます。

Cocoon(コクーン)のブログカードではてブを表示(内部リンクの完成版)

第一弾としては、現在、Cocoon(コクーン)のブログカードで、はてブを表示する機能はありません。そのため表示しました。

完成品はこんな感じです。はてブは画像ではありません。

電子書籍おすすめ徹底比較(2020) 漫画や小説で安いアプリ/サイトはどこ!?
2020年改めて電子書籍のおすすめサイトを徹底比較してみることにしました。電子書籍元年(2010年)から電子書籍ユーザーであり、はてぶ・いいねも充実している記事なので見ていってくださいね。 この記事とこの記事から分岐する記事で以下のこ...
Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利
Wordpressの子テーマの作成方法をまとめておきます。覚書をかねています。 style.cssやfunctions.phpだけではなく、header.phpやfooter.phpやsingle.phpもあると便利だと思います。 ...
在庫ありのレンタルwifi!50gb/100gb/200gb/無制限のポケットwifi
(追記)【Wifi業界も緊急自体宣言!?】現在、コロナウイルスの流行によリモートワークが増えたため、レンタルwifiの在庫切れが非常に多くなっています。製造・出荷の遅延も発生しているようです。 取り急ぎ在庫ありのレンタルwifi、もし...

そもそもはてブがあまり多くはありませんが…。。

Cocoon(コクーン)のブログカードではてブを表示(作り方)

コクーンのサイトをみると、lib内の関数をカスタマイズする場合、子テーマのfunctions.phpにオーバーロードして利用できるようになったようです。あいかわらず丁寧に解説してくれているため、ありがたいです。コクーンを使う理由のひとつとしてソースコードが読みやすい点もあるでしょう。

lib内に、blogcard-in.phpがあります。simplicityと違って、ブログカードは内部リンクと外部リンクはファイルわけしたようですね。

途中でssl化したサイトのため、httpとhttpsのはてブを足して表示することにしました。簡単ではありますが、コメントを入れて解説しておきます。

blogcard-in.php
// 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.の後方に追加しました。

ちなみに、ブログカードにはてブに飛ぶリンクにいらないかな、と思って省きました。記事に飛んでほしいので。。そのあとはてブするか否かでいいかなっと。

最後にスタイルシートで装飾です。はてぶのスタイルシートは寝ログさんのサイトからそのまま拝借しました。

style.css
.hatebu{
    background-color: #FFD5D5 !important;
    color: #FF7979 !important;
    font-weight: bold;
    font-size: 12px;
    margin-left: 8px;
    padding: 1px;
}
WordPressで個別ページのはてブ数をPHPで取得する方法
Wordpressカスタマイズではてなブックマーク数を表示する方法です。

ありがとうございました。

ブログカードの外部リンクは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のアドレスがあります。

コクーンの場合、このアドレスを入力するだけでできあがります。コクーンはショートコードの設定もできますが、その機能とはまた別ものです。ブログカードの外部リンクで画像が出る機能を応用したようですね。素晴らしい発想ですね。アマゾンだけという場合も多いので、アマゾンだけならこの方が簡単ですね。

PA-APIを使えずとも手っ取り早くAmazon商品リンクを作成する方法
URLを貼り付けるだけで、手軽にAmazonアソシエイト商品リンクを作成する方法です。
スポンサーリンク

電子書籍のおすすめ比較

新着記事だけではなく更新記事も表示できる

新着記事はウィジェットを追加すると、簡単に表示できますが、実は更新記事も表示できます。最近、更新記事も多くなっているため、この機能は素晴らしいですね。

テキストウィジェットを追加し、下記のコードを入れるだけです。

テキストウィジェットに書く
[new_list modified=1]

こうなります。

nuxt/vuex/vue/firebaseのerror【エラーまとめ】
電話攻撃なし一括相見積もりサイトでおすすめで安い引っ越し業者を探す方法
無制限?レンタルsim比較おすすめで安いのは?【日本】
【サンプル集】vue(nuxt)のrouter-linkで絶対パス(absolute path)など
fuji wifiのSMS受信とfujisimのテザリング(aquos zero3?)

10件の更新記事を表示したい場合はこうですね。

テキストウィジェットに書く
[new_list modified=1 count="10"]

公式の使い方はこちらです。

新着記事一覧を表示するショートコードの利用方法
新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

さらに新着記事と更新記事に日付を表示します。ニュースサイトみたく。

style.css
/************************************
** 新着記事と更新記事に日付を表示
************************************/

.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の集計もできるところは大きいのではないでしょうか。

リダイレクトのプラグイン

たまに利用していたリダイレクトのプラグインがいらなくなりました。

プラグインいらずでcocoonには投稿記事にリダイレクトurlがあります。古い記事を削除した場合に新規記事にリダイレクトできます。

たぶんこの機能を組み込んだのでしょう。

投稿・固定ページにリダイレクト機能を設置するWordPressカスタマイズ方法
WordPressサイトを運営していて、たまにこんなことがあります。この投稿の内容はもう古いので、別の効果的なページにリダイレクトで跳ばしたい。この機能を、コピペ一発で実装できるコードを書きました。以下のように投稿・固定ページ管理画面から「

この機能も本来はプラグインやコードを組む混むなどの実装が必要です。cocoon以外のサイトでは上記のコードが役立ちます。

プロフィール関連のプラグイン

プロフィール関連のプラグインがいらなくなりました。

ユーザー > あなたのプロフィール > プロフィール画像のアップロード

必要に応じてプロフィール情報とsnsの設定します。あとはウィジェットを設定するだけです。

プロフィール画像やプロフィール情報、SNSページを設定する方法
Cocoonでは、記事の投稿者ごとにプロフィールを設定することが可能です。また、自前のプロフィール画像設定機能も保持しており、手軽に設定できるようになっています。

なお、このプロフィールの設定はコメントまわりの画像も同時に変更してくれます。

昔のコメント欄が自分が指定した画像にならない場合、2つの原因が考えられます。メールアドレスとipの情報が必要です。

コメントにWordPressのメールアドレスが入っていない場合、解決方法は簡単で、編集でメールアドレスを入れると表示されるようになります。

ipアドレスが消えているなんていうケースあるの?なんて思う人もいるでしょう。実は無料ブログからWordPressにツールなどで引っ越した場合、すべての情報が引っ越しされていない場合があります。ipアドレスが消えていることがあり、この場合、画像が表示されません。無理やり解決するなら、同じコメントを追加して日時をあわせるぐらいしか解決方法が思いつきませんね。。

AddQuickTag

Cocoon(コクーン)用というよりCocoonに乗り換えた際にAddQuickTagを辞めました。どうも管理画面のuiがあまり好きじゃなかったので。。またコードで簡単に実装できるため、プラグインをひとつ減らしておこうかな、という感じです。

「AddQuickTag」は使わず、現在はfunctions.phpだけで対応しています。

実はCocoonもこの仕組みを使っています。Cocoonの場合、個人的に使わないタグもあるため、もともと利用されているadd_quicktag_to_text_editorをオーバーライドして必要なタグのみ表示しています。このようにするとかなりすっきりとします。

functions.php
// クイックタグを追加
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' );

スクリプトは以下のようになります。不要なタグを削り、必要なタグを追加しました。だいぶすっきりとしました。


    <script>
      QTags.addButton('qt-h2','h2','<span class="h2">','</h2>');
      QTags.addButton('qt-h3','h3','<span class="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"','');
    </script>

スクリプトを追加するとき、phpの括弧の記述を忘れないようにしましょう。

参考記事です。simplicityの記事なのでコクーン用に自分仕様に書き換えました。

functions.phpに追記する形でテキストエディタにタグ挿入クイックタグボタンを追加した場合

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を参照。

highlightjs/highlight.js
Javascript syntax highlighter. Contribute to highlightjs/highlight.js development by creating an account on GitHub.

公式リファレンスはこちらです。

highlight.js developer documentation — highlight.js 10.3.1 documentation

SyntaxHighlighter Evolvedはいらなくなり、またひとつプラグインが減りました。highlight.jsの方が見た目が格好いいのですよね。

ショートコードを表示する場合は[[shortcode]] と2重の角括弧(英語はbracket。読み方はブラケット)で囲んでください。
cocoonでjavasciptが改行されない。

javasciptが改行されず、少し困ったことがありました。

解決方法はclass=”javascript”です。どうやらclassをつけないとダメのようです。詳細は調べていませんが、いったん問題がなくなったため、よしとします。

highlight.jsの見た目は、Agateを使っています。見た目のグレーがきつくなく優しい感じだからです。ベージュも淡い色を使っているため落ち着く色調で揃えました。

WP Fastest Cacheは残した

Cocoomには高速化の設定がありますので、それはそれでやりましょう。

しかし、WP Fastest Cacheにしかない設定もあるため、残しました。サーバーからのレスポンスが遅くなった場合、役立ちます。gzipの圧縮などは効きます。

Cocoonと設定がかぶらないようにしましょう。Cocoonで高速化の設定をした場合、html、css、js、ブラウザキャッシュの設定は抜いても問題ありません。

コクーン(cocoon)カスタマイズ続き

基礎設定やデザインなどはこちらの記事にまとめました。

おしゃれにコクーン(cocoon)のデザインをカスタマイズ
現在、ebookbranではコクーン(cocoon)を利用しています。おしゃれにコクーン(cocoon)のデザインをカスタマイズしています(まだまだ道半ば)。 まだ整理中のところもありますけど、いろいろとCSSをのっけています。デザイ...
スポンサーリンク

コクーン(cocoon)を使う理由

cocoonと海外のテーマの比較

ebookbrainではずっと海外のテーマを利用していました。海外のテーマは最先端の技術やデザインなどで学ぶことあるため、いくつか持っているといいかもしれません。

詳しくはこちらの記事をみてください。

Wordpressの人気おすすめ有料テーマ7選(クリエイター別に解説) レスポンシブ商用テンプレート
海外のWordpressの人気テーマを紹介します。 やっぱり、Webデザイナーごとにだいたい特色が決まっているため、 最近、Webクリエイターごとにポートフォリオを確認するようにしていますね。 個人的には5本ぐらいテーマを購入した...

しかし、simpicityに乗り換えてcocoonに。cocoonは個人的に世界一優良なテーマのような気がします。

コクーン(cocoon)を使う理由として以下のような点があげられます。

  • WordPressのテーマが自動更新できる
  • highlight.jsに対応
  • モバイルの固定メニューがある
  • タイトルタグに文字数が表示される(タイトルタグの文字数は32文字)
  • その他たくさん(上記のようにプラグインを大幅に減らせる)

大抵のテーマはここが足りないなあという不便さが後からでてくるものなのですが、simpicity利用時にほとんど不便さはありませんでした。

ほしい機能がぐぐるとそのまま入っているケースがほとんどです。

cocoonのデメリットとしてはデザインが味気ないところですけど、デザインはプログラミングをいじるというレベルでは、簡単なので自分でやればいいですよ。元から用意されたデザインではないためオリジナリティも高くなります。

お役に立てば幸いです。

コメント

タイトルとURLをコピーしました