Добавление настраиваемой кнопки изображения с помощью загрузчика мультимедиа в WordPress
Недавно я работал над плагином, в котором мы хотели использовать загрузчик мультимедиа WordPress по умолчанию для наших требований. У нас была кнопка с настраиваемым изображением, и мы хотели загрузить изображение через загрузчик мультимедиа. WordPress прекрасно создал загрузчик мультимедиа, который позволяет пользователю загружать новое изображение или использовать существующее изображение из библиотеки мультимедиа.
Всегда рекомендуется использовать встроенный загрузчик мультимедиа, если вы ищете индивидуальное решение для загрузки изображения в бэкэнд. Поступая так, вы следуете стандартам WordPress. Для реализации загрузчика мультимедиа требуется всего несколько строк кода. Итак, без дальнейшего обсуждения, давайте начнем с этого.
В этом уроке я добавлю кнопку с настраиваемым изображением для публикации и страницы. При нажатии этой кнопки откроется средство загрузки мультимедиа, где пользователь может загрузить изображение. URL-адрес загруженного изображения устанавливается в настраиваемом мета-поле и сохраняется как мета-запись для конкретной публикации или страницы.
Добавить настраиваемый мета-блок в WordPress
Мета-бокс – это не что иное, как блок на посте или странице. Категории, теги, избранные изображения, отрывки, обсуждения и т.д. Являются примерами мета-боксов. Используя поле Meta, вы можете добавить дополнительную информацию для публикации и страницы.
Нам нужно мета-поле, содержащее кнопку загрузки изображения и текстовое поле. Когда пользователь нажимает кнопку, он загружает изображение, и конечный URL-адрес изображения будет указан в текстовом поле.
Добавить мета-поле легко и просто. Напишите приведенный ниже код в functions.phpфайл или в свой плагин.
function aw_custom_meta_boxes( $post_type, $post) {
add_meta_box(
'aw-meta-box',
__( 'Custom Image' ),
'render_aw_meta_box',
array('post', 'page'), //post types here
'normal',
'high'
);
}
add_action( 'add_meta_boxes', 'aw_custom_meta_boxes', 10, 2 );
function render_aw_meta_box($post) {
$image = get_post_meta($post->ID, 'aw_custom_image', true);
?>
<table>
<tr>
<td><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></td>
<td><input type="text" name="aw_custom_image" id="aw_custom_image" value="<?php echo $image; ?>" style="width:500px;" /></td>
</tr>
</table>
<?php
}После добавления вышеуказанного кода перейдите к своему сообщению или странице, и вы должны увидеть новое мета-поле, добавленное вместе с их полями.
Настроить загрузчик мультимедиа WordPress
Теперь вы готовы со своим мета-боксом. Затем нажмите кнопку «Загрузить изображение», откройте программу загрузки мультимедиа и установите URL-адрес загруженного изображения в текстовое поле. Итак, сначала вам нужно создать файл js и поставить его в очередь в среде WordPress.
Создадим файл js awscript.jsи поставим его в очередь следующим образом:
function aw_include_script() {
if (! did_action( 'wp_enqueue_media')) {
wp_enqueue_media();
}
wp_enqueue_script( 'awscript', get_stylesheet_directory_uri(). '/js/awscript.js', array('jquery'), null, false );
}
add_action( 'admin_enqueue_scripts', 'aw_include_script' );Здесь я указал путь к теме, предполагая, что вы добавляете в тему целый код. Если вы делаете это через плагин, вам необходимо настроить путь в соответствии с вашим плагином.
Для выполнения этой задачи я взял ссылку на Javascript Reference / wp.media и написал код jQuery. В разделе awscript.jsмы напишем код загрузчика мультимедиа следующим образом.
jQuery(function($){
$('body').on('click', '.aw_upload_image_button', function(e){
e.preventDefault();
var button = $(this),
aw_uploader = wp.media({
title: 'Custom image',
library: {
uploadedTo: wp.media.view.settings.post.id,
type: 'image'
},
button: {
text: 'Use this image'
},
multiple: false
}).on('select', function() {
var attachment = aw_uploader.state().get('selection').first().toJSON();
$('#aw_custom_image').val(attachment.url);
})
.open();
});
});Теперь продолжайте и нажмите кнопку «Загрузить изображение», откроется средство загрузки мультимедиа, выберите / загрузите изображение, и вы должны увидеть URL-адрес изображения, добавленный в текстовое поле. Наконец, я собираюсь сохранить этот URL-адрес в таблице postmeta с ключом aw_custom_image. Конечно, вы можете дать ключу любое имя.
function aw_save_postdata($post_id)
{
if (array_key_exists('aw_custom_image', $_POST)) {
update_post_meta(
$post_id,
'aw_custom_image',
$_POST['aw_custom_image']
);
}
}
add_action('save_post', 'aw_save_postdata');Save_post – это действие, срабатывающее при создании или обновлении публикации или страницы. Используя это действие, вы можете внедрить свой код в систему. Вы можете прочитать больше об этой ловушке в документации WordPress.
Надеюсь, вы узнали о добавлении пользовательского загрузчика мультимедиа в WordPress. Попробуйте это в своем плагине или теме и поделитесь своими мыслями в разделе комментариев ниже.