利用WordPress媒體上傳工具新增和刪除圖片

在本系列的上一篇文章中，我們開始使用 WordPress 媒體上傳器的最新版本，以便更清楚地了解如何開始將其​​合併到我們的專案中。

使用這個新功能（嗯，是 3.5 以後的新功能）的困難之處在於它沒有像其他功能那樣有詳細的文檔記錄。這顯然讓許多開發人員——尤其是初學者——對如何開始使用它感到摸不著頭腦。再加上對底層系統的全面檢修，您將有很多事情要做。

根據第一篇文章的回饋，我們將考慮進一步擴展本系列的範圍。在本文中，我們將實際應用上一篇文章中介紹的功能。然後，在後續文章（或可能不只一篇後續文章）中，我們將詳細介紹媒體上傳器的工作原理。

從上次停下的地方繼續

在上一篇文章中，我們開始開發一個插件，如果選擇了圖像，該插件會在每篇文章的底部引入「特色頁腳圖像」。此元框適用於貼文和頁面貼文類型。

到目前為止，我們已經成功添加了元框，啟動了WordPress 媒體上傳器並選擇了一個圖像用作我們的特色圖像，但我們實際上還沒有對從返回給我們的信息執行任何操作媒體上傳器。

在這篇文章中，我們將繼續實現該功能，以便我們在帖子底部顯示圖像。之後，我們將把注意力轉向我們可用的 API 的更多技術細節。

為了從我們上次停下的地方繼續，我們需要能夠複製標準「特色圖像」元框提供的功能。為了做到這一點：

1. 我們需要從媒體上傳器擷取資訊
2. 顯示所選的圖像
3. 正確調整所選圖片的大小
4. 設定刪除影像的選項

顯然，我們已經完成了我們的工作。

在我們執行任何操作之前，請確保更新 renderMediaUploader 函數以接受 $ 作為參數，以便我們可以在整個範例中使用 jQuery。

函數宣告應如下所示：

function renderMediaUploader( $ ) { ... }

對函數的呼叫現在應該如下所示：

renderMediaUploader( $ );

現在，讓我們開始吧。

1。捕捉影像

從媒體上傳器中選擇圖像後，資料將以 JavaScript 形式傳回給您。具體來說，資料將以 JSON 的形式傳回給我們。這將使我們能夠解析圖像的各種屬性，以便我們可以渲染並將其與我們的帖子一起保存。

但首先，讓我們更新我們的程式碼。在 admin.js 中找到如下程式碼行：

file_frame.on( 'insert', function() {
 
    /**
     * We'll cover this in the next version.
     */
 
});

並將其替換為：

file_frame.on( 'insert', function() {

    // Read the JSON data returned from the Media Uploader
    json = file_frame.state().get( 'selection' ).first().toJSON();

});

顯然，這並不是什麼非常複雜的事情；但是，請記住將json 添加為在文件頂部定義的變量，以及file_frame 和image_data。

如果您對返回的內容感到好奇，請隨時將 json 的內容轉儲到您最喜歡的控制台偵錯器中。我們不會在這篇特定的文章中這樣做，但我們可能會在未來的深入文章中做更多的事情。

2。顯示選定的圖像

為了讓我們顯示所選的映像，我們需要確保我們的元框中有一個可透過 JavaScript 存取的映像元素，以便我們可以在選擇映像時更新其屬性。

在 views/admin.php 中，我們將以下程式碼加入我們的模板。它包含我們將用來渲染圖像的空圖像元素。

<p class="hide-if-no-js">
    <a title="Set Footer Image" href="javascript:;" id="set-footer-thumbnail">Set featured image</a>
</p>

<div id="featured-footer-image-container" class="hidden">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/164/169319095089639.png"  class="lazy" alt="" title="" />
</div><!-- #featured-footer-image-container -->

請注意，我們利用 WordPress CSS 類別 hidden 來隱藏容器。使用 JavaScript，我們將刪除此類以顯示圖像（並且基本上會執行相反的操作以隱藏圖像並顯示錨點以再次選擇圖像）。

現在，我們可以重新訪問 JavaScript 並在選擇圖像時渲染圖像。我們需要做兩件事：

1. 隱藏錨點以允許使用者選擇圖像
2. 在容器中顯示特色圖片

為此，讓我們回顧一下本文前面介紹的 JavaScript 程式碼。檢索 JSON 資料後，確保我們有圖像的 URL，然後繼續。

file_frame.on( 'insert', function() {

    // Read the JSON data returned from the Media Uploader
    json = file_frame.state().get( 'selection' ).first().toJSON();

	// First, make sure that we have the URL of an image to display
	if ( 0 > $.trim( json.url.length ) ) {
		return;
	}

	// After that, set the properties of the image and display it
	$( '#featured-footer-image-container' )
		.children( 'img' )
			.attr( 'src', json.url )
			.attr( 'alt', json.caption )
			.attr( 'title', json.title )
                        .show()
		.parent()
		.removeClass( 'hidden' );

	// Next, hide the anchor responsible for allowing the user to select an image
	$( '#featured-footer-image-container' )
		.prev()
		.hide();

});

