スキンの主な特徴や使い方をチェック!
カスタマイズできるデザインスキン

SILK(シルク)はキーカラーやダークスキンなど、各種設定に対応したブロックエディター向けCocoonスキンです。

スキン最新版はこちら

【Cocoonスキン】SILK(シルク)の使い方とカスタマイズ方法

この記事は約39分で読めます。
Cocoonスキン「SILK(シルク)」の意味。
ろこ
ろこ

WordPressとCocoonで構築された当サイトのカスタマイズを担当したので、自作したカスタマイズツールの一部を無料で配布します。

WordPressテーマ「Cocoon」のシンプルなデザインや独自設定による豊富な機能を保ちつつ、より機能性・カスタマイズ性の高いCocoonスキンを作成しました。

スキン情報
Cocoon専用のデザインスキン「SILK(シルク)」デモ画像。
Cocoonスキン「SILK(シルク)」のデモ画像
スキン名SILK(シルク)
最新版Ver. 2.9.4
作成者ろこ
対応テーマCocoon
オプション12種類
キーカラー対応
ダークカラー対応
AMP対応(軽量版)
WordPress5.8以上推奨
エディターGutenberg推奨
ライセンスGPL

テーマ同梱のSILKスキンに関する質問や不具合報告などは、公式サイトのCocoonフォーラムに書き込むことができます。

SILK(シルク)の使い方

Cocoonスキンの一覧からSILKを選択し、設定を保存。

SILKは初心者がカスタマイズすることを想定し、Cocoon設定に沿って作成しているため、他のCocoonスキンにはない大きな特徴がたくさんあります。

Cocoonテーマのデザイン刷新

SILKでは、Cocoonのカラーパレット配色をカスタマイズ。
マテリアルデザインに従ったSILKのカラーパレット

マテリアルデザインの視覚的な効果を取り入れつつ、レイアウトから各ブロック、フォーマットの細部に至るまで、コンテンツ主体のサイトに適したデザインに刷新しました。

キーカラー設定を用いた色変更

Cocoon設定のキーカラーでスキンの色を変更。

デフォルトキーカラー

Cocoon設定のキーカラーに完全対応しており、見出しやラベル、ボタンなど、サイト全体のポイントとなる部分に適用される色を自由に変更することができます。

ダークスキンとしても機能

Cocoonスキン「SILK」をダークスキンとして使用した場合のデモ画像。
SILK(ダークスキン)のデモ画像

ダークスキンとは黒色を基調としたCocoonスキンのことで、数少ないダークスキンとしても機能するようカスタマイズしました。

ダークスキン設定
Cocoon設定でサイト全体の文字色を変更。

Cocoon設定のサイトフォント項目にある文字色を白色に設定し、サイト全体の文字色を白色に変更してください。

Cocoon設定でサイト全体の背景色を変更。

同様に、Cocoon設定のサイト背景色項目にある背景色を黒色に設定し、サイト全体の背景色を黒色に変更してください。

キーカラーやヘッダー色、フッター色など、Cocoon設定で各パーツの色を黒色基調に合わせて変更することで、よりオリジナルなダークスキンとして機能します。

オプション設定でデザイン変更

Cocoon設定のバックアップにスキンデザイン用の「オプション設定」を追加。

自動でCocoon設定を調整し、別のサイトデザインに変更できるオプション設定を用意しました。

SILKのオプションファイルの中から好きな色を選択し、Cocoon設定の追加を行う方法。

オプションファイルの中から好きなデザインのファイルを選択し、オプション設定の追加を行うと、Cocoon設定の主なデザイン項目(キーカラーをはじめとした全体設定やヘッダー設定、フッター設定など)が自動的に設定されます。

Cocoon設定の一部が上書きされるため、オプション設定を追加する前には必ずCocoon設定のバックアップファイルを取得しておいてください。

コンテンツのデザインを追加

ブロックエディターのブロックにCocoonスキン「SILK」専用スタイルを追加。

いくつかのブロックにスタイルを追加し、1カラム時の全幅表示にも対応するなど、コンテンツの作成に役立つデザインや機能を強化しています。

クラシックエディターの追加スタイルはサポートしていないので、ブロックエディターの有効化を推奨します。

追加デザイン一覧
SILKの投稿・固定ページで、コンテンツを全幅表示する方法。

グループブロックやカラムブロックなどは配置設定から全幅表示を選択でき、サイドバーが表示されていない1カラムのページで全幅表示を設定すると、ブラウザの画面幅いっぱいに表示されます。

Cocoonスキン「SILK」のアコーディオンは、トグルボックスを複数並べて作成。

グループブロックのスタイルで『アコーディオン』を選択し、グループブロック内にトグルボックスブロックを複数並べます。

注意点

『アコーディオン』を選択したグループブロックにトグルボックス以外のブロックを入れても、実際のページには表示されません。

比較1
  • 比較情報を入力
  • 比較情報を入力
  • 比較情報を入力
比較2
  • 比較情報を入力
  • 比較情報を入力
  • 比較情報を入力

