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

WP_Customize_Media_ControlWordPressテーマのカスタマイザーメディアコントロールの詳細な説明：新しい

class

WP_Customize_Upload_Control最近のWordPressの更新により、APIが変更されました。いくつかの機能とクラスが追加され、他の機能は非推奨です。この記事では、トピックカスタマイザーメディアコントロールについて説明します。以前のバージョンでは、これらのコントロールが利用可能でしたが、WP_Customize_Media_Controlクラスでのみ利用可能でした。今、私たちは

と呼ばれるメディアを管理するための新しいクラスを発見しました。

WP_Customize_Media_Control最初に、この新しいクラスを使用してテーマのカスタマイザーのメディアコントロールを管理する方法を説明します。次に、トリミング画像の制御を可能にするために

を拡張する具体的なクラスの例を紹介します。

キーポイント：

• WP_Customize_Media_Control WordPressテーマのカスタマイザーメディアコントロールは、メディア管理を改善できる新しい
クラスを含む新しい機能とクラスを含むように更新されています。
• WP_Customize_Media_Controlfunctions.phpを使用して、ユーザーがすべてのページでアクセスできるオーディオファイルを選択できるようにすることができます。このコントロールは、テーマの
ファイルまたは新しいプラグインに追加できます。
• WP_Customize_Media_ControlWP_Customize_Cropped_Image_Controlを拡張して、
クラスなどの機能を追加することができます。これにより、ユーザーは画像を使用する前に選択してトリミングできます。
新しいコントロールにより、テーマのカスタマイザーがより多用途になり、開発者が独自のメディアコントロールを追加し、最も有用な価値を取得できるようになりました。メディアID。この基本クラスは、より具体的なコントロールに拡張できます。

メディアコントロールを管理するための新しいベースクラス

なぜ新しいクラスを紹介するのですか？

WP_Customize_Upload_Controlバージョン4.3の前に、WordPressは、メディアファイルのアップロードをテーマのカスタマイザーに管理するクラスを提供してくれました。ただし、このクラスはアップロードされたメディアIDを保存するのではなく、そのURLのみを保存します。 IDはメディアファイルに関する情報を取得するためのより一般的な方法であるため、新しいクラスWP_Customize_Media_Controlを提供することが決定されました。

WP_Customize_Upload_Controlの使用に慣れている場合は、問題なく使用することができます。これは、WP_Customize_Media_Controlクラスを拡張して互換性を確保するためです。ただし、コードを更新してWP_Customize_Media_Controlを使用することは、間違いなくより良いアイデアです。

このメディアコントロールの使用方法

この新しいメディア制御は、保存された値を除いて、前身と同じ方法で使用されます。それはもはやURLではないため、同じ方法でクリーンアップすることはできません。

このコントロールの使用方法を理解するために、特定の例を確認します。訪問者がすべてのページで聴くことができるオーディオファイルをユーザーに選択させる方法を確認します。コードをトピックのファイルまたは新しいプラグインに書き込むことができます。どちらも受け入れられ、両方のオプションには独自の利点があります。

functions.phpトピックカスタマイザーAPIはこの記事の主な焦点ではないため、ここで呼び出す機能に利用可能なすべてのオプションを説明するものではありません。

基本的な使用法

最初に、ユーザーがテーマのカスタマイザーを表示したいときにWordPressによって呼び出されるWordPress関数から始めます。この関数は、このカスタマイザーにカスタム要素を追加します。 WordPressに、適切なタイミングで関数を呼び出すことを望んでいることを通知するには、アクションを使用します。

customize_registerパラメーター（ここで命名

）は、テーマのカスタマイザーを表すオブジェクトです。設定を追加するために必要なすべてのメソッドが含まれています。

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

カスタムサウンドを追加するのに本当に適したデフォルトセクションはないため、単に「サウンド」という名前のセクションを追加します。 $wp_customize

