Mnogi korisnici imaju pitanje kako uljepšati svoje web mjesto i dodati WordPress slideshow u zaglavlje web mjesta, u bilo koji post na web mjestu, na stranicu ili čak na bočnu traku WordPressa. Rekao sam vam kako to možete učiniti pomoću slika koje su učitane u standardnu WordPress galeriju. Danas ću vam reći kako koristiti dodatak TheThe Image Slider za izradu WordPress klizača ili dijaprojekcije na vašem blogu.
Instalirajte i konfigurirajte dodatak klizača i prezentaciju The The Image Slider WordPress
Instaliranje dijaprojekcije ili klizača u zaglavlje stranice, bočnu traku, post ili Wordpress stranicu
Nakon svih manipulacija s učitavanjem slika u klizač, kliknite Spremi i izađi, time ćete izaći iz učitavanja slika i bit ćete preusmjereni na glavni izbornik u kojem ćete imati naziv svoje dijaprojekcije ili klizača po želji. Također možete pristupiti općem izborniku klikom na gornju karticu. Klizači i slajdovi.
Sada smo naučili kako izraditi klizače i učitati slike u TheThe Image Slider dodatku. Sada moramo naučiti kako umetnuti klizač u zaglavlje stranice.
U glavnom izborniku dodatka vidite otprilike sljedeću sliku, nazivi se mogu razlikovati:
Kao što možete vidjeti na slici, sam dodatak generira naziv kratkog koda za umetanje gotovo bilo gdje na prezentaciji vaše web stranice, kratki kod je jedan od najboljih načina za umetanje WordPress dodataka ili hakiranja u sadržaj vaše stranice, stalno koristim ovu metodu , Dalje ću napisati kako se koristi.
Kako biste umetnuli dijaprojekciju u post, objavu ili stranicu svoje web stranice, koristite ovaj kratki kod, samo ga zalijepite u uređivač, gdje je vrijednost Ime bit će naziv vašeg klizača, nemojte brkati s nazivima slika.
Da biste umetnuli klizač u zaglavlje svoje stranice, morate imati malo znanja o HTML-u i CSS-u kako biste ga ljepše i glatko postavili, dat ću jednostavan primjer koristeći temu twentyten, standardnu WordPress verziju, glavna stvar ovdje je razumjeti princip.
Uzmi datoteku Zaglavlje. php našeg predloška i pronađite one retke koji su odgovorni za prikaz zaglavlja stranice, u predlošku u kojem koristim spremnik < div > označeno id = "zaglavlje"
< div id = "wrapper" class = "hfeed" > < div id = "header" > |
Upravo u ovaj spremnik ću staviti svoju projekciju slajdova, koja će biti prikazana na svim stranicama, jer datoteka Zaglavlje. php povezuje se na svim datotekama predloška.
Dodatak ima funkciju koju možete koristiti bilo gdje u svom predlošku, a ova je funkcija umetnuta . php datoteku vaše teme, na mjesto gdje želite prikazati klizač, u našem slučaju to je nakon spremnika za otvaranje s id = "zaglavlje", sve to izgleda ovako:
< div id = "wrapper" > < div id = "header" >if (function_exists("get_the_image_slider" ) ) ( |
Pronalaženje dobrog slajdera za WordPress nije lak zadatak. Najnoviji podaci govore da postoji 690 slider dodataka za WordPress. Tko ima toliko vremena da nauči svaki dodatak?
Kako bismo vam pomogli odvojiti žito od kukolja, ovdje je pregled i ocjena 10 najpopularnijih besplatnih dodataka za slajdove odabranih s ovog popisa. Ovi klizači slika nedavno su ažurirani i svi su dobili povratne informacije od korisnika WordPressa.
Koji dodatak za dijaprojekciju koristite? Recite nam u komentarima ispod.
Meta Slider - klizač za WordPress
Meta klizač daleko je najpopularniji WordPress slider s više od 2 milijuna preuzimanja.
Ima četiri jQuery klizača – Nivo Slider (responzivan, 16 prijelaznih efekata, četiri teme), Coin Slider (četiri prijelazna efekta), Flex Slider 2 (responzivan, dva prijelazna efekta, vrtuljak), Responsive Slides (responzivan, samo efekt blijeđenja) .
Stvaranje nove dijaprojekcije je jednostavno - dodajte sliku, odaberite klizač koji želite koristiti, a dodatak će izbaciti kratki kod koji možete dodati bilo gdje na svojoj web stranici.
Postoji i pro verzija ovog dodatka ako želite platiti za dodatne značajke.
Klizač za popuštanje
S gotovo 650.000 preuzimanja, Easing Slider Lite– drugi najpopularniji klizni dodatak.
Ovaj lagani dodatak omogućuje vam da postavite veličinu i trajanje klizača i uključuje mogućnost da vaš prikaz slajdova učinite interaktivnim. Ima dva efekta prijelaza, efekt blijeđenja. Kao i kod mnogih drugih klizača, morate koristiti kratki kod da biste dodali svoj klizač u post ili stranicu.
S ovim dodatkom možete izraditi samo jednu prezentaciju, pa ako želite imati više na svojoj web stranici, morat ćete potražiti negdje drugdje.
Glatki klizač
Glatki klizač Stvara dijaprojekcije za sadržaj i slike s prilagođenim pozadinama i razmakom između slajdova koji se mogu postaviti bilo gdje na vašem web-mjestu.
Značajke dodatka uključuju responzivan dizajn i šest prijelaznih efekata. Također podržava prilagođeni klizač, klizače kategorije i najnovije objave, uključuje oznake predložaka, kratki kod i widget.
Najnovija verzija ovog dodatka ne radi uvijek ispravno; kada se konfigurira, može poremetiti rad stranice. Sudeći prema stranici podrške za Smooth Slider, mnogi su korisnici imali problema s ovim dodatkom.
WOW klizač
Wow klizač Neobično je po tome što za izradu dijaprojekcije trebate preuzeti poseban program, čarobnjak WOWSlider. Nakon što odaberete slike za svoju dijaprojekciju, možete ih prenijeti u dodatak. Morat ćete kopirati i zalijepiti kratki kod da biste dodali klizač bilo gdje na svojoj web stranici.
Web-mjesto dodatka uključuje prilično iscrpnu dokumentaciju koja će vam pomoći ako naiđete na probleme.
vSlider Multi Image Slider za WordPress
vSlider omogućuje prikaz neograničenog broja klizača slika na vašoj stranici, ali koliko je klizača "previše"?
Možete ugraditi klizače na svoje web mjesto pomoću kratkog koda, prilagođenog widgeta ili ga koristiti kao značajku u svojoj temi.
Dodatak ima korisna FAQ i video vodič koji će vam objasniti kako postaviti svoj prvi klizač. Ako imate problema, forum vam je također na raspolaganju.
SlideDeck 2 Lite Responzivni klizač sadržaja
SlideDeck je popularan i svestran dodatak koji ima naprednu funkcionalnost u usporedbi s prethodnim dodacima.
Ova Lite verzija ne uključuje cijeli skup od 14 izvora sadržaja kao što su Facebook, NexGEN i Galerija koji su dostupni u Premium verziji.
Međutim, verzija Lite omogućit će vam brzo stvaranje dijaprojekcija iz bilo kojeg sadržaja, kao što su slike, snimke i videozapisi.
EasyRotator za WordPress – dodatak za klizanje
EasyRotator obećava da će korisnici dobiti "prekrasne, interaktivne rotatore fotografija i klizače za svoju WordPress stranicu u sekundi", ali u stvarnosti to zahtijeva neke postavke. Najprije ćete morati instalirati Flash softver za izradu slajdova - ili rotatora - na računalu, što može biti neugodno. Zatim možete stvoriti novi rotator u uređivaču stranice ili posta. Također možete upotrijebiti kratki kod da ugradite rotator na svoje web mjesto ili dodate rotator svojoj temi pomoću odgovarajuće funkcije.
Nakon svih problema s instaliranjem softvera Flash, možda ćete otkriti da neće raditi kada pokušate postaviti glavni klizač iz uređivača postova. Malo istraživanje je pokazalo da ovaj dodatak ne radi sa Safari/Chrome.
Responzivni WordPress klizač – Soliloquy Lite
Monolog je jedan od najpoznatijih slajdera, i to s dobrim razlogom - jednostavan je za instalaciju, ne morate preuzimati Flash program za izradu i učitavanje klizača ili petljati s postavkama. Jednostavno radi.
Nakon što dodate slike, odaberite veličinu klizača, brzinu i kliknite Objavi. Nakon toga trebate kopirati dobiveni kratki kod na bilo koju stranicu ili post gdje želite instalirati klizač.
Iako je ovo Lite verzija, još uvijek ima dovoljno značajki da je isprobate.
Ciklonski klizač 2
Ciklonski klizač 2 vraća klizače na osnove. Nudi jednostavnu instalaciju, prikazuje jednostavan klizač slike i uključuje značajke kao što su kašnjenja, veličine i pauza pri lebdenju.
Dodatak podržava slike, YouTube, Vimeo, prilagođeni HTML i istaknute klizače. Možete povlačiti svoje slajdove da biste promijenili njihov redoslijed, klizači su interaktivni.
Ovaj dodatak također ima pro verziju.
Responzivni klizač
Responzivni klizač je vrlo jednostavan dodatak za slajdove koji zahtijeva određenu konfiguraciju, ali to ga čini jednostavnim za korištenje.
Dodavanje novih slajdova jednostavno je i možete ih postaviti bilo gdje na web-mjestu s kratkim kodom ili unutar teme pomoću odgovarajuće funkcije.
Postavke vam omogućuju promjenu širine i visine klizača, dodavanje efekta prijelaza, odgode, trajanja animacije i automatskog pokretanja.
Ovaj dodatak je dizajniran za samo jedan klizač, tako da ako želite instalirati više klizača na svoju stranicu, morat ćete koristiti drugi dodatak.
Pametni klizač 3
Smart Slider 3 je možda najbolji klizač za WordPress. Vrlo moćan dodatak koji ima ogroman skup alata za izradu dijaprojekcija, koje možete koristiti prema vlastitom nahođenju, ovisno o situaciji. Postoji velika baza podataka gotovih klizača, prekrasnih efekata prijelaza. Možete izraditi cijele odredišne stranice koristeći samo klizače, ali to je već u verziji Smart Slider 3 Pro. Ali kada prvi put naiđete na ovaj dodatak, najvjerojatnije ćete imati poteškoća u radu s njim. Budući da se vrlo lako zbuniti u velikom broju kartica s postavkama.
Najpopularniji i najbolji klizač
I tu su dva dobitnika: Meta klizač I Pametni klizač 3.
Meta klizač nije samo najviše preuziman klizni dodatak, već je dobio i najvišu ocjenu od korisnika.
Jednostavan je za korištenje, ima dobru ravnotežu značajki i funkcionalnosti - i sve je besplatno.
vSlider Multi Image Slider,SlideDeck 2 Lite I Soliloquy Lite– također izvrsni dodaci za klizače ako je vaša stranica preopterećena slikama i želite napraviti puno klizača. Ove tri teme usmjerene su na profesionalce kako bi privukli kupce - imali veću prodaju - s besplatnim proizvodima.
Ako samo želite vrlo jednostavan klizač bez svih dodataka, onda je Cyclone Slider 2 definitivno za vas. To je izvrstan klizač koji se lako prilagođava i nije opterećen bezbrojnim postavkama i opcijama.
Ali ako vam kasnije zatreba klizač s više funkcionalnosti i mogućnošću postavljanja nekoliko klizača na vaše web mjesto, ne možete zaobići Meta klizač.
2 glasaDragi posjetitelji, želim vam dobrodošlicu na stranice mog bloga, start-luck. Danas ću vam reći kako je jednostavno, i što je najvažnije, besplatno dodati prekrasan klizač na svoju web stranicu. Bit će to atraktivan element dizajna za bilo koji članak ili izvrsna alternativa oglasnoj jedinici od koje možete zaraditi.
Od 2013. godine razna istraživanja predviđaju da će klizači uskoro nestati s interneta, ali njihova popularnost i dalje ne jenjava. Što god rekli, oni “oživljavaju” portal i skreću pozornost na informacije. Vi samo želite kliknuti na njih. Naravno, ako je klizač lijep i dobro dizajniran, ali na to ćemo se vratiti kasnije.
Govorit ću o WordPress slajderu. Kako brzo, besplatno i bez ikakvih posebnih znanja dodati nešto atraktivno i zanimljivo na svoju web stranicu. Razgovarajmo o tome isplati li se to učiniti sami. Također ćete dobiti neke korisne savjete za punjenje.
Pa, hoćemo li početi?
Meta klizač
Za početak, želio bih vam reći o najboljem dodatku za WordPress stranicu. Rijedak je slučaj kada uspijete pronaći nešto vrijedno i besplatno u isto vrijeme.
Ako ste čitali moj članak o tome, onda ćete se sjetiti koliko sam bio ogorčen nekim prijedlozima. Korisni program iz te publikacije također je koštao.
Pa, da vam pokažem kako raditi s programom.
Montaža
Dakle, možete pročitati detaljan članak o korištenju WordPressa na mom blogu. Ponovimo ukratko što učiniti u konkretnoj situaciji. Idite na odjeljak dodataka i odaberite opciju "Dodaj novo" s popisa; u traku za pretraživanje u gornjem desnom kutu unesite: "Meta Slider" i Enter. Čim se otvori stranica sa željenom aplikacijom, kliknite na “Instaliraj”.
Ne zaboravite aktivirati Meta Slider putem kartice "Instalirano" ili u prozoru koji se otvori nakon instalacije.
Kao rezultat toga, nova kategorija bi se trebala pojaviti na upravljačkoj ploči s desne strane. Pro verziju možete kupiti za 19 dolara ili koristiti besplatnu, po meni su njene funkcije sasvim dovoljne, tako da kupnja uopće nije potrebna.
Mogućnosti
Sada shvatimo kako stvoriti i umetnuti vrtuljak; ponekad se tako naziva i klizač. Idite na aplikaciju pomoću poveznice s desne strane (na WordPress administratorskoj ploči) i kliknite na plus pored fraze "Dodaj novo".
Možete prenijeti koliko god želite fotografija, ali ne preporučam pretjerivanje. Nitko neće previše progledavati. Optimalan broj kreće se od tri do osam.
Desno od učitanih slika nalazi se polje u koje možete unijeti adresu stranice na koju će osoba otići klikom na fotografiju. Slikama također možete dodati opis, obrezivanje i alt.
Također imate 4 mogućnosti dizajna. U videu ispod pokazat ću vam kako svaki od njih izgleda.
Pro verzija uključuje sve opcije za efekte, odnosno kako će jedan slajd zamijeniti drugi, za svaki način prikaza. Besplatna verzija ima ograničene mogućnosti. Ali ima ih još dosta. Naći ćete dobru opciju.
Uz 4 glavne varijacije dizajna, možete birati između jedne od četiri sheme boja.
Uz sve ovo postoji i dodatna postavka. Ako čitatelju želite dati mogućnost upravljanja premotavanjem unatrag, morate označiti okvir pored riječi "Strelice". Navigacija je također moguća pomoću točaka. Obavezno prepustite čitatelju kontrolu, osobito ako se radi o oglasnoj jedinici.
Što se tiče veličina, možete ih dostaviti. Međutim, dodatak nije glup, vidi maksimalna ograničenja i automatski se integrira u dizajn. Ako ga instalirate na bočne trake glavne stranice, malo kasnije ću pokazati kako to učiniti, proporcije će se automatski promijeniti.
Slijedi "Napredne postavke". Ovdje možete povećati ili smanjiti trajanje okvira i brzinu animacije. Ne smiju se kretati vrlo brzo, inače će napustiti vaše mjesto. Ako ima puno fotografija, bolje je dopustiti da se slike prikazuju zasebno.
Prilikom promjene slike, slika se može podijeliti na nekoliko dijelova. Ne preporučam navođenje male količine. Inače će vam zaslijepiti oči. Pa, umjesto strelica za premotavanje, preporučam da dodate svoj tekst.
Na slici ispod možete vidjeti klizač koji sam napravio. Za lakše preporučam korištenje opcije pregleda. Izbornik za izradu ima dva korisna gumba u gornjem desnom kutu: Prikaži da biste vidjeli svoje promjene i Spremi.
Na samom dnu desne ploče nalazi se kratki kod za umetanje u postove i za . Napredni programeri to trebaju, a za početnike ću pokazati kako postići stilski učinak jednostavnim metodama. Ali o tome kasnije.
Prvo pogledajte kako klizač izgleda u akciji. Naravno, sve treba testirati na vlastitoj web stranici, puno sam propustio i nisam pokazao u ovom videu, ali već možete dobiti okvirnu ideju o programu.
Integracija bloga
Umetanje stvorenog vrtuljka nije teško. Za ovo ne morate ništa posebno kopirati. Jedina stvar koju sam zaboravio spomenuti u prethodnom odlomku je da klizače imenujete ispravno kako se ne biste zabunili.
Otvorite objavu kojoj želite dodati novi klizač ili izradite novi. Zatim postavite kursor na predviđeno mjesto gdje će se nalaziti karusel. Sada kliknite "Dodaj klizač", gumb se nalazi na vrhu radnog polja.
Odaberite željeni naslov s popisa i kliknite "Insert Slideshow".
Spreman. U mom slučaju, to će izgledati ovako na stranici.
Da biste postavili blok na glavnu stranicu, idite na kategoriju "Izgled" - "Widgeti". Na vrhu ćete vidjeti "Meta klizač".
Pomaknite ovu ploču na željeno mjesto gdje treba postaviti klizač. Ako ga želite staviti odmah nakon pretrage, onda bi trebao biti ovdje na ovom popisu. Odaberite klizač s popisa stvorenih i spremite promjene.
Na mojoj testnoj stranici blok s desne strane izgleda ovako.
Dizajn ove stranice uključuje postavljanje u područje sadržaja i podnožje, donji dio stranice. Ako želim dodati blok ovdje, samo ću ga premjestiti na pravo mjesto.
Prikaz na stranici će se odmah promijeniti.
Zaključno, želio bih vam dati neke preporuke. Ako želite dobro zaraditi od oglašavanja, toplo vam savjetujem da ne štedite na dizajnu samih slika. Potrebno je puno vremena da jedna osoba shvati sve zamršenosti marketinga, pročita mnogo knjiga o vizualnom oglašavanju i usavrši svoje dizajnerske vještine.
Dok se ne budete mogli razvijati u ovom području, savjetujem vam da pribjegnete pomoći freelancera. To se može učiniti na web stranicama WebLancer.net I FL.ru . Prvi je malo jednostavniji, ali na drugom možete upoznati prave profesionalce.
Cijena ovisi o vašem budžetu, ali mislim da će vas slika koštati najviše 500 rubalja. Za ovaj iznos možete kupiti tri, ali u tom slučaju će biti manje ljudi voljnih ispuniti narudžbu, što znači da ćete dobiti lošiji rezultat.
Želim vam uspjeh i ako vam se svidio ovaj članak, pretplatite se na newsletter. Do sljedećeg puta.
Klizači su trenutno u modi, i to s dobrim razlogom! Svojoj stranici možete dodati fotografije, sadržaj, videozapise i još mnogo toga što će privući pozornost posjetitelja. U ovoj lekciji ćemo pogledati kako sami napravite prekrasan klizač sa slikama na temelju .
I dok postoji mnogo klizačkih dodataka (moj trenutačno najdraži), ne postoji dodatak za FlexSlider, klizač koji ima prečice na tipkovnici a koji radi s klizanjem na ekrani osjetljivi na dodir.
Preuzmite izvore
Prvo preuzmite izvore s kodom koji će nam uskoro trebati.
Ovako će izgledati sam klizač:
Korak 1. Priprema
Prvo što trebamo učiniti je instalirajte dodatak. Stvorite mapu /envato-flex-slider/, au njemu se nalazi datoteka pod nazivom ' envato-flex-slider.php’. Ovdje ćemo dodati sve potrebne informacije i kod za naš dodatak, počevši od bloka deklaracije dodatka:
Također želim instalirati nekoliko konstante za informacije, koji ću često koristiti u dodatku. Ispod deklaracije bloka, ali prije završne oznake php, dodajem sljedeće podatke:
Definiraj("EFS_PATH", WP_PLUGIN_URL . "/" . plugin_basename(dirname(__FILE__)) . "/"); define("EFS_NAME", "Envato FlexSlider"); define("EFS_VERSION", "1.0");
Kreirao sam tri konstante: put do dodatka, naziv dodatka I verzija dodatka, koji je neophodan za ažuriranja i za obavještavanje WordPress Plugin Directory o promjenama, ako je potrebno.
Imajte na umu da sve svoje konstante počinjem s " EFS". Isto ću učiniti s nazivima funkcija kako ne bih stvorio sukobe s drugim dodacima ili jezgrom WordPressa.
Sad kad smo završili s pripremom, dodajmo FlexSlider datoteke i kod.
Korak 2. Dodajte
Sada je vrijeme da dodamo važan dio: javascript I CSS za FlexSlider. To ćemo učiniti pomoću wp_enqueue_script I wp_enqueue_style Sam WordPress kako bi se izbjegli sukobi. Možete preuzeti FlexSlider Ovdje. Trebat će nam 2 datoteke: jquery.flexslider-min.js, i , u mapi /tema/.
Wp_enqueue_script("flexslider", EFS_PATH."jquery.flexslider-min.js", array("jquery")); wp_enqueue_style("flexslider_css", EFS_PATH."flexslider.css");
U oba retka svakoj skripti dajemo naziv, zatim povezujemo .js i .css datoteke. Imajte na umu da koristimo našu konstantu ESF_PATH. Moramo koristiti punu putanju, inače se datoteke neće ispravno povezati.
Također možete primijetiti da imamo treći parametar wp_enqueue_script. Ovo je niz drugih skripti o kojima ovisi naša skripta. U ovom slučaju postoji samo jedna takva skripta - ova JQuery. Tamo je puni popis skripte uključene u WordPress. Možete koristiti bilo koji od njih pomoću navedenog niza ovisnosti.
Sljedeće što želimo učiniti je omogućiti stvarni JavaScript, što će omogućiti da skripta radi. To ćemo učiniti pomoću vlastite funkcije i Akcijski-funkcije WordPress.
Funkcija efs_script() ( print " "; ) add_action("wp_head", "efs_script");
Ovdje je važna linija add_action("wp_head", "efs_script"); koji će voditi našu funkciju efs_script() kada se pozove wp_head. Naša funkcija jednostavno ispisuje Javascript potreban da bi FlexSlide radio svoj posao.
Možda ćete primijetiti da koristim ' JQuery' umjesto tradicionalnog ' $ ', koji se obično koristi u JQuery skriptama. To radim kako naša skripta ne bi bila u sukobu s drugim JavaScript bibliotekama, na primjer, Skriptarno.
Na kraju samo kopirajte mapu /tema/ u svoju mapu /envato-flex-slider/.
Korak 3: Kratki kod i oznaka predloška
Sljedeće ćemo stvoriti naše kratki kod(kratki kod, kratki kod) i oznaka predloška. Kratki kod će omogućiti korisnicima da umetnu klizač na bilo koju stranicu ili post. Za uvodni vodič za kratke kodove, možete pogledati Ovdje.
Oznaka predloška omogućit će programerima tema da ugrade klizač izravno u svoje teme. Kao programer tema, smatram da je iznimno važno stvoriti oboje i učiniti ih lako dostupnima u dokumentaciji. Nikad ne znate tko će koristiti vaš dodatak.
Funkcija efs_get_slider())( //Popunit ćemo ovo kasnije. ) /**dodajte kratki kod za klizač- za upotrebu u uređivaču**/ funkcija efs_insert_slider($atts, $content=null)( $slider= efs_get_slider ( ); return $slider; ) add_shortcode("ef_slider", "efs_insert_slider"); /**dodaj oznaku predloška- za upotrebu u temama**/ funkcija efs_slider())( print efs_get_slider(); )
Sada ovaj kod izgleda prilično jednostavno. Za kratki kod nazivamo našu opću funkciju efs_get_slider() i vratiti rezultat. Za oznaku predloška ispisujemo rezultat. Namjerno sam propustio implementaciju efs_get_slider(), budući da još nismo ustanovili odakle ćemo uzeti slike.
Kako bi dodavanje bilo kojeg broja slika na klizač bilo jednostavno za korisnike, izradit ćemo zasebnu vrstu posta.
Korak 4: Prilagođena vrsta objave slike klizača
Prvo što ćemo napraviti je stvoriti novu datoteku pod nazivom ' slider-img-type.php', gdje će biti sav naš kod za prilagođenu vrstu posta. Prvo ćemo napraviti neke pripreme kao što smo učinili za dodatak.
Kao što vidite, sve što sam do sada napravio je nekoliko konstante(što će biti vrlo zgodno za složenije prilagođene vrste postova) i dodana podrška za sličice za naš novi tip.
Jedino što ćemo ovdje učiniti je registracija nova prilagođena vrsta posta. Više o prilagođenim vrstama postova možete pronaći u praktična izrada odličan portfelj. Neposredno prije zatvaranja php oznaku, dodat ćemo sljedeći kod:
Funkcija efs_register() ( $args = array("label" => __(CPT_NAME), "singular_label" => __(CPT_SINGLE), "public" => true, "show_ui" => true, "capability_type" => " post", "hierarchical" => false, "rewrite" => true, "supports" => array("title", "editor", "thumbnail")); register_post_type(CPT_TYPE, $args); ) add_action(" init", "efs_register");
Stvorili smo funkciju za registraciju prilagođene vrste posta koja koristi blokove naslova, uređivanja i minijatura. Zatim smo dodali Akcija WordPress za pozivanje ove funkcije odmah nakon pokretanja WordPressa.
Svi! Posljednje što trebamo učiniti je uključiti našu novu datoteku dodavanjem require_once("slider-img-type.php"); V envato-flex-slider.php. Dodao sam ga točno iznad poziva našim skriptama.
Sada kada znamo kako ugraditi slike u klizač, vratimo se i ispunimo našu opću funkciju klizača.
Korak 5. Generacija klizača
Povratak na oglas efs_get_slider() i zamijeniti //Ovo ćemo ispuniti kasnije na sljedeće:
- "; $efs_query= "post_type=slider-image"; query_posts($efs_query); if (have_posts()) : while (have_posts()) : the_post(); $img= get_the_post_thumbnail($post->ID, "large "); $klizač.="
- ".$img." "; endwhile; endif; wp_reset_query(); $slider.= "
"; povratak $klizač;
Prva dva retka potrebna su zbog načina na koji funkcionira. Trebat će neuređeni popis pod nazivom " dijapozitivi’ unutar sloja ‘’ i primijenit će ga na njega javascript animacija. U našem CSS također definiran i ul.tobogani.
Nakon toga stvaramo WordPress petlju, prikupljajući sve postove poput klizač-slika(naša prilagođena vrsta posta) i prikazati veću verziju slike.
Nekoliko napomena
- Uz našu novu prilagođenu vrstu posta, možemo dodati naslov i sliku, a dodali smo i blok za uređivanje posta. Iako trenutno koristimo samo sliku (i naslov, za atribut alt), uključili smo i uređivač za slučaj da, na primjer, u budućnosti želimo podržati postavljanje naslova na klizač.
- Dodavanje nove objave sa lajkom Slika klizača, moramo učitati sličicu da bi klizač radio. Ne može samo uzeti datoteku priloženu postu.
Korak 6: Testiranje
Sada je vrijeme za testiranje! Nakon što dodate neke slike svojoj prilagođenoj vrsti posta, stvorite nova stranica(Upravo sam nazvao svoj Slider) i dodajte mu naš novostvoreni kratki kod. Spremite stranicu i pogledajte je. Trebali biste vidjeti nešto poput ovoga:
Zaključak
To je sve. Naravno, postoji još nekoliko stvari koje bi se mogle poboljšati u dodatku. Na primjer, dodavanje podrške za opcije napredne prilagodbe koje FlexSlider može ponuditi ili dodavanje podrške za naslove.
Kao što je rečeno, ovaj vam dodatak daje sve što vam je potrebno za stvaranje stvarno jednostavne verzije za WordPress, kojom se lako upravlja i koju je lako ugraditi!
Ako niste sigurni oko lijepljenja ili dodavanja datoteka, možete preuzeti izvore s poveznice na vrhu vodiča. Sretno!
Klizač je jedan od onih elemenata koje vidite na gotovo svakoj web stranici. Lako ih je implementirati i gotovo uvijek izgledaju sjajno ako koristite uvjerljive slike. Osim toga, možete raditi zabavne stvari s WordPress klizačem, poput dodavanja efekata prijelaza.
Međutim, klizači nisu značajka WordPressa, pa će vam trebati dodaci za njihovo dodavanje. U ovom članku ćemo vas naučiti kako to učiniti u samo tri koraka:
- Instalirajte WordPress klizač i dodajte medije koje želite koristiti.
- Prilagodite svoj klizač za WordPress.
- Postavite novi klizač na mjesto gdje želite da se pojavi.
Nakon što to učinite, također ćemo vam predstaviti neke od najboljih WordPress klizačkih dodataka kako biste znali koje su vam mogućnosti. Idemo na to!
Zašto vam je potreban klizač za WordPress?
Klizači su jednostavne značajke, ali ako odaberete prave slike mogu izgledati nevjerojatno.
Klizač (ili karusel za WordPress) zapravo je prilično jednostavna značajka. Klizač je zbirka slika koje rotirate pomoću gumba ili čekajući automatski prijelaz. Drugim riječima, to je dijaprojekcija slika.
Međutim, s klizačem možete učiniti mnogo više. Također mu možete dodati zabavne efekte prijelaza, promijeniti tekst, stvoriti jedinstvene gumbe i još mnogo toga. Ukratko, postoji mnogo načina da prijeđete s dosadnog, običnog klizača na nešto po čemu se vaša web stranica zaista ističe.
Što se tiče Kada Ima smisla koristiti klizače, to ovisi o vašoj web stranici i ciljevima. Mnoga web-mjesta koriste takozvane "hero" klizače, koji se postavljaju na vrh web-stranice kao alternativno zaglavlje. Možete vidjeti primjer na djelu na početku ovog odjeljka.
Osim ovih klizača, također možete objavljivati recenzije kupaca, poput ove:
U konačnici, klizači su izvrstan dodatak gotovo svakoj web stranici. Međutim, najbolje ih je koristiti u praktične svrhe, kao što je prikazivanje puno slika u malom prostoru, a ne samo kao ukras. Oni također dodaju malo lijepe interaktivnosti vašoj stranici, što je sjajan način za povećanje angažmana korisnika.
Kako izraditi klizač za WordPress (u 3 koraka)
U sljedećih nekoliko odjeljaka pokazat ćemo vam kako izraditi klizač za WordPress koristeći Master Slider. Odabrali smo ovaj dodatak jer je jednostavan za korištenje, nudi mnogo cool značajki i omogućuje vam da instalirate onoliko klizača koliko želite.
Nakon toga, predstavit ćemo vam neke WordPressove dodatke za vrtuljak koje možete koristiti i razgovarati više o samom Master Slideru. U međuvremenu, instalirajte Master Slider da biste započeli!
Korak 1: Postavite svoj WordPress klizač i dodajte medije koje želite koristiti
Nakon što aktivirate dodatak Glavni klizač, pronaći ćete novu karticu Master Slider na svojoj ploči. Tamo ćete vidjeti popis svih svojih WordPress klizača (koji bi trebao biti prazan trenutno). Samo naprijed i pritisnite gumb Stvorite novi klizač:
Dodatak će vas pitati koju vrstu klizača želite instalirati. Možete birati između osam opcija, uključujući horizontalne klizače sa i bez minijatura:
U ovom vodiču ćemo postaviti jednostavan prilagođeni klizač kako biste mogli vidjeti kako cijeli proces funkcionira. Dakle, odaberite ovu opciju i kliknite gumb STVORITI.
Dodatak će vas zatim poslati na karticu SLAJDOVI vaš novi element. Ovdje možete dodati sve slike koje želite uključiti u svoj klizač koristeći WordPress Media Uploader ili odabrati postojeće slike iz svoje biblioteke:
Nakon dodavanja nekoliko fotografija, tab SLAJDOVI trebao bi izgledati otprilike ovako:
Vaše su slike spremne za rad. Držite ovu karticu otvorenom i prijeđite na sljedeći korak.
Korak 2: Prilagodite svoj WordPress klizač
Zatim možete prilagoditi način rada WordPress klizača. Da biste to učinili, idite na odjeljak Pozadina u kartici SLAJDOVI. Za svaki od svojih slajdova možete prilagoditi jedinstvenu pozadinu koristeći odabranu sliku i bilo koju boju i tekst koji želite:
Upravo sada ćemo postaviti jednostavan WordPress klizač koristeći sve slike koje smo učitali. Ako se pomaknete prema dolje, vidjet ćete kako će svaka slika izgledati na klizaču. Tu je i gumb Pregled, koje možete odabrati da vidite kako je oblikovan vaš WordPress klizač:
Kada završite ovdje morate otići na karticu KONTROLE KLIZAČA. Tamo možete odabrati koju vrstu kontrola će vaš klizač koristiti. Poziva se zadana postavka strelice, a vjerojatno možete pogoditi kako izgledaju:
Naravno, možete odabrati bilo koju shemu upravljanja koju želite. Zatim morate otići na karticu POSTAVKE KLIZAČA, gdje možete dodatno prilagoditi svoj WordPress klizač.
Na primjer, pronaći ćete opcije koje vam omogućuju podešavanje širine i visine klizača. Možete postaviti naziv koji će se pojaviti na kartici Glavni klizač:
Ako se pomaknete malo dalje, također možete dodati jednostavne efekte prijelaza na klizač. Imajte na umu da besplatna verzija Master Slidera uključuje samo dva efekta: Normalan I Uvenuti. Preporučujemo prvu opciju jer nudi uredan prijelaz za vaš WordPress klizač:
Na kraju, također se možete igrati sa skinovima skrolanjem do odjeljka Izgled. Ovo su predlošci klizača koji vam omogućuju promjenu izgleda.
Pokazali smo zadanu masku u našim primjerima do sada, ali postoje i druge izvrsne opcije s kojima se možete igrati. Možete čak ući u WordPress slajdere ako vam se sviđaju ovakve stvari:
Nakon što ste završili s prilagodbom stila WordPress klizača, kliknite na gumb Spremi promjene i prijeđite na posljednji korak.
Korak 3: Postavite novi klizač na mjesto gdje želite da se pojavi
Sada je vaš WordPress klizač spreman, sve što trebate učiniti je postaviti ga na svoju web stranicu. Proces je jednostavan jer dodatak Master Slider generira kratki kod za svaki klizač koji izradite.
Da biste pronašli ove kratke kodove, idite na karticu Glavni klizač na alatnoj traci i pogledajte ispod stupca Kratki kod:
Kopirajte kratki kod za klizač koji želite postaviti na svoje web mjesto, a zatim otvorite uređivač stranice ili objave na koju ga želite postaviti. Jednostavno zalijepite kratki kod na mjesto gdje želite da se vaš WordPress klizač pojavi, kao u primjeru u nastavku:
Ako provjerite svoju stranicu, trebala bi izgledati otprilike ovako u sučelju:
Imajte na umu da pomoću dodatka Master Slider možete stvoriti onoliko klizača koliko želite. Možete čak i izbrisati one koje više ne želite koristiti na kartici Glavni klizač pritiskom na tipku Izbrisati pored bilo kojeg od njih:
Sada možete početi stvarati najbolji WordPress klizač za svoju web stranicu! Međutim, prije nego što završimo, pogledajmo nekoliko alternativnih opcija dodataka.
5 najboljih WordPress Slider dodataka
Već smo vidjeli jedan od najboljih WordPress slider dodataka na djelu. No, još vas nismo imali priliku upoznati sa svim njegovim funkcijama. Učinimo to sada i onda vam pokažemo neka druga najbolja rješenja koja možete upotrijebiti ako vam Master Slider ne odgovara.
1. Glavni klizač
Već ste upoznati s Master Sliderom, pa krenimo odmah na ono što možda niste znali o dodatku. Uz mogućnost stvaranja WordPress klizača, ovaj dodatak također pruža potpuni odziv. Radi s navigacijom osjetljivom na dodir, stoga je idealan za mobilne web stranice i napravljen je za rad s tražilicama.
Glavne značajke:
- Napravite onoliko klizača koliko želite.
- Dodajte klizače na svoje WordPress stranice pomoću kratkih kodova.
- Prilagodite stil klizača i efekte prijelaza.
- Pobrinite se da vaši klizači u potpunosti reagiraju bez dodatnih prilagodbi.
- Optimizirajte sadržaj svojih klizača za tražilice.
Cijena: Možete isprobati besplatnu verziju Master Slidera ili odabrati punu premium verziju.
2. Pametni klizač 3
Smart Slider 3 nudi mnoge iste značajke kao i Master Slider. Međutim, također ima live drag-and-drop editor koji možete koristiti za stvaranje klizača. Ako ste tip osobe koja voli prilagođavati elemente svoje web-lokacije pomoću alata za izradu stranica, a ne popisa za prilagodbu, ovaj bi dodatak mogao biti izvrsna opcija.
Osim ove značajke, Smart Slider 3 također osigurava da su vaši klizači spremni za korištenje prema zadanim postavkama čak i bez dodatnih postavki. Dodatno, uključuje nekoliko predložaka koje možete koristiti za brzu prilagodbu svojih motora.
Glavne značajke:
- Stvorite WordPress klizače pomoću uređivača povuci i ispusti.
- Upotrijebite programe za izradu stranica treće strane kao što su Divi i Beaver Builder zajedno s dodatkom.
- Postavite klizače na zadane.
- Odaberite između nekoliko predložaka kako biste brzo pokrenuli klizače.
- Dodajte neke fontove sadržaju svojih slajdova.
Cijena: Smart Slider 3 nudi besplatnu osnovnu verziju kao i nekoliko plaćenih razina.
3.MetaSlider
Kada je riječ o WordPress slider dodacima, malo ih je popularnih kao MetaSlider. S gotovo 1.000.000 aktivnih instalacija u vrijeme objavljivanja ovog članka, nalazi se na vrhu hranidbenog lanca dodataka.
Iako MetaSlider nema glatko sučelje kao ostali dodaci koje smo dosad pregledali, postiže rezultate kada je riječ o jednostavnosti korištenja. Dodavanje slajdova je jednostavno, kao i njihovo preuređivanje, dodavanje teksta, pa čak i optimiziranje njihovih metapodataka. S drugim dodacima, sav ovaj posao može potrajati, ali MetaSlider ga olakšava s jednostavnim i intuitivnim sučeljem.
Glavne značajke:
- Instalirajte nekoliko WordPress klizača.
- Brzo dodajte slajdove i promijenite njihov redoslijed.
- Dodajte tekst svojim slajdovima i izvršite optimizaciju za tražilice (SEO).
- Prilagodite efekte prijelaza svojih klizača.
- Dodajte klizače na bilo koju stranicu pomoću kratkih kodova.
Cijena: MetaSlider je besplatan u direktoriju dodataka za WordPress ili možete dobiti premium licencu s nekoliko dodatnih značajki.
4. Slider by WD
Ako ste tip osobe koja voli prilagoditi svaki detalj vaše web stranice, onda bi Slider by WD mogao biti pravi izbor za vas. Ima mnogo značajki koje ga čine drugačijim od ostalih klizačkih dodataka, poput podrške za više slajdova, responzivnog dizajna i više.
Ono što dodatak zaista blista je u tome koliko prilagodbi možete napraviti za svaki od svojih slajdova. Na primjer, možete se igrati s njihovim veličinama, bojama i efektima prijelaza. Možete čak uvoziti i izvoziti klizače kako biste ih kopirali s jednog mjesta na drugo. Naposljetku, dodatak uključuje mogućnost stavljanja vodenog žiga na vaše slike, što može biti korisno ako trebate zaštititi svoj izvorni rad.
Glavne značajke:
- Instalirajte WordPress mobilne slajdere.
- Pristupite širokom rasponu postavki za svoje klizače.
- Vodeni žig na slajdovima kako biste ih zaštitili od krađe.
- Uvoz i izvoz klizača kako biste ih mogli kopirati s jednog mjesta na drugo.
Cijena: Besplatna verzija Slider WD je pouzdan alat, iako možete nadograditi i na premium licencu.
5. Povucite bilo što
Do sada su se svi dodaci o kojima smo govorili prvenstveno fokusirali na slike. Međutim, kao što smo ranije spomenuli, WordPress klizače možete koristiti i u druge svrhe. Možete prikazati recenzije kupaca i više.
Dodatak Slide Anything omogućuje vam postavljanje klizača koristeći gotovo bilo koju vrstu sadržaja koju želite. Uz slike i tekst, također vam omogućuje korištenje HTML-a, pa čak i kratkih kodova, koji mogu stvoriti zabavne kombinacije. Osim toga, ovaj dodatak uključuje neke zabavne značajke poput beskonačnog pomicanja (tako da se vaš klizač petlja). Ovaj dodatak također ima čitavu kolekciju cool prijelaznih efekata i još mnogo toga.
Glavne značajke:
- Postavite klizače koristeći bilo koju vrstu sadržaja koju želite.
- Odaberite između nekoliko efekata prijelaza za svoje slajdove.
- Koristite kratke kodove u svojim klizačima.
Cijena: Možete isprobati Slide Anything Pro besplatno ili dobiti pristup nekoliko dodatnih značajki (kao što su skočni prozori) s premium verzijom.
Zaključak
Postoji razlog zašto su slajderi toliko popularni. Sve što trebate učiniti je odabrati nekoliko slika, dodati efekt prijelaza ili dva, i možda uključiti malo teksta, i imate element koji izgleda sjajno bilo gdje na vašoj web stranici (osobito kao zaglavlje). Uz WordPress možete jednostavno prilagoditi svoj klizač koristeći svoj omiljeni dodatak. Skloni smo Master Slideru zbog bogatstva njegovih značajki, ali postoje mnoge druge sjajne opcije.
Imate li već iskustva s prilagodbom WordPress slajdera? Recite nam o tome u odjeljku za komentare u nastavku!