グループブロックのスタイルで『比較表』を選択し、グループブロック内にアイコンリストブロックを複数並べます。

注意点

『比較表』を選択したグループブロックにアイコンリストボックス以外のブロックを入れても、実際のページには表示されません。

SILKのアイコンリストで、アイコンなしを選択した場合の主なデザイン。

アイコンリストブロックのスタイルで『アイコンなし』を選択します。

Cocoonスキン「SILK」のサムネイル画像。
画像リンク

画像ブロックのスタイルで『影』を選択します。

パネルボックス

グループブロックのスタイルで『パネル』を選択します。

カラムブロックのスタイルで『モバイル』を選択すると、全ての画面幅でカラム表示します。

ヘッダーセルヘッダーセルヘッダーセルヘッダーセル
テーブルセルテーブルセルテーブルセルテーブルセル
テーブルセルテーブルセルテーブルセルテーブルセル

テーブルブロックのスタイルで『中央寄せ』を選択します。

テーブルセルテーブルセルテーブルセルテーブルセル
テーブルセルテーブルセルテーブルセルテーブルセル

テーブルブロックのスタイルで『水平』を選択します。

ヘッダーセルヘッダーセルヘッダーセルヘッダーセル
テーブルセルテーブルセルテーブルセルテーブルセル
テーブルセルテーブルセルテーブルセルテーブルセル
リンクリンクリンクリンク

テーブルブロックのスタイルで『キーカラー』を選択します。

リストブロックのスタイルで『リンク』を選択し、各リストのテキストにリンクを指定します。

Cocoonスキン「SILK」の横長ブログカードデザイン、サムネイルスタイル(左右)にも対応。

ブログカードブロックのスタイルで『横長』を選択したときに表示される横長ブログカードのみ、Cocoon設定のサムネイルスタイルに対応しており、サムネイル表示を左側・右側から選ぶことができます。

Cocoonスキン「SILK」の複数ブログカードデザイン。

ブログカードブロックのスタイルで『カラム』を選択します。

Cocoonスキン「SILK」のテキストブログカードデザイン。

ブログカードブロックのスタイルで『テキスト』を選択します。


区切りブロックのスタイルで『切り取り線』を選択します。

テキストの一部またはすべを選択し、ツールバーのよりリッチなテキスト制御から『下線』をクリックします。

投稿・固定ページの本文内にあるページ内リンク(目次を含む)は自動的にスムーススクロール化され、クリックすると滑らかに移動します。

Cocoonスキン「SILK」では、ソースコードのハイライト表示時にコピーボタンが付属。

ソースコードをハイライト表示に設定している場合、各ソースコードをクリップボードにコピーできるボタンが表示されます。

Cocoonスキン「SILK」のよくある質問(FAQ)機能は、トグルボックスで作成でき、リッチリザルトにも対応。

トグルボックスのスタイルで『よくある質問』を選択した場合、Google検索のリッチリザルトに対応した構造化データ(JSON-LD形式)も合わせて記述されます。

ブロックエディターの機能拡充

Cocoonスキン「SILK」で再利用ブロックを簡単に編集する方法。

Cocoonテーマのブロックエディター周りを補完する機能もいくつか追加しており、管理画面のメニューからすぐに再利用ブロックを追加・編集することができます。

SILKの画像系ブロックで、Cocoon独自のサムネイルサイズを選択する方法。

画像ブロックやギャラリーブロックなどの画像サイズを指定できるブロックでは、Cocoonテーマ独自の各サムネイルサイズを選択項目に追加しています。

SILK専用のブロックパターンを用意。

専用のブロックパターンを追加しており、比較表や全幅デザインなどをワンクリックで挿入することができます。

SILKのショートコードブロックで、Cocoon独自のショートコードを挿入する方法。

ショートコードブロックでCocoon独自のショートコードを使用する際、サイドバーのショートコード設定から選択するだけで自動的に挿入されます。

SILKの囲みボタンブロックで、アフィリエイトタグ用ショートコードを挿入する方法。

Cocoonのアフィリエイトタグ管理用ショートコードを囲みボタンブロックで用いる場合、サイドバーのショートコード設定から挿入できます。

SILKを設定中のCocoonブログカードブロックで、投稿・固定ページのURLを検索する方法。

Cocoonのブログカードブロックでは、ツールバーにあるURL検索ボタンから投稿や固定ページのURLを検索・挿入し、内部ブログカードを簡単に作成することができます。

カスタマイズ用フック等を用意

Cocoonスキン「SILK(シルク)」にブロックスタイルを追加するカスタマイズ方法。
ブロックスタイルを追加するカスタマイズ例
add_filter('silk_block_styles', function ($blockstyles) {
  $blockstyles[] = [
    'name' => 'core/paragraph', //ブロック名
    'properties' => [
      'name' => 'my-paragraph', //スタイル名
      'label' => '段落カスタマイズ' //スタイルラベル
    ]
  ];
  return $blockstyles;
});

新たにブロックスタイルを増やしたい場合、ブロックスタイル追加用フックから簡単に追加することができます。

