Ghid pas cu pas pentru crearea unui slider în WordPress cu SlideDeck

După lansarea noastră de ieri a WPBeginner Coupons, ne concentrăm în totalitate pe construirea celui mai bun design pentru site-ul principal WPBeginner care integrează totul, păstrând în același timp un aspect plăcut. Am dorit să adăugăm un slider pe site-ul nostru, dar fiecare script avea limitările sale. Apoi, mulțumită extraordinarului Matt Mickiewicz de la 99designs, SitePoint și Flippa (vezi interviul său pe WPBeginner) pentru că ne-au recomandat oamenii de la Digital Telepathy, creatorii SlideDeck (de departe cel mai bun script de slider de pe web). Ne-am jucat cu el și am fost impresionați. Este excelent pentru începători, deoarece oferă un plugin WordPress complet care vă permite să utilizați interfața ușoară de tip drag-and-drop pentru a crea slidere. Cu toate acestea, este excelent și pentru dezvoltatori, deoarece are o versiune jQuery care oferă libertate suplimentară dezvoltatorilor pentru a-l personaliza conform nevoilor lor. În acest articol, vă vom arăta cum puteți crea un slider în WordPress fără a edita o singură linie de cod cu pluginul WordPress SlideDeck.

Dacă doriți să vedeți ce puteți crea cu acest plugin, iată un DEMO LIVE.

Pasul 1. Descărcarea și instalarea pluginului

Accesează Site-ul SlideDeck și descarcă pluginul. Au o versiune GRATUITĂ și o versiune PRO care oferă suport și multe alte funcționalități. Ori de câte ori lucrăm cu un produs nou, obținem întotdeauna versiunea cu suport. Ne-am blocat de câteva ori în dezvoltarea noastră, iar suportul lor a fost uimitor și ne-a ajutat. Vă recomandăm cu tărie să obțineți versiunea PRO deoarece include funcționalități cool precum: Slide-uri Verticale, Suport pentru Ecran Tactil, Suport, SlideDecks Inteligente cu Flux RSS, Suport pentru Imagini de Fundal și multe altele.

După ce ați descărcat pluginul, continuați și instalați/activați pluginul. (Urmați ghidul nostru Pas cu Pas pentru Instalarea unui Plugin WordPress)

Să creăm un slider

După ce ați activat pluginul, veți vedea o nouă filă adăugată numită SlideDeck. Să mergem și să facem clic pe Adăugare SlideDeck Nou. Veți fi direcționat către un ecran care arată ca Panoul de Scriere a Articolelor.

Deci, ceea ce am făcut a fost să adăugăm conținutul în slide-ul nostru și să îi dăm un titlu. Am fi putut avea o imagine de fundal personalizată (Funcție PRO), dar de dragul simplității, nu am făcut acest lucru. Vrem să arătăm ce poate face acest plugin din cutie. Acesta a fost primul nostru slide standard. Următorul slide pe care l-am adăugat în demo-ul nostru a fost un slide vertical (Funcție PRO). Slide-urile verticale sunt practic mai multe slide-uri într-un singur slide. Dacă te uiți în imaginea de mai sus, există un buton numit Convert to Vertical Slide. Ei bine, acesta este butonul pe care l-am apăsat pentru următorul nostru slide, și asta este ceea ce s-a adăugat:

Acum repetați procesul pentru câte slide-uri doriți. Odată ce ați terminat de creat slide-urile, să aruncăm o privire la Opțiunile SlideDeck pentru publicarea slide-urilor pe site-ul dvs. Veți vedea acest lucru în partea dreaptă a ecranului de editare a slide-urilor.

Îl puteți selecta pentru a reda automat, permite navigarea cu tastatura, permite navigarea cu rotița mouse-ului, seta viteza animației, alege una dintre temele lor uimitoare și selecta de la ce slide să înceapă. De asemenea, puteți reordona slide-urile prin drag-and-drop. Vedeți că există un fragment de cod tematic care conține codul pe care să îl includeți în tema dvs. Îl puteți adăuga oriunde doriți în tema dvs. Oh, stai, nu am spus că nu va trebui să editați nicio linie de cod pentru a integra SlideDeck în WordPress. Da, vom respecta cuvintele noastre în acest tutorial. Să vă arătăm cum îl puteți integra în WordPress fără a edita nicio linie de cod.

Integrarea SlideDeck în Postările/Paginile WordPress

Creați o nouă postare sau pagină. Veți vedea o nouă casetă SlideDeck adăugată în bara laterală din dreapta.

Faceți clic pe butonul Insert SlideDeck. Alegeți Sliderul pe care doriți să îl adăugați și Publicați postarea. Odată ce publicați postarea, sliderul dvs. va arăta așa, cu pielea clasică:

Îl puteți folosi pe o postare fixată, un șablon de pagină pe lățime completă sau orice altceva doriți. Dar stați, nu se termină aici. Să mergem puțin mai departe.

Adaugă un slider cu postări recomandate

Slider-ele pentru postări recomandate sunt preferatele bloggerilor. Vedem această funcție pe numeroase bloguri, dar majoritatea acestor slider-e sunt codificate în teme, cu control limitat pentru utilizatori. Ei bine, să vedem cât de ușor este să faci acest lucru cu SlideDeck. Poți adăuga un slider dinamic numit „Smart SlideDeck” care îți permite să afișezi fie cele mai recente postări, cele mai populare postări, postări recomandate (cele pe care le alegi), poți sorta acest lucru după categorie, poți chiar importa fluxuri RSS de pe un alt site pentru a le adăuga în sliderul tău. Poți selecta din diversele lor piei, alege diferite tipuri de navigare și, practic, ai un slider gata în mai puțin de 5 minute. Lasă-ne să îți arătăm cum. În tutorialul nostru, vom afișa intrări recomandate din postările noastre.

Accesați postările dvs. curente și selectați 5 postări și adăugați-le în Smart SlideDecks bifând căsuța.

Acum, să mergem la Panoul SlideDeck și să facem clic pe Adaugă Smart SlideDeck. Alegeți tema dvs.:

Selectați câte diapozitive doriți să afișați, opțiuni de redare, tipul de conținut (Vedeți cum îl avem ca Intrări recomandate din Postare). Puteți selecta Setările de conținut, cum ar fi opțiunile de imagine, lungimea titlului, lungimea rezumatului etc. Alegeți Stilurile de navigare și faceți clic pe Publicare.

Trebuie să editați codul la acesta. Luați codul din Bara laterală, Cod fragment tematic și lipiți-l în tema dvs. Cel mai probabil, în partea de sus a fișierului index.php. Un exemplu de cod ar arăta așa:

<?php if (is_home()) { slidedeck( 73, array( 'width' => '100%', 'height' => '370px' ) ); } ?>

Acesta ar afișa sliderul doar pe pagina principală.

Dacă doriți să vedeți câteva demo-uri foarte cool ale SlideDeck, vizitați site-ul SlideDeck și verificați-l.

Spuneți-ne părerile dumneavoastră despre plugin pe măsură ce îl implementați.