Share
Den infödda [Galleri] kortnummer är trevligt, men inte bra. I det här snabba tipset kommer vi att försköna det med jQuery.
De [Galleri] kortnummer är inte bra. Du kan inte inaktivera sin standard CSS, du kan inte lägga till eller redigera CSS-klasserna, du kan inte redigera standardattributen (som faktiskt är ett generellt kortnummerproblem) ... Även om det här steget inte stör de flesta WordPress-utvecklare , konstiga som jag kunde klaga! :)
I det här snabba tipset kommer vi att bli av med sidhemsidorna för bildhantering och låta besökarnas besökare navigera genom bilderna i en jQuery-modalbox.
Med mindre än 5 KB (gzipped) och ett brett utbud av webbläsarstöd (som även innehåller IE6), är Colorbox min favorit jQuery ljuskomponent plugin.
Som du kan se från plugin-sidan har den massor av inställningar, metoder och krokar så att du kan anpassa den som du vill. Det har också 5 snygga CSS-baserade teman.
Ladda ner paketet och extraktet colorbox.min.js och en av de 5 teman (den colorbox.css fil och mappen "bilder") i en mapp som heter "colorbox" och ladda upp den mappen till ditt WordPress-tema. Lägg till följande kod i slutet av colorbox.min.js filen innan du laddar upp:
Accentsconagua
jQuery (dokument) .ready (funktion ($) $ (".galleri-ikon a"). colorbox (rel: "gallery");); Jag vet att det här kommer att bli lite konstigt, men det verkar vara det renaste sättet. Vi ska skapa [Jgallery] kortkod.
Tips inom Quick Tip: Om du planerar att ändra alla kortkommandon i dina inlägg efter att du skapat
[Jgallery]shortcode, rekommenderar jag att du använder Search Regex-plugin för att söka / ersätta[Galleri]med[Jgallery].
Som alltid börjar vi med att skapa baskodskodsfunktionen:
funktion jgallery_sc () // Inga parametrar? Det här är vansinne! add_shortcode ('jgallery', 'jgallery_sc'); Därefter kommer vi enqueue CSS och JS-filerna. Glöm inte, jQuery kommer automatiskt att skrivas in (om det inte redan är), genom att ange att Colorbox-skriptet beror på det.
funktionen jgallery_sc () // Enqueue colorbox.min.js (och jQuery om den inte redan är laddad) 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'); Allt är klart, förutom att vi behöver använda [Galleri] kortnummer inne i den här funktionen. Vi kommer att använda do_shortcode () funktionen och returnera [gallerilänk = "fil"] kortkod:
funktion 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'); returnera do_shortcode ('[gallery link = "file"]'); add_shortcode ('jgallery', 'jgallery_sc'); Klart! Efter att ha lagt till den här funktionen i functions.php fil av ditt tema kan du börja använda [Jgallery] kortnummer direkt. Låt oss veta vad du tycker i kommentarerna nedan. Njut av! :)
