ホームページ >CMS チュートリアル >＆＃＆プレス >Kirkiを使用した高速WordPressカスタマイザーオプション

Kirkiを使用した高速WordPressカスタマイザーオプション

William Shakespeareオリジナル: 2025-02-16 10:46:11788ブラウズ

WordPressユーザーが慣れていることの1つは、簡単で、コードが必要なテーマのカスタマイズオプションはありません。アイデアは次のとおりです。テーマをダウンロードし、テーマパネルでアクティブにし、カスタマイズパネルにアクセスし、マウスクリックだけでテーマの色、レイアウト、フォントなどを調整します。

WordPressは、テーマ開発者にカスタマイザーAPIを提供します。これは、一貫したカスタマイズインターフェイスの作成を促進する、クリーンでオブジェクト指向のメソッドセットです。カスタマイズパネルでは、ユーザーはPHPやCSSコードをいじらずに簡単に変更を加えてライブプレビューできます。カスタマイザーAPIを使用したテーマオプションの開発は、簡単で論理的なプロセスですが、一定量の反復コードを作成することが含まれます。機能的で安全なカスタマイザーのオプションを構築するために必要ないくつかの手順を削減するために、Aristedes Stathopoulosは無料でオープンソースのプラグインであるKirkiを開発しています。

この投稿では、KirkiをWordPressテーマに統合する方法と、いくつかのカスタマイザーオプションを作成するために使用する方法を示します。

キーテイクアウト

kirkiは、よりシンプルな構文と高度な機能を提供し、開発者がより少ないコードでより多くの記述を提供できるようにすることにより、WordPressカスタマイザーAPIを強化します。

ツールキットは常に進化しており、ユーザーはGitHubでの開発に貢献することをお勧めします。

Kirkiは、テーマ内のプラグインまたはライブラリとしてWordPressテーマに簡単に統合でき、使用方法を柔軟に提供できます。

Kirkiは、カラーピッカー、ラジオ画像、Textareasなどのさまざまなコントロールを提供します。これは、エンドユーザーが管理できるカスタマイズ可能なテーマオプションを作成するために使用できます。

kirkiはフレームワークではありません。これは、WordPress開発者がカスタマイザーを使用し、コードを抽象化し、誰もが美しく意味のあるユーザーエクスペリエンスを簡単に作成できるようにすることで、その高度な機能と柔軟性を活用できるツールキットです。

このツールキットについて2ポイントを家に持ち帰りたいです。

kirkiは、WordPressカスタマイザーAPIを置き換えません。「デフォルトのWordPressメソッドのラッパーが作成され、構文を簡素化し、コードを減らすことでより多くの書き込みを可能にします」を作成します。 Kirki APIと一緒にネイティブカスタマイザーの方法を使用できます。さらに良いことに、Kirkiに近づく前に、カスタマイザーAPIに精通していることを暖かくお勧めします。カスタマイザーオブジェクトの便利な紹介をお探しの場合は、Narayan PrustyによるWordPressテーマのカスタマイズAPIを始めましょう。
Kirkiは、WordPressカスタマイザー自体とは異なり、絶え間ない進化と改善の状態にあります。したがって、バグレポート、または新機能のリクエストは、GitHubリポジトリに位置を持ち、プラグインの開発バージョンをダウンロードして開発に貢献できます。

Kirkiが動作しているのを見る時が来ました。フォローしたい場合は、WordPressテーマの準備をしているか、この投稿で説明したすべてのコードを含むSuperminimalデモテーマをつかみます。
あなたのテーマにkirkiを含める方法

KirkiはWordPressプラグインとしてパッケージ化されています。そのため、WordPress.orgプラグインリポジトリから、またはWordPressインストールのバックエンドから直接ダウンロードして、それを解凍してアクティブ化します。

ライブラリとしてテーマにKirkiを含めたい場合は、以下に概説する手順に従ってください。

Kirkiディレクトリをテーマのフォルダーにコピーします。

この記事のデモテーマでは、KirkiファイルはIncと呼ばれるディレクトリ内にあります。

この行をfunctions.phpに追加することにより、テーマをkirkiと「トーク」します（テーマのファイル構造に合わせてキルキフォルダーへのパスを調整してください）。

