Cum să faci un flux glisor colorat în WordPress. Pregătim structura pentru glisor. Pluginul de diapozitive de conținut WordPress

Glisorul pentru WordPress despre care sunt pe cale să vă spun este cel mai tare dintre toate glisoarele pe care le-am văzut. Are atât de multe setări și atât de multe posibilități încât poți atinge aproape orice obiectiv ți-ai stabilit. Cel mai important lucru este că este gratuit. Are un singur dezavantaj - este Limba engleză. Și asta nu e nicio problemă.

Pluginul Smart Slider 3 vă permite să creați un glisor pentru un site de orice complexitate și cu orice elemente. Puteți descărca acest plugin din linkul de mai jos.

Un glisor este un element de site în care imaginile alternează automat sau pe baza acțiunii utilizatorului. Aceste imagini pot fi doar imagini, imagini link sau previzualizări video. Glisorul ajută la demonstrarea multor informații într-o zonă mică a site-ului. În plus, arată modern și atractiv.

După ce instalați plugin-ul slider pe site și îl activați, consola dumneavoastră se va afișa articol nou„Smart Slider”. Du-te la el.

Aici avem trei file:

• Glisor. Lista tuturor glisoarelor create. Există deja un exemplu de glisor creat de dezvoltatorii de pluginuri.
• Setări. Setări plugin. Există o mulțime de setări, iar cel mai bun lucru este că toate pot fi lăsate implicite. Cei interesați pot urca acolo, dar nu voi lua în considerare acest punct în detaliu.
• Du-te pro! Îl poți cumpăra de aici versiunea platita conecteaza. Dar cine are nevoie când ne oferă atât de multe oportunități gratis! Veți afla mai jos despre ele.

Să creăm un glisor pentru WordPress și să vedem capabilitățile acestui plugin. Accesați fila „Sliders” și faceți clic butonul verde„Creați glisorul”.

În fereastra care se deschide, dați un nume glisorului în câmpul „Nume glisor”. Voi scrie acolo „Imaginile mele”. Selectați dimensiunea în câmpurile „Lățime” și „Înălțime”, definiți una dintre ele trei variante afișare în „Preset”. În principiu, puteți lăsa totul ca implicit dacă nu doriți să vă încurcați. În cele din urmă, faceți clic pe butonul „Creați”.

Deci, este creat un slider pentru WordPress și după aceea vedem o pagină cu setări.

Primul bloc de setări este „Publicare glisor”. Iată informații despre cum să publicați apoi glisorul terminat. În coloana „Shortcode” puteți obține un shortcode care poate fi plasat într-o postare sau pe o pagină. În coloana „Editor de pagină sau postare” ni se arată că în reactorul de postare și pagină a buton nou, care vă permite să publicați un glisor. Și în coloana „Cod PHP” puteți obține cod php pentru a instala glisorul în fișierele șablon.

Primele două metode de publicare sunt cele mai convenabile.

În fila „General” sunt configurate principalele opțiuni: nume (Nume), poziție pe site (Aliniere), control (Controale), animație (Animation) etc.

Fila „Dimensiune” este folosită pentru a ajusta dimensiunile. Puteți defini lățimea și înălțimea (dimensiunea glisorului), marginile (Marja), poziția glisorului pe ecran (modul implicit de umplere a fundalului diapozitivului), adaptabilitatea (modul receptiv) și multe altele.

În fila „Redare automată”, puteți configura comutarea automată a glisorului.

Fila „Altele” pentru mai multe ajustări fine, nu trebuie să-l atingi.

Să mergem puțin mai jos și să vedem un alt bloc de setări, care are șase file. Fila „Săgeți” oferă oportunități enorme pentru personalizarea săgeților de control al glisorului pentru WordPress.

„Bullets” controlează gloanțe. Glonțele sunt cercuri mici pe glisor pe care le puteți folosi pentru a-l comuta.

Fila „Redare automată” controlează redarea automată a glisorului.

În „Bară” puteți activa bara de lângă glisor. Foarte convenabil dacă trebuie să afișați o descriere, de exemplu.

Fila „Thumbnail” gestionează imaginile în miniatură ale glisorului WordPress.

Deci, dacă v-ați jucat deja cu setările, atunci să adăugăm imagini la glisorul nostru pentru WordPress. Pentru a face acest lucru, faceți clic pe săgeata de lângă butonul verde„Adăugați glisor de imagine”. Se va deschide un meniu.

Pentru a adăuga o imagine la glisor, trebuie să faceți clic pe elementul „Adăugați imagini” din acest meniu. Se va deschide o bibliotecă media standard, unde trebuie să selectați o imagine. După selectarea unei imagini, miniatura acesteia devine imediat vizibilă în glisor. Dacă faceți clic pe el, puteți face anumite setări.

Nu vă voi spune setările în detaliu. Pe scurt, acolo puteți da imaginii un nume, o descriere și alocați un link către aceasta. Dar cel mai bun lucru este că puteți crea straturi cu text, imagini, butoane și le puteți suprapune pe imaginea încărcată, la fel ca în Photoshop.

Pentru a crea straturi, utilizați blocul pe care l-am arătat în captura de ecran de mai jos.

După toate setările de imagine, nu uitați să faceți clic pe „Salvare”.

Dacă faceți acum clic pe „Adăugați videoclip” pe butonul de adăugare a diapozitivului, puteți atașa un videoclip de pe YouTube sau Vimeo la glisor. Pentru a face acest lucru, trebuie doar să inserați linkul video în câmp și să faceți clic pe „Adăugați videoclip”.

Videoclipul apare imediat în lista de diapozitive și când dați clic pe el, acestea se deschid setări individuale, la fel ca si in cazul pozei.

La cererea lucrătorilor, am scris un articol despre adăugarea unui slider la Tema WordPress. Articolul va fi universal, adică. pe baza acestuia, puteți adăuga un glisor la orice temă WP. Vom examina această problemă folosind tema Pinbin ca exemplu. Un link către subiect și toate fișierele din lecție va fi după articol.
Acest nou format articole cu videoclipuri. Este deosebit de important să afli ce ți-a plăcut la videoclip și ce nu. Împărtășește-ți părerile în comentariile de mai jos acestui articol.
Atenţie! Dacă vă prețuiți nervii și timpul, atunci comandați un site web de la profesioniști. Puteți comanda aici. Împungere!
Vizionare placuta!

Daca nu stii Bazele JavaScript si nu sunt familiarizati cu biblioteca jQuery, atunci vă sfătuiesc cu căldură să citiți informațiile din linkurile de mai jos:

Înainte de a începe orice afacere, trebuie mai întâi să vă familiarizați cu materialele sursă. Avem o temă Pinbin la îndemână. Și e adaptativă. Aceasta înseamnă că se adaptează la diferite rezoluții ale ecranului. Inclusiv dispozitive mobile. În consecință, avem nevoie glisor adaptiv.
Desigur, vom folosi soluții gata făcuteîn JQuery.
Am folosit ResponsiveSlides ca glisor. Este adaptabil și destul de ușor de instalat. Veți găsi un link către descriere și documentație după articol. Asta e tot ce ne trebuie. Merge.

Vom afișa glisorul doar pe pagina principală. Prin urmare, deschidem fișierul index.php și înainte de a începe să afișam postări, adică. Înainte de linie scriem codul HTML: