Share
Ich habe einige Anfragen zur Implementierung von sIFR3 in Ihre Website - oder in Kombination mit WordPress - festgestellt. In diesem Tutorial werde ich zeigen, wo SIFR3 heruntergeladen werden kann und wie es auf Ihrer Website oder in diesem Fall einem WordPress-Theme installiert werden kann.
sIFR3 ist eine Kombination aus JavaScript und Flash, mit der Sie Text dynamisch mit Flash anzeigen können. Dies kann das Erscheinungsbild Ihrer Website erheblich verbessern, da Sie sicher sind, dass sie in jedem Browser gleich aussieht und dass sie viel glatter aussieht als einfacher HTML-Text. Wenn du einen Blick auf a
Wie Sie sehen, können Sie mit sIFR3 einen detaillierteren gerenderten Text anzeigen. Es gibt jedoch einige kleinere Punkte zu sIFR3.
Wenn Sie wissen, was sIFR3 ist und was es kann, können Sie mit dem Rest des Tutorials beginnen.
sIFR3 wird von Mark Wubben entwickelt. Die neueste Version finden Sie auf seiner Website. In diesem Tutorial werde ich die neueste Version verwenden, die im Nightlies-Verzeichnis zu finden ist.
Die ZIP-Datei enthält Flash-, JavaScript- und CSS-Dateien. Außerdem ist eine Live-Demo enthalten. Folgende Dateien werden benötigt:
Bevor wir alles hochladen können, müssen wir zuerst unsere Flash-Datei einrichten.
Wie in Schritt 1 gezeigt, ist eine .fla-Datei enthalten. Wenn Sie nicht über Flash verfügen, bietet Adobe kostenlose Testversionen auch für Flash CS3 an, die hier bei Adobe heruntergeladen werden können.
Nachdem Sie Flash heruntergeladen und installiert haben, öffnen Sie sifr.fla
Sie beginnen mit einer weißen Box. Dies liegt daran, dass die Datei in Ebenen unterteilt ist.
Um die Schriftfamilie des sIFR3, das Sie auf Ihrer Website verwenden möchten, zu ändern, müssen Sie in das weiße Feld doppelklicken. Wenn das Feld noch weiß ist, doppelklicken Sie erneut, und der Text zeigt "Bold Italic Normal".
Klicken Sie nun auf die Textzeile und Sie sollten in den Textbearbeitungsmodus wechseln. Die Standardschriftart ist Verdana.
Sie können die Schriftartauswahl verwenden, um die gewünschte Schriftart auszuwählen. In diesem Tutorial habe ich Tahoma ausgewählt.
Bitte beachten Sie, dass Sie keine anderen Optionen ändern müssen. Die Schriftgröße, Farbe und andere Textstiloptionen können mit dem in sIFR3 enthaltenen JavaScript geändert werden.
Jetzt ist es fertig, wir müssen es in eine .swf-Datei kompilieren, um Flash auf Ihrer Website anzuzeigen.
Lassen Sie uns eine .swf-Datei kompilieren, oder? Um dies zu tun, gehen Sie zu Datei-> Exportieren-> Film exportieren
Ein neues Fenster wird geöffnet. In diesem Fenster können Sie der Datei einen Namen geben und ein Verzeichnis auswählen, in das sie exportiert werden soll. Stellen Sie sicher, dass das Format angezeigt wird Flash Movie, Ich benenne die Datei "sifr.swf". Klicken Sie auf Speichern.
Wieder öffnet sich ein neues Fenster, die Standardeinstellungen sollten gut funktionieren.
Klicken Sie auf OK und Sie sehen eine Fortschrittsleiste, während die SWF-Datei kompiliert wird.
Damit sIFR3 funktioniert, müssen Sie die benötigten Dateien (angezeigt in Schritt 1) in Ihr WordPress-Verzeichnis hochladen. Um die Dinge zu organisieren, schlage ich vor, dass Sie die Dateien hochladen wp-content / themes / default
Bitte beachten Sie, dass Sie ein beliebiges anderes Thema verwenden können.
Sie sollten die Dateien in den gleichen Verzeichnissen wie das Design hochladen, damit die CSS-Dateien gespeichert werden wp-content / themes / default / css , Sie können dasselbe mit den JavaScript-Dateien und Flash-Dateien tun. Wenn Sie fertig sind, sollte die Dateistruktur so aussehen:
Vergessen Sie nicht: Sie müssen sifr.swf hochladen und nicht sifr.fla.
Nachdem alle Dateien hochgeladen wurden, können wir sIFR3 in unserem WordPress-Design installieren.
Zuerst müssen wir die JavaScript- und CSS-Dateien einschließen. Wir werden das zwischen den beiden tun
Lassen Sie uns zunächst die CSS-Dateien mit einschließen Etikett:
Wir verwenden nicht die vollständige URL zu einer Datei in einer Vorlagendatei. WordPress hat vordefinierte Tags, wie zum Beispiel In diesem Fall wird automatisch das Themenverzeichnis zurückgegeben http://www.nettuts.com/wp-content/themes/default
Wie Sie sehen, wird der Link nicht mit einem / am Ende zurückgegeben! Stellen Sie also sicher, dass Sie nicht vergessen, es einzugeben.
Jetzt müssen wir noch das JavaScript mit einschließen
Jetzt fügen wir das CSS und das JavaScript hinzu, die zusammen wie folgt aussehen:
Wenn Sie die Seite laden, werden Sie feststellen, dass nichts passiert ist… das ist richtig!
Bevor sIFR3 definierten Text durch Flash ersetzen kann, muss er konfiguriert werden.
Die Konfiguration erfolgt in der Datei sifr-config.js, also öffnen wir diese Datei. (die Datei ist leer)
Zuerst müssen wir den Namen der Schriftart und den Link zur Flash-Datei definieren.
var tahoma = src: 'wp-content / themes / default / flash / sifr.swf';
Hier definieren wir eine Variable, die mit unserer Flash-Datei verknüpft ist. Das macht jetzt noch nichts. Zuerst müssen wir es aktivieren, indem Sie den Befehl zum Aktivieren eingeben.
sIFR.activate (Tahoma);
Nachdem nun sIFR3 installiert und eine Schriftart aktiviert wurde, müssen wir definieren, welcher Text durch Flash-Text ersetzt werden soll. Dazu verwenden wir den Befehl replace in sIFR3.
sIFR.replace (Tahoma, Selektor: 'h2');
Wir haben sIFR3 angewiesen, den gesamten Text zwischen H2-Tags zu ersetzen.
Sie können es jedoch durch alles ersetzen, was Sie möchten, zum Beispiel: p, b, i, pre usw.
Es wird zwar nicht empfohlen, den gesamten Text auf Ihrer Website durch sIFR3 zu ersetzen, da dies Ihre Website verlangsamt.
Speichern Sie nun die Datei sIFR-config.js und aktualisieren Sie Ihre WordPress-Seite. Sie werden sehen, dass die Titel durch Flash ersetzt wurden.
Wie Sie sehen, sieht der Titel viel klarer und schärfer aus als die standardmäßigen HTML-Titel.
Außerdem sind Sie jetzt sicher, dass es in jedem Browser gleich aussieht. Die Verwendung von sIFR3 kann Ihrer Website wirklich ein einzigartiges Aussehen verleihen, da Sie jede beliebige Schriftart festlegen können.
Jetzt, da sIFR3 funktioniert, müssen wir es noch anpassen.
Das Styling erfolgt in der Datei sifr-config.js und in der Datei sIFR-screen.css
Ich persönlich denke, dass die Textgröße etwas groß ist. Um dies zu ändern, müssen wir der sIFR-screen.css CSS hinzufügen, also öffnen wir sie. Um die Dinge in Ordnung zu halten, beginnen wir mit der Gestaltung nach der festgelegten Linie:
/ * ---- Header-Styling --- * /
Wenn Sie nun die Grundlagen von CSS kennen, wissen Sie, dass Sie h1, h2, h3 usw. formatieren können, indem Sie es einfach eingeben. Für diejenigen, die noch nicht mit CSS vertraut sind:
h2 // Stylingcode
Um sicherzustellen, dass es nur für den sIFR3-Text gilt, fügen wir die sIFR-active-Klasse vor h2 hinzu. Wir werden versuchen, den Text durch Verwendung der Schriftgröße etwas kleiner zu gestalten, und versuchen, 14 Pixel auszuprobieren.
.sIFR-aktiv h2 Sichtbarkeit: ausgeblendet; Schriftgröße: 14px;
Wenn Sie es speichern, werden Sie feststellen, dass die Schriftgröße reduziert wurde.
Wie Sie sehen, haben wir auch die Sichtbarkeit in ausgeblendet geändert, da der normale Text (nicht Flash-Text) ausgeblendet werden soll.
Andere Dinge, die Sie mit dieser Methode gestalten können, sind Zeilenhöhe und Schriftfamilie, um nur einige zu nennen.
Dinge, die mit dieser Methode nicht funktionieren werden, sind die Textfarbe und der Hintergrund! Dies muss in der Datei sifr-config.js geschehen. Speichern Sie also sIFR-screen.css und öffnen Sie sifr-config.js
Wenn die Dateien geöffnet sind, können Sie nach dem Selektor einige neue Zeilen hinzufügen.
Wir möchten den Text formatieren, also rufen wir die CSS-Funktion auf.
sIFR.replace (Tahoma, Selektor: 'h2', css: []);
Vergessen Sie nicht das "," oder das CSS wird nicht zutreffen! Oder sIFR3 funktioniert möglicherweise nicht mehr!
Also können wir etwas Farbe hinzufügen. Denken Sie daran, dass die WordPress-Titel Links sind. Wir müssen also einige Schwebeflug- und Verbindungsfarben hinzufügen.
sIFR.replace (Tahoma, Selektor: 'h2', css: ['a color: # 333333;', 'a: link color: # 333333;', 'a: hover color: # 0066CC; ']);
Dies sieht aus wie normales CSS, nur dass die Stilbefehle zwischen "und", "" "nach jedem Befehl hinzugefügt werden müssen, mit Ausnahme des letzten Befehls.
Eine wichtige Sache ist, dass Sie die Farbcodes vollständig schreiben müssen! Wenn Sie also weißen Text wünschen:
'a color: #FFF; ' <- WRONG! 'a color: #FFFFFF; ' <- GOOD
Verknüpfung
Maus über
sifr-config.js
var tahoma = src: 'wp-content / themes / default / flash / sifr.swf'; sIFR.activate (Tahoma); sIFR.replace (Tahoma, Selektor: 'h2', css: ['a color: # 333333;', 'a: link color: # 333333;', 'a: hover color: # 0066CC; ']);
Das ist das Ende dieses Tutorials. Wenn Ihnen dieser Artikel gefallen hat, bitte Digg und / oder StumbleUpon!
Accentsconagua