WordPressとCocoonで構築された当サイトのカスタマイズを担当したので、自作したカスタマイズツールの一部を無料で配布します。
WordPressテーマ「Cocoon」のシンプルなデザインや独自設定による豊富な機能を保ちつつ、より機能性・カスタマイズ性の高いCocoonスキンを作成しました。
| スキン名 | SILK（シルク） |
| 最新版 | Ver. 2.9.4 |
| 作成者 | ろこ |
| 対応テーマ | Cocoon |
| オプション | 12種類 |
| キーカラー | 対応 |
| ダークカラー | 対応 |
| AMP | 対応（軽量版） |
| WordPress | 5.8以上推奨 |
| エディター | Gutenberg推奨 |
| ライセンス | GPL |
テーマ同梱のSILKスキンに関する質問や不具合報告などは、公式サイトのCocoonフォーラムに書き込むことができます。
SILK（シルク）の使い方
SILKは初心者がカスタマイズすることを想定し、Cocoon設定に沿って作成しているため、他のCocoonスキンにはない大きな特徴がたくさんあります。
Cocoonテーマのデザイン刷新
マテリアルデザインの視覚的な効果を取り入れつつ、レイアウトから各ブロック、フォーマットの細部に至るまで、コンテンツ主体のサイトに適したデザインに刷新しました。
キーカラー設定を用いた色変更
デフォルトキーカラー
Cocoon設定のキーカラーに完全対応しており、見出しやラベル、ボタンなど、サイト全体のポイントとなる部分に適用される色を自由に変更することができます。
ダークスキンとしても機能
ダークスキンとは黒色を基調としたCocoonスキンのことで、数少ないダークスキンとしても機能するようカスタマイズしました。
Cocoon設定のサイトフォント項目にある文字色を白色に設定し、サイト全体の文字色を白色に変更してください。
同様に、Cocoon設定のサイト背景色項目にある背景色を黒色に設定し、サイト全体の背景色を黒色に変更してください。
オプション設定でデザイン変更
自動でCocoon設定を調整し、別のサイトデザインに変更できるオプション設定を用意しました。
オプションファイルの中から好きなデザインのファイルを選択し、オプション設定の追加を行うと、Cocoon設定の主なデザイン項目（キーカラーをはじめとした全体設定やヘッダー設定、フッター設定など）が自動的に設定されます。
コンテンツのデザインを追加
いくつかのブロックにスタイルを追加し、1カラム時の全幅表示にも対応するなど、コンテンツの作成に役立つデザインや機能を強化しています。
グループブロックやカラムブロックなどは配置設定から全幅表示を選択でき、サイドバーが表示されていない1カラムのページで全幅表示を設定すると、ブラウザの画面幅いっぱいに表示されます。
グループブロックのスタイルで『アコーディオン』を選択し、グループブロック内にトグルボックスブロックを複数並べます。
『アコーディオン』を選択したグループブロックにトグルボックス以外のブロックを入れても、実際のページには表示されません。
グループブロックのスタイルで『比較表』を選択し、グループブロック内にアイコンリストブロックを複数並べます。
『比較表』を選択したグループブロックにアイコンリストボックス以外のブロックを入れても、実際のページには表示されません。
アイコンリストブロックのスタイルで『アイコンなし』を選択します。
画像ブロックのスタイルで『影』を選択します。
パネルボックス
グループブロックのスタイルで『パネル』を選択します。
１
２
３
カラムブロックのスタイルで『モバイル』を選択すると、全ての画面幅でカラム表示します。
| ヘッダーセル | ヘッダーセル | ヘッダーセル | ヘッダーセル |
|---|---|---|---|
| テーブルセル | テーブルセル | テーブルセル | テーブルセル |
| テーブルセル | テーブルセル | テーブルセル | テーブルセル |
テーブルブロックのスタイルで『中央寄せ』を選択します。
| テーブルセル | テーブルセル | テーブルセル | テーブルセル |
| テーブルセル | テーブルセル | テーブルセル | テーブルセル |
テーブルブロックのスタイルで『水平』を選択します。
ブログカードブロックのスタイルで『横長』を選択したときに表示される横長ブログカードのみ、Cocoon設定のサムネイルスタイルに対応しており、サムネイル表示を左側・右側から選ぶことができます。
ブログカードブロックのスタイルで『カラム』を選択します。
ブログカードブロックのスタイルで『テキスト』を選択します。
区切りブロックのスタイルで『切り取り線』を選択します。
テキストの一部またはすべてを選択し、ツールバーのよりリッチなテキスト制御から『下線』をクリックします。
投稿・固定ページの本文内にあるページ内リンク（目次を含む）は自動的にスムーススクロール化され、クリックすると滑らかに移動します。
ソースコードをハイライト表示に設定している場合、各ソースコードをクリップボードにコピーできるボタンが表示されます。
トグルボックスのスタイルで『よくある質問』を選択した場合、Google検索のリッチリザルトに対応した構造化データ（JSON-LD形式）も合わせて記述されます。
ブロックエディターの機能拡充
Cocoonテーマのブロックエディター周りを補完する機能もいくつか追加しており、管理画面のメニューからすぐに再利用ブロックを追加・編集することができます。
画像ブロックやギャラリーブロックなどの画像サイズを指定できるブロックでは、Cocoonテーマ独自の各サムネイルサイズを選択項目に追加しています。
専用のブロックパターンを追加しており、比較表や全幅デザインなどをワンクリックで挿入することができます。
ショートコードブロックでCocoon独自のショートコードを使用する際、サイドバーのショートコード設定から選択するだけで自動的に挿入されます。
Cocoonのアフィリエイトタグ管理用ショートコードを囲みボタンブロックで用いる場合、サイドバーのショートコード設定から挿入できます。
Cocoonのブログカードブロックでは、ツールバーにあるURL検索ボタンから投稿や固定ページのURLを検索・挿入し、内部ブログカードを簡単に作成することができます。
カスタマイズ用フック等を用意
add_filter('silk_block_styles', function ($blockstyles) {
$blockstyles[] = [
'name' => 'core/paragraph', //ブロック名
'properties' => [
'name' => 'my-paragraph', //スタイル名
'label' => '段落カスタマイズ' //スタイルラベル
]
];
return $blockstyles;
});新たにブロックスタイルを増やしたい場合、ブロックスタイル追加用フックから簡単に追加することができます。
//配列：['カードリンクなど', '入力欄など']
define('SILK_DARK', ['#fff', '#fff']);ダークスキンへの対応でカードリンクrgba(255,255,255,.2)や入力欄rgba(255,255,255,.8)などの背景色を透過させていますが、定数’SILK_DARK’をカラーコードの配列で定義すれば、背景色透過を取り消すことができます。
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"が追加されるので、ダークモードのデザインも簡単にカスタマイズすることができます。
define('SILK_COUNTER', false);本文内の見出し要素<h2>に対する自動ナンバリングを無効にしたい場合、定数’SILK_COUNTER’をfalseで定義してください。
define('SILK_BLOGCARD', false);縦型ブログカードのデザインを取り消したい場合、定数’SILK_BLOGCARD’をfalseで定義してください。
Cocoonのカスタマイズ方法
Cocoonを自分でカスタマイズする際、親テーマに直接記述するとアップデートで全て消えてしまうので、Cocoon Child（子テーマ）を有効化してください。
また、当サイトのCocoonカスタマイズ用プラグインを利用する際は、プラグインの新規追加ページからZIPファイルをインストールし、有効化てください。
特に説明がない限り、各プラグインを設定するページメニューが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未実装 ブログカードの抜粋部分を制御する、ブログカードカスタマイズ用プラグインを作成しました。
ブログカードの抜粋非表示はSILKのような縦型カードと相性が良く、タイトルさえ適切に設定すれば、長文の抜粋が表示されるときよりもクリックされやすいです。
add_filter('cocoon_blogcard_snippet', function($snippet) {
return mb_substr($snippet, 0, 40).'... <span class="blogcard-readmore">続きを読む</span>';
});SILK未実装 抜粋の最後にテキストを挿入できる、「続きを読む」設定をプラグインに追加しました。
「続きを読む」は擬似要素を用いればCSSのみで挿入することもできますが、擬似要素だと柔軟なカスタマイズは難しく、ブロック要素またはインライン要素で囲ったテキストを挿入した方が便利です。
//内部ブログカード
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設定を非表示に変更
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未実装 サイト型トップページを簡単に作成できる、トップページカスタマイズ用プラグインを作成しました。
ブログのトップページを固定ページで作成したサイト型コンテンツに変更し、読者に伝えたい情報を過不足なくまとめることで、ブログ全体を見通しやすくする（＝サイトの直帰率や離脱率を下げる）ことができます。
SNSボタンや投稿・更新日などの非表示機能だけでなく、ブロックパターンのトップページカテゴリーにサイト型コンテンツも用意されているので、すぐにトップページを作成できます。
ヘッダー
add_filter('the_site_logo_tag', function($tag, $is_header) {
if ($is_header) {
$tag = '';
}
return $tag;
}, 10, 2);SILK未実装 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">メニュー１</a></li><li><a href="#menu2">メニュー２</a></li><li><a href="#menu3">メニュー３</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を追加することができます。
グローバルナビメニュー
#navi .navi-in .current-menu-item > a,
#navi .navi-in .current-menu-item > a:hover {
color: #fff;
background-color: #f48fb1;
pointer-events: none;
}SILK未実装 現在表示中のページに対応するグローバルナビメニュー項目の文字色・背景色が変更できる、グローバルナビメニューカスタマイズ用プラグインを作成しました。
表示しているページをグローバルナビメニュー上で強調したいとき、またはグローバルナビメニューから同じページをクリックさせたくないとき、メニュー項目のクラス名'current-menu-item'が活用できます。
@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実装済 スマホ・タブレットのみで表示されるヘッダーモバイルメニューを横一列に並べる、横スクロール機能をプラグインに追加しました。
ヘッダーモバイルメニューを横スクロールで一列に並べると、メニュー部分の高さは最小限になるため、サイト上部からメインコンテンツまでの距離を短くできるメリットがあります。
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未実装 各種インデックスリストに表示されるカテゴリーラベルの表示・非表示を選択できる、インデックスリストカスタマイズ用プラグインを作成しました。
エントリーカードをはじめ、投稿ページのアイキャッチや関連記事など、画像上のカテゴリーラベル表示をカスタマイズできます。
add_filter('get_entry_card_thumbnail_size', function ($size) {
return THUMB150;
});SILK未実装 インデックスページのエントリーカードに表示されるサムネイル画像サイズを変更できる、エントリーカードサムネイルサイズ機能をプラグインに追加しました。
エントリーカードのアイキャッチ画像サイズ変更に合わせて、CSSで画像の横幅やカードコンテンツの余白などもカスタマイズしましょう。
見出し
.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未実装 見出しのデザインをリセットした状態からカスタマイズできる、見出しカスタマイズ用プラグインを作成しました。
Cocoonをスキンなしのデフォルトで使用したいものの、見出しのデザインくらいはカスタマイズしたいとき、見出し部分のCSSをリセットしてからカスタマイズするとスムーズにできます。
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実装済 目次の見出しリンクをクリックしたときにスムーススクロールする、目次カスタマイズ用プラグインを作成しました。
目次などの記事本文にあるページ内リンクをクリックした際、スムーススクロールだと同じページ内をどのように移動したかが視覚的に分かるので、読者はスクロール後の位置を把握しやすいというメリットがあります。
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見出しの直前）から目次に戻るためのリンクが表示される、「目次に戻る」機能をプラグインに追加しました。
各章の最後にリンクを置けば邪魔にはなりませんし、章ごとに目次を確認できるので便利です。
カラーパレット
//デフォルト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設定からカラーパレットのデフォルト色を設定できる、カラーパレットカスタマイズ用プラグインを作成しました。
Cocoonのブロックエディターでは合計31色（キーカラー1色＋デフォルト24色＋拡張6色）ものカラーパレット色が用意されていますが、サイトデザインに合わせてカラーパレットの配色をカスタマイズするのがおすすめです。
ソースコード
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実装済 ソースコードにコピーボタンを追加する、ソースコードカスタマイズ用プラグインを作成しました。
プラグインの有効化のみで設定用ページメニューはなく、各ソースコードをクリップボードにコピーできるボタンが表示されます。
パンくずリスト
//投稿の「ホーム」
add_filter('breadcrumbs_single_root_text', function ($text) {
return 'WordPressテーマ';
});
//固定ページの「ホーム」
add_filter('breadcrumbs_page_root_text', function ($text) {
return 'WordPressテーマ';
});SILK未実装 投稿や固定ページに表示されるパンくずリストのルートテキスト「ホーム」を変更できる、パンくずリストカスタマイズ用プラグインを作成しました。
パンくずリストのルートテキストを「ホーム」からサイトタイトルやメインキーワードなどに変更することで、トップページの内容が伝わりやすくなります。
サイドバーウィジェット
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未実装 カテゴリーページやタグページで個別にサイドバーの表示・非表示を選択できる、サイドバーウィジェットカスタマイズ用プラグインを作成しました。
投稿や固定ページ以外では個別にサイドバー表示を変更できず、Cocoon設定で特定のテンプレートをまとめて非表示にする、またはカスタマイズするしかありません。
プラグインの設定用ページメニューはありませんが、本文を作成できるカテゴリーとタグの編集画面にはカラム設定が追加され、個別にサイドバー表示を変更できます。
Cocoonスキンの自作方法
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）の制御です。
//アピールエリア設定のボタンメッセージ
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設定上にはスキン制御が反映されないので、該当部分の設定は変更することができます。
//特定の固定ページのみ通知設定を変更する場合
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設定値を特定の条件下のみ変更するようなカスタマイズであっても、スキン制御の動的な操作を取り入れるだけで簡単に記述できます。
//プラグイン内にある自作スキン読み込み
global $_THEME_OPTIONS;
$_THEME_OPTIONS['skin_url'] = untrailingslashit(plugin_dir_url(__FILE__)).'/original-skin/style.css';スキン設定ではテーマ同梱のスキンしか選択できませんが、自作スキンをWordPressプラグインなどのテーマ外で効率的に開発・管理したい場合、スキン制御から設定できます。
キーカラー設定のCSS対応
//ブロックエディターのキーカラー
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スキンを作成したいスキン開発者向けに、サンプルコード実装済みのスキンテンプレートを用意しました。
Cocoon設定用CSSにスキンのキーカラー設定用CSSを追加し、テーマのキーカラー設定用CSSが不要な場合は除去します。
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設定値変更用プラグインを作成しました。
オプション設定のようにCocoon設定の推奨値をスキン制御用ファイルで共有すれば、スキン制御による機能の制限を最小限に抑えられ、スキンの利便性が損なわれることはありません。
Cocoon設定値を自動的に書き換えるので、バックアップとセットで実行できるように設定項目を追加しましょう。
AMP設定のサイズ制限対応
スキン制御によってAMP設定の「スキンのスタイルを有効化にする」を無効化しなければ、有効時のAMPページでは使用スキンのstyle.cssとamp.cssが読み込まれます。
add_filter('amp_skin_css', function($css) {
return '';
});SILKスキンのようにCSSサイズが大きくなり、AMPページのサイズ上限約75KBを超えてしまった場合、AMPページでの読み込みをamp.cssのみに制限することで軽量化する方法もあります。