Zdravo svima!
Ranije sam vam pokazao kako da napravite spojler za WordPress blog pomoću dodatka Advanced Spoiler, možete pročitati ovaj članak
Za početnike, želim da objasnim šta je spojler na sajtu i čemu služi. Spojler je blok unutar kojeg je skriven tekst ili drugi sadržaj. Spojler sadrži naslov, klikom na koji otvara prethodno skriveni sadržaj, ovdje dobar primjer spojler radi nije moj blog:
Kliknite da vidite sadržaj spojlera
Čestitamo! Otvorili ste spojler 🙂
Za lakšu percepciju informacija na stranici, posebno tamo gdje ih ima puno i treba biti strukturirana, zgodno je koristiti spojler.
Pošto ćemo prilagoditi izlaz spojlera na sajtu bez dodatka, moraćete da uredite fajlove WordPress teme blog. Sačuvaj backup datoteke prije uređivanja.
Sekvencijski rad:
- Otvorite datoteke header.php, footer.php i function.php i provjerite da li postoji kod za povezivanje jquery biblioteke. Pritisnite kombinaciju Ctrl tipke+ F i upišite jquery.min.js u traku za pretraživanje. Ako ništa nije pronađeno ni u jednoj od datoteka, onda u datoteci header.php do reda dodajte sljedeći kod
- Sada, u datoteci footer.php, prije oznake, dodajte ovaj kod, koji osigurava da spojler radi:
- Stilovi spojlera su zapisani u datoteci style.css. Šemu boja možete promijeniti po vlastitom nahođenju.
Evo dobre usluge usklađivanja boja - veza .
Ovo završava podešavanje spojlera. Sada u "Text" modu na administrativnom panelu bloga, dodajte ovaj kod:
Kako vam se sviđa ova implementacija spojlera na bilo kojoj stranici bloga? Tesko? Napišite svoje povratne informacije u komentarima.
Spoiler (sa engleskog. spojler- "prekidač protoka") - ovo je tako zgodna stvar za skrivanje velike količine teksta ili drugog sadržaja na web stranici. Na primjer, film bi mogao biti objavljen na vašoj web stranici. možeš da mu uradiš Kratki opis i snimke ekrana, ali neće svi biti zainteresirani za ove informacije - bolje ih je sakriti u spojleru. Ili spisak objavljenih pjesama muzički album može se sakriti u spojleru... Pa, shvatili ste. U ovom članku ću dati dio koda za implementaciju spojlera bez dodataka na bilo koji motor. A za WP će biti i dodatni losion.
To your masovni tekst ili drugi materijal (ajde, nastavit ću ga zvati "skriveni sadržaj") dobro se uklapa u spojler, morat će biti formatiran ovako:
Vaš članak..
"Skriveni tekst (kliknite za proširenje)" je naslov spojlera, samo što će biti vidljiv kada se zatvori. Naravno, takav HTML se svaki put pokvari. Osim toga, ovo je samo početak, a ne cijeli kod. Sačekaj malo - biće zabavnije.
Bilo bi nam mnogo zgodnije da koristimo sljedeći kod:
Ovo je skriveni sadržaj.
I to je moguće. Ako ne koristite WordPress, nadam se da dobro poznajete svoj motor i osnovno programiranje, inače će vam integracija mog koda uzrokovati poteškoće.
I sretni korisnici WP-a mogu bezbedno dodati u datoteku teme functions.php sljedeći kod (nadam se da će vam smetati uređivanje WP fajlova):
Funkcija site_spoiler ($atts, $content) ( if (!isset($atts["title"])) $sp_title = "(!LANG:Skriveni tekst (kliknite za proširenje)"; else $sp_title = $atts["title"]; return " !}
Sada možete koristiti kratki kod u svojim objavama . Ako imate ne WP, ali želite da koristite kratki kod, ovaj PHP kod će vam pomoći:
$content = str_replace("", "
Ali, pogodite sami šta je $content i gde da ga ubacite, jer ne znam kakav motor imate.
I to nije sve. U predložak za prikaz stranica Vaše web stranice (za WP, npr. header.php) potrebno je da ubacite ovaj JS kod:
Ovo je motor našeg spojlera. Kao što vidite, za rad je potreban jQuery JS framework (u WP-u se povezuje automatski). Međutim, ako odmah vidite skriveni sadržaj, a ništa se ne dogodi kada kliknete na naslov spojlera, onda možda nemate jQuery povezan. Onda pitaj pretraživač kako povezati jquery ili dodajte ovaj kod ispred gornjeg koda:
I završni dodir - propisujemo stilove spojlera. Korisnici WP-a uređuju fajl teme style.css dodavanjem sljedećih redova u to:
Spoiler-wrap (pozadina: #eee; granica: 1px čvrsta #aaa; granica-radijus: 5px; margina: 12px 6px; ) .spoiler-head ( padding: 2px 18px; kursor: pointer; pozadina: url("images/spoiler -icon1.png") no-repeat 3px 9px ) .unfolded (pozadina: url("images/spoiler-icon2.png") no-repeat 3px 9px) .spoiler-body (margina: 5px; display: none; )
Možete jednostavno organizirati skriveni blokovi sa sadržajem na koji se može kliknuti.
Slažem se, ponekad je to bolje učiniti mali blok skriveni tekst sa urednim natpisom na koji se može kliknuti, sakriti ispod njega, na primjer: pravila komentiranja, html kod gumba ili banera itd. Kome je zaista potrebno kliknut će na istaknuti natpis i vidjeti sve. Nema potrebe stalno držati određene podatke pred svima.
Vjerovatno najviše poznati primjer korištenje skrivenog teksta, to su dobro poznati "spojleri" na raznim forumima.
Skriveni tekst, može se dogovoriti jQuery, i dalje čisti CSS Svaka tehnika ima i prednosti i nedostatke.
Danas želim da demonstriram veoma sićušni javascript, pomoću kojeg je vrlo lako „sakriti ispod reza“ skoro svaku informaciju na mom sajtu.
I tako, imamo neki tekst, treba da istaknemo ili jednu reč, pojam ili celu frazu i učinimo da ih se može kliknuti. Da biste to učinili, dovoljno je "priložiti" riječ (frazu) koja nam je potrebna uz oznaku , kao u primjeru, ili kao veza pomoću oznake . Mnogi češće koriste oznaku , ovde je kursor registrovan, i podrazumevana selekcija, ali mislim da jeste, zasto su nam potrebni linkovi koji ne vode nigde, ali mozete lako "nacrtati" kursor i izabrati bilo koji element koristeći css. Dakle, unutar teksta slobodno koristite :
| < span class = "tt" onclick= "view("t1"); return false" >tekst tekst tekst |
tekst tekst tekst
Ovdje je sve vrlo jednostavno, koristimo class="tt" da dizajniramo frazu (riječ) u css-u, gdje lebdimo kursorom, ističemo, podvlačimo ako je potrebno, itd., koristeći onclick="view("t1"); return false" povezujemo se preko identifikatora t1 za izvršni js, i za blok sa sadržajem koji je trenutno skriven.
U zavisnosti od toga koliko ćete skrivenih blokova koristiti na jednoj stranici, potrebno je promijeniti id serijski broj, tj. t1, t3, t3 i tako dalje...
Za skriveni tekst možete koristiti div-kontejner ili, kao u primjeru, istu oznaku , glavna stvar je da ga povežete s klasom sa css-om i ne zaboravite ispravno navesti identifikator:
Kao što sam već spomenuo, da bismo pokrenuli naš "spoiler", otvorili i sakrili na klik, potreban vam je mali javascript postavljen direktno u tijelo stranice, po mogućnosti prije oznake
