Share
Il nativo [galleria] lo shortcode è bello, ma non lo è grande. In questo suggerimento veloce, lo abbelliremo con jQuery.
Il [galleria] lo shortcode non è eccezionale. Non puoi disabilitare il suo CSS predefinito, non puoi aggiungere o modificare le classi CSS, non puoi modificare gli attributi di default (che in realtà è un problema generale di shortcode) ... Sebbene questa roba non infastidisca la maggior parte degli sviluppatori di WordPress , i weirdos come me potrebbero lamentarsi! :)
In questo suggerimento rapido, elimineremo le pagine di allegato alle immagini e consentiremo ai visitatori dei nostri siti di navigare tra le immagini all'interno di una casella modale di jQuery.
Con meno di 5 KB (gzip) e una vasta gamma di supporto browser (che include anche IE6), Colorbox è il mio plugin jQuery lightbox preferito.
Come puoi vedere dalla pagina del plugin, ha un sacco di impostazioni, metodi e hook in modo da poterlo personalizzare come vuoi. Dispone inoltre di 5 fantastici temi basati su CSS.
Scarica il pacchetto ed estrai colorbox.min.js e uno dei 5 temi (il colorbox.css file e la cartella "images") in una cartella denominata "colorbox" e caricare tale cartella sul tema WordPress. Aggiungi il seguente codice alla fine del colorbox.min.js file prima del caricamento:
Accentsconagua
jQuery (document) .ready (function ($) $ (". gallery-icon a"). colorbox (rel: "gallery");); So che questo sarà un po 'strano, ma sembra essere il modo più pulito. Creeremo il [Jgallery] codice corto.
Suggerimento all'interno del suggerimento rapido: se si prevede di modificare tutti gli shortcode della galleria nei post dopo aver creato il file
[Jgallery]shortcode, consiglio di usare il plug-in Search Regex per cercare / sostituire[galleria]con[Jgallery].
Come sempre, inizieremo con la creazione della funzione di shortcode di base:
function jgallery_sc () // Nessun parametro? Questa è una follia! add_shortcode ('jgallery', 'jgallery_sc'); Avanti, lo faremo enqueue i file CSS e JS. Non dimenticare, jQuery sarà automaticamente accodato (se non lo è già), specificando che lo script Colorbox dipende su di esso.
function jgallery_sc () // Accoda colorbox.min.js (e jQuery se non è già caricato) wp_enqueue_script ('colorbox-js', get_template_directory_uri (). '/ colorbox / colorbox.min.js', array ('jquery ')); // Enqueue colorbox.css wp_enqueue_style ('colorbox-css', get_template_directory_uri (). '/ Colorbox / colorbox.css'); add_shortcode ('jgallery', 'jgallery_sc'); Tutto è pronto, tranne che dobbiamo usare il [galleria] shortcode all'interno di questa funzione. Useremo il do_shortcode () funzione e restituire il [galleria link = "file"] codice corto:
function jgallery_sc () wp_enqueue_script ('colorbox-js', get_template_directory_uri (). '/ colorbox / colorbox.min.js', array ('jquery')); wp_enqueue_style ('colorbox-css', get_template_directory_uri (). '/ colorbox / colorbox.css'); return do_shortcode ('[gallery link = "file"]'); add_shortcode ('jgallery', 'jgallery_sc'); Tutto fatto! Dopo aver aggiunto questa funzione nel functions.php file del tuo tema, puoi iniziare a usare il [Jgallery] shortcode subito. Fateci sapere cosa ne pensate nei commenti qui sotto. Godere! :)
