Статьи

Как интегрировать WordPress Media Uploader в тему и параметры плагина

Март 4, 2019

Приветствуем разработчиков WordPress Theme и плагинов! Мы все хотели бы, чтобы пользователи нашей темы могли загружать свои собственные изображения или логотипы, используя созданную нами страницу параметров темы (включая страницы плагинов), но как вы ее программируете? Используете ли вы WordPress Media Uploader (например, когда вы загружаете изображение или вставляете изображение в сообщение), или вы просто добавляете поле ввода файла и забываете обо всем остальном? Вы загружаете изображения в папку загрузки правильно? Вы прикрепляете изображение в медиатеку WordPress? И, это важный момент, вы удаляете файл (если это то, что хочет пользователь) правильно? Что ж, пришло время придать форму нашей странице настроек тем с помощью интерфейса WordPress. Мы хотим счастливых пользователей, мы хотим удобный интерфейс.

Этот учебник ориентирован на загрузку изображений на страницу параметров темы, поэтому, если вы не совсем уверены в том, как их создать, я настоятельно рекомендую вам в первую очередь взглянуть на удивительный учебник Тома Макфарлина « Полное руководство по настройкам WordPress». Серия API .

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

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

Подготовка Создание страницы параметров темы

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

Прежде всего, мы должны вызвать наш файл wptuts-options.php из нашего functions.php :

1
require_once( ‘wptuts-options/wptuts-options.php’ );

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

1
2
3
4
5
6
function wptuts_get_default_options() {
    $options = array(
        ‘logo’ => »
    );
    return $options;
}

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
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’ );

Теперь пришло время создать страницу параметров темы, добавить ее в панель администратора и создать форму.

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
// 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’ );
 
            <!— 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, и ее можно было определить по wptuts-settings slug wptuts-settings . После этого мы создали форму, которая по-прежнему не имеет поля ввода на do_settings_sections функций setting_fields и do_settings_sections . Как я уже говорил ранее, цель этого руководства — не описать, как работают эти функции, поэтому мы не будем объяснять, для чего они нужны. Вы можете прочитать серию Тома по этой ссылке выше.

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

Наконец, мы собираемся создать нашу кнопку для загрузки изображений и поле ввода, в котором после загрузки отображается его 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
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’ );
    <?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’ );
    <?php
}

Здесь особо нечего сказать, просто значение поля logo показывает URL-адрес экранированного изображения. Прямо сейчас это то, что показывает наш экран:

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
function wptuts_options_validate( $input ) {
    $default_options = wptuts_get_default_options();
    $valid_input = $default_options;
 
    $submit = !
    $reset = !
 
    if ( $submit )
        $valid_input[‘logo’] = $input[‘logo’];
    elseif ( $reset )
        $valid_input[‘logo’] = $default_options[‘logo’];
 
    return $valid_input;
}

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

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

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

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

Если мы хотим, чтобы WordPress Media Uploader работал правильно, мы должны импортировать несколько библиотек JavaScript, а также некоторые дополнительные CSS:

  • Thickbox (JS) — отвечает за управление модальным окном, в которое мы сможем перетаскивать или выбирать файлы. Это обеспечивается WordPress Core.
  • Thickbox (CSS) — предоставляет стили, необходимые для этого окна. Он также поставляется с установкой WordPress.
  • Media Upload (JS) — предоставляет все функции, необходимые для загрузки, проверки и предоставления формата файлам. Это сердце WordPress Media Uploader.
  • Наш собственный JS — он инициализирует параметры, необходимые для правильного отображения окна.

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
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() которая предоставляет нам get_current_screen() страницы, над которой мы работаем. Эта функция не всегда может быть использована и в зависимости от используемого нами хука она будет доступна или нет. С хуком admin_enqueue_scripts функция будет работать без проблем. get_current_screen() -> id дает нам get_current_screen() -> id страницы, над которой мы работаем. Для страниц, которые появляются по умолчанию в панели администратора WordPress, это могут быть « themes », « edit-post », « plugins » и т. Д. В нашем случае этот слаг выглядит как appearance_page_{OUR_SLUG} . Вы помните слаг, который мы определили в функции add_theme_page ? Ну, на нашей странице appearance_page_wptuts-settings темы, наконец, есть следующий фрагмент: appearance_page_wptuts-settings . Таким образом, мы будем загружать скрипты только тогда, когда это необходимо.

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

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

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

1
2
3
4
5
6
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 Media Uploader. Отлично, мы закончили, до скорой встречи! Нет, это не так, но это не займет много времени, чтобы сделать нашу страницу параметров темы простым способом.

Изучив код, мы видим, что мы назначили событие click для кнопки, которая запускает функцию 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 унифицировал Media Uploader для загрузки файлов любого типа, не требуя отличать изображения от видео или музыки, поэтому type не требуется, а идентификатор сообщения по умолчанию равен 0. В любом случае, не стоит оставлять их на всякий случай, если у нас возникнут проблемы с совместимостью. Было бы интересно указать post_id если это пост Meta Box.

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

1
2
3
4
5
window.send_to_editor = function(html) {
    var image_url = $(‘img’,html).attr(‘src’);
    $(‘#logo_url’).val(image_url);
    tb_remove();
}

send_to_editor — это событие, включенное в библиотеку WordPress JavaScript Media Uploader. Он доставит данные изображения в формате HTML, поэтому мы можем разместить их в любом месте.

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

1
<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 изображения в базе данных. Мы могли бы остановиться сейчас, но результат не выглядел бы по-настоящему красивым или удобным для пользователя, поэтому давайте внесем улучшения.

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
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 Uploader. Это следующие страницы: media-upload.php и async-upload.php . Первый открывает модальное окно, а второй загружается после загрузки изображения. Чтобы подтвердить, что мы работаем над любым из них, мы должны использовать глобальную переменную $pagenow а не функцию get_current_screen() потому что admin_init прежнему не разрешает эту функцию.

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

  • Когда мы нажимаем кнопку « Upload Image , URL-адрес реферера выглядит примерно так: http://www.ourdomain.com/.../ wp-admin/themes.php?page=wptuts_settings
  • Если затем щелкнуть вкладку, например «Библиотека мультимедиа» в Media Uploader, URL-адрес реферера изменится и примет следующее значение: http://localhost/.../wp-admin/media-upload.php?referer=wptuts-settings&type=image.
  • То же самое происходит, когда мы загружаем новое изображение. URL реферера изменяется и принимает то же значение.

Теперь вы понимаете, почему мы включили параметр referer в наш JavaScript? Нам нужно знать, с какой страницы мы запускаем Media Uploader, потому что нам нужно заменить текст « Insert into Post в кнопке только на странице параметров темы, а не на странице публикации, например. Вот почему я включил параметр referer. Теперь, используя wp_get_referer() мы получаем URL wptuts-settings и нам просто нужно найти wptuts-settings внутри этого URL. С помощью этого метода мы заменим его в правильном контексте.

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

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

Шаг 2 Предварительный просмотр изображения

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

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

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

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

1
2
3
4
5
6
7
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%;»
    </div>
    <?php
}

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

Здорово! Успокойся, не беги. Есть два шага: сначала мы загружаем изображение, а затем мы вынуждены отправить форму, если мы хотим сохранить изменения. Пользователь может подумать, когда изображение будет загружено, где, черт возьми, мой логотип? Должен ли я отправить форму? Избегайте расстраиваться, добавив несколько простых строк в наш JavaScript:

1
2
3
4
5
6
7
8
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() :

1
2
3
4
5
6
7
8
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’ );
    <?php
}

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

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

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

Обо всем по порядку. Мы собираемся создать новую кнопку в функции wptuts_setting_logo() :

01
02
03
04
05
06
07
08
09
10
11
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’ );
    <?php
}

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

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

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
$default_options = wptuts_get_default_options();
$valid_input = $default_options;
 
$wptuts_options = get_option(‘theme_wptuts_options’);
 
$submit = !
$reset = !
$delete_logo = !
 
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 функция delete_image и мы устанавливаем значение URL-адреса логотипа в виде пустой строки. Кроме того, логотип будет удален, если мы отправим и мы загрузим другое изображение на то, которое у нас уже есть, или даже если мы сбросим форму.

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

Теперь мы добавим delete_image() :

01
02
03
04
05
06
07
08
09
10
11
12
function delete_image( $image_url ) {
    global $wpdb;
 
    // We need to get the image’s meta ID.
    $query = «SELECT ID FROM wp_posts where guid = ‘» .
    $results = $wpdb->get_results($query);
 
    // And delete it
    foreach ( $results as $row ) {
        wp_delete_attachment( $row->ID );
    }
}

Правда в том, что этот шаг требует более глубокого объяснения, но это действительно легко. Первое, что мы делаем, — выполняем запрос, который определяет мета-идентификатор нашего изображения в базе данных. Вы можете подумать, что это ложь, но наши данные изображения находятся в таблице wp_posts . Ну, запрос пытается выбрать те регистры, чьи guid (изображение, пост или URL страницы) будет совпадать с нашим изображением и post_type = 'attachment' (Это вложение, не так ли?). Мы храним этот идентификатор (их не должно быть больше одного) в $results и передаем его в качестве параметра в wp_delete_attachment() WordPress, который удалит само изображение, а также удалит вложение из библиотеки мультимедиа. Это легко, чисто и оптимально.

Шаг 4 Отображение нашего логотипа в заголовке нашего сайта

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

01
02
03
04
05
06
07
08
09
10
11
<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 Media Uploader действительно полезен и, будучи глубоко знакомым, действительно облегчает жизнь. Мы сохраняем код, валидацию (в этом уроке мы мало использовали, мы должны были использовать больше и рекомендуем вам прочитать об этом ) и используем файловую систему, которую WordPress предоставляет в наше распоряжение. Все это преимущества для пользователя, который привык работать с интерфейсом WordPress и может видеть, как все работает правильно и в соответствии со стандартными функциями WordPress. На самом деле, можно подумать, что это функциональность WordPress по умолчанию.

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

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

38
Share: