WordPressコンテンツエディターにメディアボタンを追加します-＆＃＆プレス-php.cn

WordPressコンテンツエディターにメディアボタンを追加します

メディアファイルをWordPressの投稿に挿入することは、デフォルトで表示される専用ボタンのおかげで、それほど複雑ではありません。ただし、メディアファイルを使用してプラグインを開発した場合、このボタンはユーザーが機能に必要なコードを挿入するのに役立ちません。

幸いなことに、自分のメディアボタンを追加することが可能です。そうすれば、あなたが望むことを何でもできるようにすることができます。このチュートリアルでは、適切な場所にメディアボタンを追加する方法、ユーザーがクリックしたときにメディアウィンドウを開く方法、そして最後に、選択したアイテムを取得する方法を確認して、それらを同時に挿入する方法を確認します。ビジュアルエディターとHTMLエディターの両方

キーテイクアウト

WordPressコンテンツエディターにメディアボタンを追加するには、プラグインまたはテーマファイルに新しい関数を作成し、Media_Buttonsアクションに機能を引っ掛け、正しい方法でボタンを表示する機能を変更することが含まれます。

メディアウィンドウを開くには、ユーザーがボタンをクリックすると、デフォルトでWordPressに含まれているjQueryを使用してJavaScriptが使用されます。これには、WordPress関数にそれを含むJSファイルの作成やウィンドウの構築が含まれます。

ユーザーの選択は、Media WindowsのWordPressによって作成された「選択」イベントを使用して取得できます。複数選択を許可するかどうかに応じて、選択を保存する変数の使用は異なります。

メディアボタンは、ユーザーがボタンにぶつかるたびに再構築しないようにすることで最適化できます。これは、ウィンドウが既に作成されているかどうかを確認することで実現できます。

メディアボタンを追加
メディアボタンを追加することは、最初で最も簡単な部分です。 WordPressで多くのことをカスタマイズするのと同様に、アクションを使用してボタンを適切な場所に配置します。
メディアボタンは本物のボタンではありません。ボタンのスタイルとのリンクであり、WordPressはこのスタイルのクラスを提供します。

ボタンをIDにします。そうすれば、後でjavascriptでそれを取得することができます。

カスタムメディアボタンの準備ができました。適切なスタイルとほぼ適切な場所があります。実際、デフォルトでは、新しいボタンはデフォルトのボタンの前に配置されます。後に配置したい場合は、関数の優先順位を変更するために、3番目の引数をadd_action（）に渡すことで可能です。

実際には、デフォルトのメディアボタンを表示する関数の優先度は10です。関数の値が低いことを示します。後に配置したい場合は、より大きな価値を示すことができます。

<span>add_action('media_buttons', 'add_my_media_button');</span>

ログイン後にコピー

そしてそれだけです！今、私たちはボタンをもっと便利にする必要があります。

メディアウィンドウを開きます

メディアウィンドウを開くには、javaScriptをjqueryで使用します。これは、デフォルトでWordPressに含まれています。まず、JSファイルを作成します。私はそれをmedia_button.jsという名前に選びましたが、もちろん、あなたはあなた自身の名前を自由に選ぶことができます。

javaScriptファイルを含めます

WordPressに精通している場合は、CMSが必要なJSファイルを含める適切な方法を提供することを知っておく必要があります。そのために、WordPress関数wp_enqueue_script（）を使用する関数を作成します。

ご覧のとおり、jQueryを依存関係として示しています。最後の引数のおかげで、私はフッターにスクリプトを含めることを選択しましたが、あなたが望むなら、あなたはそれをヘッダーに置くことができます。

WordPressに、必要な場合にのみWordPressに含めるように依頼するための関数を作成しました。そのためには、別のアクションを使用します：WP_ENQUEUE_MEDIA。これは、WordPressがメディアボタンで必要なすべてのスクリプトを呼び出すときにトリガーされます。

