Share
Jag märkte några förfrågningar om hur man implementerar sIFR3 i din webbplats - eller i kombination med WordPress. I den här handledningen visar jag var du ska ladda ner sIFR3 och hur man installerar den på din webbplats eller i det här fallet ett WordPress-tema.
sIFR3 är en kombination av JavaScript och Flash, vilket gör det möjligt att dynamiskt visa text med hjälp av blixt. Det här kan förbättra din webbplats ser dramatiskt ut, eftersom du är säker på att den kommer att se ut på samma sätt i varje webbläsare och att den är mycket mjukare än grundläggande HTML-text. Om du tittar på en
Som du kan se sIFR3 kan du visa en mer detaljerad återgiven text. Det finns dock några mindre punkter om sIFR3.
Så vet du vad sIFR3 är och vad det kan göra, låt oss börja med resten av handledningen.
sIFR3 är utvecklad av Mark Wubben; Du kan hitta den senaste versionen på hans hemsida. I den här handledningen använder jag den senaste versionen, som finns på nattklubben.
Zip-filen kommer att innehålla flash-, JavaScript- och CSS-filer. Även en live demo ingår, de filer du behöver är:
Innan vi kan ladda upp allt måste vi först skapa vår flashfil.
En .fla-fil ingår som du kan se i steg 1. Om du inte har Flash, erbjuder Adobe gratis produktförsök, även för Flash CS3, som kan hämtas här på Adobe.
När du har laddat ner och installerat Flash öppnar du sifrfla
Du börjar med en vit låda. Detta beror på att filen är uppdelad i lager.
För att ändra teckensnittsfamiljen på sIFR3 ska du använda på din webbplats, du måste dubbelklicka i den vita rutan, om rutan fortfarande är vit, dubbelklicka igen och texten kommer att visa "fet kursiv Normal"
Klicka nu på textraden och du ska gå in i textredigeringsläget. Standardfonten är Verdana.
Du kan använda typsnittet för att välja önskat teckensnitt, i denna handledning valde jag Tahoma.
Observera att du inte behöver ändra några andra alternativ, teckensnittstorlek, färg och andra textstylingsalternativ kan ändras med hjälp av JavaScript som ingår i sIFR3.
Nu är det klart att vi måste kompilera den till en. SWW för att kunna visa blixt på din webbplats.
Så kan vi kompilera en .swf-fil, ska vi? För att göra detta gå till Fil-> Exportera-> Exportera film
Ett nytt fönster dyker upp, i det här fönstret kan du ge filen ett namn och välja en katalog där du ska exportera den. Se till att formatet visas Flash Movie, Jag namnger filen "Sifr.swf". Klicka på Spara.
Återigen kommer ett nytt fönster att dyka upp, standardinställningarna ska fungera bra.
Klicka på OK, och du kommer se en framdriftsfält medan swf-filen kompileras.
För att kunna göra sIFR3-arbete måste du ladda upp de nödvändiga filerna (visas i steg 1) till din WordPress-katalog. För att hålla orden organiserar jag föreslår att du laddar upp filerna till wp-content / themes / default
Observera att du kan använda något annat tema du föredrar.
Du ska ladda upp filerna i samma kataloger som temat, så CSS-filerna kommer att gå in i wp-content / themes / default / css , du kan göra detsamma med JavaScript-filer och Flash-filer. När du är igång, ska filstrukturen se ut så här:
Glöm inte: du måste ladda upp sifr.swf och inte sifr.fla.
Nu när alla filer laddas upp, kan vi installera sIFR3 i vårt WordPress-tema.
Först måste vi inkludera JavaScript och CSS-filerna. Vi ska göra detta mellan
Låt oss först ta med CSS-filerna med hjälp av märka:
Vi använder inte hela webbadressen till en fil i en mallfil. WordPress har fördefinierade taggar, t.ex. som automatiskt returnerar temakatalogen, i det här fallet http://www.nettuts.com/wp-content/themes/default
Som du kan se returnerar inte länken med / i slutet! Så se till att du inte glömmer att skriva in den.
Nu måste vi fortfarande inkludera JavaScript med hjälp av
Nu inkluderar vi CSS och JavaScript, som tillsammans ser ut som:
När du laddar sidan hittar du att ingenting har hänt ... det här är korrekt!
Innan sIFR3 kommer att ersätta definierad text med blixt, måste den konfigureras.
Konfigurationen sker i filen sifr-config.js, så låt oss öppna den filen. (filen är tom)
Vad vi ska göra först är att definiera typsnittet och länken till flashfilen.
var tahoma = src: 'wp-innehåll / teman / default / flash / sifr.swf';
Här definierar vi en variabel som länkar till vår flashfil. Nu gör det inte någonting än. Först måste vi aktivera det genom att skriva aktivera kommandot.
sIFR.activate (Tahoma);
Nu när sIFR3 har installerats och ett teckensnitt har aktiverats måste vi definiera vilken text den ska ersättas med flashtext. För att göra detta använder vi ersättningskommandot i sIFR3.
sIFR.replace (tahoma, selector: 'h2');
Vad vi gjorde berättar sIFR3 att ersätta all text mellan h2-taggar.
Men du kan ersätta det med allt du vill ha, till exempel: p, b, jag, före etc ...
Även om det inte rekommenderas att ersätta all text på din webbplats med sIFR3 eftersom det kommer att sakta ner din webbplats.
Spara nu sIFR-config.js-filen och uppdatera din WordPress-sida. Du ser att titlarna har ersatts med blixten.
Som du kan se tittar titeln mycket tydligare och skarpare ut än standardhtml-titlarna.
Plus, du är nu säker på att den ser likadant ut i varje webbläsare. Att använda sIFR3 kan verkligen ge din webbplats ett unikt utseende, eftersom du kan ange vilken typ av teckensnitt du vill ha.
Nu när sIFR3 fungerar, behöver vi fortfarande stilera den.
Styling sker i sifr-config.js-filen och sIFR-screen.css
Personligen tycker jag att textstorleken är lite stor. För att ändra det måste vi lägga till lite CSS på sIFR-screen.css, så vi kan öppna det. Återigen, för att hålla orden organiserade, börjar vi styling efter den angivna linjen:
/ * ---- Header styling --- * /
Nu, om du vet grunderna i CSS vet du att du kan stifta h1, h2, h3, etc. genom att bara skriva in den. För dem som är nya för CSS så är det här:
h2 // styling code
För att se till att det bara gäller sIFR3-texten lägger vi till sIFR-aktiva klassen framför h2. Vi kommer att försöka göra texten lite mindre med hjälp av typsnittstorlek, och vi kan prova 14 pixlar.
.sIFR-aktiv h2 synlighet: dold; typsnittstorlek: 14px;
När du sparar det märker du att teckensnittstorleken har minskats.
Som du kan se ändrade vi också synligheten till dolda eftersom vi vill se till att den normala (inte flashtexten) är gömd.
Andra saker du kan stila med den här metoden är linjehöjd och fontfamilj, för att nämna några.
Saker som inte fungerar med den här metoden är textfärgen och bakgrunden! Detta måste göras i filen sifr-config.js, så vi kan spara sIFR-screen.css och öppna sifr-config.js
När filerna är öppna kan du börja lägga till några nya rader efter väljaren.
Vi vill ställa in texten, så vi kan ringa i CSS-funktionen.
sIFR.replace (tahoma, selector: 'h2', css: []);
Glöm inte "," eller CSS kommer inte att gälla! Eller sIFR3 kan sluta fungera!
Så kan vi lägga till lite färg, kom ihåg att WordPress-titlarna är länkar? Så vi måste lägga till några sväng- och länkfärger.
sIFR.replace (tahoma, selector: 'h2', css: ['a color: # 333333;', 'a: länk färg: # 333333;', 'a: svävar färg: # 0066CC; ']);
Det här ser ut som vanligt CSS, bara att stilkommandon är mellan "och en", "måste läggas till efter varje kommando, förutom det sista.
En viktig sak är att du måste skriva färgkoderna helt! Så om du vill ha vit text:
'en färg: #FFF; ' <- WRONG! 'a color: #FFFFFF; ' <- GOOD
Länk
Mus över
SIFR-config.js
var tahoma = src: 'wp-innehåll / teman / default / flash / sifr.swf'; sIFR.activate (Tahoma); sIFR.replace (tahoma, selector: 'h2', css: ['a color: # 333333;', 'a: länk färg: # 333333;', 'a: svävar färg: # 0066CC; ']);
Det är slutet på denna handledning. Om du tyckte om den här artikeln, var god Digg och / eller StumbleUpon den!
Accentsconagua