関数を追加して、Kirki構成オプションを含めてKirki/configフィルターにフックします。この関数に追加したいことはあなた次第です。この投稿では、新しい場所、つまりプラグインのフォルダーではなくテーマのフォルダーを「認識」するために、Kirkiが必要とするコードを追加して、最小限に抑えましょう。

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

オプションの追加を開始しましょう

カスタマイザーオプションは、オプションでパネル内にあるセクション内にライブです。この記事のデモプロジェクトでは、ネイティブカスタマイザーの方法を使用して、専用のパネル内のすべてのセクションをグループ化します。

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

次に、このコードを以前のadd_panelカスタマイザーメソッドのすぐ下に配置することにより、サイトテキストの色、サイトレイアウト、およびフッターテキストオプションのセクションをそれぞれ追加します。

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

最初のkirkiを搭載したオプションを追加する準備ができました。

テキストカラーオプション

すべてのオプション関連コードは、関数内に配置されます。この関数は、Kirki/Fieldsフィルターを介してフィルタリングされます。

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

WordPressテーマユーザーにテキストの色を簡単に変更する簡単な方法を与えましょう。これはすぐにKirkiで行われます。 superminimal_demo_fields（）関数内に次のコードスニペットを追加します。声明。

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

Kirkiは、設定と関連するコントロールの両方を一度に追加するための凝縮された構文を提供します。

$ fields [] arrayを分解しましょう。

ラベルと説明ユーザーと通信するためにあります。ラベルにはオプションのタイトルが表示され、説明はオプションが何をするかを示すものを提供します。

サイトレイアウトオプション

kirkiは、洗練されたカスタマイザーコントロールをたくさん提供しています。私のお気に入りのものはラジオ画像コントロールです。

テーマに追加して、ユーザーにサイトのレイアウトを変更するオプションを提供する方法は次のとおりです。

以前の$ field []配列スニペットの直後に上記のコードを配置します。コードに出力パラメーターが追加されていないことに注意してください。これは、各無線画像入力の値がCSSプロパティ値ではないためです。 Kirkiを使用した高速WordPressカスタマイザーオプション

Superminal Demoテーマにレイアウトオプションを実装する方法の詳細を確認してください。

フッターテキストオプション

WordPressのテーマユーザーに出会ったことは何回、テーマのフッターエリアにある開発者を交換するのを手伝うように頼みましたか？ユーザーがカスタマイザーからフッターテキストを簡単に管理できるようにするオプションを追加するには、Kirkiで数分かかります。これがコードです。

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

上記のコードは、ユーザーが著作権通知、クレジットなどを書くことができるテキストアレアを出力します。

Textareaに入力されたテキストを抽出して表示するには、次のようにネイティブカスタマイザーメソッドget_theme_modをfooter.phpで使用します。 Kirkiを使用した高速WordPressカスタマイザーオプション

次に、WordPressカスタマイザーでのユーザーエクスペリエンスを改善するために、Kirkiができることをチェックしてみましょう。

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

条件付きオプションを追加する方法

テーマデザイナーとして、混乱を招くオプションがたくさんあるユーザーを圧倒するのは好きではありません。ユーザーが特定のオプションを選択するまで、いくつかの選択肢を作成する必要はありません。カスタマイザーは、パネル、セクション、コントロールの便利なActive_Callbackパラメーターを提供します。このパラメーターは、パネル、セクション、またはコントロールがカスタマイザーに表示される前に満たされなければならない特定の条件に設定できます。

この点でキルキは何を提供していますか？

Kirki APIは、必要なパラメーターを使用して、別のコントロールの値に基づいてカスタマイザーのコントロールを非表示または表示します。

たとえば、

テキストアレアを表示して、ユーザーがチェックボックスをチェックした場合にのみフッターテキストを変更できるようにしたいとします。これを達成するには、次のコードをSuperMinimal_Footer_Textコントロールに追加します。

上記のスニペットをTextareaコントロールのコードに追加すると、Superminimal_reveal_footer_textコントロールの値が、カスタマイザーにTextAreaコントロールが表示される前に1に等しくなることが保証されます。 superminimal_reveal_footer_textコントロールをsuperminimal_demo_fields（）関数に追加しましょう。

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