<span>function add_my_media_button() {
</span>    echo <span>'<a href="#"  >Add my media</a>';
</span><span>}</span>

ログイン後にコピー

ウィンドウを作成します

jQuery関数$（）を使用できるようにするには、jQuery（）関数のmedia_button.jsファイルのコンテンツをカプセル化します。次に、ユーザーがボタンをクリックするとメディアウィンドウを開く新しい機能を作成します。

<span>add_action('media_buttons', 'add_my_media_button', 15);</span>

ログイン後にコピー

メディアウィンドウは、WP.Mediaオブジェクトのインスタンスです。そのコンストラクターは、ウィンドウのいくつかの属性を含む別のオブジェクトである1つのパラメーターを認めます。したがって、上記のopen_media_window_（）関数には以下が含まれる場合があります

タイトル属性は、ウィンドウのタイトルとして表示されます。注意してください

ライブラリ属性は、WordPressによって使用され、ウィンドウに表示されるメディアファイルをフィルタリングします。この例では、画像のみを選択できます。さらに、ユーザーは、複数の属性の誤った値のおかげで複数のファイルを選択することはできません。

これらの属性のいずれも、WordPressで実際に必要とされていません。ただし、タイトルを示していない場合、ウィンドウは無題になります。デフォルトでは、複数の属性がfalseに設定され、表示されているメディアファイルはフィルタリングされていません。

<span>function include_media_button_js_file() {
</span>    <span>wp_enqueue_script('media_button', 'path/to/media_button.js', array('jquery'), '1.0', true);
</span><span>}</span>

ログイン後にコピー

メディアウィンドウを使用

ユーザーの選択を取得

<span>add_action('wp_enqueue_media', 'include_media_button_js_file');</span>

ログイン後にコピー

次のコードは、上記で作成したopen_media_window（）関数内に入ります。

現時点では、窓は構築されていますが、開かれていません。ウィンドウを開くには、Open（）メソッドを使用できますが、前にユーザーの選択を取得することをお勧めします。

それを行うには、Media WindowsのWordPressによって作成された特別なイベントを使用します：選択します。このイベントに関数を添付する必要がありますon（）メソッドの使用が必要です。

ユーザーの選択は、変数選択に保存されます。複数選択を許可するかどうかに応じて、この変数の使用は異なります。

<span>add_action('media_buttons', 'add_my_media_button');</span>

ログイン後にコピー

ユーザーが1つのファイルのみを選択できる場合、最初の（）メソッドでそれを取得できます。次に、取得したオブジェクトをJSONに変換して、必要な情報を取得できます。上記のウィンドウを交換します

このJSONオブジェクトには、選択したファイルについて必要なものすべてが含まれています。たとえば、ファイルのURLがURL属性を介してアクセスできる間に、ID属性を使用してファイルのIDにアクセスできます。

使用できる属性を知りたい場合は、たとえば、ブラウザのコンソールにすべてをリストできます。

<span>function add_my_media_button() {
</span>    echo <span>'<a href="#"  >Add my media</a>';
</span><span>}</span>

ログイン後にコピー

ユーザーが複数のファイルを選択できる場合、選択を配列に変換できます。次に、最初のケースとまったく同じように、tojson（）メソッドで各ファイルのデータを取得できます。上記のウィンドウを交換します

ファイル配列がソートされます。0エントリには、ユーザーが選択した最初のファイル、1エントリには2番目のファイルなどが含まれます。

編集者にテキストを挿入

<span>add_action('media_buttons', 'add_my_media_button', 15);</span>

ログイン後にコピー

ユーザーの選択を取得したので、エディターにテキストを挿入します。そのために、WordPress関数wp.media.editor.insert（）を使用します。これは、1つのパラメーターを認めます。カーソルの現在の位置に挿入するテキスト。

この関数を使用する利点は、WordPressがビジュアルエディターとHTMLエディターの両方にテキストを自動的に挿入することです。

