WordPress メディアアップロードツールを使用して画像を追加および削除する-htmlチュートリアル-php.cn

このシリーズの前の記事では、WordPress Media Uploader をプロジェクトに組み込む方法を明確にするために、最新バージョンの WordPress Media Uploader の使用を開始しました。

この新機能 (3.5 以降の新機能) を使用する際の難しさは、他の機能ほど文書化されていないことです。このため、多くの開発者、特に初心者は、どうやって始めればよいか頭を悩ませていることは明らかです。それに加えて、基盤となるシステムの完全な見直しも必要で、やるべきことはたくさんあります。

最初の記事のフィードバックに基づいて、このシリーズの範囲をさらに拡大することを検討します。今回は前回の記事で紹介した機能を実践していきます。次に、フォローアップ記事 (または複数のフォローアップ記事) で、メディアアップローダーの仕組みについて詳しく説明します。

中断したところから続行

前回の投稿では、画像が選択された場合に各投稿の下部に「注目のフッター画像」を導入するプラグインの開発を開始しました。このメタボックスは、投稿タイプとページ投稿タイプで使用できます。

これまでのところ、メタボックスを正常に追加し、WordPress メディアアップローダーを起動し、アイキャッチ画像として使用する画像を選択しましたが、メディアアップローダーから返された情報については実際には何もしていません。

この投稿では、投稿の下部に画像を表示するように機能を実装していきます。その後、利用可能な API の技術的な詳細に目を向けていきます。

中断したところから続行するには、標準の「注目の画像」メタボックスによって提供される機能を複製できる必要があります。これをする：＃＃＃

明らかに、私たちは仕事を終えました。

何かを行う前に

$ をパラメータとして受け入れるように renderMediaUploader 関数を更新してください。これにより、例全体で jQuery を使用できるようになります。

関数宣言は次のようになります:

リーリー

関数の呼び出しは次のようになります:

リーリー

さて、始めましょう。

＃＃＃１。キャプチャ画像

メディアアップローダーから画像を選択すると、データが JavaScript で返されます。具体的には、データは JSON 形式で返されます。これにより、画像のさまざまなプロパティを解析できるようになり、画像をレンダリングして投稿とともに保存できるようになります。

しかし、まずコードを更新しましょう。

admin.js

で次のコード行を見つけます: リーリー を次のように置き換えます:

リーリー

明らかに、これはそれほど複雑なものではありません。ただし、

file_frame

および image_data とともに、ファイルの先頭で定義された変数として json を追加することを忘れないでください。＃＃＃。 何が返されるか知りたい場合は、json

の内容を好みのコンソールデバッガーに自由にダンプしてください。この記事ではそれを行いませんが、今後の詳細な記事でさらに行う可能性があります。

＃＃＃２。選択した画像を表示選択した画像を表示するには、画像が選択されたときにそのプロパティを更新できるように、メタボックスに JavaScript 経由でアクセスできる画像要素があることを確認する必要があります。

views/admin.php

で、次のコードをテンプレートに追加します。これには、画像のレンダリングに使用する空の画像要素が含まれています。

リーリー

コンテナを非表示にするために WordPress CSS クラス hidden を利用していることに注意してください。 JavaScript を使用して、このクラスを削除して画像を表示します (基本的には逆の操作を行って画像を非表示にし、アンカーを表示して画像を再度選択します)。

これで、JavaScript に戻り、画像が選択されたときに画像をレンダリングできるようになります。 2 つのことを行う必要があります:

ユーザーが画像を選択できるようにアンカーを非表示にする

コンテナ内のアイキャッチ画像を表示

リーリー

まず、

json

の URL プロパティをチェックして、その長さが 0 より大きいことを確認します。私は防御的なコーディングの実践として

$.trim

を使用するのが好きです。ゼロに等しい場合は、表示する画像がないため戻ります。その後、前のステップで作成した新しい div 要素を利用します。

children()

関数を通じて画像要素を取得し、その src、alt、 title 属性をすべて設定します。 json オブジェクトによってアクセスされるプロパティ。 <p>从那里，我们选择图像的父容器，然后删除隐藏类。</p> <p>毕竟，我们使用 <code class="inline">featured-footer-image-container 元素作为访问锚点的点 - 在本例中，它是前一个元素 - 然后我们将其隐藏。

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

WordPress メディアアップロードツールを使用して画像を追加および削除する

但是我们有一个明显的问题：图像对于容器来说太大了。这意味着我们需要引入一些 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()
    );

}

ログイン後にコピー

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

WordPress メディアアップロードツールを使用して画像を追加および削除する

好多了，不是吗？

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 上查看相关存储库以获取该项目源代码的当前版本。