Статьи

Сохранение изображений с помощью WordPress Media Uploader

Январь 5, 2019

В этой серии статей мы рассмотрим, как реализовать WordPress Media Uploader в реальном плагине. Идея этой серии и связанного с ней кода заключается в том, чтобы дать четкое понимание того, как он работает, как мы можем использовать его в будущем и как мы можем включить его в нашу работу.

До этого момента мы рассмотрели:

  1. Начало работы с WordPress Media Uploader
  2. Добавление и удаление изображений с помощью WordPress Media Uploader

И во всех этих статьях мы проходили через процесс создания плагина, который использует WordPress Media Uploader для добавления избранного изображения в нижний колонтитул наших постов (и страниц).

Но есть одна проблема: изображение не сохраняется и не отображается в содержимом соответствующего сообщения в блоге (или на странице).

В этой статье мы узнаем, с чего мы остановились, и закончим реализацию оставшейся части этого плагина. Обратите внимание, что я предполагаю, что вы прочитали два предыдущих поста и поняли исходный код, который мы уже рассмотрели.

С этим сказал, давайте продолжим.

Сохранение избранного изображения

Ключом к тому, чтобы изображение могло отображаться в интерфейсе WordPress, является сохранение информации об изображении, предоставляемой WordPress.

В предыдущей статье мы использовали часть этой информации для отображения изображения в мета-поле, которое мы создали, но ни одна из этой информации не была сохранена. Таким образом, изображение не может быть отображено на панели инструментов или на внешней стороне сайта, потому что WordPress на самом деле его не запоминает.

Мы собираемся это исправить. В частности, мы собираемся сохранить поля для:

  • URL изображения, чтобы мы могли установить атрибут src изображения
  • Заголовок изображения, чтобы мы могли установить его как атрибут alt изображения и как атрибут title

Введите метаданные

Первое, что нам нужно сделать, это добавить еще один контейнер с тремя полями ввода в представлении admin.php нашего плагина. Каждое из этих полей будет соответствовать тому, что из значений выше.

Посмотрите на код ниже, после которого я уточню:

1
2
3
4
5
<p id=»featured-footer-image-meta»>
    <input type=»text» id=»footer-thumbnail-src» name=»footer-thumbnail-src» value=»» />
    <input type=»text» id=»footer-thumbnail-title» name=»footer-thumbnail-title» value=»» />
    <input type=»text» id=»footer-thumbnail-alt» name=»footer-thumbnail-alt» value=»» />
</p><!— #featured-footer-image-meta —>

С самого начала это должно быть достаточно легко понять:

  • Мы представили контейнер, который идентифицируется с помощью featured-footer-image-meta
  • Содержит три входных текстовых элемента, каждый из которых соответствует атрибутам элемента изображения, которые мы будем сохранять

На этом этапе нам нужно вернуться в наш файл JavaScript, чтобы мы могли взять информацию, возвращенную нам через Media Uploader, и заполнить поля ввода этой информацией.

Откройте admin.js а затем добавьте следующие три строки в file_frame функции-обработчика для event вставки (для file_frame ):

