Share
Am observat câteva cereri despre cum să implementați sIFR3 în site-ul dvs. sau în combinație cu WordPress. În acest tutorial vă voi demonstra unde să descărcați sIFR3 și cum să îl instalați pe site-ul dvs. sau, în acest caz, o temă WordPress.
sIFR3 este o combinație de JavaScript și flash, care vă permite să vizualizați dinamic textul utilizând flash. Acest lucru vă poate îmbunătăți aspectul site-ului în mod dramatic, deoarece sunteți sigur că va arăta la fel în fiecare browser și că aspectul său mult mai neted decât textul HTML de bază. Dacă te uiți la a
După cum puteți vedea, sIFR3 vă permite să afișați un text redat mai detaliat. Cu toate acestea, există câteva puncte minore despre sIFR3.
Deci știți că știți ce este sIFR3 și ce poate face, vă permite să începeți cu restul tutorialului.
sIFR3 este dezvoltat de Mark Wubben; puteți găsi cea mai recentă versiune de pe site-ul său. În acest tutorial voi folosi cea mai recentă versiune, care poate fi găsită în directorul nightlies.
Fișierul zip va conține fișiere flash, JavaScript și CSS. De asemenea, este inclusă și o demo live, fișierele de care aveți nevoie sunt:
Înainte de a putea încărca totul, trebuie mai întâi să configurați fișierul flash.
Un fișier .fla este inclus așa cum puteți vedea în pasul 1. Dacă nu aveți Flash, Adobe oferă studii gratuite despre produse, de asemenea pentru Flash CS3, care pot fi descărcate aici la Adobe.
După ce ați descărcat și instalat Flash, deschideți sifr.fla
Veți începe cu o cutie albă. Acest lucru se datorează faptului că fișierul este împărțit în straturi.
Pentru a schimba familia de fonturi de sIFR3 aveți de gând să utilizați pe site-ul dvs., trebuie să faceți dublu clic pe caseta albă, în cazul în care caseta este încă alb, dublu clic din nou, iar textul va arăta „Bold Italic Normal“
Acum faceți clic pe linia de text și ar trebui să intrați în modul de editare a textului. Fontul implicit este Verdana.
Puteți utiliza selectorul de fonturi pentru a alege fontul dorit, în acest tutorial l-am ales pe Tahoma.
Rețineți că nu este necesar să modificați alte opțiuni, dimensiunea fontului, culoarea și alte opțiuni de styling pentru text pot fi modificate utilizând JavaScript inclus în sIFR3.
Acum, acest lucru este făcut, trebuie să-l compilați într-un .swf pentru a afișa flash pe site-ul dvs..
Deci, permite compilarea unui fișier .swf, nu? Pentru a face acest lucru du-te la Fișier-> Export-> Export film
O fereastră nouă va apărea, în această fereastră puteți da fișierului un nume și alege un director unde să îl exportați. Asigurați-vă că este afișat formatul Flash Movie, Denumesc dosarul "Sifr.swf". Dați clic pe Salvați.
Din nou, va apărea o fereastră nouă, setările implicite ar trebui să funcționeze bine.
Faceți clic pe OK și veți vedea o bară de progres în timp ce fișierul swf este în curs de compilare.
Pentru a face munca sIFR3, trebuie să încărcați fișierele necesare (afișate în Pasul 1) în directorul WordPress. Pentru a păstra lucrurile organizate, vă voi sugera încărcarea fișierelor wp-content / teme / default
Rețineți că puteți utiliza orice altă temă preferată.
Ar trebui să încărcați fișierele în aceleași directoare ca tema, astfel încât fișierele CSS vor intra în wp-content / teme / default / css , puteți face la fel cu fișierele JavaScript și fișierele flash. Când ați terminat, structura fișierului ar trebui să arate astfel:
Nu uitați: trebuie să încărcați sifr.swf și nu sifr.fla.
Acum că toate fișierele sunt încărcate, putem instala sIFR3 în tema WordPress.
Mai întâi trebuie să includeți fișierele JavaScript și CSS. Vom face acest lucru între
Mai întâi să includeți fișierele CSS utilizând etichetă:
Nu utilizăm urlul complet într-un fișier dintr-un fișier de șablon. WordPress are etichete predefinite, cum ar fi care va returna automat directorul tematic, în acest caz http://www.nettuts.com/wp-content/themes/default
După cum puteți vedea, nu se întoarce legătura cu un / la sfârșit! Deci, asigurați-vă că nu uitați să-l tastați.
Acum trebuie să includeți JavaScript folosind
Acum includem CSS și JavaScript, care împreună arată ca:
Când încărcați pagina, veți descoperi că nu sa întâmplat nimic ... este corect!
Înainte ca sIFR3 să înlocuiască textul definit cu bliț, trebuie să fie configurat.
Configurația are loc în fișierul sifr-config.js, deci deschideți fișierul. (fișierul este gol)
Ceea ce vom face mai întâi este definirea numelui fontului și a legăturii cu fișierul flash.
var tahoma = src: 'wp-conținut / teme / implicit / flash / sifr.swf';
Aici, definim o variabilă care face legătura cu fișierul nostru flash. Acum, asta nu face nimic încă. Mai intai trebuie sa o activati tastand comanda activate.
sIFR.activate (Tahoma);
Acum, când sIFR3 a fost instalat și un font a fost activat, trebuie să definim ce text ar trebui înlocuit cu textul flash. Pentru aceasta, folosim comanda replace în sIFR3.
sIFR.replace (tahoma, selector: 'h2');
Ceea ce am făcut este să spunem sIFR3 să înlocuiască tot textul între etichetele h2.
Dar îl puteți înlocui cu orice doriți, de exemplu: p, b, i, pre etc ...
Deși nu este recomandat să înlocuiți întregul text pe site-ul dvs. cu sIFR3, deoarece acest lucru va încetini site-ul dvs. în jos.
Acum salvați fișierul sIFR-config.js și reîmprospătați pagina WordPress. Veți vedea că titlurile au fost înlocuite cu bliț.
După cum puteți vedea, titlul pare mult mai clar și mai clar decât titlurile html implicite.
În plus, acum sunteți sigur că arată la fel în fiecare browser. Utilizarea sIFR3 poate oferi cu adevărat site-ului dvs. un aspect unic, deoarece puteți specifica orice font doriți.
Acum că sIFR3 funcționează, trebuie încă să o stilizăm.
Stilul are loc în fișierele sifr-config.js și sIFR-screen.css
Personal, cred că dimensiunea textului este un pic mare. Pentru a schimba acest lucru, trebuie să adăugăm câteva CSS-uri în sIFR-screen.css, deci permiteți-le să se deschidă. Din nou, pentru a păstra lucrurile organizate, vom începe să styling după linia desemnată:
/ * ---- Stiluri antet --- * /
Acum, dacă știți elementele de bază ale CSS, știi că poți să modelezi h1, h2, h3, etc. prin simpla tastare. Pentru cei care sunt noi în CSS, acesta este modul în care:
h2 // cod de styling
Pentru a vă asigura că se aplică numai textului sIFR3, vom adăuga clasa activă sIFR în fața h2. Vom încerca să facem textul mai mic utilizând dimensiunea fontului și să încercăm 14 pixeli.
.sIFR-active h2 vizibilitate: ascuns; font-size: 14px;
Când o salvați, veți observa că dimensiunea fontului a fost redusă.
După cum puteți vedea, am schimbat și vizibilitatea ascunsă, deoarece dorim să ne asigurăm că textul normal (nu este flash) este ascuns.
Alte lucruri pe care le puteți modela folosind această metodă sunt linia-înălțime și font-familie, pentru a numi câteva.
Lucrurile care nu vor funcționa utilizând această metodă sunt culoarea și fundalul textului! Acest lucru trebuie făcut în fișierul sifr-config.js, deci vă permite să salvați sIFR-screen.css și să deschideți sifr-config.js
Când fișierele sunt deschise, puteți începe să adăugați câteva linii noi după selector.
Vrem să stilăm textul, astfel încât să permitem apelul în funcția CSS.
sIFR.replace (tahoma, selector: 'h2', css: []);
Nu uitați că "," sau CSS nu se va aplica! Sau sIFR3 s-ar putea să nu mai funcționeze!
Deci, vă permite să adăugați o culoare, amintiți-vă că titlurile WordPress sunt link-uri? Deci, trebuie să adăugăm unele culori hover și link.
sIFR.replace (Tahoma, selector: 'h2', css: [ 'a color: # 333333;' 'a: link color: # 333333;' 'a: hover color: # 0066CC; ');
Acest lucru arata ca CSS normal, doar ca comenzile de stil sunt intre "si un", "trebuie adaugat dupa fiecare comanda, cu exceptia ultimului.
Un lucru important este că trebuie să scrieți complet codurile de culoare! Deci, dacă doriți text alb:
'a culoare: #FFF; “ <- WRONG! 'a color: #FFFFFF; ' <- GOOD
Legătură
Mouse-ul peste
sIFR-config.js
var tahoma = src: 'wp-conținut / teme / implicit / flash / sifr.swf'; sIFR.activate (Tahoma); sIFR.replace (Tahoma, selector: 'h2', css: [ 'a color: # 333333;' 'a: link color: # 333333;' 'a: hover color: # 0066CC; ');
Acesta este sfârșitul acestui tutorial. Dacă vă place acest articol, vă rugăm să Digg și / sau StumbleUpon-l!
Accentsconagua