Share
De inheemse [galerij] shortcode is leuk, maar niet Super goed. In deze snelle tip gaan we het verfraaien met jQuery.
De [galerij] shortcode is niet geweldig. U kunt de standaard CSS niet uitschakelen, u kunt CSS-klassen niet toevoegen of bewerken, u kunt de standaardattributen niet bewerken (wat eigenlijk een algemeen shortcode-probleem is) ... Hoewel dit spul de meerderheid van WordPress-ontwikkelaars niet hindert , weirdo's zoals ik kunnen klagen! :)
In deze snelle tip gaan we van de pagina met beeldbijlagen af en laten bezoekers van onze sites navigeren door de afbeeldingen in een jQuery-modaal vak.
Met minder dan 5 KB (gzipped) en een breed scala aan browserondersteuning (die zelfs IE6 bevat), is Colorbox mijn favoriete plug-in jQuery-lightbox.
Zoals je kunt zien op de pagina van de plug-in, heeft het heel veel instellingen, methoden en hooks, zodat je het op elke gewenste manier kunt aanpassen. Het heeft ook 5 mooie CSS-gebaseerde thema's.
Download het pakket en pak het uit colorbox.min.js en een van de 5 thema's (de colorbox.css bestand en de map "images") in een map met de naam "colorbox" en upload die map naar uw WordPress-thema. Voeg de volgende code aan het einde van de colorbox.min.js bestand voor uploaden:
Accentsconagua
jQuery (document) .ready (functie ($) $ (". gallery-icon a"). colorbox (rel: "gallery");); Ik weet dat dit een beetje raar gaat worden, maar het lijkt de schoonste manier te zijn. We gaan het maken [Jgallery] Korte code.
Tip Binnen de snelle tip: als u van plan bent om alle galerijkortingen in uw berichten te wijzigen nadat u de. Hebt gemaakt
[Jgallery]shortcode, raad ik aan de Search Regex plugin te gebruiken om te zoeken / vervangen[galerij]met[Jgallery].
Zoals altijd beginnen we met het maken van de basis shortcode-functie:
function jgallery_sc () // Geen parameters? Dit is waanzin! add_shortcode ('jgallery', 'jgallery_sc'); Vervolgens zullen we enqueue de CSS- en de JS-bestanden. Vergeet niet dat jQuery automatisch in de wachtrij wordt geplaatst (als dit nog niet het geval is) door te specificeren dat het Colorbox-script ligt eraan ben ermee bezig.
functie jgallery_sc () // Maak colorbox.min.js aan (en jQuery als het nog niet is geladen) 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'); Alles is klaar, behalve dat we het moeten gebruiken [galerij] shortcode binnen deze functie. We zullen de gebruiken do_shortcode () functie en retourneer de [galerijlink = "bestand"] Korte code:
functie 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 ('[galerijlink = "bestand"]'); add_shortcode ('jgallery', 'jgallery_sc'); Helemaal klaar! Na het toevoegen van deze functie in de functions.php bestand van uw thema, kunt u beginnen met het gebruik van [Jgallery] shortcode meteen. Laat ons weten wat je denkt in de reacties hieronder. Genieten! :)
