Share
Ik zag een aantal verzoeken over het implementeren van sIFR3 in uw website - of in combinatie met WordPress. In deze tutorial laat ik zien waar je sIFR3 kunt downloaden en hoe je het op je website kunt installeren, of in dit geval een WordPress-thema.
sIFR3 is een combinatie van JavaScript en flash, waarmee u tekst dynamisch kunt bekijken met behulp van de flitser. Dit kan ervoor zorgen dat uw website er spectaculair uitziet, omdat u zeker weet dat deze er in elke browser hetzelfde uitziet en dat deze er veel gladder uitziet dan eenvoudige HTML-tekst. Als je een kijkje neemt naar een
Zoals je ziet, kun je met sIFR3 een meer gedetailleerde, gerenderde tekst weergeven. Er zijn echter een paar ondergeschikte punten over sIFR3.
Dus weet dat je weet wat sIFR3 is en wat het kan doen, laten we beginnen met de rest van de tutorial.
sIFR3 is ontwikkeld door Mark Wubben; je kunt de nieuwste versie op zijn website vinden. In deze tutorial zal ik de nieuwste versie gebruiken, die te vinden is in de nightlies-directory.
Het zipbestand bevat Flash-, JavaScript- en CSS-bestanden. Ook een live demo is inbegrepen, de bestanden die je nodig hebt zijn:
Voordat we alles kunnen uploaden, moeten we eerst ons Flash-bestand instellen.
Een FLA-bestand is bijgevoegd zoals u kunt zien in stap 1. Als u geen Flash hebt, biedt Adobe gratis producttests, ook voor Flash CS3, die u hier bij Adobe kunt downloaden..
Nadat u Flash hebt gedownload en geïnstalleerd, opent u sifr.fla
Je begint met alleen een witte doos. Dit komt omdat het bestand is verdeeld in lagen.
Om de lettertypefamilie van de sIFR3 die u op uw website gaat gebruiken te wijzigen, dubbelklikt u in het witte vak, als het vak nog steeds wit is, dubbelklikt u nogmaals en verschijnt de tekst "Vet Cursief Normaal"
Klik nu op de tekstregel en ga naar de tekstbewerkingsmodus. Het standaard lettertype is Verdana.
Je kunt de lettertype-kiezer gebruiken om het gewenste lettertype te kiezen, in deze tutorial koos ik voor Tahoma.
Houd er rekening mee dat u geen andere opties hoeft aan te passen, lettertype, kleur en andere opties voor tekststijl kunnen worden gewijzigd met behulp van het JavaScript in sIFR3.
Nu dat is gebeurd, moeten we het compileren naar een SWF-bestand om Flash op uw website weer te geven.
Dus laten we een .swf-bestand compileren, nietwaar? Ga hiervoor naar Bestand-> Exporteren-> Film exporteren
Er verschijnt een nieuw venster, in dit venster kunt u het bestand een naam geven en een map uitkiezen om het te exporteren. Zorg ervoor dat het formaat wordt weergegeven Flash-film, Ik noem het bestand "Sifr.swf". Klik op Opslaan.
Nogmaals, er verschijnt een nieuw venster, de standaardinstellingen zouden goed moeten werken.
Klik op OK en u ziet een voortgangsbalk terwijl het SWF-bestand wordt gecompileerd.
Om sIFR3 te laten werken, moet u de benodigde bestanden uploaden (weergegeven in stap 1) naar uw WordPress-directory. Om dingen georganiseerd te houden, raad ik aan om de bestanden te uploaden naar wp-content / themes / default
Houd er rekening mee dat u elk ander thema kunt gebruiken dat u verkiest.
Upload de bestanden in dezelfde mappen als het thema, dus de CSS-bestanden zullen erin worden opgenomen wp-content / themes / default / css , je kunt hetzelfde doen met de JavaScript-bestanden en flash-bestanden. Wanneer je klaar bent, ziet de bestandsstructuur er als volgt uit:
Vergeet niet: je moet sifr.swf uploaden en niet sifr.fla.
Nu alle bestanden zijn geüpload, kunnen we sIFR3 in ons WordPress-thema installeren.
Eerst moeten we de JavaScript- en de CSS-bestanden opnemen. We gaan dit doen tussen de
Laten we eerst de CSS-bestanden opnemen met behulp van de label:
We gebruiken de volledige URL niet voor een bestand in een sjabloonbestand. WordPress heeft vooraf gedefinieerde tags, zoals die in dit geval automatisch de themadirectory retourneert http://www.nettuts.com/wp-content/themes/default
Zoals je kunt zien, wordt de link niet met een / aan het einde geretourneerd! Zorg er dus voor dat je niet vergeet om het te typen.
Nu moeten we nog steeds JavaScript toevoegen met behulp van de
Nu nemen we de CSS en de JavaScript-code op, die er samen als volgt uitziet:
Wanneer u de pagina laadt, zult u merken dat er niets is gebeurd ... dit is correct!
Voordat sIFR3 gedefinieerde tekst met flits vervangt, moet deze worden geconfigureerd.
De configuratie vindt plaats in het bestand sifr-config.js, dus laten we dat bestand openen. (het bestand is leeg)
Wat we eerst gaan doen, is de lettertype-naam en de link naar het flash-bestand definiëren.
var tahoma = src: 'wp-content / themes / default / flash / sifr.swf';
Hier definiëren we een variabele die linkt naar ons Flash-bestand. Nu doet dit nog niets. Eerst moeten we het activeren door de opdracht activeren te typen.
sIFR.activate (tahoma);
Nu sIFR3 is geïnstalleerd en een lettertype is geactiveerd, moeten we definiëren welke tekst moet worden vervangen door Flash-tekst. Om dit te doen, gebruiken we de opdracht replace in sIFR3.
sIFR.replace (tahoma, selector: 'h2');
Wat we hebben gedaan is sIFR3 laten weten dat alle tekst tussen h2-tags moet worden vervangen.
Maar je kunt het vervangen door alles wat je maar wilt, bijvoorbeeld: p, b, i, pre etc ...
Hoewel het niet wordt aangeraden om alle tekst op uw website te vervangen door sIFR3 omdat dit uw website vertraagt.
Sla nu het bestand sIFR-config.js op en vernieuw uw WordPress-pagina. Je zult zien dat de titels zijn vervangen door flash.
Zoals u kunt zien, ziet de titel er veel duidelijker en scherper uit dan de standaard html-titels.
Bovendien weet je nu zeker dat het er in elke browser hetzelfde uitziet. Het gebruik van sIFR3 kan uw website echt een unieke uitstraling geven, omdat u elk gewenst lettertype kunt opgeven.
Nu sIFR3 werkt, moeten we het nog steeds vormgeven.
De styling vindt plaats in het bestand sifr-config.js en de sIFR-screen.css
Persoonlijk vind ik de tekstgrootte een beetje groot. Om dat te veranderen, moeten we wat CSS toevoegen aan sIFR-screen.css, dus laten we dat openen. Nogmaals, om dingen georganiseerd te houden, zullen we beginnen met stileren na de aangewezen regel:
/ * ---- Header styling --- * /
Nu, als je de basiskennis van CSS kent, weet je dat je h1, h2, h3, enz. Kunt stijlen door het simpelweg te typen. Voor degenen die nieuw zijn voor CSS, is dit hoe:
h2 // stylingcode
Om ervoor te zorgen dat het alleen van toepassing is op de sIFR3-tekst, voegen we de sIFR-actieve klasse toe voor de h2. We zullen proberen de tekst wat kleiner te maken door de lettertypegrootte te gebruiken en 14 pixels te laten proberen.
.sIFR-actieve h2 visibility: hidden; lettergrootte: 14 px;
Wanneer u het opslaat, zult u merken dat de lettergrootte is verkleind.
Zoals u kunt zien, hebben we ook de zichtbaarheid gewijzigd in verborgen omdat we ervoor willen zorgen dat de normale (niet-flash-tekst) verborgen is.
Andere dingen die je met deze methode kunt stylen, zijn regelhoogte en lettertype, om maar een paar te noemen.
Dingen die niet werken met deze methode zijn de tekstkleur en achtergrond! Dit moet worden gedaan in het bestand sifr-config.js, dus sla sIFR-screen.css op en open sifr-config.js
Wanneer de bestanden open zijn, kunt u beginnen met het toevoegen van enkele nieuwe regels na de selector.
We willen de tekst opmaken, dus laten we de CSS-functie gebruiken.
sIFR.replace (tahoma, selector: 'h2', css: []);
Vergeet niet de "," of de CSS is niet van toepassing! Of sIFR3 werkt mogelijk niet meer!
Dus laten we wat kleur toevoegen, onthoud dat de WordPress-titels links zijn? Dus we moeten wat hover en link kleuren toevoegen.
sIFR.replace (tahoma, selector: 'h2', css: ['a color: # 333333;', 'a: link color: # 333333;', 'a: hover color: # 0066CC; ']);
Dit lijkt op normale CSS, alleen dat de stijlopdrachten tussen "en a", "moeten worden toegevoegd na elke opdracht, behalve de laatste.
Een belangrijk punt is dat je de kleurcodes volledig moet schrijven! Dus als je een witte tekst wilt:
'a color: #FFF; ' <- WRONG! 'a color: #FFFFFF; ' <- GOOD
Link
Muis voorbij
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; ']);
Dat is het einde van deze tutorial. Als je dit artikel leuk vond, gebruik dan Digg en / of StumbleUp!
Accentsconagua