独自のデザインスキンを作成する場合は、子テーマのfunctions.php あるいは独自のプラグインに以下の書式で記載すると、
外観 > カスタマイズ 画面の『Lightningデザイン設定』パネルのデザインスキン選択プルダウンに表示されるようになります。
// sample の箇所を任意の名称に変更してください
add_filter( 'lightning-design-skins', 'ltg_sample_register_skin' );
function ltg_sample_register_skin( $array ) {
$data = get_file_data( __FILE__, array( 'version' => 'Version' ) );
// スキン識別用名称
$array['sample'] = array(
// プルダウンへの表示名
'label' => 'Sample',
// CSSのURL
'css_path' => plugin_dir_url( __FILE__ ) . 'css/style.css',
// 後読み込みCSSのURL
'css_late_path' => plugin_dir_url( __FILE__ ) . 'assets/css/style_late.css',
// 編集画面用のCSSのURL(指定しない場合はコメントアウトまたは削除でかまいません)
'editor_css_path' => plugin_dir_url( __FILE__ ) . 'css/editor.css',
// 編集画面用(Gutenberg)のCSSのURL
// ※基本的には editor_css_path が反映されるのでコメントアウトまたは削除でかまいません)
// 'gutenberg_css_path' => plugin_dir_url( __FILE__ ) . 'css/editor-gutenberg.css',
// javascript のURL(指定しない場合はコメントアウトまたは削除でかまいません)
'js_path' => plugin_dir_url( __FILE__ ) . 'js/common.min.js',
// スキン固有のPHPファイルを読み込む場合のPHPファイルのサーバーパス(指定しない場合はコメントアウトまたは削除でかまいません)
'php_path' => plugin_dir_path( __FILE__ ) . 'skin-active.php',
// スキン固有のコールバック関数(指定しない場合はコメントアウトまたは削除でかまいません)
'callback' => 'ltg_sample_current_function',
// デザインスキンのバージョン
'version' => $data['version'],
// Bootstrapのバージョン
// ※bs4 を指定すると、テーマ側でbootstrap4のファイルを読み込みます。
// ※指定しない場合はbootstrapは読み込まれないので、スキンのCSS内に同梱して作るなどしてください。 )
'bootstrap' => 'bs4',
);
return $array;
}
また、もう少し高度なスキンを作成するための実用サンプルプラグインは下記に公開していますので、参考にしてみてください。