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

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 テーマの作成
設定とコントロール

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

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

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

hover

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

基礎となるコード

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

/inc/customizer.php

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

WordPress の組み込み設定

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

下一步是什么？

WordPress 自成立以来一直在 PHP 方面进行了大量投资。因此，支持该生态系统的大多数开发人员对 PHP API 比 JavaScript API 更加熟练和熟悉也就不足为奇了。

直到最近，它才通过定制器和 WP-API 广泛集成了 JavaScript。掌握 WordPress 定制器中的 JavaScript API 可能是一个相当大的挑战。如前所述，WordPress 的这一面目前记录最少。因此，我们将彻底讨论这个主题。

同时，如果您正在寻找其他实用程序来帮助您构建不断增长的 WordPress 工具集，或者学习代码并更加精通 WordPress，请不要忘记查看我们提供的内容可在 Envato 市场购买。

在此，我们已准备好使用 WordPress JavaScript API 的所有基本元素。我们就到此结束。在本系列的下一部分中，我们将揭示 WordPress 中 JavaScript API 背后的更多内容，并开始编写可立即在主题中实现的功能脚本。

敬请期待！

以上がWordPress カスタマイザーでの JavaScript API の使用開始の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。