チェックボックスをチェックした後、つまり、その値を0に変更することにより、CustexAreaがカスタマイザーに表示されます。

ライブプレビューを強化する

カスタマイザーには、プレビュー領域にAJAX機能を追加する強力なJavaScript APIが付属しています。この拡張により、ユーザーはカスタマイザープレビューページ全体が更新されるのを待たずにリアルタイムで変更を確認できます。

$フィールド[]アレイにいくつかの便利なパラメーターを追加するだけで、Kirkiで同じ結果を達成できます。

たとえば、

superminimal_body_color設定にajaxifiedライブプレビューを追加するには、適切な$フィールド[]配列に次のスニペットを追加します。

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

上記のコードが何をしているのかを説明させてください。

最初に、上記のコードは、輸送方法を更新（デフォルト）からポストメサージに変更します。これは、ライブプレビューにJavaScriptを使用する必要があることをカスタマイザーに示します。
次に、JS_VARSパラメーター値は、CSSカラープロパティを使用してボディとPの要素を変更することを示します。

Kirkiは、関数パラメーターに2つの事前定義された値を提供します。 CSS値を使用している場合は、Background-Color、Color、font-SizeなどのCSSルールを追加している場合は、設定がHTMLマークアップの文字列を保存してページに挿入する場合はHTML値を使用します。

HTML値を使用する方法の例として、フッターテキストの変更を管理する設定にAjax Live Preview機能を追加しましょう。 superminimal_footer_text設定を含む$ fields []アレイの最後にこのスニペットを追加します。

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

それだけです。スーパーマニマル_footer_textセクション内のテキストアレアに何かを書いてみてください。完全なページをリロードせずに、それに応じて、プレビュー画面の対応するフッターテキストが変更されることにすぐに気付くでしょう。いいね！

ラジオ画像コントロールを使用したAjax Liveプレビュー

CSSもHTMLも、AJAXライブプレビューを有効にする関数パラメーターに適していない場合があります。適切なケースは、サイトレイアウトを変更するための設定です。関数パラメーターの値としてCSSを使用すると、問題の設定がCSSプロパティ値を保存しないため、あまり意味がありません。同様に、HTMLを使用することはそれを完全に削減しません。実際、それは

fullwidth、sidebar-left、またはプレビューページでのサイドバーライトを吐き出すだけです。 [制御]ボタンが選択されています。しかし、これはあなたが達成したいことではありません。

良いニュースは、関数パラメーターの値としてカスタムJavaScript関数名をプラグインできることです。

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

カスタム関数が存続するJavaScriptファイルをenceueし、Customize_Preview_initアクションフックにフックする必要があります。

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

最後に、ネイティブカスタマイザーJavaScript APIを使用してライブプレビューを処理するJavaScript関数を書きます。

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Kirkiの素晴らしいところは、WordPressカスタマイザーAPIの代わりにではなく、一緒に使用できることです。したがって、状況に必要な場合、2つのAPIをすぐに簡単に切り替えることができます。

リソース

もっと飢えていますか？ここにいくつかの素晴らしいリソースがあります。

Kirki Toolkitドキュメント。
kirkiカスタマイザーを使用したワードプレステーマの構築、アリステディドスタトプロス。
テーマオプション - WordPress.orgテーマハンドブックからのカスタマイザーAPI。

結論

Kirki ToolkitをWordPressテーマに統合する方法を示しました。

kirkiは積極的に開発され、サポートされています。そのAPIとカスタムコントロールは、カスタマイザーのテーマオプションを開発するのにかかる時間をすでに大幅に最適化しています。これは、WordPress.orgテーマリポジトリにテーマをリストしたい場合に特に重要になります。実際、カスタマイズオプションページではなく、カスタマイザーを介してカスタマイズオプションを提供するテーマが必要です。

この投稿で説明したコードの詳細を掘り下げるには、GitHubからSuperminal Demoテーマを自由にダウンロードしてください。

あなたのフィードバックを楽しみにしています！

kirkiを使用した高速のWordPressカスタマイザーオプション開発に関するよくある質問

Kirkiとは何ですか？また、WordPressの開発にどのように利益をもたらしますか？

