13 novembre 2010
Installer et utiliser le plugin Audio-Player avec WordPress
Vous avez remarqué que lorsqu’on importe un Mp3 dans un message, il s’affiche sous la forme d’un lien :
Pour afficher un petit Player aux couleurs de votre blog, il vous faut le plugin Audio-Player que vous pouvez télécharger ici.
Décompressez le fichier zip et mettez son contenu dans le dossier Plugins.
www / wp-content / plugins
Activez le plugin dans l’onglet Extensions de votre administration WordPress.
Pour changer la couleur du player allez dans Réglages et sélectionnez Audio player dans la liste.
Pour afficher le Player dans votre message importez votre mp3 en passant par Ajouter un son pour récupérer son adresse, Placez l’adresse du mp3 dans la balise [audio:] en mode Visuel comme ceci :
[audio:http://www.fileden.com/files/2009/10/3/2591997/Jamiroquai-Runaway.mp3]
Voilà…vous pouvez faire un aperçu de votre message pour vérifier que le player s’affiche et fonctionne correctement.
12 novembre 2010
Insérer des vidéos dans un article avec WordPress
Quelle a été ma surprise le jour où j’ai voulu insérer une vidéo dans un de mes articles…
A la place d’une vidéo : un lien tout bidon !
Car en passant par l’icône Ajouter une vidéo dans la barre d’outils sur Wordpress, oui…on obtient un lien…on ne peut pas visionner la vidéo sur l’article…ce qui à mon goût n’est pas terrible terrible, c’est une option qu’il doit y avoir bien sur pour ceux qui le veulent, mais une petite vidéo en direct c’est mieux quand même…
Pour ceux qui ne veulent pas installer de plugin, vous avez la solution de coller un lecteur exportable que vous trouvez maintenant sur un tas de site de vidéos comme Daylimotion, Youtube, Google vidéo etc…
Dans ce cas, il suffit de copier/coller le code du lecteur exportable que vous trouvez sous la vidéo en question, dans votre message en mode html et le tour est joué…
Oui, mais…
Cette méthode a ses limites ! c’est très pratique si vous avez l’habitude de prendre les vidéos sur le net, dans ce cas ne changez rien, mais si vous faites des vidéos chez vous et que vous voulez les mettre sur votre blog, vous devez obligatoirement les hébergées sur un de ces sites pour en récupérer le lecteur exportable.
Bien sur si vous savez un peu bidouiller, vous pouvez passez par votre client Ftp et héberger votre vidéo sur votre serveur, puis en récupérer l’adresse que vous insèrerez ensuite dans le code du lecteur exportable en collant l’adresse de votre vidéo dedans…
Oui…mais quelle galère…il y a plus simple quand même !
Alors si vous voulez mettre des vidéos dans vos articles sans vous prendre la tête, il y a vraiment plus simple…Je vous propose d’installer le plugin Embedded Video…
Vous pouvez le télécharger ici.
Comme pour n’importe quel plugin, décompressez le fichier zip puis placez le dossier embedded-video-with-link dans Plugins.
http://www.demolitetuto.fr/wp-content/plugins/embedded-video-with-link
Activez le plugin dans votre espace d’administration WordPress dans Extentions.
Lorsque vous ouvrez un nouvel article une icône apparait désormais…
Pour insérer une vidéo qui se trouve sur votre ordinateur, cliquez sur l’icône, une fenêtre va s’ouvrir avec plusieurs onglets.
Choisissez Upload vidéo, puis Parcourir pour importer votre vidéo, vous pouvez lui donner un titre et une description mais rien ne vous y oblige…
Cliquez sur Upload et patientez quelques secondes, lorsque la vidéo est importée la fenêtre se met sur l’onglet Local vidéo, vous devez sélectionner la vidéo dans la liste et faire Insert.
Évidement si c’est la première fois que vous importez une vidéo, il n’y a que la votre ;) mais pour les fois suivantes, vos anciennes vidéos s’affichent dans la liste, et vous pouvez les mettre dans un article sans avoir de nouveau à les importer, elles restent en mémoire.
Voyons maintenant l’onglet Vidéo URL…
Vous devez simplement coller l’adresse d’une vidéo dans la case Insert vidéo URL et faire Insert.
L’avantage de cette option, c’est que vous pouvez récupérer le Permalien de n’importe quelle vidéo et afficher cette vidéo avec le lecteur du plugin qui est tout de même plus sympa…
Mais surtout il permet un meilleurs affichage de certaines vidéos…
Par exemple dans mon cas, lorsque je fais des tuto en vidéo, il est impossible d’héberger mes vidéos sur des sites comme Daylimotion, Youtube, Google vidéo etc… mes vidéos sont floues, pas moyen de faire de réglages même dans le menu du lecteur, et le mode plein écran est une catastrophe.
En collant l’url de mes vidéos dans Vidéo URL, mes vidéos s’affichent correctement.
Pour récupérer l’adresse (url) d’une vidéo vous devez l’héberger sur votre serveur (ftp), voici comment faire :
Dans la partie de gauche, ouvrez le dossier qui contient votre vidéo et sélectionnez-la, dans la partie de droite ouvrez le dossier Upload (où sont tous les fichiers de votre blog) puis créer un dossier Vidéos, ça sera plus facile par la suite pour retrouver vos vidéos…
Sélectionner le dossier Vidéos puis cliquez sur la flèche pour envoyer votre vidéo dans la partie de droite.
Pour récupérer son adresse (url), cliquez droit sur votre vidéo qui se trouve maintenant dans la partie de droite (ce qui veut dire qu’elle est hébergée sur votre serveur) puis Copiez l’URL et sur HTTP.
Collez l’adresse dans Insert vidéo URL puis Insert et c’est tout !
Une ligne de code apparait dans votre article comme ceci :
[local / wp-content/ uploads / 2009 / 04/ leo-dance-1.mpg]
Si vous faites un aperçu de votre article, vous pourrez vérifier que votre vidéo s’affiche bien…
07 novembre 2010
Changer l’icône par défaut de Gravatar dans les commentaires avec WordPress
Vous connaissez forcément ce logo…
C’est celui du site Gravatar, qui permet d’ajouter un avatar dans les commentaires des blogs que vous visitez…
Il suffit de vous inscrire sur le site Gravatar.com puis d’importer un avatar et grâce à votre adresse mail, chaque fois que vous laisserez un commentaire sur un blog qui utilise Gravatar, votre photo ou votre avatar s’affichera dans les commentaires de celui-ci.
Ce qui donne ça :
Depuis peu, sur mon blog même si vous n’êtes pas inscrit sur Gravatar, à la place de l’icône bleue par défaut…vous avez un petit monstre qui vous est attribué !
C’est plus sympa…non ?
ça donne ça :
Pour activer cette option, allez dans votre espace d’administration WordPress puis dans Réglages et Discussion.
Vous avez plusieurs possibilités…Wavatar ou Monster, à vous de choisir…il ne vous reste plus qu’à cochez la case de votre choix et d’enregistrer les modifications.
Voilà c’est tout
Mettre un formulaire email avec WordPress
Vous allez me dire qu’il existe des Plugins pour ça, notamment Cforms…tout à fait, c’est d’ailleurs celui que j’utilise…
Je pense à ceux qui débute sur WordPress, certains Plugins sont pas toujours très simple à comprendre, sans parler du fait qu’ils sont en anglais et que même avec un outils de traduction, il faut pas mal d’imagination et de persévérance pour déchiffrer et tout comprendre…
Avec ce petit script pas de réglage particulier, vous pouvez le mettre dans un bloc texte pour qu’il apparaisse dans une de vos colonnes ou bien dans une page spéciale “Contacter l’auteur” ou encore dans un message.
Vous avez juste à mettre votre adresse email dans la première ligne, puis de coller le script dans un message en mode html ou encore dans une page ou même dans un widget, dans ce cas vous devrez modifier la grandeur des cases, en changeant les valeurs cols=”30″ rows=”7″ et size=”40″.
<form action="mailto:demolite@fournisseur.fr">
<blockquote>
<label for="email_expediteur">Votre adresse e-mail :</label>
<p>
<input name="email_expediteur" type="text" class="minuscule" id="email_expediteur" size="40" />
<p>
<label for="titre">Titre de message :</label>
<p>
<input type="text" size="40" name="titre" id="titre"/>
<p>
<label for="message">Votre Message:</label>
<p>
<textarea name="message" id="message" cols="30" rows="7"></textarea>
<p><input type="submit" name="envoyer" value="Envoyer" />
</blockquote>
</form>
Le script réagit différemment en fonction du navigateur et de la messagerie que vous utilisez…
Dans la plupart des cas, la messagerie s’ouvre et il n’y a plus qu’à envoyer le message…
Ajouter une colonne a son thème avec WordPress
Dernièrement en regardant mon blog, je me suis dis qu’une colonne de plus à droite à côté de l’autre ne serait pas du luxe…
Inutile de vous dire que ça s’est pas fait en 5 minutes, j’ai bien ramé…je me suis aidée de 3 tuto qui parlaient du sujet, mais rien à faire ça ne marchait pas…
Pour y arriver il a fallut que je lise et relise tous ces tuto et surtout que j’en comprenne les bases, pour pouvoir adapter tout ça à mon thème, car en fonction des thème pas mal de chose peuvent changer…
J’ai bien cru que j’allais abandonner…mais c’est un mot qui me donne des boutons et qui m’empêche de dormir alors pas question lâcher l’affaire…
Dans ce tuto je vais essayer de vous donner le plus de détails possible afin de vous faciliter la tâche, voici l’adresse des 3 sites qui m’ont bien aidé, j’ai vraiment pioché dans les 3, car des fois certains tuto s’adressent à des utilisateurs affirmés…ce qui semble évident ne l’est pas toujours…
Webdemark.fr
Je précise tout de même que le tuto qui va suivre, s’applique sur un blog qui a 2 colonnes, c’est à dire une page centrale (#Content) et une colonne latérale (sidebar, leftbar, rightbar etc…) en fonction des thèmes vos colonnes peuvent se nommer différemment…
Le principal, c’est qu’elles portent le même nom dans votre feuille de style et dans les autres fichiers que nous allons modifier.
Si votre blog a 3 colonnes, une centrale et 2 colonnes de chaque côté et que vous voulez faire passer la colonne de gauche à droite, pour que les 2 colonnes soient côte à côte comme sur ce blog, il y a juste un terme à changer dans la feuille de style…
Avant :
Après :
Ouvrez votre feuille de style, descendez sur la ligne qui gère votre colonne de gauche, elle peut se nommer l_sidebar ou sidebarleft ou encore leftbar, elle sera facile à reconnaitre…il y a jours le mot bar !
Changez le float: left; en float: right; et votre colonne ira se placer à droite…tout simplement.
Voilà…passons maintenant aux choses sérieuses !
Avant toute chose, faites une copie des fichiers que nous allons modifier…
Commençons par ajouter quelques blocs dans la feuille de style :
www/wp-content/themes/nom de votre theme/style.css
Il n’est pas nécessaire d’ajouter tous ces blocs, car certains sont déjà dans votre feuille de style, par contre ce sont des blocs que nous allons modifier en changeant la valeur des width…(pour éviter de s’embrouiller, ajoutez-les quand même vous pourrez toujours les supprimer pas la suite si ça fait doublon…)
#main {
width: 1200px;
}
#content {
width:725px;
float: left;
}
.sidebar {
width: 400px;
float: right;
}
.sidebar-1 {
width:200px;
float:right;
}
.sidebar-2 {
width:200px;
}
Le bloc #main, peut se nommer #Page ou #Container, il est déjà dans votre fds, il gère la taille la page de votre blog, qui contient vos colonnes centrale et latérale.
Le bloc #content c’est votre page des messages, la page centrale, ce bloc est déjà dans votre fds.
Les 3 blocs suivants (sidebar) gèrent vos colonnes latérales, un seul se trouve déjà dans votre fds, puisque vous avez une colonne latérale.
Collez les 5 blocs ci-dessus dans le haut de votre feuille de style, puis vérifier que ces nouveaux blocs portent bien le même nom que vos blocs déjà en place dans votre feuille de style, vous allez devoir modifier la taille des blocs, puisque vous allez ajouter un colonne…dans cet exemple j’ai du ajouter 200px (la taille de ma nouvelle colonne).
Si le bloc #main se nomme #container chez vous, changez le #main en #container dans le bloc que vous venez d’ajouter, même chose pour les colonnes…
Dans ma feuille de style avant les modifications, ma colonne de droite se nommait #sidebar, vu qu’il n’y en avait qu’une, désormais sidebar va devenir siderbar1 et ma nouvelle colonne sera sidebar2.
#sidebar {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
Maintenant que je veux en ajouter une deuxième, il faut bien les différencier…
La ligne de ma colonne actuelle va donc se transformer en :
#sidebar1 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
Je vais devoir ajouter une seconde ligne pour ma nouvelle colonne qui se nommera #sidebar2 :
#sidebar2 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
Pour déterminer la taille de votre #Page, et celle de #Content, vous devez additionner mes colonnes de façon à ce que tout ce petit monde rentre dans la Page de mon blog…(c’est comme un puzzle)
200px de colonne1+ 200px de colonne2 + 725px de #content = 1125px de #page…
Ma page fait 1200px, elle peut faire plus…mais pas moins ! (logique si vous faites du 38 vous rentrez dans un pantalon taille 40, mais pas dans un taille 36 !)
Bon, voilà pour la feuille de style, on y reviendra plus tard pour faire des ajustements…
Nous allons maintenant modifier le fichier Sidebar.php celui là contient les colonnes et leur contenu.
Voilà à quoi il ressemblait avant de le modifier :
<div id=”sidebar”>
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<!– Si un Widget n’est pas activé, des codes s’affichent ici –>
<?php endif; ?>
</ul>
</div>
Après modifications ça donne ça :
<div id=”sidebar”>
<div id=”sidebar1″>
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
</div>
<div id=”sidebar2″>
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘sidebar2′) ) : ?>
<?php endif; ?>
</ul>
</div>
</div>
Alors c’est la que ça se complique…
La balise <div id=”sidebar”>…<div> contient les balises suivantes :
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<!– Si un Widget n’est pas activé, des codes s’affichent ici –>
<!– Scrpits ici –>
<?php endif; ?>
</ul>
Ces lignes permettent d’appeler les widgets dans une colonne, c’est une Zone Widgetisable…il est également possible d’ajouter des scripts directement entre ces balises sans passer pas l’administration WordPress.
Ajouter une colonne c’est facile…mais une fois fait, il faut rendre cette colonne Widgetisable, c’est à dire que dans votre espace d’administration WordPress dans l’onglet Apparence/Widgets il faut faire apparaitre cette nouvelle colonne de façon à pouvoir y ajouter des widgets…
Si vous observez bien le code ci-dessous (sidebar.php) vous remarquerez qu’une nouvelle colonne a été ajoutée (sidebar2) c’est exactement le même code que pour la première colonne (sidebar1) sauf que dans la ligne de code qui appelle les widgets, il faut différencier le nom de la colonne et mettre dans les () le nom de notre nouvelle colonne.(‘sidebar2‘) en rouge :
<div id=”sidebar”>
<div id=”sidebar1″>
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
</div>
<div id=”sidebar2″>
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘sidebar2‘) ) : ?>
<?php endif; ?>
</ul>
</div>
</div>
Maintenant que votre nouvelle colonne est prête à recevoir les widgets, il faut modifier le fichier functions.php (de votre thème) :
www/wp-content/themes/nom de votre theme/functions.php
Pour que votre nouvelle colonne apparaisse dans le menu défilant des Widgets de l’espace d’administration WordPress.
Ouvrez le fichier functions.php
Avant modifications j’avais ceci :
<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>
Après modifications :
<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(‘name’=>’sidebar1′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
register_sidebar(array(‘name’=>’sidebar2′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>
Comme vous pouvez le voir si vous observez bien ce qui a changé entre ces deux fichiers, j’ai ajouté un nouveau bloc de codes pour ma nouvelle colonne :
register_sidebar(array(‘name’=>’sidebar2′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
Mais il a fallu aussi donner un nom à ma première colonne pour la différencier de la nouvelle :
register_sidebar(array(‘name’=>’sidebar1′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
Donc pour résumer tout ça, les codes d’ouvertures qui contiennent mes 2 colonnes ne changent pas (en rouge) ma colonne 1 est en bleu, ma nouvelle colonne est en gris…et on ajoute un nom aux deux colonnes (en blanc)…
Ok ? vous êtes toujours là ?
<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(‘name’=>’sidebar1′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
register_sidebar(array(‘name’=>’sidebar2′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>
On ferme de fichier functions.php en enregistrant les modifs…
Si tout va bien, vous devez avoir une nouvelle colonne sidebar2 et aussi votre ancienne colonne qui se nomme maintenant sidebar1, qui s’affiche dans les widgets :
Revenons à notre feuille de style, car si maintenant vous avez une nouvelle colonne avec des widgets dedans, ils n’ont aucune mise en forme, et s’affichent tout bizarre…normal il faut les mettre en forme en ajoutant un bloc sidebar2 dans notre feuille de style.
Votre première colonne (la siderbar1) s’appelle toujours #sidebar dans votre feuille de style…
#sidebar {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
#sidebar h2, #sidebar .sidebartitle{font:12pt “Century gothic”,Lucida Sans, arial;color: #00FFFF;background: #000000 url(images/Categories.png) ;margin: 20px 0px 0px 0px;padding:5px 0px 3px 10px;margin-bottom:15px;letter-spacing: 0px;}
etc…
Maintenant qu’elle se nomme sidebar1 il faut donc lui ajouter un 1, sinon ça peux pas marcher…
Comme ceci :
#sidebar1 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
#sidebar1 h2, #sidebar1
.sidebartitle{font:12pt “Century gothic”,Lucida Sans, arial;color:
#00FFFF;background: #000000 url(images/Categories.png) ;margin: 20px 0px
0px 0px;padding:5px 0px 3px 10px;margin-bottom:15px;letter-spacing:
0px;}
etc…
Pareil pour notre deuxième colonne sidebar2, il faut ajouter le même bloc que pour notre première colonne et ajouter un 2, comme ceci :
#sidebar2 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
#sidebar2 h2, #sidebar2
.sidebartitle{font:12pt “Century gothic”,Lucida Sans, arial;color:
#00FFFF;background: #000000 url(images/Categories.png) ;margin: 20px 0px
0px 0px;padding:5px 0px 3px 10px;margin-bottom:15px;letter-spacing:
0px;}
Bon, voilà…je suis pas certaine d’avoir réaliser ce tuto dans le bon ordre, mais normalement avec mes indications plus celles des autres blogs cités en début de tuto, vous devriez vous en sortir…
Patience, courage, détermination…enfin, surtout patience ;)
Mettre une bannière Flash sur WordPress
Ne me dites pas que vous n’avez pas remarqué ma nouvelle bannière ;)
Sympa non !?…je m’auto congratule…car j’y ai passé du temps tout de même…
Nous allons voir aujourd’hui comment insérer cette bannière Flash à la place de l’ancienne.
Nous allons modifier 2 fichiers : header.php et style.css qui se trouvent dans le dossier de votre thème.
www/wp-content/themes/nom du theme/header.php
www/wp-content/themes/nom du theme/style.css
Avant de commencer je vous invite avec insistance a faire une copie de ces deux fichiers…
Ouvrez header.php et descendez sur ces lignes de codes :
<body>
<div id=”main”>
<div id=”header”>
<div id=”logo”>
<h1><a href=”<?php echo get_settings(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div class=”description”><?php bloginfo(‘description’); ?></div>
</div>
Vous devez remplacer les lignes bleues par les codes de votre bannière Flash.
Comme ceci :
<body>
<div id=”main”>
<div id=”header”>
<div id=”logo”>
<object type=”application/x-shockwave-flash” data=”http://Adresse bannière.swf” width=”978″ height=”358″>
<param name=”play” value=”true” />
<param name=”movie” value=”http://Adresse bannière.swf” />
<param name=”menu” value=”false” />
<param name=”quality” value=”high” />
<param name=”scalemode” value=”noborder” />
</object>
</div>
En prenant soin de coller l’adresse de votre bannière Flash comme indiqué en blanc et en changeant les valeurs width=”978″ height=”358″ pour les adapter à la taille de votre bannière.
Fermez le fichier et enregistrez les modifications.
Maintenant, il faut ouvrir le fichier style.css pour supprimer l’ancienne bannière qui se trouve sur la ligne suivante :
/* Header */
#header {background: #000000 url(images/header.jpg) no-repeat;height: 314px;position: relative;}
#logo {position: relative;padding: 100px 0px 0px 20px;height: 60px;}
#logo .description{position: absolute;left: 25px;bottom:3px;color: #FFFFFF;font-size: 14px;}
En fonction des thèmes, la modification des lignes peut être différente, dans cet exemple j’ai supprimé les lignes #logo pour obtenir un affichage correct et n’ai gardé que cette ligne :
/* Header */
#header {position: relative;}
A tester en fonction des thèmes…d’où l’importance de faire une copie des fichiers :|
Fermez le fichier et enregistrez les modifications.
Si comme moi vous aviez des liens sur votre ancienne bannière : Accueil, Contacter l’auteur etc… la bannière flash se place par dessus…
Soit vous insérez un lien dans votre animation Flash pour la rendre cliquable, soit vous placez ces liens ailleurs sur votre blog, comme un “Contacter l’auteur” ou "Retour à l'Accueil" que vous ajoutez dans une colonne…
Voilou…à vous de jouer !
Installer le plugin Custom Smilies et changer les smilies avec WordPress
Commencez par vous rendre ici pour télécharger l’extension Custom Smilies…
Installez-la comme les autres extensions, en décompressant le fichier et en le plaçant dans le dossier Plugins de votre client FTP.
Activez-la ensuite dans votre administration WordPress dans l’onglet Extensions.
Pour changer ou ajouter des smilies personnalisés, commencez d’abord par réunir tous vos smilies dans le même dossier en les renommant comme ceci :
Vous remarquerez dans la liste des smilies ci-dessous qu’ils se nomment tous : icon_nom.gif
Vous devez nommer vos smilies de la même façon en changeant juste le nom.
Ouvrez votre client FTP, puis ouvrez le fichier functions.php
www/wp-includes/functions.php
Faites défiler pour descendre jusqu’à la liste des smilies.
Si vous avez 10 smilies à ajouter, copiez/collez les 10 derniers smilies à la suite des autres, puis changez le nom de chaque smilies en prenant soin qu’il corresponde bien aux smilies que vous allez ajouter.
Vous devez également changer le code qui permet d’afficher le smilies :
‘:bip:’ => ‘icon_grosmot.gif’,
Lorsque vous ajoutez une ligne (un smilies) vous devez lui attribuer un code dans cet exemple c’est :bip:
Vous devez faire attention de ne pas mettre un code déjà utilisé dans la liste…
Ensuite lorsque vous écrirez un article, vous pourrez également faire apparaitre un smilies en tapant le code comme ceci :bip: :sou:
Une fois votre liste en place, sélectionnez les lignes que vous venez d’ajouter et faites copier.
Fermez le fichier functions.php en enregistrant les modifications.
Ouvrez maintenant custom-smilies.php
www/wp-content/plugins/custom-smilies-se/custon-smilies.php
Descendez sur la liste et faites coller pour ajouter la liste des smilies également dans ce fichier, comme dans l’autre.
Fermez le fichier et enregistrez les modifications.
Maintenant faites passer vos smilies dans le dossier smilies.
www/wp-includes/images/smilies
Voilà…
Vous pouvez changer toute la liste si vous voulez ou la réduire…du moment que vous faites les mêmes modifications dans les deux fichiers php et que vous mettez dans le dossier smilies les images correspondantes.
Changer sa bannière sur WordPress
En arrivant sur WordPress il a fallu que je choisisse un thème, ça n’a pas été une mince affaire…
Déjà, je voulais absolument un fond noir, pour pouvoir importer mes tuto réalisés sur Canalblog, je voulais également une mise en page très simple et épurée, pour mettre en valeur les messages afin qu’ils soient le plus lisible possible.
Je n’avais encore aucune idée du style graphique que je voulais donner à ce blog, j’avais beau chercher et rechercher, aucun thème ne semblait me convenir.
Je suis finalement tombée sur ces fleurs grises dans un thème, mais c’était un peu tristounet…alors j’ai ajouter des touches de turquoise et hop ma bannière et le design de mon blog était tout trouvé ;)
Voici mon thème tel qu’il était au départ, j’ai donc changé la bannière et toutes les images du thème pour le mettre à ma sauce :
Pour récupérer une bannière dans un thème : vous devez télécharger le thème, ouvrir le dossier du thème, les images se trouvent dans le dossier : Images.
Une fois que vous avez choisi votre thème, pour remplacer la bannière en place par une nouvelle de votre choix, vous devez aller dans le dossier images de votre thème, ouvrir la bannière dans un logiciel de retouche d’image, comme Photofiltre par exemple, il ne vous reste plus qu’à modifier la bannière ou en créer une autre aux mêmes dimensions et de l’enregistrer sous le même format et le même nom.
Votre nouvelle bannière doit se nommer comme l’ancienne header.jpg dans cet exemple (La ligne de code qui permet d’afficher votre bannière sur votre blog se trouve dans la feuille de style, si vous changez le nom de votre bannière, vous devez modifier cette ligne également).
Une fois que votre nouvelle bannière est prête, ouvrez votre client FTP et remplacez votre ancienne bannière dans le dossier images de votre thème.
www / wp-content / thème / nom du thème / images.
Voilà, votre nouvelle bannière est en place.
En fonction des thèmes, il est possible de changer les dimensions de la bannière, mais pas sur tous, à vous de faire des tests, pensez à faire une sauvegarde des pages que vous modifiez, en cas de problème vous pourrez réparer vos bêtises.
Insérer une image sous votre horloge avec WordPress
Vous avez peut être remarqué qu’une fleur s’est glissée sous mon horloge…
Pour insérer une image sous votre horloge, pour lui donner un petit côté perso, faites comme ceci :
Ouvrez votre client FTP et mettez l’image qui ira sous votre horloge dans le dossier images de votre thème :
Ouvrez ensuite votre feuille de style et collez le bloc suivant tout en bas :
.horloge {
background: url(images/horloge.jpg) no-repeat;
width: 150px;
height: 150px;
padding: 0px 0px 0px 20px;
margin: 0 auto;
}
la ligne background: url(images/horloge.jpg) no-repeat; est celle qui contient votre image, si vous avez nommé votre image horloge.jpg vous devez mettre le même nom dans cette ligne de code, sinon votre image ne s’affichera pas.
A vous de jouer avec le width: 150px; et le height: 150px; en fonction de la taille de votre image.
Maintenant allez dans Apparences / Widgets puis ouvrez le bloc texte qui contient votre horloge :
Ajoutez la balise <p class=”horloge”> </p> comme sur la capture ci-dessus, et validez.
Voilà, votre image est en place !
Pour faire quelques réglages et placer votre image comme vous le voulez, je vous conseille de vous servir de la barre d’outils Web Developer, si vous utilisez Firefox, vous gagnerez un temps fou.
06 novembre 2010
Mettre une horloge dans une colonne avec WordPress
Commencez par vous trouver une horloge sympa sur le net…faites attention aux sites qui proposent des horloges livrées avec le package de pubs !
Je vous conseille ce site : http://www.clocklink.com/
Vous trouverez pas mal d’horloges classées par thème et sans pubs bien sur...
Cliquez sur :
Pour accéder aux horloges.
Cliquez ensuite sur :
Pour récupérer le script de votre horloge, en n’oubliant pas de choisir le bon fuseau horaire.
Maintenant ouvrez l’administration de votre compte WordPress, et allez dans Widgets.
Faites passer un bloc Texte qui se trouve dans la liste de gauche, dans votre colonne qui se trouve à droite, en faisant glisser le bloc (Maintenez le clic gauche enfoncé et relâcher à l’endroit désiré).
Collez votre script dans le bloc texte et validez.
Voila, votre horloge est en place.
« Accueil 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
