Pershendetje te gjitheve!
Më parë ju tregova se si të krijoni një spoiler për një blog WordPress duke përdorur shtesën Advanced Spoiler, mund ta lexoni këtu në këtë artikull
Për fillestarët, dua të shpjegoj se çfarë është një spoiler në sit dhe për çfarë shërben. Një spoiler është një bllok me tekst ose përmbajtje tjetër të fshehur brenda. Spoiler përmban një titull, duke klikuar mbi të cilin hapet përmbajtja e fshehur më parë, këtu shembull ilustrues spoiler punon në blogun tim:
Klikoni për të parë përmbajtjen e spoilerit
urime! Ju keni hapur spoilerin 🙂
Për perceptim më të lehtë të informacionit në faqe, veçanërisht aty ku ka shumë dhe duhet të strukturohet, është e përshtatshme të përdorni një spoiler.
Meqenëse ne do të personalizojmë shfaqjen e spoilerit në faqe pa një shtesë, do t'ju duhet të modifikoni skedarët Temat e WordPress blog. Ruaj rezervë skedarët përpara redaktimit.
Puna e njëpasnjëshme:
- Hapni skedarët header.php, footer.php dhe function.php dhe kontrolloni nëse ka ndonjë kod lidhjeje të bibliotekës jquery atje. Kombinimi i shtypit tastet Ctrl+ F dhe futni jquery.min.js në shiritin e kërkimit. Nëse asgjë nuk gjendet në ndonjë nga skedarët, atëherë në skedarin header.php përpara rreshtit shtoni kodin e mëposhtëm
- Tani shtoni këtë kod në skedarin footer.php përpara etiketës, gjë që e bën spoilerin të funksionojë:
- Ne i shkruajmë stilet e dizajnit spoiler në skedarin style.css. Ju mund të ndryshoni skemën e ngjyrave sipas gjykimit tuaj.
Këtu është një shërbim i bukur për përputhjen e ngjyrave - lidhje .
Kjo plotëson cilësimin e spoilerit. Tani në modalitetin "Tekst" në panelin e administratorit të blogut, shtoni këtë kod:
Si ju pëlqen ky zbatim i daljes spoiler në çdo faqe blogu? E vështirë? Shkruani komentet tuaja në komente.
Spoiler (nga anglishtja. prishës- "ndërprerës i rrjedhës") është një gjë kaq e dobishme për fshehjen e sasive të mëdha të tekstit ose përmbajtjes tjetër në sajt. Për shembull, një film mund të publikohet në faqen tuaj. Ju mund të bëni për të Përshkrim i shkurtër dhe pamjet e ekranit, por jo të gjithë do të jenë të interesuar për këtë informacion - është më mirë ta fshehni atë në spoiler. Ose një listë këngësh të publikuara album muzikor ju mund ta fshehni atë në spoiler ... Epo, e kuptoni idenë. Në këtë artikull, unë do të jap një pjesë të kodit për të zbatuar një spoiler pa shtojca në çdo motor. Dhe për WP do të ketë një vegël shtesë.
Kështu që juaji tekst i rëndë ose ndonjë material tjetër (le ta quajmë "përmbajtje të fshehur" në vijim) përshtatet mirë në spoiler, ai do të duhet të stilohet si ky:
Artikulli juaj..
"Teksti i fshehur (kliko për ta zgjeruar)" - ky është titulli i spoilerit, kur mbyllet, vetëm ai do të jetë i dukshëm. Natyrisht, shkrimi i një HTML të tillë çdo herë është i plasaritur. Plus, ky është vetëm fillimi, jo i gjithë kodi. Prisni pak - do të jetë më argëtuese.
Do të ishte shumë më e përshtatshme për ne të përdorim kodin e mëposhtëm:
Kjo është përmbajtje e fshehur
Dhe është e mundur. Nëse nuk keni WordPress, atëherë shpresoj t'i njihni mirë motorin tuaj dhe bazat e programimit, përndryshe integrimi i kodit tim do t'ju shkaktojë vështirësi.
Dhe përdoruesit e lumtur të WP mund të shtojnë me siguri tema në skedar funksioni.php kodin e mëposhtëm (shpresoj ta keni parasysh kur redaktoni skedarët WP):
Funksioni site_spoiler ($ atts, $ përmbajtje) (if (! Isset ($ atts ["title"])) $ sp_title = "(! LANG: Tekst i fshehur (kliko për ta zgjeruar)"; else $sp_title = $atts["title"]; return " !}
Tani mund të përdorni kodin e shkurtër në postimet tuaja ... Nëse keni jo WP, por ju dëshironi të përdorni kodin e shkurtër, ky kod PHP do t'ju ndihmojë:
$ përmbajtje = str_replace ("", "
Por me mend vetë se çfarë është përmbajtja $ dhe ku ta fusni, sepse nuk e di se çfarë lloj motori keni.
Dhe kjo nuk është e gjitha. Në shabllonin për shfaqjen e faqeve të faqes tuaj (për WP, për shembull, header.php) duhet të futni këtë kod JS:
Ky është lëvizësi i prishësit tonë. Siç mund ta shihni, kërkon që korniza jQuery JS të funksionojë (në WP përfshihet automatikisht). Megjithatë, nëse shihni përmbajtjen e fshehur menjëherë dhe asgjë nuk ndodh kur klikoni në kokën e spoilerit, kjo do të thotë që mund të mos e keni aktivizuar jQuery. Pastaj pyesni motor kërkimi "Si të lidhni jquery" ose shtoni këtë kod përpara kodit të mësipërm:
Dhe prekja e fundit është të përshkruani stilet e prishjes. Përdoruesit e WP redaktojnë skedarin e temës stil.css duke shtuar linjat e mëposhtme në të:
mbështjellje spoiler (sfondi: #eee; kufiri: 1px solid #aaa; rreze kufiri: 5px; diferencë: 12px 6px;) .kokë spoiler (mbushje: 2px 18px; kursori: treguesi; sfondi: url ("imazhe / spoiler -icon1.png ") pa përsëritje 3px 9px) .i shpalosur (sfondi: url ("imazhe / spoiler-icon2.png ") pa përsëritje 3px 9px) .spoiler-body (diferencë: 5px; shfaqja: asnjë;)
Mund të organizoheni lehtësisht blloqe të fshehura me përmbajtjen e lëshuar në klikim.
Dakord, ndonjëherë është më mirë të bëhet bllok i vogël tekst i fshehur me një etiketë të pastër të klikueshme, fshihuni nën të, për shembull: rregullat e komentimit, kodi html i një butoni ose baneri, etj. Ata që kanë vërtet nevojë për të - klikoni në mbishkrimin e theksuar dhe shihni gjithçka. Nuk ka nevojë të mbani të dhëna të caktuara në pamje të plotë të të gjithëve.
Ndoshta më shembull i famshëm duke përdorur tekst të fshehur, këta janë "spoiler" të njohur në forume të ndryshme.
Teksti i fshehur, mund të organizohet me duke përdorur jQuery, dhe me radhë CSS e pastër, secila teknikë ka avantazhe dhe disavantazhe.
Sot dua të demonstroj një javascript shumë të vogël, me ndihmën e të cilit është shumë e lehtë të "fshehesh nën prerje", pothuajse çdo informacion në faqen time.
Dhe kështu, ne kemi një lloj teksti, duhet të zgjedhim ose një fjalë të vetme, term ose një frazë të tërë dhe t'i bëjmë ato të klikueshme. Për ta bërë këtë, mjafton të "mbyllni" fjalën (frazën) që na nevojitet me një etiketë , si në shembull, ose me lidhje duke përdorur etiketën ... Shumë njerëz e përdorin etiketën më shpesh , ketu edhe kursorin edhe perzgjedhjen si parazgjedhje, por une mendoj se po, pse na duhen lidhje qe nuk te cojne askund, dhe "vizatojme" kursorin dhe zgjedhim ndonje element, mund te perdoresh lehte css. Pra, brenda tekstit, ne përdorim me guxim :
| < span class = "tt" onclick= "view("t1"); return false" >tekst teksti tekst |
tekst teksti tekst
Gjithçka është shumë e thjeshtë këtu, ne përdorim class = "tt" për të hartuar një frazë (fjalë) në css, ku vendosim kursorin, theksojmë, nënvizojmë nëse është e nevojshme, etj., duke përdorur onclick = "view (" t1 "); kthej false" ne lidhemi përmes identifikuesit t1 me js të ekzekutueshëm dhe me bllokun me përmbajtje të fshehur për momentin.
Në varësi të numrit të blloqeve të fshehura që do të përdorni në një faqe, duhet të ndryshoni numrin serial të ID-së, d.m.th. t1, t3, t3 dhe kështu me radhë ...
Për tekstin e fshehur, mund të përdorni një enë div, ose, si në shembull, të njëjtin etiketë , gjëja kryesore është ta lidhni atë me një klasë me css dhe mos harroni të specifikoni saktë identifikuesin:
Siç e përmenda më lart, për të nisur "spoilerin" tonë, për t'u hapur dhe fshehur me klikim, duhet një javascript i vogël i vendosur direkt në trupin e faqes, më mirë përpara etiketës.
