Instalation, peinture et autres modifications
Posted on novembre 30, 2008 | Category: 8 - Bidouille
Je prends petit à petit mes marques sur le nouveau serveur. Bon j’avais commandé un beau thème, mais les couleurs, la police, les entêtes ne me plaisent guère, en fait la seule chose que me plaise vraiment, c’est le système en 3 colonnes pour la présentation des articles. J’ai donc décidé de mettre les mains dans le cambouis, plus communément appelé PHP en informatique (le langage de wordpress et donc de ce blog).
Les deux premières tâches que je me suis assigné ont été de modifier l’abominable entête du thème et la mise en valeur le dernier post écrit.
La seconde tâche a été assez simple, une simple petite modification du code du fichier index.php pour que le dernier article soit en entier et sur 3 colonnes au lieu d’être un résumé sur une colonne, ceci après la réflexion très juste d’Alain qui m’a presque réclamé une boussole afin de pouvoir s’orienter sur le blog.
La première tâche m’a demandé plus de travail. Je voulais faire quelques choses comme les entêtes des blogs de Marc et Patrick, mais je ne voulais pas le faire en flash. En farfouillant sur le web j’ai trouvé ce que je cherchais en l’occurrence le script javascript script.aculo.us. Ayant l’esprit plutôt à l’arrêt (le manque de sommeil n’aidant pas à la compréhension face à un sujet aussi dévoreur de concentration que la programmation), je suis parti à la recherche d’exemple pour comprendre la fonctionnement de ce script et de ses effets. Par chance je suis tombé sur ce blog, qui m’a entraîné vers ce site. C’était exactement ce que je cherchais ! Bon certes le code lui ne me convenait pas, mais m’avait suffisamment ouvert les yeux pour que je sois capable de l’adapter et obtenir ce qui est aujourd’hui l’entête du blog. Le prochain objectif sera de faire de cet entête un plug-in pour wordpress, mais c’est pour une prochaine étape.
Ma démarche a été la suivante
- A l’ouverture du site l’image par défaut s’affiche.
- Au changement de photo je cache l’image par défaut par une image temporaire qui lui est identique.
- Je change l’image d’origine par la nouvelle, ce qui est invisible puisque l’image temporaire cache ce qui se passe derrière.
- J’applique un effet de scriptaculous qui s’appelle Opacity sur la nouvelle image qui augmente la transparence de l’image temporaire, ce qui fait apparaître petit à petit la nouvelle image.
- Je change l’image temporaire par le nouvelle image, ce qui est aussi invisible puisqu’à ce moment là l’image temporaire est transparente.
- Voilà le tour est joué, avant de lancer le script, je lui indique le nombre d’images qu’il y a et donc quand il atteint la dernière image il revient à la première. Les images tournent donc avec un joli effet de fondu enchaîner, sauf peut-être sous IE mais on s’en fout.
Maintenant comment ais-je fait pour programmer ces 6 étapes. En fait c’est relativement simple. Mes explications impliquent que vous ayez accès au ftp de votre serveur pour créer les fichiers et le répertoire nécessaire.
- Créer sur la racine du blog un répertoire slide dans le lequel vous mettez les photos que vous voulez utiliser pour l’entête, elles devraient s’appeller pano1.jpg, pano2.jpg, pano3.jpg etc.
- Créer dans le répertoire wp-includes/js/ le fichier dul.js .
- Ajouter dans le fichier Header.php entre les balise <head> et </head> les lignes suivantes :
<script type=”text/javascript“ src=”wp-includes/js/scriptaculous/prototype.js“></script><script type=”text/javascript“ src=”wp-includes/js/scriptaculous/scriptaculous.js“></script>
<script type=”text/javascript“ language=”JavaScript“ src=”wp-includes/js/dul.js“>
Elles Permettent d’appeler le script scriptaculous pour gérer l’effet de fondu, ainsi que le fichier dans lequel nous allons écrire notre script (dul.js). Par défaut scriptaculous est installé dans wordpress, donc pas besoin de l’installer sur le serveur, merci monsieur wordpress.
- Nous allons ensuite modifer le HTML du fichier Header.php afin d’y intégrer l’image temporaire. Sous la ligne <div id=”navbar”> il faut ajouter
la ligne <div id=”temp”></div> - Pour finir avec le fichier header.php, nous modifions le tag <body> en <body onload=”slide()”> cette modification nous permetra de lancer notre slideshow automatiquement.
- Nous allons maintenant nous occuper du style de la page, dans mon cas mes images font 980px*250px, donc j’adapte l’entête à cette taille, de plus je modifie le style de l’image temporaire pour qu’elle cache totalement l’entête ordinaire. Pour cela je modifie dans le fichier style.css la ligne commençant par #navbar{ par cette ligne
#navbar { margin:0px auto; padding:0;width:980px;background:url(images/pano1.jpg) no-repeat bottom left;height:250px;}
et j’ajoute en fin de fichier ces 2 lignes :
/*image temporaire*/
#temp{ margin:0px auto; padding:0;width:980px;background:url(images/pano1.jpg) no-repeat bottom left;height:250px;opacity:0;position:absolute;z-index:0} - Il est temps de s’attaquer au sérieux, c’est à dire au script javascript permettant de passer joliment d’une image à l’autre. Il faut pour celà ouvrir le fichier dul.js qui doit être vide et y coller le code suivant :
var i=1; //compteur il s’incrémente à chaque nouvelle image et se remet à zéro quand on arrive sur la dernière
function slide() // cette fonction se lance au chargement de la page.
{
setInterval(test_slide, 10000); //setInterval permet de provoquer une action toutes les X ms dans le cas présent, on éxécute la fonction text_slide tous les 10 000 ms secondes (chaque 10sec quoi)
}
function changetemp() //Cette fonction change l’image temporaire
{
document.getElementById(’temp’).style.backgroundImage=”url(slide/pano” + i + “.jpg)”;
}function test_slide() // c’est dans cette fonction que tout se passe
{
i++;
if (i>=13) //quand on arrive au dela la la 12ème image on repasse à la première (j’ai 12 images, mais il suffit de modifier cette valeur suivant votre nombre d’image
i=1;
document.getElementById(’temp’).style.opacity = 100; //rend opaque la l’image temporaire
document.getElementById(’navbar’).style.backgroundImage=”url(slide/pano” + i + “.jpg)”; //change l’image standard
new Effect.Opacity(’temp’, { from: 1.0, to: 0.0, duration: 5.0, afterFinish:changetemp});//c’est ici que ce produit l’effet de fondu, en augmentant la transparence de l’iamge temporaire, jusqu’à la faire disparaitre. l’instruction afterFinish appelle la fonction changetemp, qui modifie l’image temporaire par la nouvelle image.
} - voilà c’est fini, allez sur votre blog et regardez les images tournée.
C’est la première fois que je réalise un tutorial, donc n’hésitez pas à réagir et me dire si c’est clair ou non. Voilà bonne chance.
Pour les non informaticiens, désolé de vous imposer ces spécualtions techniques, mais appréciant trouver sur le web des explications et des tutorials, je pense que des programmeurs peuvent être content de trouver ce genre de turoriaux.
Pour me faire pardonner : 
Ah une dernière chose, ce script répond gloablement aux standards, il doit logiquement fonctionner sous Internet Explorer, mais je ne l’ai pas testé. Par contre il marche parfaitement sous FF3 et devrait donc marcher correctement sous Opera, Safari, Chrome et tout autre navigateur respectueux de ses utilisateurs et programmeurs.
» Filed Under 8 - Bidouille
7 Responses to “Instalation, peinture et autres modifications”
Leave a Reply
décembre 1st, 2008 at 9:38
Salut Dul…
Et oui plus de 70 billets tous blogs confondus dans mon agrégateur, et je suis en retard à ta cyber-pendaison de crémaillère! Désolé. Mais bon le changement valait la peine. Franchement l’aspect général ressemble plus à l’univers du Dul que je connais (mal encore). Et c’est vrai que pour la navigation c’est un peu fouilli, mais là encore je retrouve mieux les errances du poète se laissant porté au gré des flots de son surf cybernétique.
Bref bravo. Et puis l’entète en flash sans flash, une prouesse! Si un jour je passe en blog hébergé chez moi, je te piquerait peut etre ton code si t’es ok.
Bonne continuation
décembre 1st, 2008 at 9:42
Rectification: je n’étais pas allé plus loin que la page d’accueil; en 3 colonnes c’est en effet plus que bien navigable!
psst si tu pouvais corriger mes affreuses foted’hortografes du commentaire précédent… j’ai honte. ( porter et piquerai )
décembre 2nd, 2008 at 23:51
Salut Pedro
,
Il y a encore plein de travail sur le blog, mais je crois qu’au final se sera sympa
.
Bienvenu ici en tout cas. Pour ce qui est d’un blog hébergé, je t’en offre un en pedro.amsud.net quand tu le désires, c’est même l’objectif de cette plate-forme, du moins quand elle sera prête hehe.
décembre 3rd, 2008 at 19:08
ben dis donc… c’est vraiment fantastique (quel travail!). On a envie de rester des heures sur ton blog, maintenant, à regarder défiler les photos de l’en tête!!!
décembre 4th, 2008 at 2:49
Je changerai régulièrement les photos pour toi
décembre 4th, 2008 at 18:03
ouais … c’est beau. j’aime vraiment bien.
décembre 5th, 2008 at 4:18
Merci et pour vous remercier j’ai ajouter 8 photos