Kirkiは、WordPressのテーマを開発するプロセスを簡素化するために設計されたツールキットです。 WordPressのテーマを簡単に作成、カスタマイズ、および管理できるさまざまな機能を提供します。これらには、変更をリアルタイムでプレビューできるカスタマイザー、さまざまな種類のコンテンツのさまざまなコントロール、必要な機能のみを含めることができるモジュラー構造が含まれます。 Kirkiを使用することで、開発者は時間と労力を節約し、より強力で柔軟なテーマを作成できます。 WordPressプラグインディレクトリからダウンロードして、他のプラグインと同じようにインストールできます。インストールしたら、WordPressカスタマイザーを介してKirkiの機能にアクセスできます。 Kirkiをセットアップするには、テーマの構成を追加する必要があります。これには、テーマのfunctions.phpファイルに数行のコードを追加することが含まれます。この構成は、テーマのオプションと設定を指定します。

Kirkiはどのような種類のコントロールを提供しますか？これらには、テキスト、チェックボックス、ラジオボタンなどの基本的なコントロール、およびカラーピッカー、画像アップローダー、タイポグラフィセレクターなどのより高度なコントロールが含まれます。各コントロールには、独自のオプションと設定のセットが付属しているため、ニーズに合わせてコントロールをカスタマイズできます。

kirkiでリアルタイムプレビュー機能を使用するにはどうすればよいですか？

kirkiのリアルタイムプレビュー機能により、変更を行うにつれて変更が表示されます。この機能を使用するには、制御構成に「トランスポート」オプションを追加する必要があります。「輸送」オプションは、制御の変更がプレビューにどのように反映されるかを指定します。このオプションを「ポストメッジ」に設定することにより、コントロールのリアルタイムプレビューを有効にすることができます。 WordPressテーマ。ただし、Kirkiの機能を最大限に活用するには、テーマがWordPressカスタマイザーをサポートする必要があります。ほとんどの最新のWordPressテーマはカスタマイザーをサポートするため、これはほとんどのユーザーにとって問題ではないはずです。テーマのfunctions.phpファイルへのコードの数行。コードは、パネルのID、タイトル、説明、および優先度を指定します。追加すると、パネルはWordPressカスタマイザーに表示され、セクションとコントロールを追加できます。 Kirkiの構造とは、それぞれが特定の機能セットを提供する別々のモジュールに分割されることを意味します。これにより、必要なモジュールのみを含めることができ、テーマのサイズと複雑さを軽減できます。また、テーマの残りに影響を与えることなく個々のモジュールを更新または交換できるため、テーマの管理と更新が簡単になります。 🎜> Kirkiは、テーマのタイポグラフィをカスタマイズできるタイポグラフィコントロールを提供します。このコントロールは、フォントファミリ、バリアント、サイズ、ラインの高さ、文字間隔、および色を設定するためのオプションを提供します。また、Googleフォントをコントロールに追加して、幅広いフォントにアクセスできます。子供のテーマ。子のテーマは、親のテーマとして知られる別のテーマの機能とスタイリングを継承するテーマです。子テーマを作成することにより、元のコードに影響を与えることなく親のテーマを変更できます。 Kirkiは、子のテーマの作成とカスタマイズを簡単に作成できるさまざまな機能を提供します。 WordPressダッシュボードから更新するか、WordPressプラグインディレクトリから最新バージョンをダウンロードして手動でインストールすることで更新できます。 WordPressの最新バージョンとの互換性を確保し、新しい機能と改善の恩恵を受けるために、Kirkiを最新の状態に保つことが重要です。

以上がKirkiを使用した高速WordPressカスタマイザーオプションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：WordPressを使用したオブジェクト指向開発次の記事：WordPressを使用したオブジェクト指向開発

続きを見る

Kirkiを使用した高速WordPressカスタマイザーオプション

Kirkiは、テーマ内のプラグインまたはライブラリとしてWordPressテーマに簡単に統合でき、使用方法を柔軟に提供できます。

ライブラリとしてテーマにKirkiを含めたい場合は、以下に概説する手順に従ってください。

テーマに追加して、ユーザーにサイトのレイアウトを変更するオプションを提供する方法は次のとおりです。

リソース

結論

​​

kirkiでリアルタイムプレビュー機能を使用するにはどうすればよいですか？

関連記事