由于默認(rèn)情況下存在的專用按鈕，將媒體文件插入使用WordPress的帖子并不是很復(fù)雜。但是，如果您使用媒體文件開(kāi)發(fā)插件，則此按鈕將無(wú)法幫助您的用戶插入功能所需的代碼。

幸運(yùn)的是，可以添加自己的媒體按鈕，因此您可以正確地做任何您想做的事情。

>

>在本教程中，我們將查看如何在正確的位置添加媒體按鈕，當(dāng)用戶單擊它時(shí)如何打開(kāi)媒體窗口，最后，如何獲取所選項(xiàng)目以同時(shí)插入它們視覺(jué)和HTML編輯器

鑰匙要點(diǎn)

• >在WordPress內(nèi)容編輯器中添加媒體按鈕涉及在插件或主題文件中創(chuàng)建一個(gè)新函數(shù)，將函數(shù)掛載到媒體_Buttons操作中，然后修改您的功能以以正確的方式顯示您的按鈕。
>
• >在用戶單擊按鈕時(shí)打開(kāi)媒體窗口，使用JQuery的JavaScript（默認(rèn)情況下）包含在WordPress中。這涉及創(chuàng)建一個(gè)JS文件，包括在WordPress函數(shù)中，并構(gòu)建窗口。
>可以使用WordPress為媒體窗口創(chuàng)建的“選擇”事件來(lái)檢索用戶的選擇。根據(jù)您是否允許多項(xiàng)選擇，存儲(chǔ)選擇的變量的使用有所不同。
• >
可以通過(guò)確保每次鍵入按鈕時(shí)都不會(huì)重建媒體按鈕來(lái)優(yōu)化媒體按鈕。這可以通過(guò)檢查窗口是否已經(jīng)創(chuàng)建，如果沒(méi)有創(chuàng)建。
添加媒體按鈕

>添加我們的媒體按鈕是第一個(gè)也是最簡(jiǎn)單的部分。就像在WordPress中自定義許多內(nèi)容一樣，我們將使用操作將我們的按鈕放在正確的位置。

首先在插件或主題的專用文件中創(chuàng)建一個(gè)新功能（例如functions.php）。對(duì)于本教程，我將使用名為add_my_media_button（）的函數(shù)。將您的功能掛接到媒體_buttons操作，顧名思義，當(dāng)WordPress顯示媒體按鈕時(shí)，它是調(diào)用的動(dòng)作。

您可以想象，我們現(xiàn)在需要修改我們的功能以正確地顯示我們的按鈕。我們希望我們的按鈕具有與默認(rèn)的樣式相同的樣式。

>媒體按鈕不是真實(shí)的按鈕，它們是鏈接的鏈接，并帶有一個(gè)按鈕的樣式，WordPress為我們提供了此樣式的類，名為“

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

> button

”。

>我們給我們的按鈕一個(gè)ID。這樣，我們將能夠以后在JavaScript中檢索它。> 我們的自定義媒體按鈕已經(jīng)準(zhǔn)備就緒：它具有正確的樣式和幾乎正確的位置。實(shí)際上，默認(rèn)情況下，我們的新按鈕放在默認(rèn)一個(gè)按鈕之前。如果我們想將其放在之后，則可以將第三個(gè)參數(shù)傳遞給add_action（）調(diào)用以更改我們的功能的優(yōu)先級(jí)。

實(shí)際上，顯示默認(rèn)媒體按鈕的功能的優(yōu)先級(jí)為10。指示我們函數(shù)的值較低的值將在默認(rèn)值之前放置我們的按鈕。如果我們想將其放置，我們可以指出更大的價(jià)值。

>

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

就是這樣！現(xiàn)在，我們必須使我們的按鈕更有用。

打開(kāi)媒體窗口

要打開(kāi)媒體窗口，我們將使用JQuery使用JavaScript，默認(rèn)情況下將包含在WordPress中。首先，我們創(chuàng)建一個(gè)JS文件。我選擇將其命名Media_button.js，但是，當(dāng)然，您可以自由選擇自己的名字。

