Share
Ho notato alcune richieste su come implementare sIFR3 nel tuo sito web o in combinazione con WordPress. In questo tutorial mostrerò dove scaricare sIFR3 e come installarlo sul tuo sito web o, in questo caso, un tema WordPress.
sIFR3 è una combinazione di JavaScript e flash, che consente di visualizzare il testo in modo dinamico utilizzando il flash. Questo può migliorare notevolmente il tuo sito Web, perché sei sicuro che sembrerà lo stesso in ogni browser e che è molto più semplice del testo HTML di base. Se dai un'occhiata a
Come puoi vedere, sIFR3 ti consente di visualizzare un testo renderizzato più dettagliato. Tuttavia, ci sono alcuni punti minori su sIFR3.
Quindi sappi che sai cos'è SIFR3 e cosa può fare, iniziamo con il resto del tutorial.
sIFR3 è sviluppato da Mark Wubben; puoi trovare l'ultima versione sul suo sito web. In questo tutorial userò l'ultima versione, che può essere trovata nella directory nightly.
Il file zip conterrà file flash, JavaScript e CSS. Inoltre è inclusa una demo dal vivo, i file necessari sono:
Prima di poter caricare tutto, dobbiamo prima impostare il nostro file flash.
Un file .fla è incluso come puoi vedere al passaggio 1. Se non hai Flash, Adobe offre prove gratuite del prodotto, anche per Flash CS3, che può essere scaricato qui in Adobe.
Dopo aver scaricato e installato Flash, apri sifr.fla
Inizierai semplicemente con una scatola bianca. Questo perché il file è diviso in livelli.
Per cambiare la famiglia di font del sIFR3 che userai sul tuo sito web, devi fare doppio clic nella casella bianca, se la casella è ancora bianca, fare nuovamente doppio clic e il testo mostrerà "Grassetto Corsivo Normale"
Ora fai clic sulla riga di testo e dovresti entrare nella modalità di modifica del testo. Il carattere predefinito è Verdana.
Puoi usare il selettore di font per scegliere il font desiderato, in questo tutorial ho scelto Tahoma.
Si noti che non è necessario modificare altre opzioni, le dimensioni del carattere, il colore e altre opzioni di stile del testo possono essere modificate utilizzando il codice JavaScript incluso in sIFR3.
Fatto questo, dobbiamo compilarlo su un file .swf per visualizzare il flash sul tuo sito web.
Quindi, compili un file .swf, dovremmo? Per fare questo vai File-> Esporta-> Esporta film
Apparirà una nuova finestra, in questa finestra puoi dare un nome al file e scegliere una directory in cui esportarlo. Assicurarsi che il formato sia visualizzato Filmato flash, Sto nominando il file "Sifr.swf". Fai clic su Salva.
Ancora una volta, verrà visualizzata una nuova finestra, le impostazioni predefinite dovrebbero funzionare correttamente.
Fai clic su OK e vedrai una barra di avanzamento mentre il file swf è in fase di compilazione.
Per far funzionare sIFR3, è necessario caricare i file necessari (visualizzati nel passaggio 1) nella directory di WordPress. Per mantenere le cose organizzate ti suggerisco di caricare i file su wp-content / themes / default
Si prega di notare che è possibile utilizzare qualsiasi altro tema che preferisci.
Dovresti caricare i file nelle stesse directory del tema, quindi i file CSS andranno a finire wp-content / themes / default / css , puoi fare lo stesso con i file JavaScript e i file flash. Quando hai finito, la struttura del file dovrebbe assomigliare a questa:
Non dimenticare: devi caricare sifr.swf e non sifr.fla.
Ora che tutti i file sono stati caricati, possiamo installare sIFR3 nel nostro tema WordPress.
Per prima cosa dobbiamo includere il codice JavaScript e i file CSS. Lo faremo tra il
Per prima cosa includiamo i file CSS usando il etichetta:
Non usiamo l'url completo in un file in un file modello. WordPress ha tag predefiniti, come ad esempio che restituirà automaticamente la directory del tema, in questo caso http://www.nettuts.com/wp-content/themes/default
Come puoi vedere, non restituisce il link con un / alla fine! Quindi assicurati di non dimenticarti di scriverlo.
Ora dobbiamo ancora includere il JavaScript usando il
Ora includiamo il CSS e il JavaScript, che insieme assomigliano a:
Quando carichi la pagina, scoprirai che non è successo niente ... è corretto!
Prima che sIFR3 sostituisca il testo definito con il flash, deve essere configurato.
La configurazione avviene nel file sifr-config.js, quindi apriamo il file. (il file è vuoto)
Quello che faremo prima è definire il nome del font e il link al file flash.
var tahoma = src: 'wp-content / themes / default / flash / sifr.swf';
Qui, stiamo definendo una variabile che si collega al nostro file flash. Ora questo non fa ancora niente. Per prima cosa dobbiamo attivarlo digitando il comando activate.
sIFR.activate (tahoma);
Ora che sIFR3 è stato installato e un font è stato attivato, è necessario definire quale testo deve essere sostituito con il testo flash. Per fare ciò, usiamo il comando replace in sIFR3.
sIFR.replace (tahoma, selector: 'h2');
Quello che abbiamo fatto è dire a sIFR3 di sostituire tutto il testo tra i tag h2.
Ma puoi sostituirlo con qualsiasi cosa tu voglia, ad esempio: p, b, i, pre ecc ...
Anche se non è consigliabile sostituire tutto il testo sul tuo sito web con sIFR3 perché questo rallenterà il tuo sito web.
Ora salva il file sIFR-config.js e aggiorna la pagina di WordPress. Vedrai che i titoli sono stati sostituiti con il flash.
Come puoi vedere, il titolo sembra molto più chiaro e nitido rispetto ai titoli html predefiniti.
Inoltre, ora sei sicuro che sia uguale in tutti i browser. L'uso di sIFR3 può davvero dare al tuo sito un aspetto unico, perché puoi specificare qualsiasi font che ti piace.
Ora che sIFR3 funziona, dobbiamo ancora modificarlo.
Lo stile si svolge nel file sifr-config.js e in sIFR-screen.css
Personalmente, penso che le dimensioni del testo siano un po 'grandi. Per cambiarlo, dobbiamo aggiungere alcuni CSS a sIFR-screen.css, quindi aprilo. Ancora una volta, per mantenere le cose organizzate, inizieremo lo styling dopo la linea designata:
/ * ---- Stile intestazione --- * /
Ora, se conosci le basi del CSS, sai che puoi scrivere h1, h2, h3, ecc. Semplicemente digitandolo. Per coloro che sono nuovi ai CSS, ecco come:
h2 // codice di stile
Per assicurarsi che si applichi solo al testo sIFR3, aggiungeremo la classe attiva sIFR davanti a h2. Cercheremo di rendere il testo un po 'più piccolo usando la dimensione del font e proviamo con 14 pixel.
.sIFR-active h2 visibility: hidden; font-size: 14px;
Quando lo salvi, noterai che la dimensione del carattere è stata ridotta.
Come puoi vedere, abbiamo anche cambiato la visibilità in hidden perché vogliamo essere sicuri che il normale (non il testo in flash) sia nascosto.
Altre cose che puoi usare usando questo metodo sono line-height e font-family, per citarne alcuni.
Le cose che non funzionano con questo metodo sono il colore e lo sfondo del testo! Questo deve essere fatto nel file sifr-config.js, quindi salva sIFR-screen.css e apri sifr-config.js
Quando i file sono aperti, puoi iniziare ad aggiungere alcune nuove linee dopo il selettore.
Vogliamo dare uno stile al testo, quindi permettiamo di chiamare la funzione CSS.
sIFR.replace (tahoma, selector: 'h2', css: []);
Non dimenticare il "," o il CSS non si applica! O sIFR3 potrebbe smettere di funzionare!
Quindi aggiungiamo un po 'di colore, ricorda che i titoli di WordPress sono link? Quindi dobbiamo aggiungere alcuni hover e collegare i colori.
sIFR.replace (tahoma, selector: 'h2', css: ['a color: # 333333;', 'a: link color: # 333333;', 'a: hover color: # 0066CC; ']);
Sembra un normale CSS, solo che i comandi di stile sono tra "e a", "deve essere aggiunto dopo ogni comando, tranne che per l'ultimo.
Una cosa importante è che devi scrivere completamente i codici colore! Quindi se vuoi il testo bianco:
'a color: #FFF; ' <- WRONG! 'a color: #FFFFFF; ' <- GOOD
collegamento
Mouse sopra
sIFR-config.js
var tahoma = src: 'wp-content / themes / default / flash / sifr.swf'; sIFR.activate (tahoma); sIFR.replace (tahoma, selector: 'h2', css: ['a color: # 333333;', 'a: link color: # 333333;', 'a: hover color: # 0066CC; ']);
Questa è la fine di questo tutorial. Se ti è piaciuto questo articolo, per favore Digg e / o StumbleUpon it!
Accentsconagua