プロジェクトでKirkiフレームワークを使用して、カスタマイザー設定をより高速に構築する

公開: 2019-08-10

Kirkiは、テーマまたはプラグインにカスタマイザーコントロールを追加しようとしている開発者向けに構築された無料のオープンソース（MITライセンス）フレームワークです。

Kirkiのリード開発者であるAristeidesStathopoulosは、2014年からフレームワークに取り組んでいます。継続的な更新と改善のおかげで、KirkiはGithub上に1000を超えるスターと300のフォークを含むコミュニティを構築しました。

Kirkiの前は、カスタマイザーに触れたことはありませんでした。 Kirkiは、カスタマイザーを理解し、より短い時間で多くのことを行うのを助けてくれました！
LebCit –WordPressテーマ開発者

WordPressコアカスタマイザーコントロール

WordPress Coreには、デフォルトでいくつかの基本的なカスタマイザーコントロールが含まれています。例：テキスト、テキストエリア、チェックボックス、ラジオ、選択、ドロップダウンページ、電子メール、URL、番号、非表示、および日付のコントロール。

Kirkiはコアコントロールもサポートしており、さらに約20個をサポートしています。一般的に、Kirkiコントロールはより高度なユースケースをカバーします。例えば：

タイポグラフィ
カラーパレット
TinyMCEエディター
ソート可能なフィールド

Kirkiは、CSS出力やpostMessageスクリプトの自動生成など、CoreWordPressでは利用できない機能も提供します。これらの機能については、この記事の後半で説明しますが、開発時間を簡単に半分に短縮できます。

キルキは遅い

キルキに対して一般的に抱かれる批判の1つは、それが遅いということです。実際、この批判はほとんどのフレームワーク（WordPressを含む）に対して使用されています。それは理にかなっていますよね？使用しない可能性のある多くのコードをロードしています。

この場合、現実には反対のことが当てはまります。ほとんどの場合、Kirkiを使用して構築されたコントロールパネルは、CoreControlsを使用して構築された同じパネルよりも高速になります。

これは、KirkiがWordPressに組み込まれていない最適化レイヤーを追加するためです。

カスタマイザーが初期化されると、WordPressは、セクションまたはパネル内にあり、ユーザーがまだ操作できない場合でも、すべてのコントロールを即座に読み込もうとします。それに比べて、Kirkiは、ユーザーがコントロールを操作する直前までロードを延期します。

これの実際の効果を確認するために、各方法を使用して50のカラーコントロールを追加してみましょう。

コアメソッド：

 for（$ i = 0; $ i <50; $ i ++）{
	$ wp_customize-> add_setting（ 'color_setting_hex _'。$ i、array（
		'デフォルト' => '＃0088CC'
	））;

	//カラーピッカーコントロールを追加します
	$ wp_customize-> add_control（new WP_Customize_Color_Control（$ wp_customize、 'color_setting_hex _'。$ i、array（
		'ラベル' => 'カラーコントロール'、
		'セクション' => 'title_tagline'、
		'settings' => 'color_setting_hex_'。 $ i、
	）））;
}

カーキと：

 for（$ i = 0; $ i <50; $ i ++）{
     Kirki :: add_field（ 'config_id'、array（
         'タイプ' => '色'、
         'settings' => 'color_setting_hex_'。 $ i、
         'ラベル' => __（ 'カラーコントロール'、 'キルキ'）、
         'セクション' => 'title_tagline'、
         'デフォルト' => '＃0088CC'、
     ））;
 }

結果：

ご覧のとおり、Kirkiを使用すると、初期ロード速度がかなり速くなります。コントロールを作成するために必要なコードもより簡潔です。

Kirkiをプロジェクトに統合する

Kirki Frameworkをプロジェクトに統合する方法は複数ありますが、公式ドキュメントはさまざまな方法をうまく説明しています。

プロジェクトのコードにフレームワークを直接含めるのではなく、開発者がユーザーにKirkiのプラグインバージョンをインストールするようにガイドすることをお勧めします。これは、TGMPAまたは提供されているスクリプトを使用して実行できます。

プラグインルートを採用する理由は、Kirkiが頻繁に更新および改善されるためです。プラグインバージョンをインストールすることにより、ユーザーはバグ修正とセキュリティアップデートに即座にアクセスできるようになります。

対照的に、プロジェクトの一部としてフレームワークを含める場合、ユーザーはテーマまたはプラグインを更新したときにのみ更新を受け取ります。これは、必要な頻度よりも少ない場合があります。

どちらの方法を使用する場合でも、設定を追加する前に、Kirkiが初期化されていることを確認してください。

 // Kirkiが存在しない場合は、早期終了します。
if（！class_exists（ 'Kirki'））{
    戻る;
}

田畑

コアメソッドの例では、最初に設定を作成し、次にそのコントロールを作成しました。ほとんどの場合、2つは直接リンクされています。 Kirkiはプロセスを簡素化し、代わりに「フィールド」を作成できるようにします。フィールドが作成されると、バックグラウンドで設定とコントロールが構築されます。