包括JavaScript文件

如果您熟悉WordPress，則應(yīng)該知道CMS為我們提供了一種適當(dāng)?shù)姆椒▉?lái)包括所需的JS文件。為此，我們創(chuàng)建了一個(gè)函數(shù)，其中我們使用WordPress函數(shù)wp_enqueue_script（）。

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

如您所見(jiàn)，我們將jQuery表示為依賴性。多虧了最后一個(gè)論點(diǎn)，我選擇將腳本包括在頁(yè)腳中，但是如果您愿意，您可以將其放在標(biāo)題中。

>我們創(chuàng)建了一個(gè)函數(shù)，以要求WordPress僅在必要時(shí)包含我們的腳本。為此，我們將使用另一種操作：WP_ENQUEUE_MEDIA，當(dāng)WordPress調(diào)用媒體按鈕所需的所有腳本時(shí)，它會(huì)觸發(fā)。

>

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

構(gòu)建窗口

為了能夠使用jQuery函數(shù)$（），我們將Media_button.js文件的內(nèi)容封裝在jquery（）函數(shù)中。然后，我們創(chuàng)建一個(gè)新功能，該功能將在用戶單擊我們的按鈕時(shí)打開(kāi)媒體窗口。

>媒體窗口是wp.media對(duì)象的實(shí)例。它的構(gòu)造函數(shù)允許一個(gè)參數(shù)，它是另一個(gè)對(duì)象，其中包含窗口的某些屬性。因此

<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>

標(biāo)題屬性將顯示為窗口的標(biāo)題。請(qǐng)小心，按鈕屬性的值是一個(gè)對(duì)象，該對(duì)象允許文本屬性設(shè)置用戶將在其上單擊以驗(yàn)證其選擇的按鈕的標(biāo)簽。> WordPress將使用庫(kù)屬性來(lái)過(guò)濾窗口中顯示的媒體文件。在此示例中，只能選擇圖像。此外，由于多個(gè)屬性的錯(cuò)誤值，用戶將無(wú)法選擇一個(gè)以上的文件。

WordPress真正要求這些屬性

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

。但是，如果您不指定標(biāo)題，則您的窗口將不列表。默認(rèn)情況下，多個(gè)屬性設(shè)置為false，并且顯示的媒體文件未過(guò)濾。

使用媒體窗口

檢索用戶的選擇

以下代碼在我們上面創(chuàng)建的Open_Media_window（）函數(shù)內(nèi)部。目前，我們的窗口已構(gòu)造，但沒(méi)有打開(kāi)。要打開(kāi)窗口，您可以使用open（）方法，但是，在之前，您可能需要檢索用戶的選擇。

為此，我們將使用WordPress為媒體窗口創(chuàng)建的特殊事件：選擇。將功能附加到此事件需要使用on（）方法。

>

>現(xiàn)在，用戶的選擇存儲(chǔ)在變量選擇中。取決于您是否允許多項(xiàng)選擇，此變量的使用不同。

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

>

如果用戶只能選擇一個(gè)文件，則可以使用第一個(gè)（）方法檢索它。然后，您可以將獲得的對(duì)象轉(zhuǎn)換為JSON，以獲取所需的信息。用以下方式替換上述窗口。

這個(gè)JSON對(duì)象包含有關(guān)所選文件所需的一切。例如，您可以通過(guò)URL屬性訪問(wèn)文件URL時(shí)訪問(wèn)使用ID屬性的文件ID。

如果您想知道可以使用哪些屬性，例如，您可以在瀏覽器的控制臺(tái)中列出所有屬性。

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

如果用戶可以選擇多個(gè)文件，則可以將選擇轉(zhuǎn)換為數(shù)組。然后，您可以與第一種情況一樣，使用tojson（）方法檢索每個(gè)文件的數(shù)據(jù)。用以下方式替換上述窗口。

文件數(shù)組進(jìn)行排序：0條目包含用戶選擇的第一個(gè)文件，1條目包含第二個(gè)文件，等等。

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