顯然，對程式碼進行了註釋以解釋發生了什麼，但我們在很大程度上依賴 jQuery 來確保正確顯示和隱藏元素。

首先，我們檢查 json 的 URL 屬性，以確保其長度大於零。我喜歡使用 $.trim 來將其作為防禦性編碼實踐。如果它等於零，那麼我們將返回，因為我們沒有要顯示的圖像。

之後，我們利用我們在上一個步驟中建立的新 div 元素。我們透過children() 函數取得影像元素，然後設定其src、alt 和 title 屬性全部基於可透過 json 物件存取的屬性。

从那里，我们选择图像的父容器，然后删除隐藏类。

毕竟，我们使用 featured-footer-image-container 元素作为访问锚点的点 - 在本例中，它是前一个元素 - 然后我们将其隐藏。

此时，图像应该出现在帖子元框中。

但是我们有一个明显的问题：图像对于容器来说太大了。这意味着我们需要引入一些 CSS。

3。设计我们的特色图片

为此，我们需要添加一个 CSS 文件并更新核心插件文件，以便它将样式表排入队列。

首先，在插件文件夹中创建一个 css 目录，然后将 admin.css 添加到该目录中。在该文件中，添加以下代码：

#featured-footer-image-container img {

    width:  100%;
    height: auto;

}

然后在插件的 run() 函数中添加以下钩子：

add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_styles' ) );

最后添加以下函数：

/**
 * Registers the stylesheets for handling the meta box
 *
 * @since 0.2.0
 */
public function enqueue_styles() {

    wp_enqueue_style(
        $this->name,
        plugin_dir_url( __FILE__ ) . 'css/admin.css',
        array()
    );

}

如果您已正确设置选择器并且已正确注册样式表并将其排入队列，您应该会看到如下内容：

好多了，不是吗？

4。我们如何删除图像？

正如我们添加一个元素来显示图像一样，我们也需要添加一个允许我们删除图像的元素。

为此，请重新访问 views/admin.php 并添加以下代码：

<p class="hide-if-no-js hidden">
    <a title="Remove Footer Image" href="javascript:;" id="remove-footer-thumbnail">Remove featured image</a>
</p><!-- .hide-if-no-js -->

接下来，我们需要编写一些额外的 JavaScript，以便在显示图像时显示上面的锚点。为此，请重新访问 admin.js 并将其添加到本文前面添加的代码下方：

// Display the anchor for the removing the featured image
$( '#featured-footer-image-container' )
    .next()
    .show();

就像我们对初始锚点所做的那样，我们需要设置一个事件处理程序，以便当单击“删除”锚点时，图像将被删除并恢复“设置特色图像”锚点。

为此，首先重新访问 DOM 加载后立即触发的函数并添加以下代码：

$( '#remove-footer-thumbnail' ).on( 'click', function( evt ) {
    
	// Stop the anchor's default behavior
	evt.preventDefault();

	// Remove the image, toggle the anchors
	resetUploadForm( $ );
    
});

现在我们需要定义 resetUploadForm 函数，所以现在就开始吧。请记住，这需要删除图像，隐藏“删除链接”容器，并恢复“设置图像”链接锚点。

/**
 * Callback function for the 'click' event of the 'Remove Footer Image'
 * anchor in its meta box.
 *
 * Resets the meta box by hiding the image and by hiding the 'Remove
 * Footer Image' container.
 *
 * @param    object    $    A reference to the jQuery object
 * @since    0.2.0
 */
function resetUploadForm( $ ) {
    'use strict';

	// First, we'll hide the image
	$( '#featured-footer-image-container' )
		.children( 'img' )
		.hide();

	// Then display the previous container
	$( '#featured-footer-image-container' )
		.prev()
		.show();

	// Finally, we add the 'hidden' class back to this anchor's parent
	$( '#featured-footer-image-container' )
		.next()
		.hide()
		.addClass( 'hidden' );

}

此时，我们已获得选择图像、删除图像以及继续执行此操作所需的一切。

仍有工作要做，但我们将在下一篇文章中介绍这一点。同时，不要忘记在 GitHub 上查看相关存储库以获取该项目源代码的当前版本。

接下来...

显然，我们已经处理了很多后端工作，因为它涉及选择图像、显示图像和删除图像，但我们仍然缺少一个关键的功能：保存图像，以便它与帖子相关联。

为了将网站访问者看到的内容与我们在后端指定的内容联系起来，我们需要做一些工作，将 JSON 数据保存到数据库，对其进行清理、检索，然后显示它在前面。

在本系列的下一篇文章中，我们将看看如何做到这一点。同时，请随时在下面的提要中留下任何评论或问题。

以上是利用WordPress媒體上傳工具新增和刪除圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！