フィールドは、予想されるすべての制御引数（ラベル、説明、セクション、デフォルト）と、いくつかのKirki固有の引数をサポートします。

'type'引数を使用すると、Kirkiの30のコントロールタイプの1つを選択できます：https：//kirki.org/docs/controls/

セクション

カスタマイザーセクションを使用すると、コントロールをグループ化できます。 WordPressには、コントロールを追加できる6つの組み込みセクションがあります。

title_tagline –サイトID
色–色
header_image –ヘッダー画像
background_image –背景画像
static_front_page –ホームページ設定
custom_css –追加のCSS

KirkiのセクションはCoreのセクションとまったく同じように機能し、Kirki :: add_section（）メソッドは$ wp_customize-> add_section（）のラッパーであり、同じパラメーターと引数を受け入れます。

 Kirki :: add_section（ 'section_id'、array（
     'title' => esc_html __（ 'My Section'、 'kirki'）、
     'description' => esc_html __（ '私のセクションの説明。'、 'kirki'）、
 ））;

パネル

パネルを使用すると、セクションをグループ化して、別のレベルの階層を作成できます。 WordPress Coreには、「メニュー」という1つの組み込みパネルがあります。

繰り返しになりますが、Kirkiの実装は、コア機能の単なるラッパーです。

 Kirki :: add_panel（ 'panel_id'、array（
     '優先度' => 10
     'title' => esc_html __（ 'My Panel'、 'kirki'）、
     'description' => esc_html __（ 'マイパネルの説明'、 'kirki'）、
 ））;

'トランスポート' => '自動'

従来、カスタマイザコントロールを作成する場合、トランスポート引数には2つのオプションがあります。

更新–ユーザーが変更を加えるたびに、プレビューペインが更新されて変更が表示されます。これには数秒かかる場合があります。
postMessage –ユーザーが変更を加えるたびに、更新を必要とせず、ほぼ瞬時に実行されるJavascriptを使用してプレビューペインが更新されます。

postMessageは間違いなくプレビューアを更新するための優れた方法であり、可能な場合は使用する必要があります。ただし、欠点が1つあります。postMessageを使用すると、コントロールごとにカスタムJSコードを作成する必要があります。単純な実装は次のようになります。

 //サイトのタイトルをリアルタイムで更新します...
wp.customize（ 'blogname'、function（value）{
    value.bind（function（newval）{
        $（ '＃site-title a'）。html（newval）;
    }）;
}）;

設定が多い場合、これはすぐに繰り返される可能性があります。

これはKirkiが輝いているところです、それは3番目のオプションを追加します： 'transport' => 'auto'。

'transport' => 'auto'は、Kirkiが 'output'という名前の別の引数と一緒に機能します。両方の値が定義されると、KirkiはpostMessageスクリプトを自動生成します。つまり、Javascriptコードを記述しなくても、postMessageを使用することのすべてのメリットを享受できます。

transport => 'auto'を使用するフィールドは次のようになります。

 Kirki :: add_field（ 'config_id'、array（
     'タイプ' => '色'、
     '設定' => 'color_setting_hex'、
     'ラベル' => __（ 'カラーコントロール'、 'キルキ'）、
     'セクション' => '色'、
     'デフォルト' => '＃0088CC'、
     'トランスポート' => '自動'、
     '出力' => array（
         配列（
             '要素' => '本体'、
             'プロパティ' => '背景色'、
         ）、
     ）、
 ））;

Kirkiのこの時間節約機能は、ほとんどの場合、独自のpostMessageスクリプトを作成したりキューに入れたりする必要がないことを意味します。

フロントエンドCSS出力

カスタマイザー設定を作成するもう1つの部分は、フロントエンドでCSS出力を生成することです。簡単な例は次のようになります。

 / **
 *カスタマイザーCSSをwp_headに出力します
 * /
関数wptavern_customizer_css（）{
	$ bg_color = get_theme_mod（ 'color_setting_hex'）;
	？>
	<スタイル>
		体 {
			背景色：<？php echo sanitize_hex_color（$ bg_color）; ？>;
		}
	</ style>
	<？php
}
add_action（ 'wp_head'、wptavern_customizer_css）;

postMessageの例のように、多くの設定がある場合、このコードの記述はすぐに繰り返される可能性があります。

幸い、 'transport' => 'auto'がフロントエンド出力も処理します。簡略化した例でも、 'transport' => 'auto'により、記述する必要のあるコードが約50％削減されました。

結論

この記事では、Kirki Frameworkの基本とその2つの引数について説明しましたが、パフォーマンスを犠牲にすることなく、カスタマイザーコントロールをより高速に作成する方法をすでに理解できています。

Kirkiに飛び込むと、CustomizeAPIに加えてKirkiが追加する豊富な機能にすぐに気付くでしょう。 300,000を超えるWebサイトで使用されており、市場で最大のWordPressテーマのいくつかのコア部分で使用されているのは当然のことです。