Dodawanie niestandardowego przycisku obrazu za pomocą programu Media Uploader w WordPress
Ostatnio pracowałem nad wtyczką, w której chcieliśmy użyć domyślnego narzędzia do przesyłania multimediów WordPressa dla naszych wymagań. Mieliśmy niestandardowy przycisk obrazu i chcieliśmy przesłać obraz za pomocą programu do przesyłania multimediów. WordPress pięknie zbudował narzędzie do przesyłania multimediów, które pozwala użytkownikowi przesłać nowy obraz lub użyć istniejącego obrazu z biblioteki multimediów.
Zawsze zaleca się korzystanie z wbudowanego programu do przesyłania multimediów, jeśli szukasz niestandardowego rozwiązania do przesyłania obrazu do zaplecza. W ten sposób postępujesz zgodnie ze standardami WordPress. Zaimplementowanie programu do przesyłania multimediów zajmuje tylko kilka linijek kodu. Więc bez dalszej dyskusji zacznijmy od tego.
W tym samouczku dodam niestandardowy przycisk obrazu dla posta i strony. Po kliknięciu tego przycisku otworzy się narzędzie do przesyłania multimediów, w którym użytkownik może przesłać obraz. Przesłany adres URL obrazu jest ustawiony w niestandardowym polu meta i zostanie zapisany jako meta posta dla konkretnego posta lub strony.
Dodaj niestandardowy Meta Box w WordPress
Meta box to nic innego jak blok na poście lub na stronie. Kategorie, tagi, wyróżniony obraz, fragment, dyskusja itp. są przykładami metaboksów. Korzystając z pola Meta, możesz dodać dodatkowe informacje do postu i strony.
Potrzebujemy meta pola, które zawiera przycisk przesyłania obrazu i pole tekstowe. Gdy użytkownik kliknie przycisk, prześle obraz, a końcowy adres URL obrazu zostanie ustawiony w polu tekstowym.
Dodanie metaboxa jest łatwe i proste. Napisz poniższy kod w functions.phppliku lub we wtyczce.
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
}Po dodaniu powyższego kodu przejdź do swojego postu lub strony i powinieneś zobaczyć dodane nowe metabox wraz z ich polami.
Dostosuj program do przesyłania multimediów WordPress
Jesteś teraz gotowy ze swoim meta boxem. Następną rzeczą jest kliknięcie przycisku „Prześlij obraz", otwórz narzędzie do przesyłania multimediów i ustaw adres URL przesłanego obrazu w polu tekstowym. Więc najpierw musisz utworzyć plik js i umieścić go w kolejce w środowisku WordPress.
Utwórzmy plik js awscript.jsi umieśćmy go w kolejce w następujący sposób:
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' );Tutaj podałem ścieżkę motywu, zakładając, że dodajesz cały kod w motywie. Jeśli robisz to za pomocą wtyczki, musisz dostosować ścieżkę zgodnie z wtyczką.
Aby wykonać to zadanie, wziąłem referencję do Javascript Reference/wp.media i napisałem kod jQuery. W awscript.jsnapiszemy kod do przesyłania mediów w następujący sposób.
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();
});
});Teraz idź dalej i kliknij przycisk „Prześlij obraz”, otworzy się narzędzie do przesyłania multimediów, wybierz / prześlij obraz i powinieneś zobaczyć adres URL obrazu dodany w polu tekstowym. Na koniec zamierzam zapisać ten adres URL w tabeli „postmeta” z kluczem „aw_custom_image”. Kluczowi można oczywiście nadać dowolną nazwę.
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 to akcja uruchamiana za każdym razem, gdy tworzony lub aktualizowany jest post lub strona. Za pomocą tej akcji możesz wstrzyknąć swój kod do systemu. Możesz przeczytać więcej o tym haczyku w dokumentacji WordPressa.
Mam nadzieję, że dowiedziałeś się o dodaniu niestandardowego narzędzia do przesyłania multimediów w WordPress. Wypróbuj go w swojej wtyczce lub motywie i daj mi znać swoje przemyślenia w sekcji komentarzy poniżej.