WordPress カスタマイザーでの JavaScript API の使用開始-＆＃＆プレス-php.cn

WordPress カスタマイザーでの JavaScript API の使用開始

PHPz

リリース： 2023-09-03 23:13:08

オリジナル

1275 人が閲覧しました

WordPress カスタマイザーは、開始以来積極的に開発されてきました。 JavaScript API を含め、API は常に進化しています。ただし、これは WordPress Codex の中で最も文書化されていない API の 1 つです。その結果、JavaScript API を 実際に 利用する方法を示す詳細な記録はわずかしかありません。

WordPress カスタマイザーで JavaScript API を利用すると、テーマをカスタマイズするときに、コントロールからプレビューウィンドウに変更をキャストするだけでなく、より説得力のあるリアルタイムエクスペリエンスを提供できるようになります。

カスタマイザー JavaScript API を使用して、リアルタイムでプレビューウィンドウに変更をキャストする方法についてはご存知かもしれません。これを行うには、transport モードを postMessage に設定し、以下に示すように対応する JavaScript コードを追加します。

リーリー

ただし、パーツ、パネル、コントロールの非表示、表示、移動、別の設定の値に基づいた設定の値の変更、プレビューとコントロールの相互作用の相互接続など、API をさらに拡張することもできます。これらは、このチュートリアルで見ていきます。

＃＃＃クイックスタート＃＃＃

私たちは WordPress カスタマイザーについて、いくつかの記事やシリーズで広範囲にわたって取り上げ、カスタマイザー API の詳細を取り上げてきました。

WordPress カスタマイザーと、パネル、セクション、設定、コントロールなどのコンポーネントの中核となる概念を理解できたと思います。それ以外の場合は、次に進む前に、このトピックに関するチュートリアルとビデオコースを時間をかけて勉強することを強くお勧めします。

WordPress テーマカスタマイザーガイド

WordPressテーマカスタマイザー
カスタマイザーが使用できる WordPress テーマの作成

最初に、このチュートリアルのカスタマイザーに追加された設定とコントロールを調べます。それらを配置するコードも見ていきます。

WordPress 定制器中的 JavaScript API 入门このチュートリアルでは、Web サイトの「サイトタイトル」に焦点を当てます。上でわかるように、ネイティブ WordPress の「サイトタイトル」入力フィールドと、「サイトタイトル」を有効または無効にするカスタムチェックボックスの 2 つのコントロールがあります。これら 2 つのコントロールは、「サイト識別」セクションにあります。画像の右側にはプレビューがあり、レンダリングされている「サイトタイトル」を確認できます。

さらに、以下に示すように、[色] セクションには、サイトタイトルの色とその

hover

ステータス色を変更するための 2 つのコントロールがあります。

WordPress 定制器中的 JavaScript API 入门基礎となるコード

私たちのテーマはアンダースコアに基づいており、すべてのカスタマイザー関連コードは

/inc/customizer.php

ファイルに配置されます。 リーリー上でわかるように、このチュートリアルのニーズを満たすためにコードにいくつかの変更を加えました。

WordPress の組み込み設定

を 12 に下げて、チェックボックス設定 display_blogname が「サイトタイトル」入力フィールドの下に表示されるようにしました。
という名前の新しいコントロールを作成します。 priority を 11 に設定します。この例では、これはサイトのタイトルとタグラインの入力フィールドの間にあります。
のデフォルト色を #f44336 に設定し、transport タイプを postMessage に設定します。新しい設定
も作成しました。同様に、優先度を header_textcolor 設定の下に表示されるように 11 に設定します。

refresh

ではなく、postMessage によって設定されます。 postMessage オプションを使用すると、値を非同期に転送し、リアルタイムでプレビューウィンドウに表示できます。ただし、変更を処理するには独自の JavaScript も作成する必要があります。 JavaScriptをロードする

2 つの JavaScript ファイルを作成する必要があります。1 つのファイル

customizer-preview.js

はプレビューを処理するためのもので、もう 1 つのファイル customizer-control.js はカスタマイザーの内部を処理するためのものです。コントロールパネル。 リーリー次のコードを customizer-preview.js

に含めます。 リーリーこれは現在、空のエンクロージング JavaScript 関数です。このシリーズの次のチュートリアルでは、プレビューウィンドウで変更をプレビューする方法について詳しく説明します。

別のファイル

customizer-control.js

に、次のコードを追加します。 リーリー上でわかるように、このコードをカスタマイザーの

ready

イベント内のこのファイルにラップします。これにより、カスタム機能の実行を開始する前に、設定、パネル、コントロールを含むカスタマイザー内のすべての準備が完全に整うことが保証されます。最後に、コードを追加した後、これら 2 つの JavaScript ファイルを 2 つの異なる場所にロードします。

// 1. customizer-preview.js
function tuts_customize_preview_js() {
	wp_enqueue_script( 'tuts_customizer_preview', get_template_directory_uri() . '/js/customizer-preview.js', array( 'customize-preview' ), null, true );
}
add_action( 'customize_preview_init', 'tuts_customize_preview_js' );

// 2. customizer-control.js
function tuts_customize_control_js() {
	wp_enqueue_script( 'tuts_customizer_control', get_template_directory_uri() . '/js/customizer-control.js', array( 'customize-controls', 'jquery' ), null, true );
}
add_action( 'customize_controls_enqueue_scripts', 'tuts_customize_control_js' );

ログイン後にコピー

customizer-preview.js 文件将通过 customize_preview_init 操作挂钩加载到定制器预览窗口中。 customizer-control.js 文件将加载到定制程序后端，其中的设置和控制元素可通过 customize_controls_enqueue_scripts 操作挂钩访问。