Share
Nativul [Galerie] codul scurt este frumos, dar nu Grozav. În acest sfat rapid, o vom înfrumuseța cu jQuery.
[Galerie] codul scurt nu este grozav. Nu puteți dezactiva CSS-ul implicit, nu puteți adăuga sau edita clasele CSS, nu puteți edita atributele implicite (care este de fapt o problemă generală de scurtături) ... Deși aceste lucruri nu deranjează majoritatea dezvoltatorilor WordPress , ciudat ca mine s-ar putea plânge! :)
În acest sfat rapid, vom elimina paginile de atașare a imaginilor și vom lăsa vizitatorii site-urilor noastre să navigheze prin imagini într-o casetă modală jQuery.
Cu mai puțin de 5KB (gzipped) și o gamă largă de suport pentru browser (care include chiar IE6), Colorbox este pluginul meu favorit jQuery lightbox.
După cum puteți vedea din pagina pluginului, acesta are o mulțime de setări, metode și cârlige, astfel încât să îl puteți personaliza în orice fel doriți. De asemenea, are 5 teme pe bază de CSS.
Descărcați pachetul și extrageți colorbox.min.js și una dintre cele 5 teme ( colorbox.css fișierul și folderul "imagini") într-un director denumit "colorbox" și încărcați acel folder pe tema WordPress. Adăugați următorul cod la sfârșitul secțiunii colorbox.min.js înainte de încărcare:
Accentsconagua
jQuery (document) .ready (functie ($) $ ("galerie-icon a"). Știu că va fi un pic ciudat, dar pare a fi cea mai curată cale. Vom crea [Jgallery] cod scurt.
Sfat În cadrul sfatului rapid: Dacă intenționați să modificați toate codurile scurte din galeri în postările dvs. după ce ați creat
[Jgallery]shortcode, vă recomandăm să utilizați pluginul Search Regex pentru a căuta / înlocui[Galerie]cu[Jgallery].
Ca întotdeauna, vom începe cu crearea funcției shortcode de bază:
funcția jgallery_sc () // Nu există parametri? Aceasta este o nebunie! add_shortcode ('jgallery', 'jgallery_sc'); Apoi, vom face Puneți în coadă fișierele CSS și JS. Nu uitati, jQuery va fi incarcata automat (daca nu este deja), specificand ca scriptul Colorbox depinde pe el.
funcția jgallery_sc () // Enqueue colorbox.min.js (și jQuery dacă nu este deja încărcată) wp_enqueue_script ('colorbox-js', get_template_directory_uri (). / colorbox / colorbox.min.js ', array „)); // Enqueue colorbox.css wp_enqueue_style ('colorbox-css', get_template_directory_uri (). / Colorbox / colorbox.css '); add_shortcode ('jgallery', 'jgallery_sc'); Totul este gata, cu excepția faptului că trebuie să folosim [Galerie] cod scurt în interiorul acestei funcții. Vom folosi do_shortcode () funcția și returnați [link link = "fișier"] cod scurt:
funcția 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 '); returnați do_shortcode ('[gallery link = "fișier"]'); add_shortcode ('jgallery', 'jgallery_sc'); Totul este gata! După adăugarea acestei funcții în functions.php fișier al temei dvs., puteți începe să utilizați [Jgallery] shortcode imediat. Spuneți-ne ce credeți în comentariile de mai jos. Bucurați-vă! :)
