Ciao a tutti!
Prima ti ho mostrato come creare uno spoiler per un blog WordPress usando il plugin Advanced Spoiler, puoi leggerlo qui in questo articolo
Per i principianti, voglio spiegare cos'è uno spoiler sul sito e a cosa serve. Uno spoiler è un blocco con testo o altri contenuti nascosti all'interno. Lo spoiler contiene un titolo, cliccando sul quale si apre il contenuto precedentemente nascosto, qui esempio illustrativo spoiler funziona sul mio blog:
Clicca per vedere il contenuto dello spoiler
Congratulazioni! Hai aperto lo spoiler 🙂
Per una più facile percezione delle informazioni sulla pagina, soprattutto dove ce ne sono molte e dovrebbero essere strutturate, è conveniente utilizzare uno spoiler.
Dal momento che personalizzeremo la visualizzazione dello spoiler sul sito senza un plug-in, dovrai modificare i file Temi WordPress blog. Salva backup file prima della modifica.
Lavoro sequenziale:
- Apri i file header.php, footer.php e function.php e controlla se è presente un codice di connessione alla libreria jquery. Premere combinazione Tasti Ctrl+ F e inserisci jquery.min.js nella barra di ricerca. Se non viene trovato nulla in nessuno dei file, nel file header.php prima della riga aggiungi il seguente codice
- Ora aggiungi questo codice al file footer.php prima del tag, che fa funzionare lo spoiler:
- Scriviamo gli stili di design dello spoiler nel file style.css. Puoi cambiare la combinazione di colori a tua discrezione.
Ecco un bel servizio di abbinamento dei colori - collegamento .
Questo completa l'impostazione dello spoiler. Ora nella modalità "Testo" nel pannello di amministrazione del blog, aggiungi questo codice:
Ti piace questa implementazione dell'output dello spoiler su qualsiasi pagina del blog? Duro? Scrivi il tuo feedback nei commenti.
Spoiler (dall'inglese. spoiler- "interruttore di flusso") è una cosa così utile per nascondere grandi quantità di testo o altri contenuti sul sito. Ad esempio, un film potrebbe essere pubblicato sul tuo sito. Puoi farcela breve descrizione e screenshot, ma non tutti saranno interessati a queste informazioni: è meglio nasconderle nello spoiler. O un elenco di canzoni pubblicate album di musica puoi nasconderlo nello spoiler ... Bene, hai reso l'idea. In questo articolo, fornirò un pezzo di codice per implementare uno spoiler senza plugin su nessun motore. E per WP ci sarà un gadget aggiuntivo.
in modo che il tuo testo voluminoso o qualche altro materiale (chiamiamolo "contenuto nascosto" in quanto segue) si adatta perfettamente allo spoiler, dovrà essere stilizzato in questo modo:
Il tuo articolo..
"Testo nascosto (clicca per espandere)" - questo è il titolo dello spoiler, una volta chiuso sarà visibile solo quello. Naturalmente, scrivere tale HTML ogni volta è craccato. Inoltre, questo è solo l'inizio, non l'intero codice. Aspetta un po', sarà più divertente.
Sarebbe molto più conveniente per noi utilizzare il seguente codice:
Questo è contenuto nascosto
Ed è possibile. Se non hai WordPress, spero che tu conosca bene il tuo motore e le basi della programmazione, altrimenti l'integrazione del mio codice ti causerà delle difficoltà.
E gli utenti WP felici possono aggiungere in sicurezza temi al file funzione.php il seguente codice (spero che tu tenga a mente quando modifichi i file WP):
Funzione site_spoiler ($ atts, $ content) (if (! Isset ($ atts ["title"])) $ sp_title = "(! LANG: testo nascosto (clicca per espandere)"; else $sp_title = $atts["title"]; return " !}
Ora puoi usare lo shortcode nei tuoi post ... Se hai non WP, ma vuoi usare lo shortcode, questo codice PHP ti aiuterà:
$ contenuto = str_replace ("", "
Ma indovina tu stesso cos'è $ content e dove inserirlo, perché non so che tipo di motore hai.
E non è tutto. Nel template per visualizzare le pagine del tuo sito (per WP, ad esempio, header.php) devi inserire questo codice JS:
Questo è il motore del nostro spoiler. Come puoi vedere, richiede il framework jQuery JS per funzionare (in WP è incluso automaticamente). Tuttavia, se vedi subito contenuti nascosti e non succede nulla quando fai clic sull'intestazione dello spoiler, significa che potresti non avere jQuery abilitato. Allora chiedi motore di ricerca "Come collegare jquery" o aggiungi questo codice prima del codice sopra:
E il tocco finale è prescrivere gli stili spoiler. Gli utenti WP modificano il file del tema stile.css aggiungendovi le seguenti righe:
Spoiler-wrap (background: #eee; border: 1px solid #aaa; border-radius: 5px; margin: 12px 6px;) .spoiler-head (padding: 2px 18px; cursor: pointer; background: url ("images/spoiler -icon1.png ") no-repeat 3px 9px) .unfolded (sfondo: url ("images / spoiler-icon2.png") no-repeat 3px 9px) .spoiler-body (margine: 5px; display: nessuno;)
Puoi organizzare facilmente blocchi nascosti con contenuto a discesa al clic.
D'accordo, a volte è meglio farlo piccolo blocco testo nascosto con un'etichetta cliccabile ordinata, nasconditi sotto di essa, ad esempio: regole per i commenti, codice html di un pulsante o banner, ecc. Coloro che ne hanno davvero bisogno - fai clic sull'iscrizione evidenziata e vedi tutto. Non è necessario mantenere determinati dati in piena vista di tutti.
Probabilmente il più famoso esempio utilizzando il testo nascosto, questi sono "spoiler" ben noti su vari forum.
Testo nascosto, può essere organizzato con usando jQuery, e su puro CSS, ogni tecnica presenta sia vantaggi che svantaggi.
Oggi voglio dimostrare un javascript molto piccolo, con l'aiuto del quale è molto facile "nascondere sotto il taglio", quasi tutte le informazioni sul mio sito.
E così, abbiamo una sorta di testo, dobbiamo selezionare una singola parola, un termine o un'intera frase e renderli cliccabili. Per farlo è sufficiente "racchiudere" la parola (frase) di cui abbiamo bisogno con un tag , come nell'esempio, oppure tramite link utilizzando il tag ... Molte persone usano il tag più spesso , qui sia il cursore che la selezione per impostazione predefinita, ma penso di sì, perché abbiamo bisogno di collegamenti che non portano da nessuna parte e "disegna" il cursore e seleziona qualsiasi elemento, puoi facilmente usare css. Quindi, all'interno del testo, usiamo audacemente :
| < span class = "tt" onclick= "view("t1"); return false" >testo testo testo |
testo testo testo
Qui tutto è molto semplice, usiamo class = "tt" per progettare una frase (parola) in css, dove muoviamo il cursore, evidenziamo, sottolineiamo se necessario, ecc., usando onclick = "view (" t1 "); return false" leghiamo tramite l'identificatore t1 all'eseguibile js, e al blocco con il contenuto nascosto per il momento.
A seconda di quanti blocchi nascosti utilizzerai in una pagina, devi modificare il numero di serie dell'id, ad es. t1, t3, t3 e così via...
Per il testo nascosto, puoi usare un contenitore div o, come nell'esempio, lo stesso tag , l'importante è associarlo ad una classe con css e non dimenticare di specificare correttamente l'identificatore:
Come accennavo sopra, per far partire il nostro "spoiler", per aprirsi e nascondersi al click, serve un minuscolo javascript posizionato direttamente nel corpo della pagina, meglio prima del tag
