Share
I cursori possono essere controversi: abbiamo tutti clienti che hanno insistito su di loro, indipendentemente dal fatto che migliorino il sito. Ma loro hanno il loro posto. Possono aiutare a evidenziare i contenuti chiave, visualizzare le immagini su un sito in cui gli elementi visivi sono importanti e dare vita a un sito.
Nella maggior parte dei casi, probabilmente avrai utilizzato i dispositivi di scorrimento per visualizzare le immagini, che potrebbero essere o meno associate al contenuto del tuo sito. Ma puoi anche usare un cursore per visualizzare il testo sul tuo sito.
In questo set di due tutorial, ti mostrerò come creare un cursore di testo con un effetto interessante: utilizzerà un tipo di post personalizzato per inserire una parte di testo dopo l'altra in due blocchi, creando l'effetto di una conversazione in la parte superiore della pagina. Questo sarà sovrapposto a una foto di due persone, quindi l'effetto è che loro due stanno parlando tra loro.
Per seguire, avrai bisogno di:
L'esempio su cui lavorerò è un sito reale che sto sviluppando per un cliente, che sta eseguendo un tema figlio del tema Responsive. Creerò un elemento secondario del tema Responsive e aggiungo uno stile personalizzato a questo e funzioni nel tema functions.php file. Potresti aggiungere questo al tuo tema o creare un tema figlio di Responsive come me.
In questo tutorial, otterremo il dispositivo di scorrimento attivo e funzionante utilizzando un tipo di post personalizzato. Specificamente:
Nella parte successiva, aggiungeremo CSS al nostro tema per posizionare correttamente il testo, creare l'effetto di conversazione e per modellarlo.
Quindi iniziamo!
Per prima cosa creiamo il tema figlio del tema Responsive. Lo sto facendo perché non voglio modificare il tema Responsive stesso: se lo facessi, perderesti il tuo lavoro quando avresti aggiornato il tema. In alternativa, potresti creare un plugin per farlo.
Nel tuo wp-content / themes directory, creare una nuova cartella vuota. Sto chiamando il mio tutsplus-conversazione-banner.
In quella cartella, crea un file chiamato style.css e aggiungilo a questo:
Accentsconagua
/ * Nome del tema: Banner di conversazioni di Tutsplus Tema Tema URI: http: //.tutsplus.com/tutorials/create-a-conversation-banner-with-revolving-text-using-a-custom-post-type--cms- 25938 Descrizione: Tema per tuts + tutorial sulla creazione di un effetto banner di conversazione. Tema bambino per il tema Responsive. Autore: Rachel McCollin Autore URI: http://rachelmccollin.co.uk/ Template: responsive Versione: 1.0 * / @import url ("... /responsive/style.css");Modifica il codice sopra per rendersi autore e aggiungi il tuo URI personale.
Ora salva quel file e attiva il tuo nuovo tema.
Poiché si tratta di un sito reale, ho aggiunto uno stile personalizzato, che si trova nel foglio di stile del tema secondario. Non ne parlerò in dettaglio poiché è al di fuori dello scopo del tutorial, ma con questo tutorial puoi vedere lo stile nel bundle di codice.
Ecco come appare il mio sito prima di aggiungere il dispositivo di scorrimento:
L'immagine nell'intestazione ha spazio su entrambi i lati delle due persone, e modellerò il mio slider in modo che visualizzi il testo su entrambi i lati delle persone, dando l'effetto che stanno indicando le loro parole.
Il passo del nido è registrare un tipo di messaggio chiamato citazione. Nella cartella del tema figlio, crea un nuovo file chiamato functions.php.
Nota: è buona norma utilizzare un plug-in per registrare un tipo di post anziché aggiungerli al file delle funzioni del tema. Sto usando il file delle funzioni qui per tenere tutto in un posto, così da avere un pacchetto di codice da scaricare.
Apri il tuo file di funzioni e aggiungi questo codice:
function tutsplus_create_post_type () $ labels = array ('name' => __ ('Quotes'), 'singular_name' => __ ('Quote'), 'add_new' => __ ('New Quote'), 'add_new_item' => __ ('Aggiungi nuovo preventivo'), 'edit_item' => __ ('Modifica preventivo'), 'new_item' => __ ('Nuovo preventivo'), 'view_item' => __ ('Visualizza preventivo'), 'search_items' => __ ('Quotes di ricerca'), 'not_found' => __ ('Nessuna ricerca di citazioni'), 'not_found_in_trash' => __ ('Nessuna citazione trovata nel cestino'),); $ args = array ('labels' => $ labels, 'has_archive' => false, 'public' => true, 'hierarchical' => false, 'supports' => array ('title', 'editor', '' estratto "," campi personalizzati "," miniatura "," attributi della pagina "," autore "),); register_post_type ('quote', $ args); add_action ('init', 'tutsplus_create_post_type');Questo registra un nuovo tipo di messaggio chiamato citazione.
Puoi vedere il nuovo tipo di post nel mio sito, con alcune citazioni che ho aggiunto:
Si noti che queste sono solo citazioni fittizie: il fatto che io abbia usato un tipo di post personalizzato rende facile per il mio cliente aggiungere le proprie quotazioni una volta che il sito è stato lanciato. Ognuno di loro ha solo il titolo di un post e nessun contenuto, perché se ci fosse il contenuto del post, il plugin mostrerebbe entrambi.
Il prossimo passo è installare e configurare il plugin slider. Sto utilizzando il plug-in Smooth Slider, che ti consente di scegliere quali post verranno aggiunti al dispositivo di scorrimento e riordinare manualmente i tuoi post nella schermata delle impostazioni del dispositivo di scorrimento.
Vai a Dispositivo di scorrimento scorrevole> Impostazioni e configuralo in questo modo:
Sto aggiungendo lo stile nel mio foglio di stile perché voglio usare i caratteri di Google, quindi non sono troppo preoccupato per le impostazioni dei caratteri, ma potresti preferire di modificarli nella schermata delle impostazioni.
Il prossimo passo è aggiungere i cursori e popolarli con i post.
Abbiamo bisogno di aggiungere due cursori: uno per ciascuna delle due persone. Vai a Slider scorrevole> Cursori e fare clic su Crea un nuovo dispositivo di scorrimento. Ho chiamato i miei due cursori 'Heide' e 'Iain' perché quelli sono i nomi delle persone.
Aggiungi post a un dispositivo di scorrimento dalla pagina di modifica del post. Apri uno dei tuoi post e scorri verso il basso per visualizzare l'opzione per aggiungerlo a un dispositivo di scorrimento:
Seleziona il cursore a cui vuoi aggiungere il post e salvalo. Ripeti l'operazione per ogni post, aggiungendolo al cursore pertinente.
Puoi modificare manualmente l'ordine in cui i post saranno mostrati dal cursore. Vai a Slider scorrevole> Cursori e seleziona il cursore su cui vuoi lavorare. Ecco il mio cursore "Heide":
Scorri verso il basso per trascinare i messaggi nell'ordine corretto:
Dopo averlo fatto, salva il cursore.
Al momento abbiamo due cursori, ma non compaiono nel sito. Il plugin ti offre degli shortcode che puoi usare per aggiungere cursori al tuo sito: mentre li aggiungeremo nei file del tema, useremo il do_shortcode () funzione.
Il tema Responsive ci fornisce un hook chiamato responsive_in_header che ti consente di aggiungere codice all'intestazione della pagina. Questo verrà visualizzato sopra l'immagine ma nell'intestazione: aggiungeremo CSS per posizionare correttamente i cursori nella parte successiva di questo tutorial in due parti.
Apri i tuoi temi functions.php file e aggiungi questa funzione:
function tutsplus_slider () ?>Questo crea a
divcon iltutsplus-cursoriclasse, che verrà scelto come target per il posizionamento successivo e utilizza gli shortcode per generare i due cursori.Salva il tuo file delle funzioni.
Il sito ora si presenta così:
Quindi i cursori sono lì e stanno funzionando. Ma stanno prendendo una quantità enorme di spazio bianco nella parte superiore della pagina, sopra l'immagine. Abbiamo bisogno che vengano visualizzati sull'immagine, accanto alle due persone.
Nella parte successiva, continueremo a risolverlo. Aggiungeremo CSS per posizionare i due cursori e anche per lo styling. Registreremo un carattere Google che verrà utilizzato per le virgolette.
Sommario
I cursori non sono solo per immagini: puoi usarli anche per visualizzare il testo. In questo tutorial, hai imparato come configurare due cursori usando un tipo di post personalizzato. Successivamente aggiungeremo lo stile per rendere il nostro testo come dovrebbe.
