見出しメニューのカスタマイズ機能

はじめに

カスタマイザーに、好みのデザインないだよね。

自分で作成して、カスタマイザーのメニューに登録しろよ。

本スキンは、他のスキンとは異なり、カスタマイザーに好みのデザインを追加する独自の機能を備えています。
ここでは、その方法について説明します。

図1に示すように、メニューに独自に作成した以下の項目を登録できます。

表1にファイル命名規則を示します。

ファイル命名規則

項目	見出し	ウィジェット	ローディング画面
設定ファイル	見出し番号.csv	w.csv	l.csv
CSSファイル	見出し番号-枝番.css	w-枝番.css	任意.css
テンプレートファイル	–	–	任意.php

設定ファイルは、以下の形式で作成します。
定義したファイル名は、CSSやテンプレートファイルの名前として使用され、メニュー項目と連携します。

ファイル名,メニューに表示する文言

以下の手順でカスタマイザーにデザインを登録します。

ラベル
フォルダを作成
子テーマのskins下に、スキンと同じフォルダを作成します。
- cocoon-child-master
  - skins
    
    skin-made-in-heaven
    
    assets
    
    css
    
    h2
    
    h3
    
    h4
    
    w
    
    l
    
    tmp
    
    load
ラベル
設定ファイルを作成
見出し「H2」に追加する場合、h2.csvは以下のように作成します。
```
0,装飾なし
1,左縦線
```
ラベル
CSSファイル作成

見出し、ウィジェットのCSSファイルを作成します。
設定ファイルに定義された枝番がCSSのファイル名となり、例えばファイル名は「h2-1.css」となります。
ラベル
ファイルの登録
見出しのCSS、テンプレートファイルを、該当するフォルダに登録します。
- cocoon-child-master
  - skins
    
    skin-made-in-heaven
    
    assets
    
    css
    
    h2
    
    h2.csv
    
    h2-1.css
    
    h3
    
    h4
    
    w
    
    l
    
    tmp
    
    load

以下の手順でカスタマイザーにデザインを登録します。

ラベル
フォルダを作成
子テーマのskins下に、スキンと同じフォルダを作成します。
- cocoon-child-master
  - skins
    
    skin-made-in-heaven
    
    assets
    
    css
    
    h2
    
    h3
    
    h4
    
    w
    
    l
    
    tmp
    
    load
ラベル
設定ファイルを作成
ローディング画面に追加する場合、l.csvは以下のように作成します。
```
none,なし
heart,ハート
```
ラベル
CSSファイル作成

ローディング画面のCSSファイルを作成します。
設定ファイルで定義されたファイル名がCSSのファイル名となり、例えば「heart.css」となります。
ラベル
テンプレートファイル（PHP）を作成
ローディング画面のテンプレートファイル（PHP）を作成します。
設定ファイルで定義されたファイル名がテンプレートファイル名となり、例えば「heart.php」となります。
```
<?php
if (!defined('ABSPATH')) exit;
?>

<div class="loader-bg">
  // ローディング画面
</div>
```
ラベル
CSSおよびテンプレートファイルの登録
見出しのCSS、テンプレートファイルを、該当するフォルダに登録します。
- cocoon-child-master
  - skins
    
    skin-made-in-heaven
    
    assets
    
    css
    
    h2
    
    h3
    
    h4
    
    w
    
    l
    
    l.csv
    
    heart.css
    
    tmp
    
    load
    
    heart.php