Buna ziua tuturor! Despre slider pentru wordpress, am menționat în articol despre rezultatele intermediare ale lucrării pe blog. Acolo am promis să vă spun cum să instalez rapid și ușor un așa-numit slider (sau altfel sensul giratoriu) pe blogul meu. Deci, eu sunt aici. Ca întotdeauna în detaliu și pas cu pas.
8 pași simpli care organizează un carusel pe blogul dvs.:
1) Descărcați pluginul însuși;
2) Completați-l pe server în folderul wp-content / plugins / și activați-l;
3) Creați un dosar mare în directorul rădăcină al blogului (unde conținutul wp-content, wp-admin și alte foldere). Este posibil și un altul, dar implicit pluginul verifică prezența acestuia. Acest director va fi necesar pentru a umple imaginile care vor fi afișate în cursor.
4) Acum, cel mai interesant. Cum să atașați o fotografie unei anumite postări de pe blog? Există mai multe metode pentru acest lucru în plugin. Ele depind de ce fel de "sistem de legături constante" aveți. Dacă:
Și acum un exemplu concret al slider-ului meu. URL-urile de posturi:
- cititoare-fără-ads.jpg
- Konkurs-na-luchshuyu-fotografiyu-blogera.jpg
- foto-bloggerov.jpg
5) După ce a devenit clar cum să legați pozele de posturi, accesați panoul de administrare. Specificați dimensiunile acestora (acestea trebuie să fie utilizate), metoda de legare și alegeți ce să afișați în cursor. Puteți afișa:
- ultimele 3 fotografii adăugate (+ marcate);
- aleatoare;
- marcat cu.
6) Umpleți imaginile în dosarul mare (cu cât cântărește mai puțin, cu atât mai rapid va fi încărcat cursorul) și introduceți codul în locul necesar al șablonului wordpress:
show (); 6;
Am introdus acest cod în index.php și în single.php - în alte fișiere cred că nu are sens. Uite, sa dovedit. Dacă afișajul este similar, atunci vă felicit - pluginul este instalat. Dacă designul nu vă place, mergeți la punctul 7.
7) Modificați designul cursorului. Elementul "adăugați la CSS". Există 3 poziții:
- #information a: hover este culoarea textului (în loc de 000000, pune-ți propriul);
- #information - culoarea de fundal (în loc de D9F0FF);
- - dimensiunea cadrului și culoarea sa (1px este un pixel).
Schimbăm aici "la gust".
8) Puteți edita dimensiunea textului care apare în cursor. Valoarea implicită este de 200 de caractere. Dacă este necesar, editați fișierul rc-tiny.class.php. Găsim acolo 74 stochochku și schimbăm numărul la cerințele necesare.
Acum, sigur, pluginul este instalat și configurat. Este destul de ușoară și nu încarcă greu motorul. Ce mai faci?
Andrei Aronsky a sugerat un manual cu privire la modul de organizare a unui carusel pe site fără a folosi un plug-in, pentru care mulți îi mulțumesc. Deci, să citim.
Carusel pe Wordpress fără plug-in
Ca o alternativă, vă sugerez o modalitate de a adăuga un carusel la blogul dvs. fără un plug-in.
Deci, pentru început, vă reamintesc că fiecare plug-in WordPress încetinește activitatea, crește viteza de alergare și împiedică găsirea cauzei defecțiunilor. Nu infirm, dar există plugin-uri, fără de care este imposibil de făcut: scrierea de cod vă va lăsa mai mult de o săptămână, iar dacă nu aveți timp sau cunoștințe de limbaj de programare - atunci întrebarea nu poate merge pe propriile lor scripturi plug-înlocuire.
Un alt lucru când vine vorba de plug-in-uri, integrarea în script-urile WordPress ale altor dezvoltatori. De exemplu, puteți reaminti imediat un milion de implementări de plug-in-uri care adaugă un efect Light Box imaginilor dvs. Toți fac același lucru: conectați biblioteca JS și utilizați funcțiile sale.
Uneori, dacă vă uitați la unul dintre aceste plug-in-uri, sunteți pur și simplu îngrozit: devine înfricoșător pentru viitorul software-ului nostru. Au dispărut zilele în care toată lumea a blestemat curba codului programatorilor indieni: nu, scriu și ei, nimeni nu a certat.
Vom ridica gândurile pesimiste: totul este în mâinile noastre și ne vom întoarce la caruselul nostru.
1. În primul rând, vom decide unde vom introduce caruselul nostru. Cred că există o mică experiență în scrierea și editarea de teme pentru WordPress pe care le aveți. Cel puțin, cui, indiferent de modul în care știi, ce numești șabloanele responsabile pentru forma paginii principale, paginile cu postul, paginile cu arhive. Permiteți-mi să vă reamintesc că în subiectul standard au nume: index.php, single.php, arhive.php, respectiv. De asemenea, puteți utiliza funcții precum is_home (), is_single, etc și / sau plasați codul în footer.php.
3. Am despacheta-o undeva, as recomanda-o in dosarul cu tema in care il pastrezi. Avem nevoie de 2 fișiere și 1 dosar: compressed.js, script.js, IMAGES.
4. Conectați biblioteca:
În cazul în care ați scris fișierele la caruselul de directoare din directorul cu tema pentru WordPress.
Nu vă voi spune ce este CSS, ar trebui să știți despre asta. După cum puteți vedea, toate id-urile și clasele noastre sunt descrise aici. Puteți să-l lăsați așa cum este, sau puteți să o editați pe măsură ce voia dumneavoastră inima.
Vă sugerez să încercați să scăpați de aspectul standard și să aranjați componentele caruselului așa cum vă place. De exemplu, toate butoanele pot fi separate, nu puteți face o imagine mare, ci doar măriți imaginile de pe cursor. Puteți face ca totul să se învârtă și să se schimbe cu mare viteză sau să puteți face legături de la carusel la diferite locuri dintr-un articol. Nu vă limitați la numărul de imagini din carusel și dimensiunea acestora.
Ca o alternativă, vă sugerez o modalitate de a adăuga un carusel la blogul dvs. fără un plug-in.
Deci, pentru început, vă reamintesc că fiecare plug-in WordPress încetinește activitatea, crește viteza de alergare și împiedică găsirea cauzei defecțiunilor. Nu infirm, dar există plugin-uri, fără de care este imposibil de făcut: scrierea de cod vă va lăsa mai mult de o săptămână, iar dacă nu aveți timp sau cunoștințe de limbaj de programare - atunci întrebarea nu poate merge pe propriile lor scripturi plug-înlocuire.
Un alt lucru când vine vorba de plug-in-uri, integrarea în script-urile WordPress ale altor dezvoltatori. De exemplu, puteți reaminti imediat un milion de implementări de plug-in-uri care adaugă un efect Light Box imaginilor dvs. Toți fac același lucru: conectați biblioteca JS și utilizați funcțiile sale.
Uneori, dacă vă uitați la unul dintre aceste plug-in-uri, sunteți pur și simplu îngrozit: devine înfricoșător pentru viitorul software-ului nostru. Au dispărut zilele în care toată lumea a blestemat curba codului programatorilor indieni: nu, scriu și ei, nimeni nu a certat.
Vom ridica gândurile pesimiste: totul este în mâinile noastre și ne vom întoarce la caruselul nostru.
1. În primul rând, vom decide unde vom introduce caruselul nostru. Cred că există o mică experiență în scrierea și editarea de teme pentru WordPress pe care le aveți. Cel puțin, cui, indiferent de modul în care știi, ce numești șabloanele responsabile pentru forma paginii principale, paginile cu postul, paginile cu arhive. Permiteți-mi să vă reamintesc că în subiectul standard au nume: index.php, single.php, arhive.php, respectiv. De asemenea, puteți utiliza funcții precum is_home (), is_single, etc și / sau plasați codul în footer.php.
2. Descărcați scriptul.
3. Am despacheta-o undeva, as recomanda-o in dosarul cu tema in care il pastrezi. Avem nevoie de 2 fișiere și 1 dosar: compressed.js, script.js, IMAGES.
4. Conectați biblioteca:
În cazul în care ați scris fișierele la caruselul de directoare din directorul cu tema pentru WordPress.
var slideshow = nou TINY.slideshow ("slideshow");
6. Adăugați codul cu imagini.
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Aliquam utna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus în, euismod ut, felis.
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Aliquam utna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus în, euismod ut, felis.
Ultima etichetă este să atribuiți un link care se va deschide făcând clic pe imagine. Dacă plasați o imagine ca o ancoră (așa cum se vede în exemplu), aceasta va fi afișată în partea de jos a caruselului ca o expunere de diapozitive. Imaginea va trebui salvată în folderul THUMBNAILS, firește o versiune mai mică. Apropo, nu există niciun slideshow în plugin.
Bine! Și codul nostru va arăta astfel:
Big div «înveliș» conține două div mai mici: «marime maxima» și «miniaturi», este un spectacol de diapozitive si marime maxima sub formă de miniaturi, respectiv.
Nu fiți surprinși de goliciunea lor înșelătoare: ele sunt pline doar cu ceea ce este necesar pentru ao descrie într-o foaie de stil cascadă și oferă un scenariu pentru umplerea cu frumusețe.
var slideshow = nou TINY.slideshow ("slideshow");
Dar ceea ce este în interior, suntem deja interesați. Luați în considerare ce exemplu:
slideshow.auto = true; - caruselul se rotește automat. Implicit este fals.
slideshow.speed = 5; - viteza de derulare. Valoarea implicită este de 10.
slideshow.link = »linkhover»; Este numele clasei de afisare a link-urilor. Să ne întoarcem atunci când luăm în considerare stilurile de cascadă.
slideshow.info = "informații"; - informații. Indică id-ul divului conținut în "fullsize".
slideshow.thumbs = "cursor"; - id div'a, în care va fi afișat slide show-ul. Dacă ștergeți linia, nu va fi.
slideshow.left = "slideleft"; slideshow.right = "slideright"; - id div'ov, responsabil pentru derularea spectacolului de diapozitive. După cum puteți vedea, toate cele 3 div sunt în "miniaturi". Pe măsură ce le aranjezi, nu contează.
slideshow.scrollSpeed = 4; - viteza la care cursorul să se rotească. Cu cât este mai mare numărul, cu atât este mai mare viteza.
slideshow.spacing = 5; - distanța dintre miniaturi.
slideshow.active = "# fff"; - marginea de culoare a miniaturilor active.
slideshow.init ("slideshow", "imagine", "imgprev", "imgnext", "imglink"); - apoi, fără de care toate acestea nu vor funcționa deloc. „Slideshow“ - este id-ul listei, despre care am scris la punctul 6. «imagine», »imgprev», »imgnext», »imglink» - această imagine divuri, butonul «înainte», «înapoi» și link-uri, respectiv. Toate acestea sunt conținute în "fullsize".
9. Vom descrie acest lucru cu CSS. Aici remarcăm că scăderea CSS inutilă durează mult timp și că atunci când implementați un carusel cu ajutorul unui plugin fără a încărca o foaie suplimentară de stil cascadă, era imposibil să faci.
Am fost foarte torturat și pervertit când mi-am creat pluginul G_Buzz_Button, încercând să fac fără CSS suplimentar. Mi-a costat foarte mult nervi și timp, dar am făcut totul și am primit un cod de ieșire foarte curat și ușor.
Implementând caruselul prin metoda mea, putem adăuga tot ce este necesar pentru foaia de stil în CSS-ul temei noastre. Să adăugăm următorul cod:
Nu vă voi spune ce este CSS, ar trebui să știți despre asta. După cum puteți vedea, toate id-urile și clasele noastre sunt descrise aici. Puteți să-l lăsați așa cum este, sau puteți să o editați pe măsură ce voia dumneavoastră inima.
Vă sugerez să încercați să scăpați de aspectul standard și să aranjați componentele caruselului așa cum vă place. De exemplu, toate butoanele pot fi separate, nu puteți face o imagine mare, ci doar măriți imaginile de pe cursor. Puteți face ca totul să se învârtă și să se schimbe cu mare viteză sau să puteți face legături de la carusel la diferite locuri dintr-un articol. Nu vă limitați la numărul de imagini și dimensiunea lor.
Mulțumesc, Andrey pentru instrucțiunile detaliate.
Și acum despre cei plăcuți. Plank în 400 de abonați este depășit - astăzi feedburner a arătat o cifră de 404 (la fel ca aceeași pagină despre eroare), ceea ce este incredibil de plăcut. Ieri am găsit următorul plic pe masă.
Se pare amuzant: începeți să scrieți un post după-amiaza într-un oraș și terminați seara în alt oraș.
Gărzile:
Când aveți nevoie de programe reale la comandă, începeți să credeți că dezvoltarea de software va fi cea mai bună soluție.
Plug-in-ul de la Roland are probleme cu setările, nu le actualizează în mod corespunzător. Puteți observa dacă încercați să înlocuiți imaginea cu altul cu același nume sau încercați să adăugați 4 fotografii alese de dvs.
În rețea există o altă implementare a plug-in-ului WordPress pe baza scenariului Leigeber, numai că am uitat cine a scris-o. Există mai puține setări, dar o muncă mai stabilă.
În general, toate aceste scripturi mai ușor de fixat la WP nu sub formă de plug-in-uri, ci ca un site obișnuit. Reduce greutatea codului => mărește viteza de lucru.
Sănătate, adăugată
yana, nu am găsit, cel mai probabil nu.
Aronsky, dar sunt mulțumit de tot. Scrieți cum să organizați acest lucru fără un plug-in - este interesant. Serge Shine, și tocmai ai citit.
Aronsky, așa că acum mi-am amintit că Roland sa bazat pe el și a făcut acest plugin.
Cine vrea să organizeze un carusel fără un plug-in, apoi link-ul de mai sus.
Aș fi foarte recunoscător dacă legătura a fost schimbată în Wordpress și tradusă în limba rusă. Și atunci eu nu sunt puternic în limba engleză și alți cititori vor fi recunoscători)))
Da, știu, nu vreau să încărc pluginuri suplimentare cu WordPress. Vreau să construiesc tema
În general, am făcut confuzie cu acest scenariu. Voi încerca acum să scrie un mic manual în limba rusă, deoarece este convenabil pentru a încorpora script-ul direct în WordPress temă și dacă sunt de acord Sergey - chiar pe acest blog și publică, în plus față de acest post.
Sosnovskij, de exemplu, există șabloane în care pentru cursor puteți aloca ieșirea din coloana selectată, ale cărei anunțuri doriți să le arătați, din zona de administrare WP, specificând numărul de identificare; de asemenea, numărul de articole. Dar asta de la admin - este dificil, în sensul de a scrie un astfel de cod.
Este posibil, folosind câteva linii de cod, să specificați în șablon propriu (de exemplu, în index.php) ce coloană ar trebui să afișeze cursorul? Și numărul de articole din această coloană?
vinaction, creați și încărcați stilourile pentru găzduire (4,6 puncte).
Sosnovskij, ei bine, nu este interesant ... dacă am 200 de postări pe site, eu pentru fiecare ar trebui să faceți un cub și să le îmbinați într-un singur dosar. Și toate astea se ocupă!
Se pare ca secolul 21.
vinaction, în opinia mea, în slider ar trebui să fie imagini-link-uri către cele mai interesante pagini. Prin urmare, 3-5 imagini la ochii mei. Iar flexibilitatea dispare în cazul inserțiilor automate.
Băieți, nu știu scris aici, pe acest subiect oricine altcineva sau nu, dar am un astfel de plug Poser umplut a început să pună link-ul și nu găsește un dosar scrie că dosarul nu există, în general, atunci când nu este utilizat pentru a apela dosarul în care am pur și simplu nu împinge, în care doar ridică El nu a specificat URL-ul, care nu au nevoie urgentă de a lua promptă
Natalia-emancip, din nefericire, cu Slider-ul de conținut recomandat pentru plug-in-uri nu sa întâlnit niciodată.
Eugene, ar putea să vă spun sau să dea un link despre cum să pună în aplicare WordPress slider, atât pe acest site (cursorul de sus) gidonlinekino.com și m-am dori să selectați manual care posturi vor fi publicate.
Fără ofensă, dar ..
Ca zadolbali pe toate site-urile aceleași posturi despre plugin-ul Roland Chanishvili pentru posturile slider. Eu după toate ciocan în motorul de căutare un carusel de imagini și nu posturi. Este păcat. Voi continua să mă uit.