В предыдущем посте из этой серии мы начали работать с последней версией WordPress Media Uploader, чтобы получить более четкое представление о том, как начать включать его в наши проекты.
Трудная часть работы с этой новой (ну, начиная с 3.5) функцией заключается в том, что она не так хорошо документирована, как другие функции. Это, очевидно, оставляет многим разработчикам — особенно начинающим — ломать голову над тем, как начать работу с ним. Соедините это с полным пересмотром базовой системы, и у вас есть много чего, чтобы покрыть.
Основываясь на отзывах из первой статьи, мы рассмотрим расширение этой серии еще немного. В этой статье мы рассмотрим практическое применение функциональности, представленной в предыдущей статье. Затем в следующей статье (или, возможно, более чем одной последующей) мы рассмотрим еще несколько тонких моментов работы Media Uploader.
Подняв, где мы остановились
В последнем посте мы начали работать над плагином, который вводил «Featured Footer Image» внизу каждого поста, если выбрано изображение. Этот мета-бокс доступен как для сообщений, так и для страниц сообщений.
До этого момента мы успешно добавили мета-блок, запустили WordPress Media Uploader и выбрали изображение для использования в качестве нашего рекомендуемого изображения, но на самом деле мы ничего не сделали с информацией, возвращаемой нам из Media Uploader. ,
В этом посте мы продолжим реализацию функциональности, чтобы в нижней части наших постов были представлены изображения. После этого мы обратим наше внимание на некоторые технические детали API, которые нам доступны.
Чтобы выбрать то место, где мы остановились, нам нужно иметь возможность копировать функции, которые предлагает стандартный мета-блок «Избранные изображения». Для этого:
- Нам нужно захватить информацию из Media Uploader
- Показать выбранное изображение
- Правильный размер выбранного изображения
- Настройте опцию для удаления изображения
Понятно, что у нас есть наша работа.
Прежде чем что-то делать, убедитесь, что вы обновили функцию renderMediaUploader, чтобы принимать $ в качестве параметра, чтобы мы могли использовать jQuery во всех наших примерах.
Объявление функции должно выглядеть так:
|
1
|
function renderMediaUploader( $ ) { … }
|
И вызов функции теперь должен выглядеть так:
|
1
|
renderMediaUploader( $ );
|
Теперь давайте начнем.
1. Захват изображения
После того как вы выбрали изображение в Media Uploader, данные будут возвращены вам в JavaScript. В частности, данные будут возвращены нам в формате JSON. Это позволит нам проанализировать различные свойства изображения, чтобы мы могли отобразить и сохранить его вместе с нашим постом.
Но сначала давайте обновим наш код. Найдите строку кода в admin.js которая выглядит следующим образом:
|
1
2
3
4
5
6
7
|
file_frame.on( ‘insert’, function() {
/**
* We’ll cover this in the next version.
*/
});
|
И заменить это на это:
|
1
2
3
4
5
6
|
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. Показать выбранное изображение
Чтобы отобразить выбранное изображение, нам нужно убедиться, что в нашем мета-блоке есть элемент image, доступный через JavaScript, чтобы мы могли обновлять его атрибуты при каждом выборе изображения.
В views/admin.php давайте добавим следующий код в наш шаблон. Он содержит пустой элемент изображения, который мы будем использовать для визуализации изображения.
|
1
2
3
4
5
6
7
|
<p class=»hide-if-no-js»>
<a title=»Set Footer Image» href=»javascript:;»
</p>
<div id=»featured-footer-image-container» class=»hidden»>
<img src=»» alt=»» title=»» />
</div><!— #featured-footer-image-container —>
|
Обратите внимание, что мы используем CSS-класс WordPress, hidden для скрытия контейнера. Используя JavaScript, мы удалим этот класс для отображения изображения (и, в основном, сделаем обратное, чтобы скрыть изображение и отобразить привязку для повторного выбора изображения).
Теперь мы можем вернуться к JavaScript и визуализировать изображение всякий раз, когда оно было выбрано. Нам нужно сделать две вещи:
- Скрыть привязку, чтобы позволить пользователю выбрать изображение
- Отобразить показанное изображение в контейнере
Для этого давайте вернемся к JavaScript-коду, который мы рассмотрели ранее в этой статье. После того, как мы получили данные JSON, давайте удостоверимся, что у нас есть URL изображения, и затем мы продолжим.
|
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
|
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, чтобы убедиться, что мы правильно показываем и скрываем элементы.
Сначала мы проверяем свойство URL-адреса json чтобы убедиться, что его длина больше нуля. Мне нравится использовать $.trim для того, чтобы сделать это в качестве защитной практики кодирования. Если он равен нулю, мы вернемся, потому что у нас нет изображения для отображения.
После этого мы используем новый элемент div который мы создали на предыдущем шаге. Мы получаем элемент изображения с помощью функции children() а затем устанавливаем его атрибуты src , alt и title на основе свойств, доступных через объект json .
Оттуда мы выбираем родительский контейнер изображения и затем удаляем скрытый класс.
В конце концов, мы используем элемент featured-footer-image-container как точку, из которой мы можем получить доступ к якору — в данном случае это предыдущий элемент — и затем мы его скрываем.
На этом этапе изображение должно появиться в мета-поле пост.
Но у нас есть одна очевидная проблема: изображение слишком велико для контейнера. Это означает, что нам нужно ввести немного CSS.
3. Стилизация нашего избранного изображения
Для этого нам понадобится добавить файл CSS и обновить файл базового плагина, чтобы он помещал в таблицу стилей.
Сначала создайте каталог css в папке вашего плагина, затем добавьте admin.css в каталог. В этом файле добавьте следующий код:
|
1
2
3
4
5
6
|
#featured-footer-image-container img {
width: 100%;
height: auto;
}
|
Затем добавьте следующий хук в функцию run() вашего плагина:
|
1
|
add_action( ‘admin_enqueue_scripts’, array( $this, ‘enqueue_styles’ ) );
|
Наконец, добавьте следующую функцию:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
/**
* 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__ ) .
array()
);
}
|
Если вы правильно настроили селекторы и правильно зарегистрировали и поместили в таблицу стилей, вы должны увидеть что-то вроде этого:
Намного лучше, не так ли?
4. Как мы удаляем изображение?
Так же, как мы добавили элемент для отображения изображения, нам нужно добавить элемент, который также позволит нам удалить изображение.
Чтобы сделать это, пересмотрите views/admin.php и добавьте следующий код:
|
1
2
3
|
<p class=»hide-if-no-js hidden»>
<a title=»Remove Footer Image» href=»javascript:;»
</p><!— .hide-if-no-js —>
|
Далее нам нужно написать дополнительный JavaScript, чтобы при отображении изображения отображался вышеуказанный якорь. Для этого снова admin.js в admin.js и давайте добавим его ниже кода, который мы добавили ранее в статье:
|
1
2
3
4
|
// Display the anchor for the removing the featured image
$( ‘#featured-footer-image-container’ )
.next()
.show();
|
И так же, как мы делали с начальной привязкой, нам нужно настроить обработчик событий так, чтобы при нажатии на привязку «удалить» изображение было удалено, а привязка «Установить выделенное изображение» была восстановлена.
Для этого сначала вернитесь к функции, которая запускается сразу после загрузки DOM, и добавьте следующий код:
|
1
2
3
4
5
6
7
8
9
|
$( ‘#remove-footer-thumbnail’ ).on( ‘click’, function( evt ) {
// Stop the anchor’s default behavior
evt.preventDefault();
// Remove the image, toggle the anchors
resetUploadForm( $ );
});
|
Теперь нам нужно определить функцию resetUploadForm , поэтому давайте сделаем это сейчас. Помните, что для этого необходимо удалить изображение, скрыть контейнер «удалить ссылку» и восстановить привязку ссылки «Установить изображение».
|
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
|
/**
* 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 в базе данных, их очисткой, извлечением и последующим отображением на передней панели. ,
В следующей статье этой серии мы рассмотрим именно это. В то же время, не стесняйтесь оставлять любые комментарии или вопросы в ленте ниже.