Share
Slider-urile pot fi controversate - toți am avut clienți care le-au insistat asupra lor, indiferent dacă îmbunătățesc site-ul. Dar ei au locul lor. Ele pot contribui la evidențierea conținutului cheie, afișarea imaginilor pe un sit în care elementele vizuale sunt importante și aducerea unui loc în viață.
În cele mai multe cazuri, probabil că ați utilizat slider-ele pentru a afișa imagini, care pot sau nu pot fi asociate cu conținut de pe site-ul dvs. Dar puteți utiliza și un cursor pentru a afișa textul pe site-ul dvs..
În acest set de două tutoriale, vă voi arăta cum să creați un cursor de text cu un efect interesant: va utiliza un tip de post personalizat pentru a trage într-o singură bucată de text după altul în două blocuri, creând efectul unei conversații la în partea de sus a paginii. Acest lucru va fi suprapus peste o fotografie a doi oameni, astfel încât efectul este că cei doi vorbește unul cu celălalt.
Pentru a urmări, veți avea nevoie de:
Exemplul în care voi lucra este un site din lumea reală pe care îl dezvolt pentru un client, care desfășoară o temă copil a temei Responsive. Voi crea un copil al temei Responsive și voi adăuga stilul personalizat la acesta, precum și funcțiile din tema functions.php fişier. Puteți să adăugați acest lucru la propria temă sau să creați o temă copilătoare a unui Responsiv ca mine.
În acest tutorial, vom lansa cursorul folosind un tip de post personalizat. Mai exact, vom:
În următoarea parte, vom adăuga CSS la tema noastră pentru a poziționa corect textul, pentru a crea efectul de conversație și pentru al modela.
Deci sa începem!
Mai întâi, să creăm tema copilului temei Responsive. Fac acest lucru pentru că nu vreau să editez tema Responsivă în sine: dacă ați făcut acest lucru, vă veți pierde munca atunci când veți actualiza ulterior tema. Alternativ, puteți crea un plugin pentru a face acest lucru.
În tine wp-content / teme , creați un nou dosar gol. Îi sun pe a mea tutsplus-conversație-banner.
În acest dosar, creați un fișier numit style.css și adăugați-le la aceasta:
Accentsconagua
/ * Tema Nume: Tutsplus Conversație banner Tema URI: 25938 Descriere: Tema tutorial + tutorial pentru crearea unui efect banner de conversație. Tema copilului pentru tema Responsabil. Autor: Rachel McCollin Autor URI: http://rachelmccollin.co.uk/ Template: responsive Versiune: 1.0 * / @import url ("... /responsive/style.css");Editați codul de mai sus pentru a vă crea autorul și a adăuga propriul URI.
Acum salvați fișierul și activați noua temă.
Deoarece acesta este un site din lumea reală, am adăugat stilul personalizat la acesta, care se află în foaia de stil a temei copilului. Nu voi trece prin detaliu, deoarece este în afara scopului tutorialului, dar puteți vedea stilul din pachetul de cod cu acest tutorial.
Iată cum arată aspectul site-ului meu înainte de a adăuga cursorul:
Imaginea din antet are spațiu de o parte și de alta a celor doi oameni și îmi voi modela cursorul astfel încât să afișeze textul fiecărei părți a poporului, dând efectul că arată cuvintele lor.
Pasul cuib este de a înregistra un tip de post numit citat. În dosarul tematic pentru copii, creați un fișier nou numit functions.php.
Notă: este o practică bună să utilizați un plugin pentru a înregistra un tip de post, mai degrabă decât să îl adăugați la fișierul cu funcții tematice. Folosesc fișierul de funcții aici pentru a păstra totul într-un singur loc, deci aveți un pachet de cod pentru descărcare.
Deschideți fișierul cu funcții și adăugați acest cod la acesta:
funcția "add_new_item", "add_new" => __ ("Citat nouă"), => __ ('Adauga citat`),' edit_item '=> __ (' Edit Quote '),' new_item ' 'search_items' => __ ('Citate de căutare'), 'not_found' => __ ('Nu s-au găsit citate'), 'not_found_in_trash' => __ (' $ args = array ('labels' => etichete $, 'has_archive' => false, 'public' => true, 'hierarchical' => false, extras "," câmpuri personalizate "," miniatură "," atribute de pagină "," autor ");); register_post_type ('quote', $ args); add_action ('init', 'tutsplus_create_post_type');Aceasta înregistrează un nou tip de postare numit citat.
Puteți vedea noul tip de postare pe site-ul meu, cu câteva citate pe care le-am adăugat:
Rețineți că acestea sunt doar citate fanteziste - faptul că am utilizat un tip de post personalizat îl face pe clientul meu mai ușor să-și adauge propriile citate după lansarea site-ului. Fiecare dintre ele are doar un titlu post și niciun conținut, deoarece dacă există conținut post, pluginul ar afișa ambele.
Următorul pas este să instalați și să configurați pluginul slider. Folosesc pluginul Smooth Slider, care îți permite să alegi ce postări vor fi adăugate la cursor și să rearanjezi manual postările în ecranul de setări al cursorului.
Mergi la Smooth Slider> (Setări) și configurați-o astfel:
Adăugez styling în foaia de stil pentru că vreau să folosesc fonturile Google, așa că nu sunt prea îngrijorat de setările pentru fonturi, dar preferați să le modificați în ecranul de setări.
Următorul pas este să adăugați glisoarele și să le umpleți cu posturi.
Trebuie să adăugăm două glisante: una pentru fiecare dintre cele două persoane. Mergi la Smooth Slider> Sliders și faceți clic pe Creați un cursor nou. Mi-am numit cele două glisiere Heide și Iain, pentru că acestea sunt numele poporului.
Puteți adăuga postări la un cursor din pagina de editare post. Deschideți unul dintre postările dvs. și defilați în jos pentru a vedea opțiunea de adăugare a acestuia la un cursor:
Selectați cursorul în care doriți să adăugați postarea și salvați-o. Repetați acest lucru pentru fiecare post, adăugându-l la glisorul relevant.
Puteți edita manual ordinea în care postările vor fi afișate de glisor. Mergi la Smooth Slider> Sliders și selectați cursorul cu care doriți să lucrați. Iată cursorul meu "Heide":
Derulați în jos pentru a glisa posturile în ordinea corectă:
Odată ce ați făcut acest lucru, salvați cursorul.
Acum avem două glisante, dar ele nu apar pe site. Pluginul vă oferă coduri scurte pe care le puteți utiliza pentru a adăuga glisoare pe site-ul dvs.: pe măsură ce le vom adăuga în fișierele tematice, vom utiliza do_shortcode () funcţie.
Tema Responsivă ne oferă un cârlig numit responsive_in_header care vă permite să adăugați codul în antetul paginii. Acesta va fi afișat deasupra imaginii, dar în antet: vom adăuga CSS pentru poziționarea corectă a glisoarelor în următoarea parte a tutorialului din două părți.
Deschideți tema functions.php fișier și adăugați această funcție:
funcția tutsplus_slider () ?>Aceasta creează o
divcututsplus-cursoareclasa pe care o vom direcționa mai târziu și vom folosi codurile scurte pentru a afișa cele două glisoare.Salvați fișierul cu funcții.
Site-ul arată acum astfel:
Deci, glisierele sunt acolo, și ei lucrează. Însă, în partea de sus a paginii, se află o cantitate imensă de spațiu alb, deasupra imaginii. Avem nevoie ca ele să fie afișate peste imagine, alături de cele două persoane.
În următoarea parte, vom continua să reparăm asta. Vom adăuga CSS pentru poziționarea celor două glisoare și, de asemenea, pentru styling. Vom înregistra un font Google care va fi utilizat pentru ghilimele.
rezumat
Glisoarele nu sunt doar pentru imagini: le puteți utiliza și pentru a afișa textul. În acest tutorial, ați învățat cum să configurați două glisante utilizând un tip de post personalizat. Apoi vom adăuga stilul pentru a face textul să arate așa cum ar trebui.
