Owl carusel 2 configurare, conectarea la site-ul WordPress

Recent, în timp ce lucrează pe un site necesar pentru a pune în aplicare un cursor de pe pagina de start. Proiectul a fost creat pe WordPress, dar clientul furnizat de aspect a fost destul de specific, și de a rezolva problema cu plug-in-uri potrivite dovedit a fi imposibilă. De script-uri terțe părți mi-a placut cel mai bun soluție Owl Carusel 2. Mulți dezvoltatori l-au sfătuit, și așa cum sa dovedit, nu în zadar! Astăzi, de aceea, vă spun cum să vă conectați Owl Carousel 2 la orice site, și ia în considerare stabilirea și integrarea acestuia în WordPress.

Toate informațiile culisei puteți găsi pe această pagină. După cum am înțeles, Owl Carousel 2 - aceasta este a doua versiune a scenariului, mai puternic și funcțional (nu este compatibil cu primul). Funcționează cu toate browserele moderne: Firefox, Chrome, IE7 / 8/10/11, Opera, Safari (iPad, iPod4), Galaxy S4, Nexus 7, Chrome, Nokia 8s Windows8, etc.

În general, după cum puteți vedea, cursorul unele avantaje solide. În plus, potrivit site-ului oficial, se pregătește să părăsească versiunea următoare, care va fi chiar mai multe chips-uri și un API îmbunătățit. Dar până ce se întâmplă, vom evalua activitatea versiunea veche.

Conectarea Owl Carousel 2

Considerăm în detaliu modul de conectare Owl Carousel 2 la locul obișnuit. Primul lucru pe care trebuie să vizitați site-ul oficial al script-ul și faceți clic pe butonul Descărcare din colțul din dreapta sus al paginii. După cum puteți vedea, descărca Owl Carousel 2 absolut gratuit. Apoi, despachetați arhiva și încărcați fișiere de pe site-ul FTP în owlcarousel directorul creat anterior.

Pentru a integra script-ul trebuie să urmați câțiva pași:

1) Adăugarea CSS in zona HEAD a șablonului dvs.

Primul fișier este obligatoriu și trebuie să fie conectat la un script * .js. A doua linie specifică proiectarea de culisare, inclusiv comenzi pentru (butoane). Owl.theme.default.min.css pot edita stilul pentru proiectul dumneavoastră, sau eliminate cu totul.

script Owl.carousel.min.js este de dorit să se adauge în subsolul tema. În ceea ce privește jquery.min.js, de obicei este deja inclus în diferite modele. În cazul în care nu este acolo, adăugați.

3) Adăugarea de cod HTML

Unele marcaj special pentru a personaliza Owl Carousel 2 nu este necesar. Numai necesare pentru a plasa elemente cursorul în container

. În principiu, cu excepția DIV poate (interval, a, img) utilizate și alte structuri, dar clasa bufniță carusel, astfel, este necesar (a se citi de înregistrare cu owl.carousel.css).

slide1 Conținut

slide2 Conținut

slide3 Conținut

Dacă doriți să adăugați stilurile implicite pentru unitatea de navigare (puncte, săgeți), adăugați exterior clasa container bufniță-temă.

următoarea funcție (situată în cap după șiruri de conexiune CSS și fișiere JS) este folosit pentru a activa Owl Carousel 2 script-ul.

Este totul de a face cu teoria. Real Codul de opțiuni pot uita la locul cursorului sau în următoarele secțiuni ale acestui articol.

Setări și exemple Owl Carousel 2

Alegeți din secțiunea Demo meniul superior. în cazul în care există exemple de utilizare a Owl Carusel 2. Ele demonstrează piesele de bază ale script-ul, precum și lucrul cu plug-in-uri încorporate și biblioteci terțe părți. Să ne uităm la prima versiune a «demo-uri de bază».

Pentru HTML apoi utilizați următorul cod:

1

2

3

4

5

6

7

8

9

10

11

12

Container vezi clase de bufniță-carusel bufniță-temă, pe care le-am discutat mai sus. După cum elementele pot fi utilizate nu numai DIV (încercați img, durata, a). Pentru a configura Owl Carousel 2 și funcția de a apela următorul cod:

Aici puteți vedea opțiuni cum ar fi: indentare marjei, a concluzionat nav de navigare: adevărată și buclă: adevărat, responsabil pentru nesfârșită defilare Owl Carousel 2. setați, de asemenea, numărul de obiecte pentru diferite rezoluții de ecran, îmbunătățirea capacității de adaptare a cursorului.

Toate setările pot fi găsite din nou pe site-ul oficial în secțiunea Dosc. În meniul din stânga va bloca API-ul și sub-opțiuni, clase, evenimente (cursuri de opțiune, evenimente) cu o descriere detaliată a acestora. Doar mai jos - informații despre plug-in-uri, biblioteci externe, stiluri Sass, etc.

Dar, înapoi la setările Owl Carusel 2. Aici este un exemplu de site-ul creat de mine:

articole - numărul de elemente afișate pe ecran;
autoplay - slide-automată de derulare;
autoplayTimeout - rata de schimbare a imaginilor;
buclă - o buclă fără sfârșit;
mouseDrag - dezactivarea drag and drop;
puncte - ca punct de navigare;
marjă - umplutură;
itemElement - membru DOM pentru obiecte (slide-uri);
stageElement - DOM element container pentru elementul glisant;
dotsClass - unitate de navigație de clasă.

Uita-te pentru mai multe informații în secțiunea Dosc. Așa cum am spus mai sus, există o descriere a tuturor opțiunilor posibile și valorile lor. Într-adevăr, nu este greu de înțeles.

Owl Carousel 2 pentru WordPress

În principiu, există mai multe interesante WordPress plugin-uri carusele (Sliders), dar în cazul meu nu au venit. De asemenea, a găsit un modul pentru prima versiune a scenariului, dar acesta nu a fost actualizată timp de doi ani și este depășită. Prin urmare, era necesar să se pună în aplicare integrată Owl Carousel 2 cu tine WordPress. Spune-ne pe scurt despre algoritmul pentru această problemă.

Cel mai simplu lucru aici - conexiune de bază Owl Carousel 2 și setarea opțiunilor sale. Punerea în aplicare a CSS, JS, și de a organiza apelul functiei poate fi plasat în fișierele șablon corespunzătoare cod header.php și footer.php. Dar ce putem spune despre markup HTML pentru elementele glisorului (imagine + antet)? Utilizatorul trebuie să fie în măsură să le schimbe prin panoul de administrare.

Există mai multe soluții, dar aș sfătui să acorde o atenție la modulul de câmp personalizat Suite. Acest plugin vă permite să creați câmpuri personalizate de diferite tipuri: text, dată, downloaders fișiere, cicluri, etc. Nu voi insista asupra detaliilor funcțiilor sale (așa cum este descris în revizuirea Câmp personalizat Suite) arată un format am creat un element personalizat.

In imaginea de mai sus există un tip de element mainslider «Buclă» - ciclu, permițându-vă să creați un număr de diferite unități de aceeași dimensiune. Pentru a identificat 2 componente: mainslider_image (descărcări de fișiere, returnează adresa URL) și mainslider_title (zona de text). Astfel, utilizatorul poate crea mai multe slide-uri, constând dintr-o imagine și legendă.

Pentru a integra aceste date într-un site, deschide un fișier șablon, care ar trebui să fie plasat un cursor (de exemplu, index.php), și scrie cod, cum ar fi următoarele:

Cadrul general pentru glisorul, am scos din dosarul său șablon culegătorie, astfel încât clasele slide__image, slide__text, la fel ca dimensiunea imaginii sunt opționale (probabil va fi alta). În acest cod, trebuie să înțelegeți câteva lucruri:

Prima linie de date este citit din mainslider elementul (creat în vordpres admin) și scrise în $ slider_fields variabile.
Mai departe, prin foreach ocoleste toate elementele de matrice $ slider_fields și pentru fiecare diapozitiv individual este creat din imagini și din titlu.
Recipientul exterior are DIV clasă bufniță carusel după cum este necesar pentru Owl Carousel 2.

Apropo, rețeaua a văzut realizarea conexiunii Owl Carousel 2 prin intermediul modulului avansat Câmpuri personalizate, dar există tipuri definite de utilizator și câmpuri Galeria Bucla care nu sunt acoperite de versiunea gratuită (numai PRO). Teoretic, este posibil să se realizeze sarcina și prin crearea widget-ului dvs., dar mi se pare Câmp personalizat Suite plug-in perfecta acest caz.

Integrarea totală Owl Carousel 2 nevoie:

descărcare Skrpit de pe site-ul oficial.
Conectați fișierele JS CSS și.
Adăugați codul de apel funcția cu setările corecte.
Generați codul HTML corespunzător de pe pagina de pornire site-ul web.

Soluția perfectă. Într-adevăr, cu un loc de muncă stabil cursoare în PE directă probleme. Actualizat motor și dovedit de-a lungul anilor au început să rupă structura slider. Asta caută o alternativă.

aceste script-uri și stiluri de deșertăciuni în antet, subsol, ar trebui să se retragă picioarele. foarte dăunătoare pentru optimizarea ulterioară a vitezei site-ului. în WordPress există un standard (corect!) mecanisme de conectare.

Aici e chestia. În WordPress există o mulțime de soluții care nu numai 1, dacă este necesar, mutați script-uri și stiluri în locul potrivit HTML-cod, astfel încât să nu blocheze încărcarea componentelor de pagină (da, unele tipuri de fișiere nu sunt permise descărcări paralele alte fișiere) ... 2, dar se combină, de asemenea, script-uri și stiluri la fișierele corespunzătoare, reducerea semnificativă a numărului de fișiere încărcate (care dă un impuls semnificativ de viteză). Aceste soluții funcționează numai în script-urile de conectare canonice și stiluri, astfel încât.
Conexiunea canonică, da, prin wp_enqueue_script și wp_enqueue_style. Prin soluție canonică am atribui, de asemenea, un loc de muncă elegant cu script-uri html built-in. Ele trebuie să fie introduse după wp_footer (), astfel încât a fost posibil să se provoace (de exemplu, după transferarea „soluții de greutate“) alte script-uri.
1. Destul de des să prescrie functions.php ADD_ACTION ( «wp_footer», »call_script», 99); 2. Scrieți aceeași funcție «call_script» cod HTML script-ul dorit (și, dacă este necesar, vpindyurit a concluzionat parametrii necesari). Uneori, ai un pic mai mult pentru a bate toba la un script încorporat a fost încărcat mai târziu jquery ...

Eugene, mulțumesc pentru clarificare. Da, ei bine, atunci când toate în mod corect.