Cocoonスキン「SILK(シルク)」の背景色透過をキャンセルするカスタマイズ方法。
背景色透過を取り消すカスタマイズ例
//配列:['カードリンクなど', '入力欄など']
define('SILK_DARK', ['#fff', '#fff']);

ダークスキンへの対応でカードリンクrgba(255,255,255,.2)や入力欄rgba(255,255,255,.8)などの背景色を透過させていますが、定数’SILK_DARK’をカラーコードの配列で定義すれば、背景色透過を取り消すことができます。

Cocoonスキン「SILK」のダークモード機能を用い、ダークモード設定で明暗を切り替えるカスタマイズ方法。
ダークモードに対応するカスタマイズ例
define('SILK_SWITCH', true);

ダークスキン機能に加えてダークモード機能も実装しているので、ダークモード設定またはボタンスイッチでサイト全体の明暗を切り替えたいなら、定数’SILK_SWITCH’をtrueで定義してください。

ダークモードのデザインカスタマイズ例
@media (prefers-color-scheme: dark) {
  body:not(.silk-darkmode) {
    --silk-a: #ff522a;
  }
}

@media (prefers-color-scheme: light) {
  body.silk-darkmode {
    --silk-a: #ff522a;
  }
}

/* ボタンスイッチ削除 */
.silk-darkmode-button {
  display: none;
}

ボタンスイッチで明暗を切り替えた際、コンテンツ要素<body>にクラス名"silk-darkmode"が追加されるので、ダークモードのデザインも簡単にカスタマイズすることができます。

SILKの見出しH2が本文内で自動的にナンバリングされる機能を無効化するカスタマイズ方法。
見出しのナンバリングを無効にするカスタマイズ例
define('SILK_COUNTER', false);

本文内の見出し要素<h2>に対する自動ナンバリングを無効にしたい場合、定数’SILK_COUNTER’をfalseで定義してください。

SILKスキンの縦型ブログカードデザインをキャンセルするカスタマイズ方法。
縦型ブログカードのデザインを取り消すカスタマイズ例
define('SILK_BLOGCARD', false);

縦型ブログカードのデザインを取り消したい場合、定数’SILK_BLOGCARD’をfalseで定義してください。

Cocoonのカスタマイズ方法

Cocoonテーマをカスタマイズする際には、子テーマであるCocoon Childをインストールし、有効化する。
Cocoon Child

Cocoonを自分でカスタマイズする際、親テーマに直接記述するとアップデートで全て消えてしまうので、Cocoon Child(子テーマ)を有効化してください。

Cocoonカスタマイズ用プラグインをインストールする方法。

また、当サイトのCocoonカスタマイズ用プラグインを利用する際は、プラグインの新規追加ページからZIPファイルをインストールし、有効化てください。

Cocoon設定で各プラグインの機能をカスタマイズ。

特に説明がない限り、各プラグインを設定するページメニューがCocoon設定一覧に表示されます。

ブログカード

Cocoonの内部・外部ブログカードにある抜粋を制限または非表示。
ブログカードの抜粋を字数制限・非表示にするカスタマイズ例
//内部・外部ブログカードの抜粋非表示
add_filter('cocoon_blogcard_snippet', '__return_empty_string');

//内部ブログカードの抜粋のみ非表示
add_filter('cocoon_internal_blogcard_snippet', '__return_empty_string');

//外部ブログカードの抜粋のみ非表示
add_filter('cocoon_external_blogcard_snippet', '__return_empty_string');

//内部・外部ブログカードの抜粋を40文字に制限
add_filter('cocoon_blogcard_snippet', function($snippet) {
  return mb_substr($snippet, 0, 40).'...';
});

SILK未実装 ブログカードの抜粋部分を制御する、ブログカードカスタマイズ用プラグインを作成しました。

Ver. 1.2.3

ブログカードの抜粋非表示はSILKのような縦型カードと相性が良く、タイトルさえ適切に設定すれば、長文の抜粋が表示されるときよりもクリックされやすいです。

Cocoonのブログカードに「続きを読む」を使いするカスタマイズ方法。
ブログカードの抜粋に「続きを読む」を追加するカスタマイズ例
add_filter('cocoon_blogcard_snippet', function($snippet) {
  return mb_substr($snippet, 0, 40).'... <span class="blogcard-readmore">続きを読む</span>';
});

SILK未実装 抜粋の最後にテキストを挿入できる、「続きを読む」設定をプラグインに追加しました。

「続きを読む」は擬似要素を用いればCSSのみで挿入することもできますが、擬似要素だと柔軟なカスタマイズは難しく、ブロック要素またはインライン要素で囲ったテキストを挿入した方が便利です。

Cocoonのブログカードにあるサムネイル画像をサイズ変更するカスタマイズ方法。
ブログカードのサムネイルサイズを変更するカスタマイズ例
//内部ブログカード
add_filter('get_blogcard_thumbnail_size', function($size) {
  return THUMB100;
});

//外部ブログカード
add_filter('external_blogcard_image_width', function($width) {
  return THUMB100WIDTH;
});

add_filter('external_blogcard_image_height', function($height) {
  return THUMB100HEIGHT;
});

//Amazonブログカード
add_filter('external_blogcard_amazon_image_width', function($width) {
  return THUMB100WIDTH;
});

add_filter('external_blogcard_amazon_image_height', function($height) {
  return THUMB100HEIGHT;
});

SILK未実装 ブログカードのサムネイル画像を別サイズに変更できる、サムネイルサイズ設定をプラグインに追加しました。

ブログカードのサムネイル画像をサイズ変更したいとき、Cocoonで生成される別サイズのサムネイル画像を用いれば、新たにサムネイル画像を生成することなく変更できます。

ブログカードのサムネイル画像サイズを変更した後、Cocoon設定で外部ブログカードのキャッシュを更新してください。

トップページ

Cocoonテーマで作成したサイトのトップページを、サイト型にカスタマイズする方法について。
トップページをサイト型にするカスタマイズ例
//トップページのみ各種Cocoon設定を非表示に変更
add_action('get_header', function() {
  if (is_front_page()) {
    global $_THEME_OPTIONS;
    $_THEME_OPTIONS['eyecatch_visible'] = 0; //アイキャッチ
    $_THEME_OPTIONS['post_date_visible'] = 0; //投稿日
    $_THEME_OPTIONS['post_update_visible'] = 0; //更新日
  }
});

SILK未実装 サイト型トップページを簡単に作成できる、トップページカスタマイズ用プラグインを作成しました。

Ver. 1.0.1

ブログのトップページを固定ページで作成したサイト型コンテンツに変更し、読者に伝えたい情報を過不足なくまとめることで、ブログ全体を見通しやすくする(=サイトの直帰率や離脱率を下げる)ことができます。

Cocoon専用のサイト型トップページを簡単に作成できるブロックパターン一覧。

SNSボタンや投稿・更新日などの非表示機能だけでなく、ブロックパターンのトップページカテゴリーにサイト型コンテンツも用意されているので、すぐにトップページを作成できます。

ヘッダー

Cocoonのヘッダーロゴを非表示にカスタマイズする方法。
ヘッダーロゴを非表示にするカスタマイズ例
add_filter('the_site_logo_tag', function($tag, $is_header) {
  if ($is_header) {
    $tag = '';
  }
  return $tag;
}, 10, 2);

SILK未実装 Cocoon設定のヘッダーロゴを非表示にする、ヘッダーカスタマイズ用プラグインを作成しました。

Ver. 1.2.1

ヘッダー背景画像を作り込んだサイトなど、ヘッダーロゴテキストまたはヘッダーロゴ画像を非表示にすることができます。

Cocoonのヘッダーキャッチフレーズを変更するカスタマイズ方法。
キャッチフレーズのテキストを変更するカスタマイズ例
add_filter('get_tagline_text', function($text) {
  return 'キャッチフレーズのテキストを変更';
});

SILK未実装 ヘッダーロゴ上下にキャッチフレーズを表示する場合、設定とは異なるテキストに変更できる機能をプラグインに追加しました。

キャッチフレーズはWordPressの一般設定で変更できますが、Cocoonのタイトル設定によってはフロントページタイトルの一部にも採用されるので、カスタマイズが必要になります。

ヘッダーロゴ前後にコンテンツを追加するカスタマイズ例
//ヘッダーロゴ前(メニュー)
add_action('wp_header_logo_before_open', function() {
  echo '<ul><li><a href="#menu1">メニュー1</a></li><li><a href="#menu2">メニュー2</a></li><li><a href="#menu3">メニュー3</a></li></ul>';
});

//ヘッダーロゴ後(自動再生動画)
add_action('wp_header_logo_after_open', function() {
  echo '<video autoplay controls loop muted src="https://example.com/movie.mp4"></video>';
});

SILK未実装 ヘッダーロゴ前後に新たなコンテンツを追加できる、HTML挿入機能をプラグインに追加しました。

ヘッダーロゴ周りにメニューや動画などのコンテンツを挿入したいとき、ヘッダーロゴ前後のフックからHTMLを追加することができます。

Cocoonのグローバルナビメニューで、現在表示しているページのメニューをカスタマイズする方法。
表示しているページに対応するメニュー色変更のカスタマイズ例
#navi .navi-in .current-menu-item > a,
#navi .navi-in .current-menu-item > a:hover {
  color: #fff;
  background-color: #f48fb1;
  pointer-events: none;
}

SILK未実装 現在表示中のページに対応するグローバルナビメニュー項目の文字色・背景色が変更できる、グローバルナビメニューカスタマイズ用プラグインを作成しました。

Ver. 1.2.1

表示しているページをグローバルナビメニュー上で強調したいとき、またはグローバルナビメニューから同じページをクリックさせたくないとき、メニュー項目のクラス名'current-menu-item'が活用できます。

