Как интегрировать Медиа Загрузчик Wordpress в Шаблон и Настройки плагина

() translation by (you can also view the original English article)

Добро пожаловать разработчики шаблонов и плагинов Wordpress. Мы все хотим, чтобы пользователи наших тем могли загружать свои изображения и логотипы используя Настройки Шаблона, созданные нами (включая страницы плагина) но, как ты запрограммируешь это? Вы используете Медиа-загрузчик Wordpress (когда вы загружаете рекламное изображение и изображение в запись) или вы просто добавляете поле и забываете обо всех остальных вещах? Вы загружаете изображения в папку загрузок правильно? Вы подключаете изображение к Медиа Библиотеке Wordpress? И, самое важное, удаляете ли файлы правильно (если этого хочет пользователь)? А теперь время показать как сделать собственные настройки шаблона используя интерфейс Wordpress. Мы хотим удовлетворить пользователей понятным интерфейсом.

Этот урок фокусируется на загрузке изображений с помощью Страницы Настроек Шаблона, так вам не придётся создавать ещё одну. Я предлагаю вам для начала ознакомиться с великолепным уроком Тома МакФалина Полный путеводитель по настройкам API Wordpress.

Что мы будем делать в этом Уроке?

Мы добавим кнопку в форму для загрузки изображения или логотипа на серверную файловую систему и другую кнопку для удаления этого изображения.
Мы создадим поле ввода для пред-просмотра изображения.
Мы будем использовать Медиа Загрузчик Wordpress для загрузки фалов или выбрать его, не волнуясь о всем процессе. Мы также будем управлять загрузкой изображения в нужную папку и подключать его в Медиа Загрузчик Wordpress.
Мы сможем удалить само изображение как вставку из Медиа Библиотеки Wordpress. Мы не хотим впустую тратить место на сервере.

Подготовка к созданию страницы настройки шаблона

Нам надо создать папку с названием wptuts-options в корневой папке и в ней создать файл wptuts-options.php где надо будет прописать весь код нашей страницы настроек. Также нам надо создать папку js, где мы будем хранить файлы JavaScript, требующие для нашего урока.

Во-первых мы должны создать файл wptuts-options.php и отделить функционал от нашего functions.php.

1
2	require_once( 'wptuts-options/wptuts-options.php' );

Внутри нашего файла wptuts-options.php мы создадим функцию, где мы опишем значения по-умолчанию. В нашем случае, значением будет ссылка на изображение на нашем сервере. Мы назначим пустую последовательность по умолчанию, но мы могли также назначить URL изображения, которое мы уже имеем в папке темы.


function wptuts_get_default_options() {
  $options = array(
		'logo' => ''
	);
	return $options;
}

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


function wptuts_options_init() {
	$wptuts_options = get_option( 'theme_wptuts_options' );

	// Are our options saved in the DB?
	if ( false === $wptuts_options ) {
		// If not, we'll save our default options
		$wptuts_options = wptuts_get_default_options();
		add_option( 'theme_wptuts_options', $wptuts_options );
	}

	// In other case we don't need to update the DB
}

// Initialize Theme options
add_action( 'after_setup_theme', 'wptuts_options_init' );

Теперь время создать нашу страницу Настроек Шаблона, добавляя его в Админ Панель и сделаем форму.


// Add "WPTuts Options" link to the "Appearance" menu
function wptuts_menu_options() {
	// add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function);
	add_theme_page('WPTuts Options', 'WPTuts Options', 'edit_theme_options', 'wptuts-settings', 'wptuts_admin_options_page');
}
// Load the Admin Options page
add_action('admin_menu', 'wptuts_menu_options');

function wptuts_admin_options_page() {
	?>
		<!-- 'wrap','submit','icon32','button-primary' and 'button-secondary' are classes
		for a good WP Admin Panel viewing and are predefined by WP CSS -->

		<div class="wrap">

			<div id="icon-themes" class="icon32"><br /></div>

			<h2><?php _e( 'WPTuts Options', 'wptuts' ); ?></h2>

			<!-- If we have any error by submiting the form, they will appear here -->
			<?php settings_errors( 'wptuts-settings-errors' ); ?>

			<form id="form-wptuts-options" action="options.php" method="post" enctype="multipart/form-data">

				<?php
					settings_fields('theme_wptuts_options');
					do_settings_sections('wptuts');
				?>

				<p class="submit">
					<input name="theme_wptuts_options[submit]" id="submit_options_form" type="submit" class="button-primary" value="<?php esc_attr_e('Save Settings', 'wptuts'); ?>" />
					<input name="theme_wptuts_options[reset]" type="submit" class="button-secondary" value="<?php esc_attr_e('Reset Defaults', 'wptuts'); ?>" />
				</p>

			</form>

		</div>
	<?php
}

Таким образом: С использованием хука admin_menu мы добавили нашу страницу в Админ панель в Внешний Вид -> WPTuts Options и он может определяться по слагу wptuts-settings. После этого мы должны создать форму в которой пока нет полей основанных на функциях setting_fields и do_settings_sections. Как я уже сказал ранее, цель этого урока не в том, чтобы описать как работают эти функции, поэтому мы не будем объяснять. Вы можете прочитать серию Тома, которую можно найти по ссылкам в конце.

Но, обратите внимание на то, что кроме создания кнопки submit, мы также должны создать ещё одну кнопку Reset. Когда мы на неё нажмём, значение изображения будет изменено на по-умолчанию.

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


function wptuts_options_settings_init() {
	register_setting( 'theme_wptuts_options', 'theme_wptuts_options', 'wptuts_options_validate' );

	// Add a form section for the Logo
	add_settings_section('wptuts_settings_header', __( 'Logo Options', 'wptuts' ), 'wptuts_settings_header_text', 'wptuts');

	// Add Logo uploader
	add_settings_field('wptuts_setting_logo',  __( 'Logo', 'wptuts' ), 'wptuts_setting_logo', 'wptuts', 'wptuts_settings_header');
}
add_action( 'admin_init', 'wptuts_options_settings_init' );

function wptuts_settings_header_text() {
	?>
		<p><?php _e( 'Manage Logo Options for WpTuts Theme.', 'wptuts' ); ?></p>
	<?php
}

function wptuts_setting_logo() {
	$wptuts_options = get_option( 'theme_wptuts_options' );
	?>
		<input type="text" id="logo_url" name="theme_wptuts_options[logo]" value="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
		<input id="upload_logo_button" type="button" class="button" value="<?php _e( 'Upload Logo', 'wptuts' ); ?>" />
		<span class="description"><?php _e('Upload an image for the banner.', 'wptuts' ); ?></span>
	<?php
}

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

И не забываем про проверку данных в функции:


function wptuts_options_validate( $input ) {
	$default_options = wptuts_get_default_options();
	$valid_input = $default_options;

	$submit = ! empty($input['submit']) ? true : false;
	$reset = ! empty($input['reset']) ? true : false;

	if ( $submit )
		$valid_input['logo'] = $input['logo'];
	elseif ( $reset )
		$valid_input['logo'] = $default_options['logo'];

	return $valid_input;
}

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

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

Теперь продолжим с тем, что действительно важно.

Шаг 1 - Добавление необходимого JavaScript

Если мы хотим, чтобы Медиа Загрузчик Wordpress работал правильно мы должны подключить несколько библиотек скриптов JavaScript и стилей CSS.

Thickbox (JS) - Отвечает за управление модальным окном, которое позволяет перемещать и выбирать файлы. It is provided by WordPress Core.
Thickbox (CSS) - обеспечивает стили, необходимые для этого окна. Некоторые подключается вместе с установкой Wordpress.
Media Upload (JS) - Обеспечивает функции, необходимые для загрузки, проверки и вставки форматов файлов. Это является частью Медиа Загрузчика Wordpress.
Наш собственный JS - тут будут прописаны параметры, которые требуются для правильного отображения окна.

Мы должны ввести следующий код в файл wptuts-options.php:


function wptuts_options_enqueue_scripts() {
	wp_register_script( 'wptuts-upload', get_template_directory_uri() .'/wptuts-options/js/wptuts-upload.js', array('jquery','media-upload','thickbox') );

	if ( 'appearance_page_wptuts-settings' == get_current_screen() -> id ) {
		wp_enqueue_script('jquery');

		wp_enqueue_script('thickbox');
		wp_enqueue_style('thickbox');

		wp_enqueue_script('media-upload');
		wp_enqueue_script('wptuts-upload');

	}

}
add_action('admin_enqueue_scripts', 'wptuts_options_enqueue_scripts');

Есть пара вещей, которые мы должны объяснить: в первой строке мы регистрируем скрипт (мы пока не говорили об этом), который обработает процесс для открытия модального окна и собрать данные изображения. Как мы ранее говорили, мы создаём папку с названием js. Особенность этого скрипта в том, что он зависит от ряда других библиотек вроде jQuery, Media-Upload и Thickbox и все они устанавливаются вместе с Wordpress.

Во второй строке мы используем функцию get_current_screen(), которая обеспечивает нас слагом страницы на которой мы работаем. Эта функция не всегда можно использовать, а в зависимости от хука ,что мы используем, она будет доступна или нет. С хуком admin_enqueue_scripts функция будет работать без проблем. get_current_screen() -> id даёт нам слаг страницы, где мы будем работать. Для страниц, которые идут по-умолчанию в Админ Панели Wordpress это могут быть 'themes','edit-post','plugins' и пр. В нашем случае этот слаг выглядит как appearance_page_{OUR_SLUG}. Вы помните слаг, который мы определяли в функции add_theme_page? Теперь, наша страница Настроек Темы наконец имеет слог слежения appearance_page_wptuts-settings. Теперь мы загрузим только скрипты когда они присваиваются.

В двух других строках мы добавляем скрипты лабораторий jQuery, Thickbox, Media Upload и наш JS, wptuts-upload.js. Кроме того мы также добавим стили Thickbox CSS.

Наш Скрипт: wptuts-upload.js

Несмотря на то, как он выглядит, скрипт проще, чем может показаться. Только для его работы необходимо знать некоторые функции Thickbox и Media Uploader Проблема состоит в том, что трудно найти информацию об этом и наконец, как хорошие программисты, которыми мы есть, у нас нет другого выбора, как работать с кодом. Как мы можем видеть, это действительно просто сделать. Давайте перейдём непосредственно к первой версии кода:


	jQuery(document).ready(function($) {
		$('#upload_logo_button').click(function() {
			tb_show('Upload a logo', 'media-upload.php?referer=wptuts-settings&type=image&TB_iframe=true&post_id=0', false);
			return false;
		});
	});

Успех! Если мы сейчас нажмём нашу кнопку Upload Logo, появится Медиа Загрузчик Wordpress. Отлично, мы закончили, увидимся позже! Нет, это не правда, но осталось недолго, чтобы наша страница настроек начала просто работать .

Просматривая код, мы видим, что присвоили событие кнопке, которая запускает функцию Thickbox и вызывает модальное окною Эта функция принимает три параметра:

Название окна - В нашем случае Upload a Logo
URL - Выполняет библиотеку WordPress, которая обращается и утверждает файлы помимо создания содержания для окна.
imageGroup - Мы должны выбрать настройку false потому что мы не собираемся работать с группами изображений, а только с одним.

Среди них самый интересный это ссылка (URL). Wordpress использует файл с названием media-upload.php для управления окна, а также разрешает несколько параметров $_GET. Мы должны помнить, что знак & должен быть прописан со своим HTML объектом, поэтому URL будет работать без каких либо проблем.

referer - Этот параметр необязательный. Мы будет использовать его позже в небольшом приёме.
type - Это тип файла. Это может быть video, audio, image или file.
TB_iframe - Этот должен быть выбран как true, что бы показывать окно в iframe или оно не будет работать. Хотя в это будет тяжело поверить, это самый важный параметр и сейчас мы увидим почему.
post_id - Это это используется чтобы указать, что изображение не будет прикреплено к любому посту и что он будет свободен как маленькая птичка.

Что ж, я не хочу врать тебе. Только один из этих трёх параметров по-настоящему важен: TB_iframe. Мы можем забыть о других. Несколько версий назад, Wordpress объединила в своём Медиа Загрузчике возможность загружать несколько типов файлов, без надобности дифференцировать изображения от видео или музыки, поэтому type не важен, а post ID по-умолчанию - 0. Так или иначе не будет вреда, оставив их на всякий случай,но у нас есть проблема с совместимостью. Было бы интересно указать post_id, если это будет Meta Box в записи.

Следующая часть нашего скрипта должна содержать следующую функцию:


	window.send_to_editor = function(html) {
		var image_url = $('img',html).attr('src');
		$('#logo_url').val(image_url);
		tb_remove();
	}

send_to_editor это событие включённое в библиотеку ЯваCкриптов Медиа Загрузчика Wordpress. Это добавит данные в формате HTML и можем поместить их туда, куда мы захотим.

Это событие доставляет параметр к функции-обработчику, html, который включает следующий код (как пример):

1
2	<a href="{URL ON THE SERVER FOR THE UPLOADED IMAGE}"><img src="{URL ON THE SERVER FOR THE UPLOADED IMAGE}" alt="" title="" width="" height"" class="alignzone size-full wp-image-125" /></a>

Таким образом, извлечь URL изображение загруженное на сервер можно используя строку $('img',html).attr('src'); тогда это будет сохранено в нашем поле ввода со строкой $('#logo_url').val(image_url);.

Функция tb_remove закрывает модальное окно и это всё. Теперь мы в состоянии отправить форму и сохранить URL изображения в базу данных. Мы можем остановиться, но результат пока выглядит не красиво или не удобно для использования, поэтому сделаем улучшение.

Если мы обратим внимание, когда мы загружаем изображение, используя Медиа Загрузчик, мы можем вставить URL изображения в наше поле ввода через кнопку Insert into Post. Это может запутать пользователя. Для этого мы можем изменить этот текст текст используя фильтры Wordpress. Мы напишем следующий код в наш файл wptuts-options.php:


function wptuts_options_setup() {
	global $pagenow;

	if ( 'media-upload.php' == $pagenow || 'async-upload.php' == $pagenow ) {
		// Now we'll replace the 'Insert into Post Button' inside Thickbox
		add_filter( 'gettext', 'replace_thickbox_text'  , 1, 3 );
	}
}
add_action( 'admin_init', 'wptuts_options_setup' );

function replace_thickbox_text($translated_text, $text, $domain) {
	if ('Insert into Post' == $text) {
		$referer = strpos( wp_get_referer(), 'wptuts-settings' );
		if ( $referer != '' ) {
			return __('I want this to be my logo!', 'wptuts' );
		}
	}
	return $translated_text;
}

Используя хук admin_init, мы можем проверить какие страницы мы делаем используя Медиа Загрузчик. Эти страницы: media-upload.php и async-upload.php. Первая отрывает модальное окно, а вторая грузится, когда загружается изображение. Чтобы подтвердить, что мы работаем над любым из них, мы должны использовать глобальную переменную $pagenow, а не функцию get_current_screen (), потому что admin_init все еще не предоставляет эту функцию.

И так, почему мы используем переменную referer? Хорошо, это небольшой трюк и он работает как-то так:

Когда мы нажимаем на кнопку Upload Image, URL выглядит примерно как https://www.нашДомен.com/.../ wp-admin/themes.php?page=wptuts_settings
Если мы нажмём на вкладку вроде Медиа Библиотеки внутри Меди Загрузчика, URL изменится и получит следующее значение: http://localhost/.../wp-admin/media-upload.php?referer=wptuts-settings&type=image.
Тоже самое произойдёт, когда мы загрузим новое изображение. URL изменится и получит то же значение.

Теперь видите почему мы включили параметр referer в наш ЯваСкрипт? Нам надо знать с какой страницы мы запускаем Медиа Загрузчик, потому нам надо переместить текст Insert into Post в кнопку только на нашей странице Настроек Шаблона и не на Страницу Поста. Вот почему я включил параметр referer. Теперь, используя функцию wp_get_referer() мы получим URL и мы просто должны найти строку wptuts-settings в том URL. C этим методом мы переместим в правильный контекст.

Теперь мы принимаем фильтр gettext и каждое предложение содержащее 'Insert into Post' мы заменяем на 'I want this to be my logo!'. Если мы ещё раз откроем окно Thickbox и загрузим новый файл, мы увидим, что текст кнопки будет изменён. Если вы не уверены как использовать фильтр gettext, но цель этого урока не в этом, а вы можете посетить WordPress Codex.

Уже сделаны некоторые улучшения, не так ли?

Шаг 2 - Предпросмотр изображения

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

Мы должный написать следующий код в нашу функцию wptuts_options_settings_init():

1
2	// Add Current Image Preview
3	add_settings_field('wptuts_setting_logo_preview', __( 'Logo Preview', 'wptuts' ), 'wptuts_setting_logo_preview', 'wptuts', 'wptuts_settings_header');

А также мы должные создать новую функцию для предпросмотра:


function wptuts_setting_logo_preview() {
	$wptuts_options = get_option( 'theme_wptuts_options' );  ?>
	<div id="upload_logo_preview" style="min-height: 100px;">
		<img style="max-width:100%;" src="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
	</div>
	<?php
}

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

Круто! Упокойтесь, не уходите. Тут два шага для выполнения: во-первых загрузить изображение и нажать кнопку в форме, чтобы сохранить изменения. Пользователь может подумать после загрузки изображения, где мой логотип? Я должен отправить форму? Исправить это можно добавив несколько простых строк к нашему ЯваСкрипту:


	window.send_to_editor = function(html) {
		var image_url = $('img',html).attr('src');
		$('#logo_url').val(image_url);
		tb_remove();
		$('#upload_logo_preview img').attr('src',image_url);

		$('#submit_options_form').trigger('click');
	}

Мы загрузити изображение и и мы можем увидеть, что форма была представлена. Просто добавлю представление сделанного: теперь, когда изображение загружено мы инициируем событие click нажимая на кнопку Submit и форма будет отправлена, обновляя базу данных и тем самым показывая пред-просмотр изображения. Идеально!

Удалим лишнее

До сих пор, форма привлекательна и отлично работает, но есть кое-что, что начинает нас беспокоить. Зачем нам нужно поле ввода? А-а, нам же надо сохранять URL изображения. Давайте посмотрим с другой стороны: зачем пользователю требуется поле ввода? Не требуется. Достаточно будет, если пользователь просто увидит загруженное изображение и всё работает правильно.

Давайте конвертируем нашу форму еще немного с функцией wptuts_setting_logo():


function wptuts_setting_logo() {
	$wptuts_options = get_option( 'theme_wptuts_options' );
	?>
		<input type="text" id="logo_url" name="theme_wptuts_options[logo]" value="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
		<input id="upload_logo_button" type="button" class="button" value="<?php _e( 'Upload Logo', 'wptuts' ); ?>" />
		<span class="description"><?php _e('Upload an image for the banner.', 'wptuts' ); ?></span>
	<?php
}

Если Вы не заметили, единственная вещь, которую мы сделали, состоит в том, чтобы изменить тип ввода формы. Мы сейчас говорим о скрытом поле ввода hidden, а не о поле ввода input. Форма оставила тот же самый функционал, но для пользователя выглядит более привлекательно:

Шаг 3 - Удаление изображения

Естественно, в какой-то момент, пользователь захочет удалить изображение. Чтобы упростить это мы создадим кнопку для его удаления. Но изображение не будет удалено, если пользователь просто нажмёт на кнопку, но оно может быть заменено на новое или мы можем обнулить форму.

Что надо сделать сначала? Мы создадим новую кнопку в функции wptuts_setting_logo():


function wptuts_setting_logo() {
	$wptuts_options = get_option( 'theme_wptuts_options' );
	?>
		<input type="hidden" id="logo_url" name="theme_wptuts_options[logo]" value="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
		<input id="upload_logo_button" type="button" class="button" value="<?php _e( 'Upload Logo', 'wptuts' ); ?>" />
		<?php if ( '' != $wptuts_options['logo'] ): ?>
			<input id="delete_logo_button" name="theme_wptuts_options[delete_logo]" type="submit" class="button" value="<?php _e( 'Delete Logo', 'wptuts' ); ?>" />
		<?php endif; ?>
		<span class="description"><?php _e('Upload an image for the banner.', 'wptuts' ); ?></span>
	<?php
}

Если мы обратим внимание, новая кнопка появится только тогда, когда логотип загружен. Кроме этого, мы говорим о кнопке type submit, и мы сможем отправлять форму нажимая на неё.

Мы должны добавить следующий функционал проверки и наша кнопка будет работать как мы хотим, wptuts_options_validate():


	$default_options = wptuts_get_default_options();
	$valid_input = $default_options;

	$wptuts_options = get_option('theme_wptuts_options');

	$submit = ! empty($input['submit']) ? true : false;
	$reset = ! empty($input['reset']) ? true : false;
	$delete_logo = ! empty($input['delete_logo']) ? true : false;

	if ( $submit ) {
		if ( $wptuts_options['logo'] != $input['logo'] && $wptuts_options['logo'] != '' )
			delete_image( $wptuts_options['logo'] );

		$valid_input['logo'] = $input['logo'];
	}
	elseif ( $reset ) {
		delete_image( $wptuts_options['logo'] );
		$valid_input['logo'] = $default_options['logo'];
	}
	elseif ( $delete_logo ) {
		delete_image( $wptuts_options['logo'] );
		$valid_input['logo'] = '';
	}

	return $valid_input;

Ладно, что мы тут делаем? Мы добавили новую переменную $wptuts_options для проверки, если пользователь нажмёт на кнопку Delete Logo. Если пользователь сделает это, то выполнится функция delete_image и значение URL логотипа объявим пустым. Также, логотип будет удалён, если мы отправим форму и выберем другое изображение, а также если просто сбросим форму кнопкой.

Осторожно! Сброс формы и удаление изображения это не один и тот же процесс. В нашем случае, значение по-умолчанию это пустая последовательность, но она соответствует.

Теперь мы добавим функцию delete_image():


function delete_image( $image_url ) {
	global $wpdb;

	// We need to get the image's meta ID.
	$query = "SELECT ID FROM wp_posts where guid = '" . esc_url($image_url) . "' AND post_type = 'attachment'";
	$results = $wpdb->get_results($query);

	// And delete it
	foreach ( $results as $row ) {
		wp_delete_attachment( $row->ID );
	}
}

Замечу, что этому шагу требуется более глубокое объяснение, но это действительно просто. Первое что мы делаем, выполняем запрос, который узнает Meta ID нашего изображения в базе данных. Вы думаете я вас обманываю, но информация нашего изображения находится в таблице wp_post. Теперь, запросы пытается выбрать зарегистрированные в этой таблице ( изображение, пост или URL страницы), которое соответствует нашему и выбирает post_type = 'attachment' (Это ведь эттачмент, не так ли?). Мы поместим этот ID (он будет только один) в $result и пропустит его как параметр к Wordpress wp_delete_attachment(), что удалит изображение, а также эттачмент из Медиа Библиотеки. Это просто, чисто и оптимально.

Шаг 4 - Вывод нашего логотипа в "шапке" нашего сайта

Давайте посмотрим, к чему нас привела эта путаница. Там нужен шаблон header.php, в который мы найдем место для нашего дорогого логотипа, и в это место поместим код:


<body <?php body_class(); ?>>

		<div id="container" class="container_12">

			<?php $wptuts_options = get_option('theme_wptuts_options'); ?>

			<?php if ( $wptuts_options['logo'] != '' ): ?>
				<div id="logo">
					<img src="<?php echo $wptuts_options['logo']; ?>" />
				</div>
			<?php  endif; ?>

Вот результат:

Наполедок

Более добавить нечего и это правда. Есть ли другой вариант исполнения? Конечно, и на самом деле я постоянно нахожу примеры, но с моей точки зрения Медиа Загрузчик WordPress действительно полезен и однажды узнав как его использовать, облегчает жизнь в будущем. Мы сохранили код, валидацию (в уроке мы не использовали много, но будем использовать и рекомендую это к прочтению) и используем файловую систему, которую Wordpress нам предоставляет. Все преимущества - пользователю, кто использует для работы интерфейс Wordpress и можем видеть как всё работает правильно и согласно стандартному функционалу Wordpress. На самом деле можно считать, что эта функциональность есть по умолчанию в WordPress.

Внешние ресурсы

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