予想どおり、このメソッドは「sound」という新しいセクションを作成します。ユーザーが開くと、上部に指示が表示されます。 3番目のオプションにより、このセクションは、トピックオプションを既に編集できるユーザーによってのみ表示されます。最後に、配列オプションの前の最初のパラメーターに注意してください。セクションのIDを定義します。このセクションでコントロールを追加するときに再利用する必要があります。

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

今すぐテーマカスタマイザーを開くと、このセクションは表示されません。これは正常です。WordPressは空の部分を表示しないため、少なくとも1つのコントロールで埋める必要があります。

テーマカスタマイザーAPIは、コントロールを2つの部分に分割します。ユーザーが正しいデータを選択または入力できるUIコントロールと、現在の値を取得して新しい値を保存する設定です。設定をUIコントロールとデータベースの間のインターフェイスとして扱います。

コントロールを作成する前に設定を作成する必要があります。

設定されたIDとして「音楽」を指定します。最初のオプションに示されているように、これはテーマの変更です。機能オプションは、

メソッドと同じです。最後に、クリーンアップコールバック関数として

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

を指​​定します。このWordPress関数は、値が正の整数であることを確認するためのショートカットです。上記で見たように、

はIDを保存するため、値をクリーンアップするために使用したい関数です。 add_section() absint()ユーザーが見ることができるUIコントロールを追加する準備ができました。 abs(intval()) WP_Customize_Media_Control

オブジェクトを構築するには、3つのパラメーターが必要です。現在のテーマカスタマイザーインスタンス、対応するセットID（上記で作成されたばかり）、およびオプション配列です。

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

最後に、ここでは、メディアファイルを選択する方法をユーザーに提供します。選択したオーディオファイルのみを使用してほしいので、オーディオを目的の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');

ユーザーが選択を行った場合、この変数には選択したメディアのIDが含まれます。言い換えれば、選択が行われたかどうかを確認するには、このIDがゼロと異なるかどうかを確認する必要があります。

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

オーディオタグを作成するには、パラメーターを必要とする

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

という名前のオプションが含まれている必要があります。この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

がfalseに設定されている場合、ユーザーはデフォルトの幅よりも大きな領域を選択できません。このオプションをtrueに設定すると、この制約はキャンセルされます。同じことがflex_widthについても言えます。 flex_height

最後に、

およびflex_widthがfalse（デフォルト値）に設定されている場合（デフォルト値）、ユーザーが幅と高さのオプションで示したのとまったく同じサイズの画像を選択した場合、トリミングステップはスキップされます。 flex_height

トリミング画像は元の画像を変更しないことに注意してください。新しいサブメディアは、トリミングされた画像で作成され、元のファイルは同じままです。このように、ユーザーが複数の場所で同じ画像を使用する必要がある場合、同じ画像を複数回アップロードする必要はありません。

トリミングされた画像を取得する方法は、以前に音を取得するために使用した方法に似ています。

を使用して画像IDを取得し、get_theme_mod()を使用してURLを取得します。次に、私たちはそれを望む方法で表示します。ここでは、画像をエコーする最も簡単な方法を選択しました。 wp_get_attachment_url()

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

結論 これらの新しいコントロールにより、テーマカスタマイザーは、開発者がより簡単に行うことができるため、ますます興味深いものになりつつあります。これで、このカスタマイザーでメディアコントロールが必要な場合は、独自のコントロールを追加して、最も便利な価値を取得できます：Media ID。

この記事に見られる基本クラスは、より具体的なコントロールが必要な場合に拡張できます。これは、WordPressコアの複数の場所で行われます。クロップ画像制御は

に拡張され、このクラス自体は新しいサイトアイコンAPIで使用されるコントロールによって拡張されます。これらは、このAPIでできるアクションの例にすぎません。

テーマまたはプラグインを使用して、テーマカスタマイザーを使用できます。ただし、小さなプラグインを提供する方が実用的であるため、このリンクを介してそれを見つけることができます。この記事に見られる例を組み合わせています。 WP_Customize_Media_Control

（FAQセクションをここに挿入する必要があり、コンテンツは入力テキストのFAQパーツと一致しています）

以上がWordPressテーマカスタマイザーメディアコントロールを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。