1
2
3
4
// Store the image’s information into the meta data fields
$( ‘#footer-thumbnail-src’ ).val( json.url );
$( ‘#footer-thumbnail-title’ ).val( json.title );
$( ‘#footer-thumbnail-alt’ ).val( json.title );

Отсюда перейдите на панель инструментов WordPress, добавьте новый пост или отредактируйте существующий пост, и вы должны увидеть что-то вроде следующего изображения:

Предполагая, что вы написали весь JavaScript напрямую, вы должны увидеть что-то подобное на основе данных, которые вы указали в Media Uploader при выборе изображения.

Обратите внимание, однако, что при нажатии «Удалить избранные изображения» текст остается. Прежде чем мы рассмотрим фактическое сохранение этой информации, давайте доработаем JavaScript, чтобы он очищал поля ввода всякий раз, когда пользователь удаляет изображение.

Хотя есть несколько способов сделать это, я решил использовать следующий код:

1
2
3
4
// Finally, we reset the meta data input fields
$( ‘#featured-footer-image-info’ )
    .children()
    .val( » );

Помните, что это должно быть расположено в обработчике события для якоря «Удалить выделенное изображение». В предыдущей статье мы назвали эту функцию resetUploadForm .

На этом этапе вы сможете нажать «Удалить выделенное изображение» и увидите, что изображение и поля ввода сброшены. Если у вас возникли проблемы, просмотрите исходный код в репозитории GitHub, связанном с этим постом (он будет в основной ветке и также будет помечен как 1.0.0).

Сохранение метаданных

Теперь нам нужно ввести в плагин некоторый код, который будет очищать значения полей ввода, связывать их с публикацией и сохранять ее в базе данных, чтобы мы могли отображать информацию в нижнем колонтитуле каждого сообщения.

В функцию run для Acme_Footer_Image добавьте следующую строку кода:

1
add_action( ‘save_post’, array( $this, ‘save_post’ ) );

Затем нам нужно определить функцию, которая будет отвечать за фактическое сохранение значений полей ввода в базе данных. О следующем коде нужно знать две вещи:

  • Мы очищаем данные перед сохранением
  • Мы связали поля с ключами, которые мы будем использовать для отображения изображения на внешнем интерфейсе.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * Sanitized and saves the post featured footer image meta data specific with this post.
 *
 * @param int $post_id The ID of the post with which we’re currently working.
 * @since 0.2.0
 */
public function save_post( $post_id ) {
 
    if ( isset( $_REQUEST[‘footer-thumbnail-src’] ) ) {
        update_post_meta( $post_id, ‘footer-thumbnail-src’, sanitize_text_field( $_REQUEST[‘footer-thumbnail-src’] ) );
    }
 
    if ( isset( $_REQUEST[‘footer-thumbnail-title’] ) ) {
        update_post_meta( $post_id, ‘footer-thumbnail-title’, sanitize_text_field( $_REQUEST[‘footer-thumbnail-title’] ) );
    }
 
    if ( isset( $_REQUEST[‘footer-thumbnail-alt’] ) ) {
        update_post_meta( $post_id, ‘footer-thumbnail-alt’, sanitize_text_field( $_REQUEST[‘footer-thumbnail-alt’] ) );
    }
 
}

Прежде чем мы будем готовы проверить это, нам нужно сделать еще два изменения в представлении панели мониторинга, прежде чем показывать изображения на внешнем интерфейсе.

Во-первых, нам нужно убедиться, что мы возвращаем метаданные обратно в поля ввода. Перейдите в admin.php и обновите его еще раз, чтобы включить это:

1
2
3
4
5
<p id=»featured-footer-image-info»>
    <input type=»text» id=»footer-thumbnail-src» name=»footer-thumbnail-src» value=»<?php echo get_post_meta( $post->ID, ‘footer-thumbnail-src’, true ); ?>» />
    <input type=»text» id=»footer-thumbnail-title» name=»footer-thumbnail-title» value=»<?php echo get_post_meta( $post->ID, ‘footer-thumbnail-title’, true ); ?>» />
    <input type=»text» id=»footer-thumbnail-alt» name=»footer-thumbnail-alt» value=»<?php echo get_post_meta( $post->ID, ‘footer-thumbnail-alt’, true ); ?>» />
</p><!— #featured-footer-image-meta —>

Здесь мы get_post_meta функцию get_post_meta чтобы получить значения, которые были сохранены, с помощью функции, которую мы объявили выше.

Далее нам нужно убедиться, что мы заполнили элемент изображения, который мы создали ранее в этой серии, теми же значениями:

1
2
3
<div id=»featured-footer-image-container» class=»hidden»>
    <img src=»<?php echo get_post_meta( $post->ID, ‘footer-thumbnail-src’, true ); ?>» alt=»<?php echo get_post_meta( $post->ID, ‘footer-thumbnail-alt’, true ); ?>» title=»<?php echo get_post_meta( $post->ID, ‘footer-thumbnail-title’, true ); ?>» />
</div><!— #featured-footer-image-container —>

Конечно, если метаданные пустые, тогда атрибуты ничего не заполнят и изображение не будет отображаться.

Предполагая, что все идет хорошо, вы должны увидеть изображение и связанные с ним данные, отображаемые в полях ввода при сохранении записи. Точно так же, когда вы удаляете показанное изображение, поля должны очиститься и больше не должны отображаться.

Убираться

Прежде чем мы перейдем к отображению изображения на внешнем интерфейсе, необходимо сделать несколько небольших вещей, чтобы очистить отображение мета-блока.

Во-первых, нам нужно убедиться, что все поля ввода, которые были ранее типа text имеют тип hidden .

1
2
3
4
5
<p id=»featured-footer-image-info»>
    <input type=»hidden» id=»footer-thumbnail-src» name=»footer-thumbnail-src» value=»<?php echo get_post_meta( $post->ID, ‘footer-thumbnail-src’, true ); ?>» />
    <input type=»hidden» id=»footer-thumbnail-title» name=»footer-thumbnail-title» value=»<?php echo get_post_meta( $post->ID, ‘footer-thumbnail-title’, true ); ?>» />
    <input type=»hidden» id=»footer-thumbnail-alt» name=»footer-thumbnail-alt» value=»<?php echo get_post_meta( $post->ID, ‘footer-thumbnail-alt’, true ); ?>» />
</p><!— #featured-footer-image-meta —>

Далее нам нужно написать небольшую функцию JavaScript, которая будет отображать изображение, предполагая, что оно было сохранено. Функция проверит, не является ли поле ввода URL-адреса изображения пустой строкой.

Если это не так, то он будет отображать изображение. Поэтому мы добавляем эту функцию в наш файл JavaScript:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
 * Checks to see if the input field for the thumbnail source has a value.
 * If so, then the image and the ‘Remove featured image’ anchor are displayed.
 *
 * Otherwise, the standard anchor is rendered.
 *
 * @param object $ A reference to the jQuery object
 * @since 1.0.0
 */
function renderFeaturedImage( $ ) {
 
    /* If a thumbnail URL has been associated with this image
     * Then we need to display the image and the reset link.
     */
    if ( » !== $.trim ( $( ‘#footer-thumbnail-src’ ).val() ) ) {
 
        $( ‘#featured-footer-image-container’ ).removeClass( ‘hidden’ );
 
        $( ‘#set-footer-thumbnail’ )
            .parent()
            .hide();
 
        $( ‘#remove-footer-thumbnail’ )
            .parent()
            .removeClass( ‘hidden’ );
 
    }
 
}

Затем выполните вызов функции JavaScript в контексте DOM-ready функции:

1
renderFeaturedImage( $ );

Короче говоря, когда страница загружается, она проверяет, существует ли URL в нашем поле ввода. Если это так, он отображает изображение и дает нам возможность удалить его. В противном случае, он просто отображает пустое поле рекомендуемого изображения.

Опять же, если у вас возникли проблемы с выполнением этого кода, обязательно проверьте связанный репозиторий GitHub, используя ссылку на боковой панели этой страницы.

Отображение избранного изображения

На данный момент мы сделали все, что нам нужно сделать на панели инструментов, так что пришло время отобразить изображение на внешнем интерфейсе в блоге. Для этого нам нужно настроить хук, который подключается к действию the_content , проверить, существует ли изображение и, если да, добавить его к содержимому публикации.

Для этого сначала добавьте следующую строку в метод run вашего класса Acme_Footer_Image :

1
add_action( ‘the_content’, array( $this, ‘the_content’ ) );

Далее нам нужно написать функцию, которая подключена к этому действию. Эта функция будет отвечать за проверку, являемся ли мы только одной страницей (потому что мы не хотим добавлять изображение в нижний колонтитул поста, если у пользователя есть, скажем, тег more качестве части его содержимого).

Мы делаем это, используя следующий код:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
 * If the current post is a single post, check to see if there is a featured image.
 * If so, append is to the post content prior to rendering the post.
 *
 * @param string $content The content of the post.
 * @since 1.0.0
 */
public function the_content( $content ) {
 
    // We only care about appending the image to single pages
    if ( is_single() ) {
 
        // In order to append an image, there has to be at least a source attribute
        if ( » !== ( $src = get_post_meta( get_the_ID(), ‘footer-thumbnail-src’, true ) ) ) {
 
            // read the remaining attributes even if they are empty strings
            $alt = get_post_meta( get_the_ID(), ‘footer-thumbnail-alt’, true );
            $title = get_post_meta( get_the_ID(), ‘footer-thumbnail-title’, true );
 
            // create the image element within its own container
            $img_html = ‘<p id=»footer-thumbnail»>’;
                $img_html .= «<img src=’$src’ alt=’$alt’ title=’$title’ />»;
            $img_html .= ‘</p><!— #footer-thumbnail —>’;
 
            // append it to the content
            $content .= $img_html;
 
        }
 
    }
 
    return $content;
 
}

И с этим у нас должен быть полнофункциональный плагин, добавляющий изображение нижнего колонтитула к посту, который отображается на одной странице поста.

Вывод

В этой серии мы рассмотрели много материалов, наименьший из которых связан с использованием Media Uploader. Хотя эта конкретная статья потратила больше времени на то, чтобы показать нам, как подключить данные из метабокса к внешнему интерфейсу, она все же демонстрирует, как применить практическое применение Media Uploader в контексте плагина.

С учетом сказанного, есть еще много информации о Media Uploader, которую мы могли бы затронуть в будущих темах. Если вы заинтересованы, пожалуйста, дайте мне знать в комментариях ниже. Кроме того, если у вас есть какие-либо вопросы по поводу того, что вы прочитали или этой серии в целом, не стесняйтесь также оставлять их.

Не забудьте зайти в репозиторий GitHub для этого проекта — надеюсь, он пригодится вам при работе с Media Uploader в будущем!

39
Share: