Mukautetun kuvapainikkeen lisääminen Media Uploader -ohjelmalla WordPressissä
Viime aikoina työskentelin laajennuksen parissa, jossa halusimme käyttää vaatimuksemme WordPressin oletustiedostolatausohjelmaa. Meillä oli mukautettu kuvapainike ja halusimme ladata kuvan median latausohjelman kautta. WordPress rakensi kauniisti median latausohjelman, jonka avulla käyttäjä voi ladata uuden kuvan tai käyttää olemassa olevaa kuvaa mediakirjastosta.
On aina suositeltavaa käyttää sisäänrakennettua medianlatausohjelmaa, jos etsit mukautettua ratkaisua kuvan lataamiseen backendiin. Näin noudatat WordPress-standardeja. Median latausohjelman käyttöönotto vie vain muutaman rivin koodia. Joten ilman lisäkeskusteluja, aloitetaan sen kanssa.
Tätä opetusohjelmaa varten lisätään mukautettu kuvapainike viestiä ja sivua varten. Napsauttamalla tätä painiketta, median latausohjelma avautuu, johon käyttäjä voi ladata kuvan. Lähetetyn kuvan URL-osoite asetetaan mukautettuun metakenttään ja se tallennetaan tietyn viestin tai sivun viestin meta.
Lisää mukautettu metakenttä WordPressiin
Metakenttä ei ole muuta kuin postin tai sivun lohko. Luokat, Tunnisteet, Esitelty kuva, Ote, Keskustelu jne. Ovat esimerkkejä meta-ruuduista. Meta-ruudun avulla voit lisätä lisätietoja viestistä ja sivusta.
Tarvitsemme metakentän, joka sisältää lähetyskuvapainikkeen ja tekstikentän. Kun käyttäjä napsauttaa painiketta, hän lähettää kuvan ja lopullinen kuvan URL-osoite asetetaan tekstikenttään.
Lisäämällä meta laatikko on helppo ja suoraviivainen. Kirjoita alla oleva koodi functions.phptiedostoon tai laajennukseen.
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
}Kun olet lisännyt yllä olevan koodin, siirry viestiin tai sivulle ja sinun pitäisi pystyä näkemään uusi metakenttä lisättynä niiden kenttien kanssa.
Mukauta WordPress Media Uploader
Olet nyt valmis meta-laatikkosi kanssa. Seuraava asia on ‘Lataa kuva’ -painikkeen napsautuksella, avaa mediatiedostojen latausohjelma ja aseta lähetetyn kuvan URL-osoite tekstikenttään. Joten aluksi sinun on luotava js-tiedosto ja pidettävä se WordPress-ympäristössä.
Luodaan js-tiedosto awscript.jsja asetetaan se seuraavasti:
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' );Tässä olen antanut teeman polun olettaen, että lisäät koko koodin teemaan. Jos teet sen laajennuksen kautta, sinun on säädettävä polku laajennuksesi mukaan.
Tämän tehtävän suorittamiseksi olen ottanut viittauksen Javascript Reference / wp.media -ohjelmaan ja kirjoittanut jQuery-koodin. Vuonna awscript.jstulemme kirjoittaa median lataaja on seuraavanlainen.
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();
});
});Mene eteenpäin ja napsauta ‘Lataa kuva’ -painiketta. Se avaa median latausohjelman, valitse / lataa kuva ja sinun pitäisi nähdä kuvan URL-osoite tekstikentässä. Lopuksi aion tallentaa tämän URL-osoitteen postmeta-taulukkoon avaimella aw_custom_image. Tietenkin voit antaa avaimelle minkä tahansa nimen.
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 on toiminto, joka käynnistetään aina, kun viesti tai sivu luodaan tai päivitetään. Tämän toiminnon avulla voit lisätä koodisi järjestelmään. Voit lukea lisää tästä koukusta WordPress-dokumentaatiossa.
Toivon, että sait tietää mukautetun median latausohjelman lisäämisestä WordPressiin. Kokeile sitä laajennuksessasi tai teemalla ja kerro minulle ajatuksesi alla olevasta kommenttiosasta.