Cocoonのヘッダーモバイルメニューを横スクロール表示にするカスタマイズ。
ヘッダーモバイルメニューを横スクロールで表示するカスタマイズ例
@media screen and (max-width: 834px) {
  #navi .navi-in > .menu-mobile {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    text-align: left;
  }

  #navi .navi-in > .menu-mobile li {
    display: inline-block;
    width: auto;
  }

  #navi .navi-in > .menu-mobile li a {
    padding: 0 1.5em;
  }
}

SILK実装済 スマホ・タブレットのみで表示されるヘッダーモバイルメニューを横一列に並べる、横スクロール機能をプラグインに追加しました。

ヘッダーモバイルメニューを横スクロールで一列に並べると、メニュー部分の高さは最小限になるため、サイト上部からメインコンテンツまでの距離を短くできるメリットがあります。

Cocoonのグローバルナビメニューで表示されるプルダウンアイコンを、別のアイコンに変更するカスタマイズ。
グローバルナビメニュープルダウン時のアイコンを変更するカスタマイズ例
add_filter('menu_description_walker', function($output) {
  return str_replace(['fa-angle-down', 'fa-angle-right'], ['fa-caret-down', 'fa-caret-right'], $output);
});

SILK実装済 親メニュー項目に表示されるプルダウンアイコンを別のアイコンに変更する、プルダウンアイコンフォントカスタマイズ機能をプラグインに追加しました。

グローバルナビメニューを階層構造にし、サブメニューをプルダウン表示にした際、親メニュー右端に表示されるプルダウン用アイコンを別のアイコンに変更できます。

インデックスリスト

インデックスリストのカテゴリーラベルを非表示にするカスタマイズ例
add_filter('is_entry_card_category_label_visible', '__return_false');

SILK未実装 各種インデックスリストに表示されるカテゴリーラベルの表示・非表示を選択できる、インデックスリストカスタマイズ用プラグインを作成しました。

Ver. 1.1.1

エントリーカードをはじめ、投稿ページのアイキャッチや関連記事など、画像上のカテゴリーラベル表示をカスタマイズできます。

Cocoonのエントリーカード内アイキャッチ画像サイズを変更するカスタマイズ。
エントリーカードのアイキャッチ画像サイズを変更するカスタマイズ例
add_filter('get_entry_card_thumbnail_size', function ($size) {
  return THUMB150;
});

SILK未実装 インデックスページのエントリーカードに表示されるサムネイル画像サイズを変更できる、エントリーカードサムネイルサイズ機能をプラグインに追加しました。

エントリーカードのアイキャッチ画像サイズ変更に合わせて、CSSで画像の横幅やカードコンテンツの余白などもカスタマイズしましょう。

見出し

Cocoonの見出しに指定されているデザインをリセットするカスタマイズ。
各見出しのデザインをリセットするカスタマイズ例
.article h2 {
  padding: 0;
  background-color: transparent;
  border-radius: 0;
}

.article h3 {
  padding: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
}

.article h4 {
  padding: 0;
  border-top: 0;
  border-bottom: 0;
}

.article h5 {
  padding: 0;
  border-bottom: 0;
}

.article h6 {
  padding: 0;
  border-bottom: 0;
}

SILK未実装 見出しのデザインをリセットした状態からカスタマイズできる、見出しカスタマイズ用プラグインを作成しました。

Ver. 1.1.1

Cocoonをスキンなしのデフォルトで使用したいものの、見出しのデザインくらいはカスタマイズしたいとき、見出し部分のCSSをリセットしてからカスタマイズするとスムーズにできます。

Cocoonの見出しにアイコンフォントを追加するカスタマイズ。
見出し先頭にアイコンフォントを追加するカスタマイズ例
add_filter('render_block', function ($content, $block) {
  //H2見出し
  if ($block['blockName'] === 'core/heading' && !array_key_exists('level', $block['attrs'])) {
    global $_THEME_OPTIONS;
    $_THEME_OPTIONS['toc_heading_inner_html_tag_enable'] = 1;

    $content = preg_replace('/<h2(.*?)>/', '<h2$1><i class="fa fa-heart"></i>', $content);
  }

  return $content;
}, 10, 2);

SILK未実装 各見出しの先頭に好きなアイコンフォントを追加できる、見出しアイコン機能をプラグインに追加しました。

見出し先頭にアイコンフォントタグを追加でき、デザインをカスタマイズするだけでお洒落な見出しが完成します。

目次

目次リンククリック時にスムーススクロールするカスタマイズ例
(function ($) {
  //記事本文にあるページ内リンク
  $('.entry-content a[href^="#"]').click(function () {
    let link = $(this).attr("href");
    let id = $(link);
    if (link !== "#" && id[0]) {
      $("html,body").animate({ scrollTop: id.offset().top, }, 800);
      return false;
    }
  });
})(jQuery);

SILK実装済 目次の見出しリンクをクリックしたときにスムーススクロールする、目次カスタマイズ用プラグインを作成しました。

Ver. 1.1.1

目次などの記事本文にあるページ内リンクをクリックした際、スムーススクロールだと同じページ内をどのように移動したかが視覚的に分かるので、読者はスクロール後の位置を把握しやすいというメリットがあります。

Cocoon設定で表示される目次に戻るリンクを各H2見出し直前に追加。
章ごとに「目次に戻る」リンクを表示するカスタマイズ例
add_filter('the_content', function($content) {
  if (!is_singular()) {
    return $content;
  }

  $toc = '<div id="toc"';
  if (strpos($content, $toc) === false) {
    return $content;
  }

  $tag = '<div class="end-section"><a href="#toc"><i class="fas fa-arrow-up"></i> 目次に戻る</a></div>'.PHP_EOL;
	
  $content = preg_replace_callback(
    '/<h2/i',
    function ($matches) use ($tag) {
      static $count = 0;
      $count++;

      if ($count > 1) {
        $matches[0] = $tag.$matches[0];
      }

      return $matches[0];
    },
    $content
  );

  return $content.$tag;
}, 10005);

SILK未実装 各章の最後(H2見出しの直前)から目次に戻るためのリンクが表示される、「目次に戻る」機能をプラグインに追加しました。

各章の最後にリンクを置けば邪魔にはなりませんし、章ごとに目次を確認できるので便利です。

カラーパレット

Cocoonで用意されているカラーパレットの色をスキン用にカスタマイズする方法。
カラーパレット色のカスタマイズ例
//デフォルト24色を変更
add_filter('block_editor_color_palette_colors', function($colors) {
  $skin_colors = [
    'red' => '#e60033',
    'pink' => '#e95295',
    'purple' => '#884898',
    'deep' => '#55295b',
    'indigo' => '#1e50a2',
    'blue' => '#0095d9',
    'light-blue' => '#2ca9e1',
    'cyan' => '#00a3af',
    'teal' => '#007b43',
    'green' => '#3eb370',
    'light-green' => '#8bc34a',
    'lime' => '#c3d825',
    'yellow' => '#ffd900',
    'amber' => '#ffc107',
    'orange' => '#f39800',
    'deep-orange' => '#ea5506',
    'brown' => '#954e2a',
    'grey' => '#949495',
    'black' => '#333333',
    'white' => '#ffffff',
    'watery-blue' => '#f3fafe',
    'watery-yellow' => '#fff7cc',
    'watery-red' => '#fdf2f2',
    'watery-green' => '#ebf8f4'
  ];
  
  foreach ($skin_colors as $slug => $color) {
    $key = array_search($slug, array_column($colors, 'slug'));
    if ($key !== false) {
      $colors[$key]['color'] = $color;
    }
  }
  
  return $colors;
});

SILK未実装 Cocoon設定からカラーパレットのデフォルト色を設定できる、カラーパレットカスタマイズ用プラグインを作成しました。

Ver. 1.0.1

Cocoonのブロックエディターでは合計31色(キーカラー1色+デフォルト24色+拡張6色)ものカラーパレット色が用意されていますが、サイトデザインに合わせてカラーパレットの配色をカスタマイズするのがおすすめです。

ソースコード

Cocoonでソースコードをコピーできるようにカスタマイズするプラグイン。
ソースコードをクリップボードにコピーするカスタマイズ例
add_action('get_template_part_tmp/footer-javascript', function () {
  global $_MOBILE_COPY_BUTTON;
  $_MOBILE_COPY_BUTTON = true;
});

add_action('get_template_part_tmp/footer-custom-field', function () {
  echo '<script>
    (function ($) {
      $(".entry-content pre").before(\'<button class="code-copy">コピー</button>\');
      let codeclip = new Clipboard(".code-copy", {
        target: function (trigger) {
          return trigger.nextElementSibling;
        },
      });
      codeclip.on("success", function(event) {
        let info = $(".copy-info").text();
        $(".copy-info").text("コードをコピーしました").fadeIn(500).delay(1000).fadeOut(500, function() {
          $(".copy-info").text(info);
        });
        event.clearSelection();
      });
    })(jQuery);
  </script>';
});

SILK実装済 ソースコードにコピーボタンを追加する、ソースコードカスタマイズ用プラグインを作成しました。

Ver. 1.0.2

プラグインの有効化のみで設定用ページメニューはなく、各ソースコードをクリップボードにコピーできるボタンが表示されます。

パンくずリスト

Cocoonのパンくずリストで表示されるルートテキスト「ホーム」を変更するカスタマイズ方法。
パンくずリストで表示される「ホーム」のカスタマイズ例
//投稿の「ホーム」
add_filter('breadcrumbs_single_root_text', function ($text) {
  return 'WordPressテーマ';
});

//固定ページの「ホーム」
add_filter('breadcrumbs_page_root_text', function ($text) {
  return 'WordPressテーマ';
});

SILK未実装 投稿や固定ページに表示されるパンくずリストのルートテキスト「ホーム」を変更できる、パンくずリストカスタマイズ用プラグインを作成しました。

Ver. 1.0.1

パンくずリストのルートテキストを「ホーム」からサイトタイトルやメインキーワードなどに変更することで、トップページの内容が伝わりやすくなります。

Cocoonでサイドバーの表示・非表示を設定する方法。
特定ページのみサイドバーを非表示にするカスタマイズ例
add_filter('is_active_sidebar', function ($active, $index) {
  if (($index === 'sidebar' || $index === 'sidebar-scroll') && is_category([7, 11])) {
    $active = false;
  }
  return $active;
}, 10, 2);

SILK未実装 カテゴリーページやタグページで個別にサイドバーの表示・非表示を選択できる、サイドバーウィジェットカスタマイズ用プラグインを作成しました。

Ver. 1.0.1

投稿や固定ページ以外では個別にサイドバー表示を変更できず、Cocoon設定で特定のテンプレートをまとめて非表示にする、またはカスタマイズするしかありません。

Cocoonのサイドバー表示設定をカスタマイズ。

プラグインの設定用ページメニューはありませんが、本文を作成できるカテゴリーとタグの編集画面にはカラム設定が追加され、個別にサイドバー表示を変更できます。

Cocoonスキンの自作方法

Cocoonスキンを作成するためのスキンテンプレート。

Cocoonスキンを自作する際、雛形となるスキンテンプレートを利用しましょう。

Cocoon設定を保存したときだけは、Cocoonスキンのfunctions.php読み込みタイミングが異なる点に注意。
Cocoonスキンの仕様

Cocoon設定保存時のみ、functions.phpを読み込むタイミングが異なります。

CocoonスキンとWordPressテーマの作り方は似ていますが、CocoonスキンからPHPでカスタマイズする場合、WordPressテーマにはない仕様がある点に注意してください。

PHPでのスキン制御の応用

一般的なスキン制御の記述例
global $_THEME_OPTIONS;
$_THEME_OPTIONS = [
  'site_key_color' => '#00acc1',
  'header_layout_type' => 'center_logo',
  'site_font_weight' => 500,
  'appeal_area_title' => 'Appeal Area Title',
  'entry_card_border_visible' => 1
];

Cocoon設定値を変更できるスキン制御機能には3通りの方法があり、PHP・CSV・JSONのうちPHPによるスキン制御を活用すれば、Cocoon設定値を動的に操作することができます。

スキン制御を言い換えると、Cocoon設定値を操作するために用意されたグローバル変数($_THEME_OPTIONS)の制御です。

スキン制御を活用し、Cocoon設定のアピールエリアボタンにアイコンを追加。
スキン制御によるカスタマイズ例①
//アピールエリア設定のボタンメッセージ
add_action('get_header', function () {
  global $_THEME_OPTIONS;
  $icon = ' <i class="fas fa-chevron-circle-right"></i>';
  if ($message = get_appeal_area_button_message()) {
    $_THEME_OPTIONS['appeal_area_button_message'] = $message.$icon;
  }
});

例えば、テンプレート読み込み時に実行されるアクションフック’get_header’を用い、スキン制御によってCocoon設定値をカスタマイズします。

Cocoon設定にはスキン制御によるカスタマイズが反映されず、いつでも設定を変更できる例。

実行タイミングの違いから、管理画面内のCocoon設定上にはスキン制御が反映されないので、該当部分の設定は変更することができます。

スキン制御によるカスタマイズ例
//特定の固定ページのみ通知設定を変更する場合
add_action('get_header', function () {
  if (is_page('cocoon')) {
    global $_THEME_OPTIONS;
    $_THEME_OPTIONS['notice_area_visible'] = 1;
    $_THEME_OPTIONS['notice_area_message'] = 'Cocoonスキン';
    $_THEME_OPTIONS['notice_area_url'] = 'https://example.com/cocoon/';
  }
});

複数のCocoon設定値を特定の条件下のみ変更するようなカスタマイズであっても、スキン制御の動的な操作を取り入れるだけで簡単に記述できます。

Cocoonスキンをプラグインで管理するときのカスタマイズ。
スキン制御によるカスタマイズ例③
//プラグイン内にある自作スキン読み込み
global $_THEME_OPTIONS;
$_THEME_OPTIONS['skin_url'] = untrailingslashit(plugin_dir_url(__FILE__)).'/original-skin/style.css';

スキン設定ではテーマ同梱のスキンしか選択できませんが、自作スキンをWordPressプラグインなどのテーマ外で効率的に開発・管理したい場合、スキン制御から設定できます。

キーカラー設定のCSS対応

CocoonスキンをCocoon設定のキーカラー設定に対応する方法。
自作スキンをキーカラー設定に対応させるカスタマイズ例
//ブロックエディターのキーカラー
add_filter('get_editor_key_color', function ($color) {
  return get_theme_mod('site_key_color') ?: '#4caf50';
});

//キーカラー設定用CSS
add_action('get_template_part_tmp/css-custom', function () {
  $color = get_site_key_color() ?: '#4caf50';
  $text_color = get_site_key_text_color() ?: '#ffffff';
  
  //スキンのキーカラー設定用CSSを追加
  echo '.article h2 {
    color: '.$text_color.';
    background-color: '.$color.';
  }
  
  .article h3 {
    border-color: '.$color.';
  }';
  
  //テーマのキーカラー設定用CSSを除去
  global $_THEME_OPTIONS;
  $_THEME_OPTIONS['site_key_color'] = $_THEME_OPTIONS['site_key_text_color'] = '';
});

