Share
prettyPhoto este un plugin lightbox realizat de Stéphane Caron. Astăzi vom învăța cum să trimiteți plugin-ul cu temele WordPress.
Oferirea unei opțiuni încorporate în lightbox în loc de a face utilizatorii să descarce un plugin are multe beneficii pentru autorii temelor. Pentru mine este capabil să temă lightbox-ul pentru a se potrivi cu temele mele WordPress. Este, de asemenea, o caracteristică plăcută de a avea la dispoziția utilizatorilor temei, desigur că ar trebui să le oferiți și o opțiune de a dezactiva funcționalitatea. Cu asta a spus să ajungem la asta.
Treceți la margini for-errors.com și descărcați pluginul. Odată ce ați obținut-o vom crea o nouă structură de directoare pentru plugin pentru a face lucrurile mai ușoare pentru noi.
Mai întâi, să ștergem câteva lucruri de care nu avem nevoie. În folderul cu imagini ștergeți totul în afară de folderul prettyPhoto și conținutul acestuia. În directorul rădăcină, ștergeți fișierele xhr_response.html și index.html. Acum, mutați jquery.prettyPhoto.js din folderul js în dosarul root plugin și ștergeți folderul js.
În cele din urmă, redenumiți folderul la prettyPhoto și încărcați folderul în directorul temei, probabil că aveți deja un director de script-uri sau js, astfel încât să încărcați acest lucru, pentru acest tutorial să presupunem că este în tema / js dvs.
Înainte de a încărca fișierele plugin în tema noastră trebuie să încărcați jQuery. Vom folosi versiunea găzduită de Google de jQuery folosind metoda partajată pe Digging în Wordpress, deci să adăugăm fragmentul funcțiilor noastre.php.
Accentsconagua
dacă (! is_admin ()) add_action ("wp_enqueue_scripts", "register_scripts", 11); funcția register_scripts () wp_deregister_script ('jquery'); wp_register_script ('jquery', 'http'. ($ _SERVER ['SERVER_PORT'] == 443? "s": ""). ": //ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js ", false, null); wp_enqueue_script ( 'jquery'); wp_register_script ('prettyPhoto_script', (get_bloginfo ('stylesheet_directory'). "/ js / prettyPhoto / jquery.prettyPhoto.js")); wp_enqueue_script ( 'prettyPhoto_script'); wp_register_script ('customprettyPhoto_script', 'get_bloginfo (' stylesheet_directory '). "/ js / prettyPhoto / customprettyPhoto.js")); wp_enqueue_script ( 'customprettyPhoto_script'); S-ar putea să doriți să luați în considerare avantajele și dezavantajele utilizării unui CDN pentru a servi jQuery. WordPress se livrează cu o copie a jQuery, dar utilizarea versiunii găzduite de Google poate aduce beneficii performanței site-ului dvs. Dacă sunteți un autor de temă, aș rămâne cu utilizarea versiunii livrate. Consultați discuția despre un alt tutorial pentru a vă ajuta să vă creați mintea.
Veți observa că am adăugat un alt fișier numit customprettyPhoto.js. Aici vom face ca pluginul să fie plăcut cu imaginile postate și să îl inițialeze. Deci, să creăm acel fișier și să îl punem în directorul prettyPhoto. OK, hai să inițiem prettyPhoto.
Trebuie să adăugăm o linie de jQuery pentru a adăuga clasei prettyPhoto prettyPhoto cerută tagurilor de ancorare care înconjoară imaginile postate. De când vorbim de jQuery, să o folosim pentru a realiza acest lucru. Adăugați următoarele imediat după $ (document) .ready (funcția () unde se asigură că pagina este încărcată.
$ ('' intrare-conținut '') are ('img') addClass ('prettyPhoto'); Înlocuiți conținutul .entry cu orice nume de clasă sau cu ID-ul pe care l-ați împachetat cu postul dvs. și ar fi trebuit să adăugați cu succes clasa la toate linkurile care împletesc imaginile postate. Dacă ați aruncat o privire la documentația pentru prettyPhoto, veți vedea că se spune că se utilizează un atribut rel, dar în schimb am folosit o clasă. Acest lucru previne erorile de validare în HTML, deoarece atributele rel pot avea doar anumite valori permise în conformitate cu spec. HTML5.
Apoi dorim să activați opțiunea descrierii prettyFhoto. Trebuie să depășim un mic obstacol, care este faptul că prettyPhoto vrea ca noi să adăugăm atributele de titlu la etichetele ancorei noastre care vor fi folosite pentru descrieri, dar WordPress adaugă titluri la etichetele de imagine. Pentru a rezolva acest lucru vom scrie câteva linii de jQuery care vor lua eticheta titlului imaginii și vom seta același titlu pe eticheta de ancorare care înfășoară imaginea.
$ (').' ('') '(' .info '). .attr ("titlu", desc);); Aici vom declanșa o funcție atunci când utilizatorul face clic pe o imagine postare. Am apucat eticheta titlului imaginii și l-am atașat la ancora. Acest pas face mult mai ușor pentru utilizatorii temei dvs. să adauge descrieri. Dacă doriți să dezactivați funcția în totalitate, asigurați-vă că ați setat fiecare titlu de ancoră ca fiind gol, în cazul în care lipsește complet, deoarece nu există nici măcar un titlu gol, prettyPhoto va afișa doar "undefined".
Trebuie să adăugăm CSS pentru prettyPhoto la tema. Înapoi la fișierul functions.php și adăugați următoarea linie în partea de sus:
wp_enqueue_style ('prettyPhoto', get_bloginfo ('stylesheet_directory'). / js / prettyPhoto / css / prettyPhoto.css '); Din moment ce am păstrat imaginile și CSS în dosarele lor originale și relativ unele față de altele, așa cum erau inițial, nu trebuie să ne facem griji despre imagini rupte.
Să ne uităm la modul de adăugare a subtitrărilor și a titlurilor pe care destul dePhoto-ul nostru le va folosi. Privind imaginea de mai sus, putem vedea relația dintre eticheta post image alt și eticheta titlului de link pe care o putem seta când adăugăm o imagine unei postări sau unei pagini.
Și asta a fost, am adăugat cu succes prettyPhoto la tema noastră. Asigurați-vă că citiți documentația pluginului pentru mai multe utilizări și opțiuni. PrettyPhoto se poate ocupa mai mult decât imaginile, funcționează cu videoclipuri, ajax și multe altele. Este, de asemenea, nave cu o mână de teme care pot potrivi tema dvs. din cutie sau cel puțin vă oferă un punct bun de plecare.