>在編輯器中插入文本

>現(xiàn)在我們檢索了用戶的選擇，我們將在編輯器中插入一些文本。為此，我們將使用WordPress函數(shù)wp.media.editor.insert（），該函數(shù)允許一個(gè)參數(shù)：要在光標(biāo)當(dāng)前位置插入的文本。

<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>

>

使用此功能的優(yōu)點(diǎn)是WordPress會(huì)自動(dòng)將我們的文本插入Visual和HTML編輯器中。

優(yōu)化

>我們的窗口已準(zhǔn)備就緒。但是，問(wèn)題仍然存在：每次用戶鍵入按鈕時(shí)，它都會(huì)被重建，因此我們將更改此行為。

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

>首先，我們檢查窗口是否已經(jīng)創(chuàng)建，如果沒(méi)有創(chuàng)建，則創(chuàng)建它。然后，我們打開(kāi)窗口，并使用指令返回false完成Open_Media_window（）函數(shù)；為了防止鏈接的默認(rèn)行為。

請(qǐng)注意，有多種方法可以防止上述問(wèn)題。但是，該方案始終是相同的，您可以輕松地調(diào)整自己喜歡的方法。

>

總結(jié)

>您現(xiàn)在知道如何添加媒體按鈕以及如何使用它來(lái)插入與用戶選擇有關(guān)的一些文本。如果您列出了我們上面創(chuàng)建的數(shù)據(jù)變量的屬性，則您可能已經(jīng)注意到WordPress會(huì)為我們提供有關(guān)所選媒體文件的所有信息，這意味著您可以對(duì)此進(jìn)行任何操作。

>經(jīng)常詢問(wèn)的問(wèn)題（常見(jiàn)問(wèn)題解答）有關(guān)在內(nèi)容編輯器中添加媒體按鈕

>為什么我的“添加媒體”按鈕在WordPress中不起作用？最常見(jiàn)的原因是插件沖突。某些插件可能會(huì)干擾“添加媒體”按鈕的功能。為了解決此問(wèn)題，您可以將所有插件停用，然后一個(gè)一個(gè)一個(gè)一個(gè)重新激活它們以識(shí)別有問(wèn)題的插件。另一個(gè)原因可能是過(guò)時(shí)的WordPress或主題版本。確保您安裝了最新版本。如果問(wèn)題仍然存在，則可能是由于JavaScript或jQuery問(wèn)題所致。在這種情況下，您可能需要從專業(yè)開(kāi)發(fā)人員那里尋求幫助。

>如何在WordPress中的內(nèi)容編輯器中添加媒體按鈕？ WordPress是一個(gè)簡(jiǎn)單的過(guò)程。您可以在主題的functions.php文件中使用“ add_action”函數(shù)來(lái)執(zhí)行此操作。此功能使您可以在內(nèi)容編輯器中添加一個(gè)新按鈕。然后，您可以使用“ WP_ENQUEUE_MEDIA”功能來(lái)為媒體上傳器加載必要的腳本和樣式。最后，您可以使用“ wp.media”對(duì)象在單擊按鈕時(shí)打開(kāi)媒體上傳器。

我可以在內(nèi)容編輯器中自定義媒體按鈕嗎？

是的，您可以自定義內(nèi)容編輯器中的媒體按鈕。您可以使用各種WordPress功能和掛鉤更改按鈕的文本，樣式和功能。例如，您可以使用“ Media_buttons_Context”過(guò)濾器來(lái)更改編輯器中的按鈕位置。您還可以使用“ wp.media”對(duì)象來(lái)自定義媒體上傳器的外觀和行為。

>

>為什么我在內(nèi)容編輯器中看不到“添加媒體”按鈕？您無(wú)法在內(nèi)容編輯器中看到“添加媒體”按鈕，這可能是由于用戶角色限制。 WordPress允許您控制網(wǎng)站上不同的用戶角色可以執(zhí)行的操作。如果您的用戶角色沒(méi)有“ upload_files”功能，則將無(wú)法看到“添加媒體”按鈕。您可以通過(guò)使用諸如用戶角色編輯器之類的插件來(lái)修改用戶角色的功能來(lái)更改此操作。

