Kohandatud pildinupu lisamine meediumide üleslaadijaga WordPressis
Hiljuti töötasin pistikprogrammi kallal, kus soovisime oma nõudeks kasutada WordPressi vaikimisi meediumilaadijat. Meil oli kohandatud pildinupp ja me tahtsime pildi meedialaadija kaudu üles laadida. WordPress ehitas suurepäraselt meedialaadija, mis võimaldab kasutajal laadida üles uus pilt või kasutada meediumiteegist olemasolevat pilti.
Alati on soovitatav kasutada sisseehitatud meediumilaadijat, kui otsite taustaprogrammi pildi üleslaadimiseks kohandatud lahendust. Nii toimides järgite WordPressi standardeid. Meediaüleslaadija juurutamiseks kulub vaid mõni koodirida. Nii et ilma pikema aruteluta alustame sellega.
Selle õpetuse jaoks lisan postituse ja lehe jaoks kohandatud pildinupu. Sellel nupul klõpsates avaneb meedialaadija, kuhu kasutaja saab pildi üles laadida. Üleslaaditud pildi URL on määratud kohandatud metaväljal ja see salvestatakse konkreetse postituse või lehe postitusmeta.
Lisage WordPressis kohandatud metakast
Metakast pole muud kui postituse või lehe plokk. Kategooriad, sildid, esiletõstetud pilt, väljavõte, arutelu jne on metakastide näide. Meta kasti abil saate lisada postituse ja lehe kohta lisateavet.
Vajame metakasti, mis sisaldab pildi üleslaadimise nuppu ja tekstivälja. Kui kasutaja nupul klõpsab, laadib ta pildi üles ja lõplik pildi URL määratakse tekstiväljale.
Lisades meta kasti on lihtne ja sirgjooneline. Sisestage allolev kood functions.phpfaili või pistikprogrammi.
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
}Pärast ülaltoodud koodi lisamist minge oma postitusele või lehele ja peaksite nägema uut metakasti koos nende väljadega.
Kohandage WordPressi meedialaadija
Nüüd olete oma metakastiga valmis. Järgmine asi on nupu „Laadi pilt üles” klõpsamisel, avage meediumide üleslaadija ja määrake tekstiväljale üleslaaditud pildi URL. Nii et algul peate looma js-faili ja viimistlema selle WordPressi keskkonnas.
Loome js-faili awscript.jsja loome selle järgmiselt:
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' );Siin olen andnud teekonna tee eeldades, et lisate teemasse terve koodi. Kui teete seda pistikprogrammi kaudu, peate oma plugina kohast teed kohandama.
Selle ülesande täitmiseks võtsin viite Javascript Reference / wp.media ja kirjutasin jQuery koodi. Kui awscript.jsme kirjutada meedia üleslaadija koodi järgmiselt.
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();
});
});Nüüd jätkake ja klõpsake nuppu "Laadi pilt üles", see avab meediumide üleslaadija, valib / laadib pildi üles ja tekstiväljale peaksite nägema pildi URL-i. Lõpuks salvestan selle URL-i tabelisse postmeta võtmega ‘aw_custom_image’. Muidugi võite anda võtmele mis tahes nime.
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');Salvesta_post on toiming, mis käivitatakse alati, kui postitus või leht luuakse või värskendatakse. Selle toimingu abil saate oma koodi süsteemi sisestada. Selle konksu kohta saate lähemalt lugeda WordPressi dokumentatsioonist.
Loodan, et õppisite WordPressis kohandatud meedialaadija üleslaadimisest lisama. Proovige seda oma pistikprogrammis või teemas ja andke oma mõtetest teada allpool olevas kommentaaride osas.