Share
J'ai remarqué quelques requêtes sur la manière d'implémenter sIFR3 sur votre site web - ou en combinaison avec WordPress. Dans ce tutoriel, je montrerai où télécharger sIFR3 et comment l’installer sur votre site web ou, dans ce cas, un thème WordPress.
sIFR3 est une combinaison de JavaScript et de Flash, qui vous permet d'afficher du texte de manière dynamique à l'aide de Flash. Cela peut améliorer considérablement l'apparence de votre site Web, car vous êtes certain qu'il sera identique dans tous les navigateurs et qu'il sera beaucoup plus fluide que le texte HTML de base. Si vous regardez un
Comme vous pouvez le constater, sIFR3 vous permet d’afficher un texte rendu plus détaillé. Cependant, il y a quelques points mineurs sur sIFR3.
Alors, sachez que vous savez ce qu’est sIFR3 et ce qu’il peut faire, commençons par le reste du didacticiel..
sIFR3 est développé par Mark Wubben; vous pouvez trouver la dernière version sur son site web. Dans ce tutoriel, j'utiliserai la dernière version disponible dans le répertoire nightlies.
Le fichier zip contiendra des fichiers flash, JavaScript et CSS. Une démo en direct est également incluse. Les fichiers dont vous avez besoin sont:
Avant de pouvoir tout télécharger, nous devons d'abord configurer notre fichier flash.
Un fichier .fla est inclus, comme indiqué à l'étape 1. Si vous ne disposez pas de Flash, Adobe propose des versions d'évaluation gratuites de ses produits, y compris pour Flash CS3, qui peuvent être téléchargées ici à l'adresse Adobe..
Après avoir téléchargé et installé Flash, ouvrez sifr.fla
Vous commencerez simplement par une case blanche. C'est parce que le fichier est divisé en couches.
Pour changer la famille de polices du sIFR3 que vous allez utiliser sur votre site Web, vous devez double-cliquer dans la case blanche. Si la case est toujours blanche, double-cliquez à nouveau et le texte affichera "Gras Italique Normal".
Maintenant, cliquez sur la ligne de texte et vous devriez passer en mode édition de texte. La police par défaut est Verdana.
Vous pouvez utiliser le sélecteur de polices pour choisir la police désirée. Dans ce tutoriel, j’ai choisi Tahoma..
Veuillez noter qu'il n'est pas nécessaire de modifier les autres options. La taille de la police, la couleur et les autres options de style de texte peuvent être modifiées à l'aide du JavaScript inclus dans sIFR3..
Maintenant que c'est fait, nous devons le compiler en .swf pour pouvoir afficher le flash sur votre site web..
Compilons donc un fichier .swf, allons-nous? Pour ce faire, allez à Fichier-> Exporter-> Exporter le film
Une nouvelle fenêtre apparaît. Dans cette fenêtre, vous pouvez attribuer un nom au fichier et choisir un répertoire pour l’exporter. Assurez-vous que le format s'affiche Film Flash, Je nomme le fichier "sifr.swf". Cliquez sur Enregistrer.
Encore une fois, une nouvelle fenêtre apparaîtra, les paramètres par défaut devraient fonctionner correctement.
Cliquez sur OK et vous verrez une barre de progression pendant la compilation du fichier swf..
Pour que sIFR3 fonctionne, vous devez télécharger les fichiers nécessaires (affichés à l'étape 1) dans votre répertoire WordPress. Pour garder les choses organisées, je vous suggère de télécharger les fichiers sur wp-content / themes / default
Veuillez noter que vous pouvez utiliser tout autre thème de votre choix..
Vous devez télécharger les fichiers dans les mêmes répertoires que le thème, pour que les fichiers CSS soient placés dans. wp-content / themes / default / css , vous pouvez faire la même chose avec les fichiers JavaScript et les fichiers flash. Lorsque vous avez terminé, la structure du fichier devrait ressembler à ceci:
N'oubliez pas: vous devez télécharger sifr.swf et non sifr.fla.
Maintenant que tous les fichiers sont téléchargés, nous pouvons installer sIFR3 dans notre thème WordPress.
Nous devons d’abord inclure les fichiers JavaScript et CSS. Nous allons faire cela entre le
Commençons par inclure les fichiers CSS en utilisant le étiquette:
Nous n'utilisons pas l'URL complète d'un fichier dans un fichier de modèle. WordPress a des tags prédéfinis, tels que qui retournera automatiquement le répertoire du thème, dans ce cas http://www.nettuts.com/wp-content/themes/default
Comme vous pouvez le constater, le lien renvoyé par un / n'est pas renvoyé! Alors, assurez-vous de ne pas oublier de le taper.
Maintenant, nous devons encore inclure le JavaScript en utilisant le
Maintenant, nous incluons le CSS et le JavaScript, qui ensemble ressemble à:
Lorsque vous chargez la page, vous constaterez que rien ne s'est passé… c'est correct!
Avant que sIFR3 ne remplace le texte défini par flash, il doit être configuré.
La configuration a lieu dans le fichier sifr-config.js, ouvrons donc ce fichier. (le fichier est vide)
Ce que nous allons faire en premier est de définir le nom de la police et le lien vers le fichier flash..
var tahoma = src: 'wp-content / themes / default / flash / sifr.swf';
Ici, nous définissons une variable qui lie à notre fichier flash. Maintenant cela ne fait rien encore. Nous devons d’abord l’activer en tapant la commande activate.
sIFR.activer (tahoma);
Maintenant que sIFR3 a été installé et qu'une police a été activée, nous devons définir le texte à remplacer par du texte flash. Pour ce faire, nous utilisons la commande replace dans sIFR3.
sIFR.replace (tahoma, sélecteur: 'h2');
Ce que nous avons fait est de dire à sIFR3 de remplacer tout le texte entre les balises h2.
Mais vous pouvez le remplacer par tout ce que vous voulez, par exemple: p, b, i, pré, etc.
Bien qu'il ne soit pas conseillé de remplacer tout le texte de votre site Web par sIFR3, cela ralentirait votre site Web..
Enregistrez maintenant le fichier sIFR-config.js et actualisez votre page WordPress. Vous verrez que les titres ont été remplacés par flash.
Comme vous pouvez le constater, le titre semble beaucoup plus clair et net que les titres HTML par défaut.
De plus, vous êtes maintenant sûr que le résultat est le même dans tous les navigateurs. L'utilisation de sIFR3 peut véritablement donner à votre site Web une apparence unique, car vous pouvez spécifier la police de votre choix..
Maintenant que sIFR3 fonctionne, nous devons encore le nommer.
Le style a lieu dans le fichier sifr-config.js et le fichier sIFR-screen.css
Personnellement, je pense que la taille du texte est un peu grande. Pour changer cela, nous devons ajouter des CSS à sIFR-screen.css, alors ouvrons-le. Encore une fois, pour garder les choses organisées, nous allons commencer à coiffer après la ligne désignée:
/ * ---- Style d'en-tête --- * /
Maintenant, si vous connaissez les bases du CSS, vous savez que vous pouvez styler h1, h2, h3, etc. en le tapant simplement. Pour ceux qui débutent avec CSS, voici comment:
h2 // code de style
Pour vous assurer qu'il ne s'applique qu'au texte sIFR3, nous allons ajouter la classe sIFR-active devant le h2. Nous allons essayer de rendre le texte un peu plus petit en utilisant la taille de police, et essayons 14 pixels.
.sIFR-active h2 visibilité: masqué; taille de police: 14px;
Lorsque vous enregistrez, vous remarquerez que la taille de la police a été réduite.
Comme vous pouvez le constater, nous avons également modifié la visibilité en masqué, car nous voulons nous assurer que le texte normal (pas le texte flash) est masqué..
Vous pouvez également styler à l’aide de cette méthode: line-height & font-family, pour ne citer que quelques exemples..
Les choses qui ne fonctionneront pas avec cette méthode sont la couleur et l’arrière-plan du texte! Cela doit être fait dans le fichier sifr-config.js, alors sauvegardons sIFR-screen.css et ouvrez sifr-config.js
Lorsque les fichiers sont ouverts, vous pouvez commencer à ajouter de nouvelles lignes après le sélecteur..
Nous voulons styler le texte, appelons donc la fonction CSS.
sIFR.replace (tahoma, sélecteur: 'h2', css: []);
N'oubliez pas le "," ou le CSS ne s'appliquera pas! Ou sIFR3 pourrait cesser de fonctionner!
Alors ajoutons de la couleur, rappelez-vous que les titres WordPress sont des liens? Nous devons donc ajouter des couleurs de survol et de lien.
sIFR.replace (tahoma, sélecteur: 'h2', css: ['a color: # 333333;', 'a: link color: # 333333;', 'a: survol color: # 0066CC; ']);
Cela ressemble à du CSS normal, sauf que les commandes de style sont comprises entre "et", "doit être ajouté après chaque commande, à l'exception de la dernière..
Une chose importante est que vous devez écrire les codes de couleur complètement! Donc, si vous voulez du texte blanc:
'a color: #FFF; ' <- WRONG! 'a color: #FFFFFF; ' <- GOOD
Lien
Survoler
sifr-config.js
var tahoma = src: 'wp-content / themes / default / flash / sifr.swf'; sIFR.activer (tahoma); sIFR.replace (tahoma, sélecteur: 'h2', css: ['a color: # 333333;', 'a: link color: # 333333;', 'a: survol color: # 0066CC; ']);
C'est la fin de ce tutoriel. Si vous avez aimé cet article, veuillez s'il vous plaît Digg et / ou StumbleUpon!
Accentsconagua