WordPressテーマカスタマイザーメディアコントロールを使用します

セクションオプションは、コントロールを配置する部品を示すために使用されます。ここでは、この目的のために特別に作成したセクションを使用しています。次に、フィールドのラベルを示します。ここに必要な価値を配置できます。

最後に、ここでは、メディアファイルを選択する方法をユーザーに提供します。選択したオーディオファイルのみを使用してほしいので、オーディオを目的のMIMEタイプとして指定します。このようにして、WordPressは他のタイプのファイルを選択しません。

これはすべてコントロールの作成に関するものです。これで、テーマのカスタマイザーを開くことができます。セクションとコントロールを見る必要があります。

その他のオプション

WP_Customize_Media_Controlコンストラクターの3番目のパラメーターとして提供するオプションの配列は、より多くのオプションを受け入れることができることに注意してください。

そのタグに加えて、オプションを介してコントロールに関する詳細情報を表示することもできます。実際、descriptionオプションに空でない文字列を提供することにより、たとえば表示される場所を説明するように、ラベルの下に指示を表示できます。 description

オプションを介して優先度を設定できます。この番号は、オブジェクトを表示する必要がある順序を定義します。デフォルトでは、優先度は10に設定され、オブジェクトは作成された順序で表示されます。しかし、あなたはそれを変更することができます。たとえば、2つのオブジェクトを作成すると、最初のオブジェクトの優先度を10に設定し、2番目のオブジェクトの優先度を0に設定できます。この方法では、2番目のオブジェクトが最初に表示されます。このオプションは、プラグインまたはテーマが特定の順序で表示する必要がある複数のコントロールを提供する場合に役立ちます。 priority

と呼ばれる新しい関数を作成します。この関数は、選択したメディアに対応するオーディオタグを表示するために、トピックに表示する場所で呼び出されます。 echo_theme_sound()

関数を使用する必要があります。 get_theme_mod()

function add_my_media_controls($wp_customize) {
}
add_action('customize_register', 'add_my_media_controls');

$wp_customize->add_section('sound', array(
    'title' => 'Sound',
    'description' => 'Add a sound to your website',
    'capability' => 'edit_theme_options'
));

を使用します。実際にタグの属性となるオプションの配列です。 wp_audio_shortcode() この配列には、オーディオファイルのURLである

を使用して、以前に取得したIDを使用できます。他のプロパティを使用したい場合は、必須ではありません。利用可能なプロパティの詳細については、WordPress Codexを参照してください。 src

オーディオタグを表示する準備が整いました。私はそれをdivに包むためにここにいますが、あなたは別のタグと別のスタイルを選択することができます。たとえば、ユーザーがオーディオタグの前後に表示されたテキストを提供できるように、echo_theme_sound()関数の2つのパラメーター$beforeと$afterを定義することもできます。

function add_my_media_controls($wp_customize) {
}
add_action('customize_register', 'add_my_media_controls');

さあ、好きなところならどこでもecho_theme_sound()関数を呼び出して、結果を楽しんでください！この関数をテーマファイルで使用すると、ページを更新せずに変更を加えた直後にテーマCustomizerで行った変更を確認できることに注意してください。

トリミングされた画像を管理

を拡張してWP_Customize_Media_Controlを拡張して、機能を追加することができます。このように追加できる機能の具体的な例が必要な場合は、WP_Customize_Cropped_Image_Controlクラスを使用して、WordPress Core自体にある機能を見つけることができます。

その名前から推測したように、これは、ユーザーが使用する前に画像を選択してトリミングする方法を提供する場合に役立ちます。

ここでは、現在のデフォルトのWordPressテーマ（215）に字幕画像を追加するために使用します。この画像をタイトルの上部に表示することを選択しましたが、ウェブサイトのタイトルのすぐ上にありますが、繰り返しますが、この記事の目標は、新しいAPIの具体的な例を示すことです。

最初に、設定を作成します。メディアIDを保存するため、この設定は基本的に以前に追加されたオーディオタグと同じです。

$wp_customize->add_section('sound', array(
    'title' => 'Sound',
    'description' => 'Add a sound to your website',
    'capability' => 'edit_theme_options'
));

次に、興味深い部分：コントロール自体。 WP_Customize_Media_Controlと同様に、WP_Customize_Cropped_Image_Controlのコンストラクターには、テーマカスタマイザーインスタンス、セットID、およびオプションの配列という3つのパラメーターが必要です。

$wp_customize->add_setting('music', array(
    'type' => 'theme_mod',
    'capability' => 'edit_theme_options',
    'sanitize_callback' => 'absint'
));

ここで、新しいセクションを作成しませんでした。WordPressがすでにコントロールを提供するために使用している部分を再利用し、ユーザーが背景画像タイトルを選択できるようにします。ラベルオプションはすでに既知のオプションであり、幅と高さという他の2つのオプションにもっと興味があります。

これらのオプションは、最終画像のサイズを制御するために使用されます。ユーザーは必要な画像を選択し、グラフィックツールを使用すると、必要な画像をトリミングできます。 WordPressは、この選択に基づいて画像をトリミングし、これらのオプションで選択したサイズにトリミングされた画像をサイズ変更します。

ユーザーが画像をトリミングすると、画像の割合の制約がここにあり、他の割合で画像の一部を選択することはできません。しかし、これは変わる可能性があります。

実際、このクラスには他に2つのオプションがあります。デフォルトでは、両方のオプションがfalseに設定されており、示す寸法によって与えられるアスペクト比は制約です。ユーザーは同じ割合の領域を選択する必要があります。 flex_widthただし、オプションのいずれかをtrueに設定すると、この制約が削除され、ユーザーは任意のスケールで画像の一部を選択できます。 WordPressは、結果を要求するサイズに変更するため、変形する可能性があることに注意してください。

およびflex_widthを使用する場合、比率は重要です。実際、最初は、WordPressはユーザーにデフォルトの作物領域を提供します。この領域は、目的のスケール（長方形の最大四角など）の画像内の最大の利用可能な領域に対応しています。これにより、ここで話していることがデフォルトの幅と高さを与えてくれます。 flex_height

function add_my_media_controls($wp_customize) {
}
add_action('customize_register', 'add_my_media_controls');