Tambah dan alih keluar imej menggunakan alat muat naik media WordPress

Dalam artikel sebelumnya dalam siri ini, kami mula bekerja dengan versi terkini WordPress Media Uploader untuk mendapatkan idea yang lebih jelas tentang cara mula memasukkannya ke dalam projek kami.

Kesukaran menggunakan ciri baharu ini (baik, baharu selepas 3.5) ialah ia tidak didokumenkan dengan baik seperti ciri lain. Ini jelas menyebabkan ramai pembangun - terutamanya pemula - menggaru kepala mereka tentang cara untuk memulakannya. Tambah pada itu baik pulih sepenuhnya sistem asas, dan anda perlu melakukan banyak perkara.

Berdasarkan maklum balas daripada artikel pertama, kami akan mempertimbangkan untuk meluaskan lagi skop siri ini. Dalam artikel ini kami akan mempraktikkan fungsi yang diperkenalkan dalam artikel sebelumnya. Kemudian, dalam artikel susulan (atau mungkin lebih daripada satu artikel susulan), kami akan meneliti butiran cara pemuat naik media berfungsi.

Teruskan tempat anda berhenti

Dalam siaran terakhir kami, kami mula membangunkan pemalam yang akan memperkenalkan "Imej Pengaki Ditampilkan" di bahagian bawah setiap siaran jika imej dipilih. Kotak meta ini tersedia untuk jenis siaran Siaran dan Halaman.

Setakat ini kami telah berjaya menambah kotak meta, melancarkan pemuat naik media WordPress dan memilih imej untuk digunakan sebagai imej pilihan kami, tetapi kami sebenarnya tidak melakukan apa-apa dengan maklumat yang dikembalikan kepada kami daripada pemuat naik Media.

Dalam siaran ini, kami akan terus melaksanakan ciri tersebut supaya kami memaparkan imej di bahagian bawah siaran. Selepas itu, kami akan menumpukan perhatian kami kepada lebih banyak butiran teknikal API yang tersedia untuk kami.

Untuk meneruskan ke tempat yang kita tinggalkan, kita perlu dapat meniru fungsi yang disediakan oleh kotak meta "Imej Ditampilkan" standard. Untuk melakukan ini:

1. Kita perlu menangkap maklumat daripada pemuat naik media
2. Tunjukkan imej yang dipilih
3. Ubah saiz imej yang dipilih dengan betul
4. Tetapkan pilihan untuk memadam imej

Jelas sekali, kami telah melaksanakan tugas kami.

Sebelum kami melakukan apa-apa pastikan anda mengemas kini fungsi renderMediaUploader untuk menerima $ sebagai parameter supaya kami boleh menggunakan jQuery sepanjang contoh.

Pengisytiharan fungsi sepatutnya kelihatan seperti ini:

function renderMediaUploader( $ ) { ... }

Panggilan ke fungsi kini sepatutnya kelihatan seperti ini:

renderMediaUploader( $ );

Sekarang, mari mulakan.

1. Tangkap imej

Selepas memilih imej daripada pemuat naik media, data akan dikembalikan kepada anda dalam JavaScript. Khususnya, data akan dikembalikan kepada kami dalam bentuk JSON. Ini akan membolehkan kami menghuraikan pelbagai sifat imej supaya kami boleh memaparkan dan menyimpannya dengan siaran kami.

Tetapi pertama sekali, mari kemas kini kod kami. Cari baris kod berikut dalam admin.js: 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="" 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 img {

    width:  100%;
    height: auto;

}

dan gantikannya dengan: #🎜🎜#

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

#🎜🎜#Jelas sekali, ini bukanlah sesuatu yang sangat rumit, tetapi ingat untuk menambah json sebagai pembolehubah yang ditakrifkan di bahagian atas fail dan frame_file dan image_data. #🎜🎜# #🎜🎜# Jika anda ingin tahu tentang perkara yang dikembalikan, jangan ragu untuk membuang kandungan json ke dalam penyahpepijat konsol kegemaran anda. Kami tidak akan melakukannya dalam artikel khusus ini, tetapi kami mungkin melakukan lebih banyak lagi dalam artikel mendalam akan datang. #🎜🎜# #🎜🎜#2. Tunjukkan imej yang dipilih#🎜🎜# #🎜🎜#Untuk kami memaparkan imej yang dipilih, kami perlu memastikan kami mempunyai elemen imej dalam kotak meta kami yang boleh diakses melalui JavaScript supaya kami boleh mengemas kini sifatnya apabila imej dipilih. #🎜🎜# #🎜🎜#Dalam views/admin.php, kami menambah kod berikut pada templat kami. Ia mengandungi elemen imej kosong yang akan kami gunakan untuk memaparkan imej. #🎜🎜#

/**
 * 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()
    );

}

#🎜🎜#Sila ambil perhatian bahawa kami menggunakan kelas CSS WordPress hidden untuk menyembunyikan bekas. Menggunakan JavaScript, kami akan mengalih keluar kelas ini untuk menunjukkan imej (dan pada dasarnya melakukan sebaliknya untuk menyembunyikan imej dan menunjukkan sauh untuk memilih imej sekali lagi). #🎜🎜# #🎜🎜#Kini kita boleh menyemak semula JavaScript dan memaparkan imej apabila dipilih. Kita perlu melakukan dua perkara: #🎜🎜# #🎜🎜# #🎜🎜#Sembunyikan sauh untuk membolehkan pengguna memilih imej#🎜🎜# #🎜🎜#Paparkan imej yang ditampilkan dalam bekas#🎜🎜# #🎜🎜# #🎜🎜#Untuk melakukan ini, mari semak kod JavaScript yang diperkenalkan sebelum ini dalam artikel ini. Selepas mendapatkan semula data JSON, pastikan kami mempunyai URL imej sebelum meneruskan. #🎜🎜#

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

#🎜🎜#Jelas sekali, kod tersebut diulas untuk menerangkan perkara yang sedang berlaku, tetapi kami sangat bergantung pada jQuery untuk memastikan elemen ditunjukkan dan disembunyikan dengan betul. #🎜🎜# #🎜🎜#Pertama, kami menyemak atribut URL json untuk memastikan panjangnya lebih besar daripada sifar. Saya suka menggunakan $.trim sebagai amalan pengekodan pertahanan. Jika ia sama dengan sifar, maka kami akan kembali kerana kami tidak mempunyai imej untuk dipaparkan. #🎜🎜# #🎜🎜#Selepas itu, kami memanfaatkan elemen div baharu yang kami buat dalam langkah sebelumnya. Kami memperoleh elemen imej melalui fungsi children(), dan kemudian menetapkan src, nya. altSifat kod> dan title semuanya berdasarkan sifat yang boleh diakses melalui objek 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();

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

为此，首先重新访问 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 数据保存到数据库，对其进行清理、检索，然后显示它在前面。

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

Atas ialah kandungan terperinci Tambah dan alih keluar imej menggunakan alat muat naik media WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!