<span>function include_media_button_js_file() {
</span>    <span>wp_enqueue_script('media_button', 'path/to/media_button.js', array('jquery'), '1.0', true);
</span><span>}</span>

ログイン後にコピー

最適化

ウィンドウを使用する準備ができました。ただし、問題は続きます。ユーザーがボタンにぶつかるたびに再構築されるため、この動作を変更します。

最初に、ウィンドウが既に作成されているかどうかを確認し、そうでない場合は作成します。次に、ウィンドウを開き、Open_Media_Window（）関数がinstrument return falseで終了します。リンクのデフォルトの動作を防ぐため。

上記の問題を防ぐ方法が複数あることに注意してください。ただし、スキームは常に同じであり、お気に入りの方法を簡単に適応させることができます。結論

<span>add_action('wp_enqueue_media', 'include_media_button_js_file');</span>

ログイン後にコピー

メディアボタンを追加する方法と、エディターでのユーザーの選択に関連するテキストを挿入する方法を使用する方法がわかりました。上記で作成したデータ変数の属性をリストした場合、WordPressが選択したメディアファイルに関するすべての情報を提供していることに気付いたかもしれません。コンテンツエディターにメディアボタンを追加することについて、よく尋ねられる質問（FAQ）

なぜ私の「メディアの追加」ボタンがWordPressで動作しないのですか？

「メディアの追加」ボタンがWordPressで動作しない理由がいくつかある可能性があります。最も一般的な理由は、プラグインの競合です。一部のプラグインは、「メディアの追加」ボタンの機能を妨げる場合があります。これを解決するために、すべてのプラグインを無効にしてから、1つずつ再アクティブ化して問題のあるプラグインを特定できます。もう1つの理由は、時代遅れのWordPressまたはテーマバージョンです。最新のバージョンがインストールされていることを確認してください。問題が続く場合、それはJavaScriptまたはjQueryの問題による可能性があります。この場合、プロの開発者からの助けを求める必要があるかもしれません。

WordPressのコンテンツエディターにメディアボタンを追加するにはどうすればよいですか？ WordPressは簡単なプロセスです。これを行うには、テーマのfunctions.phpファイルで「add_action」関数を使用して行うことができます。この関数を使用すると、コンテンツエディターに新しいボタンを追加できます。その後、「wp_enqueue_media」関数を使用して、メディアアップローダーに必要なスクリプトとスタイルをロードできます。最後に、ボタンがクリックされたら、「WP.Media」オブジェクトを使用してメディアアップローダーを開くことができます。コンテンツエディターのメディアボタンをカスタマイズします。さまざまなWordPress関数とフックを使用して、ボタンのテキスト、スタイル、機能を変更できます。たとえば、「media_buttons_context」フィルターを使用して、エディターのボタンの位置を変更できます。「WP.Media」オブジェクトを使用して、メディアアップローダーの外観と動作をカスタマイズすることもできます。コンテンツエディターに「メディアの追加」ボタンが表示されないため、ユーザーの役割の制限が原因である可能性があります。 WordPressを使用すると、ユーザーの役割がWebサイトで何ができるかを制御できます。ユーザーの役割に「upload_files」機能がない場合、「メディアの追加」ボタンを表示できません。ユーザーロールエディターなどのプラグインを使用してユーザーロールの機能を変更することでこれを変更できます。コーディングに慣れていない場合、いくつかのソリューションを試して、「メディアの追加」ボタンを修正して、問題が発生していないことがあります。まず、ブラウザのキャッシュとCookieをクリアしてみてください。それがうまくいかない場合は、すべてのプラグインを無効にし、問題のあるプラグインを特定するために1つずつ再アクティブ化します。デフォルトのWordPressテーマに切り替えて、問題がテーマ関連であるかどうかを確認することもできます。これらのソリューションが機能しない場合は、プロの開発者から助けを求めたり、WordPressサポートに連絡したりすることを検討してください。