Share
Jeg la merke til noen forespørsler om hvordan å implementere sIFR3 i ditt nettsted - eller i kombinasjon med WordPress. I denne veiledningen vil jeg demonstrere hvor du skal laste ned sIFR3 og hvordan installere den på nettstedet ditt eller i dette tilfellet et WordPress-tema.
sIFR3 er en kombinasjon av JavaScript og Flash, som lar deg dynamisk vise tekst ved hjelp av flash. Dette kan forbedre deg webområdet ser dramatisk ut, fordi du er sikker på at den vil se ut på samme måte i alle nettlesere, og at det er mye jevnere utseende enn vanlig HTML-tekst. Hvis du tar en titt på a
Som du kan se, lar sIFR3 deg vise en mer detaljert gjengitt tekst. Det er imidlertid noen mindre punkter om sIFR3.
Så vet du hva sIFR3 er og hva det kan gjøre, lar oss komme i gang med resten av opplæringen.
sIFR3 er utviklet av Mark Wubben; Du finner den nyeste versjonen på hans nettsted. I denne opplæringen bruker jeg den nyeste versjonen, som finnes på nattklubben.
Zip-filen vil inneholde flash-, JavaScript- og CSS-filer. Også en live demo er inkludert, filene du trenger er:
Før vi kan laste opp alt, må vi først opprette vår flashfil.
En .fla-fil er inkludert som du kan se i trinn 1. Hvis du ikke har Flash, tilbyr Adobe gratis produktforsøk, også for Flash CS3, som kan lastes ned her på Adobe.
Når du har lastet ned og installert Flash, åpner du sifr.fla
Du begynner med bare en hvit boks. Dette skyldes at filen er delt inn i lag.
For å endre fontfamilien til sIFR3 skal du bruke på nettstedet ditt, du må dobbeltklikke i den hvite boksen, hvis boksen fortsatt er hvit, dobbeltklikk igjen og teksten vil vise "Fet kursiv Normal"
Klikk nå på tekstlinjen, og du bør gå inn i tekstredigeringsmodus. Standard skrift er Verdana.
Du kan bruke skriftvelgeren til å velge ønsket skrift, i denne opplæringen valgte jeg Tahoma.
Vær oppmerksom på at du ikke trenger å endre andre alternativer, skriftstørrelse, farge og andre tekst styling alternativer kan endres ved hjelp av JavaScript inkludert i sIFR3.
Nå er det gjort, vi må kompilere det til en .swf for å vise flash på nettstedet ditt.
Så kan vi kompilere en .swf-fil, skal vi? For å gjøre dette, gå til Fil-> Eksporter-> Eksporter film
Et nytt vindu vil dukke opp, i dette vinduet kan du gi filen et navn og valgte en katalog hvor du skal eksportere den. Pass på at formatet vises Flash Movie, Jeg navngir filen "Sifr.swf". Klikk på Lagre.
Igjen, et nytt vindu vil dukke opp, standardinnstillingene skal fungere bra.
Klikk på OK, og du vil se en fremdriftslinje mens swf-filen blir kompilert.
For å kunne gjøre sIFR3-arbeid, må du laste opp de nødvendige filene (vises i trinn 1) til WordPress-katalogen din. For å holde orden på det vil jeg foreslå at du laster opp filene til wp-content / themes / default
Vær oppmerksom på at du kan bruke andre temaer du foretrekker.
Du bør laste opp filene i samme kataloger som temaet, så CSS-filene vil gå inn wp-content / themes / default / css , du kan gjøre det samme med JavaScript-filene og flash-filene. Når du er gjennom, bør filstrukturen se slik ut:
Ikke glem: du må laste opp sifr.swf og ikke sifr.fla.
Nå som alle filer er lastet opp, kan vi installere sIFR3 i vårt WordPress-tema.
Først må vi inkludere JavaScript og CSS-filene. Vi skal gjøre dette mellom
Først la oss ta med CSS-filene ved å bruke stikkord:
Vi bruker ikke den komplette nettadressen til en fil i en malfil. WordPress har forhåndsdefinerte koder, for eksempel som automatisk vil returnere temakatalogen, i dette tilfellet http://www.nettuts.com/wp-content/themes/default
Som du kan se, returnerer ikke lenken med en / på slutten! Så sørg for at du ikke glemmer å skrive den.
Nå må vi fortsatt inkludere JavaScript ved hjelp av
Nå inkluderer vi CSS og JavaScript, som sammen ser ut som:
Når du laster inn siden, vil du oppdage at ingenting har skjedd ... dette er riktig!
Før sIFR3 erstatter definert tekst med blits, må den konfigureres.
Konfigurasjonen finner sted i filen sifr-config.js, så la oss åpne den filen. (filen er tom)
Det vi skal gjøre først, er å definere skrifttypenavnet og lenken til flashfilen.
var tahoma = src: 'wp-innhold / temaer / standard / flash / sifr.swf';
Her definerer vi en variabel som kobler til vår flashfil. Nå gjør dette ikke noe ennå. Først må vi aktivere det ved å skrive inn aktiveringskommandoen.
sIFR.activate (Tahoma);
Nå som sIFR3 er installert og en skrift er aktivert, må vi definere hvilken tekst den skal erstattes med flashtekst. For å gjøre dette bruker vi erstatningskommandoen i sIFR3.
sIFR.replace (tahoma, selector: 'h2');
Hva vi gjorde er å fortelle sIFR3 å erstatte all tekst mellom h2-koder.
Men du kan erstatte det med alt du vil, for eksempel: p, b, jeg, pre etc ...
Selv om det ikke er anbefalt å erstatte all tekst på nettstedet ditt med sIFR3 fordi dette vil redusere nettstedet ditt nede.
Lagre nå sIFR-config.js-filen og oppdatere WordPress-siden din. Du vil se at titlene har blitt erstattet med flash.
Som du ser, ser tittelen mye klarere og skarpere ut enn standard html-titler.
I tillegg er du nå sikker på at det ser ut som det er i hver nettleser. Bruke sIFR3 kan virkelig gi nettstedet ditt et unikt utseende, fordi du kan spesifisere hvilken som helst skrifttype du liker.
Nå som sIFR3 virker, må vi fortsatt stillegge det.
Stylingen finner sted i sifr-config.js-filen og sIFR-screen.css
Personlig tror jeg at tekststørrelsen er litt stor. For å kunne endre det, må vi legge til noe CSS til sIFR-screen.css, så vi kan åpne det. Igjen, for å holde orden organisert, begynner vi styling etter den angitte linjen:
/ * ---- Header styling --- * /
Nå, hvis du vet det grunnleggende om CSS, vet du at du kan stile h1, h2, h3, etc. ved å bare skrive det. For de som er nye for CSS, er det slik:
h2 // styling code
For å sikre at den bare gjelder sIFR3-teksten, legger vi til sIFR-aktiv klassen foran h2. Vi vil prøve å gjøre teksten litt mindre ved hjelp av skriftstørrelse, og vi kan prøve 14 piksler.
.sIFR-aktiv h2 synlighet: skjult; skriftstørrelse: 14px;
Når du lagrer det, vil du legge merke til at skriftstørrelsen er redusert.
Som du kan se, endret vi også synligheten til skjult fordi vi vil sørge for at den normale (ikke flashteksten) er skjult.
Andre ting du kan stile ved hjelp av denne metoden, er linjehøyde og font-familie, for å nevne noen.
Ting som ikke vil fungere ved hjelp av denne metoden, er tekstfargen og bakgrunnen! Dette må gjøres i filen sifr-config.js, så vi kan lagre sIFR-screen.css og åpne sifr-config.js
Når filene er åpne, kan du begynne å legge til noen nye linjer etter väljeren.
Vi ønsker å style teksten, så vi kan ringe i CSS-funksjonen.
sIFR.replace (tahoma, selector: 'h2', css: []);
Ikke glem "," eller CSS vil ikke gjelde! Eller sIFR3 kan slutte å fungere!
Så kan vi legge til litt farge, husk at WordPress-titlene er koblinger? Så vi må legge til noen svever og linkfarger.
sIFR.replace (tahoma, selector: 'h2', css: ['a color: # 333333;', 'a: link color: # 333333;', 'a: svever farge: # 0066CC; ']);
Dette ser ut som vanlig CSS, bare at stilkommandoene er mellom "og en", "må legges etter hver kommando, bortsett fra det siste.
En viktig ting er at du må skrive fargekodene helt! Så hvis du vil ha hvit tekst:
'en color: #FFF; ' <- WRONG! 'a color: #FFFFFF; ' <- GOOD
link
Mus over
sIFR-config.js
var tahoma = src: 'wp-innhold / temaer / standard / flash / sifr.swf'; sIFR.activate (Tahoma); sIFR.replace (tahoma, selector: 'h2', css: ['a color: # 333333;', 'a: link color: # 333333;', 'a: svever farge: # 0066CC; ']);
Det er slutten på denne opplæringen. Hvis du likte denne artikkelen, vennligst Digg og / eller StumbleUpon den!
Accentsconagua