>

>如果您''您對(duì)編碼不滿意，您可以嘗試幾種解決方案來(lái)修復(fù)“添加媒體”按鈕無(wú)效問(wèn)題。首先，嘗試清除瀏覽器緩存和cookie。如果這樣做不起作用，請(qǐng)停用所有插件，然后一一重新激活它們以識(shí)別有問(wèn)題的插件。您還可以切換到默認(rèn)的WordPress主題，以查看問(wèn)題是否與主題相關(guān)。如果這些解決方案都沒(méi)有起作用，請(qǐng)考慮尋求專業(yè)開(kāi)發(fā)人員的幫助或聯(lián)系WordPress支持。

> WordPress中“添加媒體”按鈕的替代方案是什么？

如果您在“添加媒體”按鈕上遇到麻煩，則可以使用幾種替代方案。一種選項(xiàng)是使用“來(lái)自服務(wù)器的添加”插件，該插件允許您直接從服務(wù)器上傳文件。另一個(gè)選擇是使用“拖放特征圖像”插件，該插件使您可以將圖像拖放到帖子和頁(yè)面中。您還可以使用“ FTP”插件中的“媒體”通過(guò)FTP上傳文件。

我可以在其他CMS平臺(tái)中的內(nèi)容編輯器中添加媒體按鈕嗎？

是的，您可以添加一個(gè)媒體按鈕在其他CMS平臺(tái)中的內(nèi)容編輯器。該過(guò)程可能會(huì)因平臺(tái)而異，但通常涉及使用平臺(tái)的API或內(nèi)置功能向內(nèi)容編輯器添加新按鈕。然后，您可以在單擊按鈕時(shí)使用JavaScript或jQuery打開(kāi)媒體上傳器。

>如何將多個(gè)媒體按鈕添加到內(nèi)容編輯器？

>您可以將多個(gè)媒體按鈕添加到內(nèi)容編輯器通過(guò)在主題的functions.php文件中多次使用“ add_action”函數(shù)。每個(gè)“ add_action”函數(shù)調(diào)用都會(huì)在內(nèi)容編輯器中添加一個(gè)新按鈕。然后，您可以使用'wp_enqueue_media'函數(shù)和'wp.media'對(duì)象來(lái)為每個(gè)媒體上傳器加載必要的腳本和樣式。

我可以限制誰(shuí)可以在內(nèi)容中使用“添加媒體”按鈕編輯器？

是的，您可以限制誰(shuí)可以在內(nèi)容編輯器中使用“添加媒體”按鈕。 WordPress允許您控制網(wǎng)站上不同的用戶角色可以執(zhí)行的操作。如果要將“添加媒體”按鈕限制到某些用戶角色，可以通過(guò)使用諸如用戶角色編輯器之類的插件來(lái)修改用戶角色的功能來(lái)做到這一點(diǎn)。

為什么我的媒體在使用后不出現(xiàn)媒體“添加媒體”按鈕？

如果您的媒體在使用“添加媒體”按鈕后未出現(xiàn)，則可能是由于幾個(gè)原因。最常見(jiàn)的原因是文件大小或類型問(wèn)題。 WordPress對(duì)您可以上傳的文件的大小和類型有限制。如果您的文件超出了這些限制，則不會(huì)顯示在您的帖子或頁(yè)面中。您可以通過(guò)修改服務(wù)器的php.ini文件或使用插件（例如增加最大上傳文件大?。﹣?lái)更改這些限制。另一個(gè)原因可能是插件沖突。一些插件可能會(huì)干擾媒體上傳器的功能。為了解決此問(wèn)題，您可以將所有插件停用，然后一個(gè)一個(gè)一個(gè)一個(gè)重新激活以識(shí)別有問(wèn)題的插件。

以上是將媒體按鈕添加到WordPress內(nèi)容編輯器的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！