//Cocoon設定保存時
add_action('cocoon_settings_after_save', function () {
  //キーカラー設定のスキン制御を削除
  global $_THEME_OPTIONS;
  unset($_THEME_OPTIONS['site_key_color'], $_THEME_OPTIONS['site_key_text_color']);
});

SILK実装済 キーカラー設定に対応したCocoonスキンを作成したいスキン開発者向けに、サンプルコード実装済みのスキンテンプレートを用意しました。

Ver. 1.1.1

Cocoon設定用CSSにスキンのキーカラー設定用CSSを追加し、テーマのキーカラー設定用CSSが不要な場合は除去します。

Cocoonユーザーに自作スキンを提供するなら、Cocoon設定保存時の挙動に注意しつつ、キーカラー設定に完全対応した汎用性の高いスキンを作成しましょう。

Cocoon設定値の管理・変更

スキン制御に記述されたCocoon設定値は、管理画面からの設定変更が不可。
Cocoon設定値をファイルから取得・変更するカスタマイズ例
//追加する設定用かくしフィールド名を定義
define('HIDDEN_OPTION_NAME', 'skin_submit_hidden');

//Cocoon設定のバックアップページに設定追加
add_action('admin_menu', function () {
  $hook = get_plugin_page_hook('theme-backup', THEME_SETTINGS_PAFE);
  if (!is_null($hook)) {
    //Cocoon設定値変更の入力フィールドを作成
    add_action($hook, function () {
      if (isset($_POST[HIDDEN_OPTION_NAME]) && wp_verify_nonce($_POST[HIDDEN_OPTION_NAME], 'skin-option') && $_FILES['options']['name'] != '') {
        if ($_FILES['options']['type'] === 'application/json') {

          //スキン制御用JSONファイルに書かれたCocoon設定値を追加
          if (is_user_administrator()) {
            $path = get_theme_cache_path().'/'.basename($files['options']['name']);
            if (move_uploaded_file($files['options']['tmp_name'], $path)) {
              if ($json = wp_filesystem_get_contents($path)) {
                $options = json_decode($json, true);
                if (!is_null($options)) {
                  $mods = get_theme_mods();
                  foreach ($options as $name => $value) {
                    if (isset($mods[$name])) {
                      $mods[$name] = $value;
                    }
                  }
                  update_option("theme_mods_".get_option('stylesheet'), $mods);
                }
                wp_filesystem_delete($path);
              }
            }
          }

          echo '<div class="updated"><p><strong>設定を追加しました。</strong></p></div>';
        } else {
          echo '<div class="error"><p><strong>JSONファイルを選択してください。</strong></p></div>';
        }
      }

      //JSONファイルをアップロードする設定項目をバックアップ設定に追加
      echo '<div class="wrap admin-settings"><div class="metabox-holder"><div id="skin-option" class="postbox"><h2 class="hndle">オプション設定</h2><div class="inside"><p>Cocoon設定値を追加します。</p><table class="form-table"><tbody><tr><th scope="row">';
      generate_label_tag('', 'オプション');
      echo '</th><td><form enctype="multipart/form-data" action="" method="POST"><input type="hidden" name="MAX_FILE_SIZE" value="300000" />JSONファイルをアップロード:<input name="options" type="file" accept="application/json" /><br><input type="submit" class="button" value="設定の追加" /><input type="hidden" name="'.HIDDEN_OPTION_NAME.'" value="'.wp_create_nonce('skin-option').'">';
      generate_tips_tag('スキン制御が記述されたJSONファイルを選択し、「設定の追加」ボタンを押してください。');
      echo '</form></td></tr></tbody></table></div></div></div></div>';
    });
  }
}, 11);

SILK実装済 Cocoon設定の一部をファイルで一元管理したい開発者向けに、Cocoon設定値変更用プラグインを作成しました。

Ver. 1.0.1

オプション設定のようにCocoon設定の推奨値をスキン制御用ファイルで共有すれば、スキン制御による機能の制限を最小限に抑えられ、スキンの利便性が損なわれることはありません。

Cocoon設定をスキン制御用JSONファイルで自動化するプラグイン。

Cocoon設定値を自動的に書き換えるので、バックアップとセットで実行できるように設定項目を追加しましょう。

AMP設定のサイズ制限対応

CocoonスキンのAMP対応について。

スキン制御によってAMP設定の「スキンのスタイルを有効化にする」を無効化しなければ、有効時のAMPページでは使用スキンのstyle.cssとamp.cssが読み込まれます。

AMP対応(軽量版)のカスタマイズ例
add_filter('amp_skin_css', function($css) {
  return '';
});

SILKスキンのようにCSSサイズが大きくなり、AMPページのサイズ上限約75KBを超えてしまった場合、AMPページでの読み込みをamp.cssのみに制限することで軽量化する方法もあります。

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