Когда WordPress 3.5 был выпущен, одним из наиболее значительных изменений было внесено изменение в Media Uploader. Возможно, более точное описание этого изменения будет означать добавление нового Media Uploader.
В конце концов, старая версия Media Uploader все еще существует и может работать бок о бок с текущей библиотекой мультимедиа, но это нужно делать путем правильного добавления и использования сценариев, стиля и всех других зависимых функций.
Как и в случае с любым программным обеспечением, функции и функциональные возможности, которые существуют в течение значительного времени, могут быть исключены в пользу новых функций или функциональных возможностей. В нашем случае Медиатека не является исключением. Хотя ядро WordPress больше не используется, существует множество плагинов и других сторонних утилит, которые все еще используют старую версию библиотеки мультимедиа.
Проблема, связанная с наличием большого количества копий кода старой функциональности, заключается в том, что, когда придет время самим использовать библиотеку мультимедиа, мы, вероятно, в конечном итоге найдем примеры для старой функциональности.
Поскольку новая библиотека мультимедиа — это новый стандарт в WordPress, а документация о том, как ее использовать, невелика, мы рассмотрим функциональные возможности в следующих нескольких статьях, чтобы понять, как новые медиа Библиотека построена, как мы можем реализовать ее в нашей собственной работе, и как мы можем использовать преимущества различных функций, которые уже включены в ядро WordPress.
WordPress Media Uploader
Новый WordPress Media Uploader имеет ряд преимуществ перед предыдущей итерацией:
- Перетащите поддержку
- Более чистый интерфейс
- Легкое управление галереями
- …и более
Тем не менее, важно отметить, что самая последняя версия загрузчика построена с использованием набора технологий, совершенно отличных от предыдущих. Это означает, что код, который вы когда-то написали для реализации настраиваемого управления мультимедиа, все еще может работать (пока не устарел основной код Thickbox ), но он будет выглядеть и чувствовать себя устаревшим по сравнению с тем, что пользователи испытывают сейчас, когда они управляют своими мультимедиа внутри WordPress.
Слово о подчеркивании и позвоночнике
Прежде чем взглянуть на то, как начать включать это в наш собственный код и создавать собственную реализацию, важно понять фундамент, лежащий в основе новой библиотеки мультимедиа.
Как упоминалось ранее, предыдущая редакция средства загрузки мультимедиа использовала библиотеку, известную как Thickbox, для создания того, что мы видели, но в последней реализации WordPress использует оба символа подчеркивания (не путать с символом подчеркивания) theme) и Backbone — две технологии JavaScript, которые работают вместе для управления пользовательским интерфейсом и управления событиями загрузки мультимедиа.
Хотя мы не будем углубляться в одну из этих библиотек, важно понимать роль, которую каждая из них играет в Media Uploader.
Во-первых, позвоночник :
Backbone.js дает структуру веб-приложениям, предоставляя модели с привязкой значения ключа и настраиваемыми событиями, коллекции с богатым API перечислимых функций, представления с декларативной обработкой событий и соединяет все это с существующим API через интерфейс RESTful JSON.
И подчеркивание :
Underscore — это библиотека JavaScript, предоставляющая целый набор полезных помощников по функциональному программированию без расширения каких-либо встроенных объектов. Это ответ на вопрос: «Если я сижу перед пустой HTML-страницей и хочу немедленно начать продуктивную работу, что мне нужно?»… И связь с смокингом jQuery и подтяжками Backbone.
Очевидно, что вы можете прочитать больше о каждом из них на соответствующих страницах, но я хотел бы упомянуть их сейчас, чтобы, когда мы приступим к рассмотрению управления пользовательским интерфейсом и событиями для нашей пользовательской реализации библиотеки мультимедиа, у нас было более четкое понимание того, как что на самом деле делает код.
Наконец, обратите внимание, что это не jQuery. Если вы привыкли работать с этой библиотекой — а многие из нас — эти две библиотеки совершенно разные. Вы можете — и мы будем — использовать jQuery вместе с функциональностью, добавленной Backbone и Underscore.
Включение Media Uploader
Теперь давайте приступим к написанию кода.
В нашем примере мы рассмотрим, как мы интегрируем базовую версию библиотеки мультимедиа в существующую тему WordPress. Для целей нашего примера мы будем строить это как плагин; однако среда, которую мы собираемся использовать, состоит из следующего:
- Базовая установка WordPress 3.9.2
- Двадцать двенадцатая тема
Вот и все. Остальная часть кода будет содержаться в нашем плагине. Конечно, это все еще поднимает вопрос о том, что на самом деле собирается делать наш плагин.
Короче говоря, мы будем работать над имитацией функциональности WordPress «Featured Image», но вместо того, чтобы добавлять изображение в верхнюю часть публикации (или около верхней части публикации), мы собираемся представить « Featured Footer Image ‘, который добавляет изображение в конец поста.
Очевидно, что функциональность тривиальна — упор делается на реализацию новой библиотеки мультимедиа.
Весь исходный код будет доступен для просмотра в репозитории GitHub, связанном с этой статьей, не стесняйтесь следовать за кодом по мере развития статьи, а затем загружать код, чтобы изучить больше после каждой статьи для дальнейшего просмотра.
1. Настройте каталог проекта
В каталоге wp-content/plugins создайте новый каталог с именем acme-footer-image . Здесь мы будем хранить файлы нашего проекта. После этого продолжайте и создайте пустые файлы следующим образом;
-
README.txt -
LICENSE -
acme-footer-image.php
Первые три файла должны быть понятны. В файле acme-footer-image.php мы определим заголовок плагина и фактически начнем выполнение плагина. Обратите внимание, что class-acme-footer-image.php — это класс, который определит некоторые начальные функции нашего плагина.
Затем создайте каталог в каталоге плагинов с именем admin поскольку здесь будут храниться все функции нашего администрирования. Этот каталог должен содержать:
-
admin/class-admin-footer-image.php -
admin/js/admin.js
Наконец, создайте каталог представлений в подкаталоге admin поскольку именно здесь мы собираемся разместить разметку для нашего мета-блока. Мы рассмотрим это более подробно позже в этой статье.
В попытке убедиться, что мы создаем хорошо организованный набор файлов, каждый из которых поддерживает свои обязанности, мы рассмотрим каждый из этих файлов более подробно и проработаем учебное руководство. На данный момент, однако, это должно включать в себя все, что нам нужно, чтобы начать.
2. Установите README
Прежде чем приступить к написанию реального кода, давайте продолжим и заполним некоторую информацию по умолчанию, начиная с README .
|
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
|
=== Acme Footer Image ===
Contributors: tommcfarlin
Donate link: http://tommcfarlin.com/
Tags: featured images
Requires at least: 3.9.2
Tested up to: 3.9.2
Stable tag: 0.1.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Append a featured image at the bottom of the content of a post or page.
== Description ==
Append a featured image at the bottom of the content of a post or page.
for a Tuts+ Code tutorial.
== Installation ==
This section describes how to install the plugin and get it working.
eg
1. Upload `plugin-name.php` to the `/wp-content/plugins/` directory
1. Activate the plugin through the ‘Plugins’ menu in WordPress
1. Place `<?php do_action(‘plugin_name_hook’);
== Changelog ==
= 0.1.0 =
* Initial release
|
Обратите внимание, что это также содержит журнал изменений.
3. Настройте класс плагина
Далее нам нужно определить код для базового класса плагина. Этот класс будет отвечать за следующее:
- Определение номера версии
- Определение слизня, который используется во всем классе
- Регистрация и постановка в очередь необходимого JavaScript
- Рендеринг метабокса
Вообще говоря, я не считаю, что это лучший способ разработки плагинов объектно-ориентированным способом, потому что, как вы можете видеть, этот класс уже делает больше, чем одну вещь. Это плохая практика; однако из-за того, что объем кода настолько мал, а акцент в этой серии будет в основном сосредоточен на JavaScript, который управляет библиотекой мультимедиа, я готов пойти на эту жертву.
Итак, давайте посмотрим на класс в целом, а затем рассмотрим некоторые из отдельных компонентов:
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<?php
/**
* The dashboard-specific functionality of the plugin.
*
* @link http://tommcfarlin.com
* @since 0.1.0
*
* @package Acme_Footer_Image
* @subpackage Acme_Footer_Image/admin
*/
/**
* The dashboard-specific functionality of the plugin.
*
* Defines the plugin name, version, the meta box functionality
* and the JavaScript for loading the Media Uploader.
*
* @package Acme_Footer_Image
* @subpackage Acme_Footer_Image/admin
* @author Tom McFarlin <[email protected]>
*/
class Acme_Footer_Image {
/**
* The ID of this plugin.
*
* @since 0.1.0
* @access private
* @var string $name The ID of this plugin.
*/
private $name;
/**
* The current version of the plugin.
*
* @since 0.1.0
* @access private
* @var string $version The version of the plugin
*/
private $version;
/**
* Initializes the plugin by defining the properties.
*
* @since 0.1.0
*/
public function __construct() {
$this->name = ‘acme-footer-image’;
$this->version = ‘0.1.0’;
}
/**
* Defines the hooks that will register and enqueue the JavaScriot
* and the meta box that will render the option.
*
* @since 0.1.0
*/
public function run() {
add_action( ‘admin_enqueue_scripts’, array( $this, ‘enqueue_scripts’ ) );
add_action( ‘add_meta_boxes’, array( $this, ‘add_meta_box’ ) );
}
/**
* Renders the meta box on the post and pages.
*
* @since 0.1.0
*/
public function add_meta_box() {
$screens = array( ‘post’, ‘page’ );
foreach ( $screens as $screen ) {
add_meta_box(
$this->name,
‘Footer Featured Image’,
array( $this, ‘display_featured_footer_image’ ),
$screen,
‘side’
);
}
}
/**
* Registers the JavaScript for handling the media uploader.
*
* @since 0.1.0
*/
public function enqueue_scripts() {
wp_enqueue_media();
wp_enqueue_script(
$this->name,
plugin_dir_url( __FILE__ ) .
array( ‘jquery’ ),
$this->version,
‘all’
);
}
/**
* Renders the view that displays the contents for the meta box that for triggering
* the meta box.
*
* @param WP_Post $post The post object
* @since 0.1.0
*/
public function display_featured_footer_image( $post ) {
include_once( dirname( __FILE__ ) . ‘/views/admin.php’ );
}
}
|
Большая часть кода должна быть понятна через комментарии. Если нет, не стесняйтесь оставлять комментарии, а пока давайте рассмотрим следующие две области:
Во-первых, определение метабокса.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<?php
public function add_meta_box() {
$screens = array( ‘post’, ‘page’ );
foreach ( $screens as $screen ) {
add_meta_box(
$this->name,
‘Footer Featured Image’,
array( $this, ‘display_featured_footer_image’ ),
$screen,
‘side’
);
}
}
|
Обратите внимание, что мы включаем поддержку мета-блока как на страницах, так и на типах записей. Эта функция также ссылается на функцию обратного вызова display_featured_footer_image которая отвечает за отображение HTML мета-блока:
|
1
2
3
|
public function display_featured_footer_image( $post ) {
include_once( dirname( __FILE__ ) . ‘/views/admin.php’ );
}
|
Разметка для этого файла очень проста. Это якорь с идентификатором, к которому мы можем получить доступ через наш JavaScript, который мы посмотрим на мгновение.
|
1
2
3
|
<p class=»hide-if-no-js»>
<a title=»Set Footer Image» href=»javascript:;»
</p>
|
И мы поставим в очередь JavaScript, необходимый для загрузки библиотеки мультимедиа.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
public function enqueue_scripts() {
wp_enqueue_media();
wp_enqueue_script(
$this->name,
plugin_dir_url( __FILE__ ) .
array( ‘jquery’ ),
$this->version,
‘all’
);
}
|
Обратите внимание, что перед тем, как зарегистрировать наш собственный JavaScript, мы вызываем wp_enqueue_media . Согласно Кодексу, эта функция:
Выполняет постановку всех сценариев, стилей, настроек и шаблонов, необходимых для использования всех медиа-API JavaScript.
И это необходимо для того, чтобы у нас были зависимости, необходимые для загрузки нового Media Uploader.
4. JavaScript
Далее, давайте посмотрим на 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
/**
* Callback function for the ‘click’ event of the ‘Set Footer Image’
* anchor in its meta box.
*
* Displays the media uploader for selecting an image.
*
* @since 0.1.0
*/
function renderMediaUploader() {
‘use strict’;
var file_frame, image_data;
/**
* If an instance of file_frame already exists, then we can open it
* rather than creating a new instance.
*/
if ( undefined !== file_frame ) {
file_frame.open();
return;
}
/**
* If we’re this far, then an instance does not exist, so we need to
* create our own.
*
* Here, use the wp.media library to define the settings of the Media
* Uploader.
* defined in WordPress core and are initializing the file frame
* with the ‘insert’ state.
*
* We’re also not allowing the user to select more than one image.
*/
file_frame = wp.media.frames.file_frame = wp.media({
frame: ‘post’,
state: ‘insert’,
multiple: false
});
/**
* Setup an event handler for what to do when an image has been
* selected.
*
* Since we’re using the ‘view’ state when initializing
* the file_frame, we need to make sure that the handler is attached
* to the insert event.
*/
file_frame.on( ‘insert’, function() {
/**
* We’ll cover this in the next version.
*/
});
// Now display the actual file_frame
file_frame.open();
}
(function( $ ) {
‘use strict’;
$(function() {
$( ‘#set-footer-thumbnail’ ).on( ‘click’, function( evt ) {
// Stop the anchor’s default behavior
evt.preventDefault();
// Display the media uploader
renderMediaUploader();
});
});
})( jQuery );
|
Обратите внимание, что здесь отображается только библиотека мультимедиа. На самом деле он ничего не делает после того, как мы загрузили и / или выбрали изображение.
5. Настройте основной файл плагина
Наконец, последний шаг — определить наш основной файл начальной загрузки, чтобы запустить плагин:
|
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<?php
/**
* Acme Footer Image
*
* Append a featured image at the bottom of the content of a post or page.
* for a Tuts+ Code tutorial.
*
* @package Acme_Footer_Image
* @author Tom McFarlin <[email protected]>
* @license GPL-2.0+
* @link http://tommcfarlin.com
* @copyright 2014 Tom McFarlin
*
* @wordpress-plugin
* Plugin Name: Acme Footer Image
* Plugin URI: TODO
* Description: Appends a featured image at the bottom of the content of a post or page.
* Version: 0.1.0
* Author: Tom McFarlin
* Author URI: http://tommcfarlin.com
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
// If this file is called directly, abort.
if ( ! defined( ‘WPINC’ ) ) {
die;
}
/**
* Includes the core plugin class for executing the plugin.
*/
require_once( plugin_dir_path( __FILE__ ) . ‘admin/class-acme-footer-image.php’ );
/**
* Begins execution of the plugin.
*
* Since everything within the plugin is registered via hooks,
* then kicking off the plugin from this point in the file does
* not affect the page life cycle.
*
* @since 0.1.0
*/
function run_acme_footer_image() {
$plugin = new Acme_Footer_Image();
$plugin->run();
}
run_acme_footer_image();
|
Здесь все должно быть относительно знакомо: мы удостоверяемся, что у нас есть разрешение на загрузку плагина, мы включаем зависимость для панели мониторинга, создаем экземпляр виджета и затем приводим его в движение.
6. Запустите это
На данный момент мы читаем, чтобы активировать плагин. Сделайте это с панели инструментов плагина вашей установки WordPress, а затем перейдите на любой экран публикации или страницы. Вы должны заметить «Особое изображение нижнего колонтитула». Затем, когда вы нажмете на якорь, должна появиться Медиатека.
Если нет, дважды проверьте пути, которые вы связали с вашим файлом JavaScript, и убедитесь, что они загружаются правильно.
Отсюда вы можете свободно выбирать изображения и загружать изображения, хотя из этого больше ничего не получается. В следующей статье мы рассмотрим, как извлечь выгоду из данных, извлеченных из средства загрузки мультимедиа.
Вывод
Здесь мы взглянули на последнюю итерацию WordPress Media Uploader, как она работает и как мы можем заложить основу, чтобы использовать ее в нашем коде. В следующей статье мы рассмотрим, как использовать JavaScript для сбора данных, добавленных в Media Uploader, чтобы мы, в свою очередь, могли делать с ним то, что нам нужно.
Кроме того, мы рассмотрим, как мы можем добавить дополнительные поля в Media Uploader, используя существующие шаблоны, которые поставляются с ядром WordPress. А позже мы увидим, как мы можем реализовать дополнительные поля наряду с Media Uploader, чтобы сохранить еще больше информации.
А пока поиграйте с кодом, представленным в этой статье, посмотрите, сможете ли вы заставить его работать в контексте ваших собственных проектов, и оставьте вопросы и / или отзывы, которые у вас есть в ленте комментариев ниже!
Наконец, не забудьте, что вы можете извлечь этот код из связанного с ним поста GitHub.