Share
Den innfødte [galleri] shortcode er fint, men ikke flott. I dette raske tipset skal vi forskjønne det med jQuery.
De [galleri] shortcode er ikke bra. Du kan ikke deaktivere standard CSS, du kan ikke legge til eller redigere CSS-klassene, du kan ikke redigere standardattributtene (som egentlig er et generelt shortcode-problem) ... Selv om dette ikke forstyrrer flertallet av WordPress-utviklere , rare som meg kunne klage! :)
I dette raske tipset kommer vi til å bli kvitt sidene for bildevedlegg og la våre nettsteders besøkende navigere gjennom bildene i en jQuery-modalboks.
Med mindre enn 5KB (gzipped) og et bredt spekter av nettleserstøtte (som også inkluderer IE6), er Colorbox min favoritt jQuery lightbox plugin.
Som du kan se fra plugin-siden, har den mange innstillinger, metoder og kroker, slik at du kan tilpasse det slik du vil. Den har også 5 pent CSS-baserte temaer.
Last ned pakken og utdrag colorbox.min.js og en av de 5 temaene (den colorbox.css fil og mappen "bilder") i en mappe som heter "colorbox" og laster opp den mappen til WordPress-temaet ditt. Legg til følgende kode på slutten av colorbox.min.js fil før opplasting:
Accentsconagua
jQuery (dokument) .ready (funksjon ($) $ ("gallery-icon a"). colorbox (rel: "gallery");); Jeg vet at dette kommer til å bli litt rart, men det synes å være den reneste måten. Vi skal lage [Jgallery] kort kode.
Tips Innenfor Hurtig Tips: Hvis du planlegger å endre alle gallerikortkodene i innleggene dine etter å ha opprettet
[Jgallery]shortcode, anbefaler jeg å bruke Search Regex plugin for å søke / erstatte[galleri]med[Jgallery].
Som alltid begynner vi med å opprette basenekodefunksjonen:
funksjon jgallery_sc () // Ingen parametere? Dette er galskap! add_shortcode ('jgallery', 'jgallery_sc'); Neste vil vi Enqueue CSS og JS-filene. Ikke glem, jQuery blir automatisk kalkulert (hvis det ikke allerede er), ved å angi at Colorbox-skriptet avhenger på den.
funksjon jgallery_sc () // Enqueue colorbox.min.js (og jQuery hvis den ikke allerede er lastet inn) 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'); Alt er klart, bortsett fra at vi trenger å bruke [galleri] shortcode inne i denne funksjonen. Vi vil bruke do_shortcode () funksjon og returnere [gallerielink = "fil"] kort kode:
funksjon 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'); returner do_shortcode ('[gallery link = "file"]'); add_shortcode ('jgallery', 'jgallery_sc'); Ferdig! Etter at du har lagt til denne funksjonen i functions.php fil av temaet ditt, kan du begynne å bruke [Jgallery] shortcode med en gang. Gi oss beskjed om hva du synes i kommentarene nedenfor. Nyt! :)
