Category

Wordpress 3.7

Automatiser les mises à jour sur WordPress

By | sauvegarde wordpress, Sécurité, Wordpress 3.7, Wordpress 4.2 | No Comments

L’une des grandes avancées de WordPress 3.7, c’est la mise à jour automatique du programme. S’il reste la mise à jour des plugins à faire, la mise à jour du CMS se fait automatiquement. Ceux qui utilisent la fonction recevront même un email directement dans leur BAT.

C’est désormais une nécessité depuis la version 4 de WordPress et des malheureuses, mais régulières failles de sécurité. Ne serait ce que la dernière faille de sécurité de wordpress en date qui n’était pas violente, à condition de faire la mise à jour 4.1.2 qui a permis de régler le problème tout de suite.

Cependant, une mise à jour doit être optimisé et ne doit pas vous bloquer votre site. C’est pourquoi que l’automatisme c’est bien, mais à condition de mettre en place un système de sauvegarde automatique de votre base de données, chaque semaine, qui permettra de vous aider si la mise à jour automatique fait planter WordPress.

D’autres ont préféré refuser ces automatismes pour avoir la main et garder le contrôle sur un éventuel plantage. Solution idéale c’est vrai, mais à condition d’avoir un seul site à gérer. Nous qui en avons une centaine, c’est plus compliqué.

Dans ce cas précis on organise en parallèle des sauvegardes automatiques, le nécessaire pour connaître les sites à risque et les autres.

Du coup, les automatismes, nous les réglons à la main : Démarrons par la plus simple, le réglage des mises à jour plugins et thèmes:

Pour cela il faut aller dans le fichier functions.php, pour rajouter les deux lignes suivantes:

add_filter( 'auto_update_plugin', '__return_true' ); // Plugins
add_filter( 'auto_update_theme', '__return_true' ); // Thèmes

La première ligne activera la mise à jour automatique des plugins, la deuxième la mise à jour automatique des thèmes.

 

Ensuite, le réglage du core, des réglages plus avancés et bien précis.

Pour activer les mises à jour mineures:

add_filter (‘allow_dev_auto_core_updates’, ‘__return_true’);

Pour l’activation des mises à jour majeures:

add_filter (‘allow_major_auto_core_updates’, ‘__return_true’);

Attention, à bien noter : Si les mises à jour majeures sont plus importantes dans le fonctionnement du site, les mises à jour mineures sont souvent des mises à jour d’ajustement et de sécurité : Donc si la différence est faite pour wp, nous vous conseillons d’activer les deux, et même plus les mises à jours mineures, security first !

wpscan

WPScan – Le guide

By | Sécurité, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9, wordpress 4.0, Wordpress 4.1 | No Comments

WPScan est un logiciel très puissant, permettant de déceler les failles de sécurité de votre site WordPress.

Ce guide n’a pas pour vocation de faire de ses lecteurs des hackers chevronnés du type black hats, bien au contraire. L’idée est de se positionner du coté des white hats. C’est pourquoi, la fonction brut force de WPScan ne sera pas décrite dans ce guide.

Dans ce guide consacré à WPScan, il sera abordé les thèmes suivants: l’installation sur les systèmes Unix, l’analyse des failles de sécurité des thèmes et des plugins WordPress ainsi que quelques conseils pour combler ces failles.

 Installer WPScan

Il faut savoir que WPScan fonctionne exclusivement sur les systèmes Linux et Mac OS X. Par conséquent aucun fichier d’installation n’est prévu pour Windows.

Codé en Ruby, WPScan nécessite l’installation de certains logiciels qui varie entre Linux et Mac OS.

1 – Pous Linux :

  • Ruby >= 1.9.2 – Recommended: 2.2.0
  • Curl >= 7.21 – Recommended: latest – FYI the 7.29 has a segfault
  • RubyGems – Recommended: latest
  • Git

2 – Pous Mac OS X :

  • Apple Xcode
  • Command Line Tools
  • libffi

Téléchargez, puis installez WPScan en suivant les instructions décrites sur le site officiel.

Pour ceux qui ne souhaitent pas installer WPScan sur leur système, il est possible de télécharger l’une des distributions Linux suivante:

WPScan y est déjà installé, et ces distributions Linux fonctionnent parfaitement en live CD/USB.

Une fois l’installation terminée, il faut tout d’abord mettre à jour la base de données de WPScan afin que le logiciel puisse effectuer ses analyses avec les dernières failles de sécurité connues.

Pour cela ouvrez votre terminal en tant que root et taper la ligne de code suivante:


# wpscan --update

Utiliser WPScan

Pour commencer, lancez une simple analyse de votre site à l’aide de la commande suivante:


# wpscan -u www.votre_site.com

Dans la liste qui s’affiche, doit apparaitre des informations telles que: la version de WordPress, les thèmes installés, les plugins installés précédé des pictogrammes suivants:

[+] Aucune vulnérabilité détécté.

[+] Vulnérabilité faible. A corriger tout de même.

[!] Vulnérabilité forte. A corriger de toute urgence.

La plupart des failles détectées ici peuvent être comblées en effectuant des mises à jour ou bien en supprimant certains fichiers tels que les readme.

Une fois tous les pictogrammes [+] au vert, taper la ligne de code suivante pour faire une analyse plus poussée:


# wpscan -u www.votre_site.com -e

Plus poussive, cette analyse est bien plus longue que la précédente. De plus lors de la un nouveau pictogramme apparaît [ i ]. Précédé du pictogramme [!], il indique que la faille détectée a été corrigée dans une version plus récente du plugin.

Le mot de la fin

Pour plus d’informations sur WordPress est la sécurité, un article intitulé Sécuriser WordPress dès l’installation est disponible sur ce site. En effet certaines failles peuvent être corrigées dès l’installation. Elle concerne notamment la base de données SQL. Ces failles ne sont pas analysées par WPScan.

De plus, même si l’utilisation de la fonction brut force de WPScan n’est pas expliqué ici, il n’est pas hors de propos de regarder la liste de plugins réputés sûrs pour empêcher cela.

Personnaliser l'accès au tableau de bord Wordpress

Personnaliser l’accès au tableau de bord WordPress

By | Aide et astuces, côté serveur, Plugin Wordpress, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9, wordpress 4.0, Wordpress 4.1 | One Comment

Pour personnaliser l’accès au tableau de bord WordPress il existe deux méthodes:  le plug’in HC Custom WP-Admin URL et la redirection 301.

 

Je n’apprendrais rien à personne en disant que l’accès au tableau de bord de WordPress se fait en ajoutant /wp-admin à la suite de l’adresse de votre de blog. Tout le monde le sait, même les hackers ! D’où l’intérêt de personnaliser cette dernière. Car si le hacker ne sait pas comment parvenir jusqu’à la page du login, alors sa tentative de piratage de votre blog se compliquera très sérieusement.

L’idée est de trouver un bon compromis entre simplicités pour vos collaborateurs ou clients et complication pour les hackers. Donc choisissez bien le mot de substitution à /wp-admin.

Pour personnaliser sa page de connexion WordPress deux solutions possibles : à l’aide du plug’in HC Custom WP-Admin URL ou bien en éditant le fichier .htaccess situer à la racine du serveur.

Dans tous les cas l’idée est de faire une redirection 301. C’est pourquoi votre serveur Apache doit impérativement avoir le module mod_rewrite d’activer.

 

Le plugin HC Custom WP-Admin URL

C’est sans conteste la méthode la plus simple. Dans Extensions -> Ajouter recherchez HC Custom WP-Admin URL installez-le puis activez-le.

Personnaliser l’accès au tableau de bord WordPress, rendez-vous dans le menu Réglage -> Permaliens.

En bas de la page localisez le champ wp-admin slug, puis ajouter complétez-le avec le mot de votre choix.

Une fois remplacé fait un test avec le nouveau mot puis avec le bon vieux /wp-admin. Il y a de forte chance que cela fonctionne encore avec /wp-admin et /wp-login, car il ne faut pas oublier que WordPress génère un cookies lorsque l’on ouvre une session. Par conséquent, supprimez vos cookies et refait un test.

Pour ceux qui viennent d’activer le module mod_rewrite, modifier les permaliens est un excellant moyen de savoir si cela a été fait correctement.

Le fichier .htaccess

Localisez ou créez un fichier .htaccess à la racine de votre site WordPress puis ajouter la ligne de code suivante :


RewriteRule ^pseudo-text$ http://VOTRE_BLOG.com/wp-admin [NC,L]
RewriteRule ^pseudo-text$ http://VOTRE_BLOG.com/wp-login.php [NC,L]

Pour rappel, le fichier .htaccess permet de passer des instructions à Apaches lorsque l’on n’a pas accès au fichier de configuration d’Apache.

pseudo-texte$ est le mot qui remplacera /wp-admin.

http://VOTRE_BLOG.com/wp-admin  et http://VOTRE_BLOG.com/wp-login.php sont les liens par défauts.

Créer des animations simples avec CSS3

Créer des animations simples avec CSS3

By | Aide et astuces, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9 | No Comments

L’animation d’objets n’est plus l’adage de JavaScript. Avec @keyframes il est possible de créer des animations simples avec CSS3.

Définition de @keyframes

@keyframes est un règle CSS3 qui permet de créer des animations.

L’animation est créée en modifiant progressivement une série de styles CSS à l’autre. Durant l’animation, il est possible de modifier le styles CSS à plusieurs reprises.
Pour préciser quand le changement de style CSS se produira il est possible d’utiliser les mots-clés from et to ou bien des pourcentages.

  • from ou 0%, détermine le début de l’animation.
  • to ou 100%, détermine la fin de l’animation.

Avec des valeurs en pourcentages il sera possible de créer des animations plus complexes comme dans le second exemple ci-dessous.

La règle @keyframes, est supporté par Internet Explorer 10, Firefox, et Opera. Pour Safari et Chrome il faudra utiliser la règle alternative .

Syntaxe et propriétés

La règle @keyframes s’utilise avec les propriétés suivantes :

animation-name, permet de nommer une animation. Cette propriété est obligatoire

animation-delay, Impose un délai avant de démarrer l’animation. Valeurs: s (secondes)ou ms (millisecondes)

animation-direction, Indique dans quel sens est joué l’animation lorsque celle-ci se répète. Valeurs : normal (sens identique) et alternate (sens inverse)

animation-duration, Détermine la durée de l’animation. Valeurs : s (secondes) ou ms (millisecondes)

animation-iteration-count, Spécifie le nombre de fois que l’animation sera jouée avant de s’arrêter. Valeurs : un nombre entier ou infinite pour créer un boucle infini.

animation-play-state, Permet de mettre en pause une animation, puis de là reprendre. Valeurs : paused (met en pause) et running (reprend l’animation en cours)

animation-timing-function, Détermine la vitesse d’exécution de l’animation au début, au milieu et à la fin. Valeurs : cubic-bezier(val1, val2, val3, val4), ease, ease-in, ease-out, ease-in-out, linear.

La syntaxe tel que là définit la W3C est : @keyframes animation_name.
Pour le moteur Gecko (Firefox) : @-moz-keyframes.
Pour le moteur Webkit (Chrome et Safari) : @-webkit-keyframes.
Pour le navigateur Opera : @-o-keyframes.

Exemple 1: Faire clignoter un élément

Jouons un peut avec les animation en réalisant un terminal factice dans lequel clignotera l’invite de texte.

linux-lo8i:/var/www #

_

Code source coté HTML

<div id="terminal">
	<div id="textarea">
		<p>linux-lo8i:/var/www # </p><span id="prompt">_</span>
	</div><!-- /textare -->
</div><!-- /terminal -->

L’élément à faire clignoter est le underscore situé dans l’id prompt.

Code source coté CSS

/* Prompt */

#terminal {
	background-color: black;
  	padding: 10px 0 22px 12px;
}
 
#textarea {
  	margin: 3px;
}
 
#textarea p {
  	color: rgba(10, 225, 10, 1);
	float: left;
}
 
/* animation du prompt */

span#prompt {
  
	animation-name: blinky;
  	animation-duration: 0.7s;
  	animation-iteration-count: infinite;  

  	-webkit-animation-name: blinky;
  	-webkit-animation-duration: 0.7s;
  	-webkit-animation-iteration-count: infinite;  

  	-moz-animation-name: blinky;
  	-moz-animation-duration: 0.7s;
  	-moz-animation-iteration-count: infinite;

  	-o-animation-name: blinky;
  	-o-animation-duration: 0.7s;
  	-o-animation-iteration-count: infinite;

  	-ms-animation-name: blinky;
  	-ms-animation-duration: 0.7s;
  	-ms-animation-iteration-count: infinite;

}
@keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-webkit-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-moz-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-o-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

@-ms-keyframes blinky {
  	from {opacity: 1;}
  	to {opacity: 0;}
}

Pour réaliser l’animation, il faut ajouter les propriétés animation à l’élément concerné. Ici p#prompt. Pour animation-name le nom sera blinky, la durée sera de 0,7 seconde le tous dans une boucle infini.
Fermer l’accolade, puis ajouter la règle @keyframes suivit du nom de l’animation blinky.
from indique que l’opacité est de 1, to qu’elle passera à 0

Exemple 2 : Faire un bouton qui change de couleur

Dans le précèdent exemple l’animation avait été faite avec from et to. Créant une animation en deux temps. Pour créer une animation sur 3 temps et plus, seul les pourcentages pourront être utilisés. C’est le cas de ce second exemple où le bouton ci-dessous change de couleur 7 fois.

Bouton

Code source coté HTML

<div id="button">
	<p id="text-button">Bouton</p>
</div>
<!-- /button -->

Code source coté CSS

/* Bouton */
  
#button {
  	padding-left: 30px;
}
 
p#text-button {
  	color: #FFF;
  	font-size: bold;
  	padding: 10px;
  	width: 10%;
  	text-align: center;

/* Annimation du buton */

  	animation-name: cameleon;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;

  	-webkit-animation-name: cameleon;
  	-webkit-animation-duration: 5s;
  	-webkit-animation-iteration-count: infinite;

  	-moz-animation-name: cameleon;
  	-moz-animation-duration: 5s;
  	-moz-animation-iteration-count: infinite;

  	-o-animation-name: cameleon;
  	-o-animation-duration: 5s;
  	-o-animation-iteration-count: infinite;

  	-ms-animation-name: cameleon;
  	-ms-animation-duration: 5s;
  	-ms-animation-iteration-count: infinite;
}
 
@keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}
 
 @-webkit-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

@-moz-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

@-o-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

@-ms-keyframes cameleon {
  	0% {background-color: #FF5D5D;}
  	25% {background-color: #FFDF5F;}
  	50% {background-color: #8EFF61;}
  	75% {background-color: #60FFB2;}
  	100% {background-color: #5EB7FF;}
}

Pour résumé, le bouton p#text-button dont l’animation s’appelle caméléon, dont la durée est de 5 seconde, change de couleur 5 fois et se reproduit indéfiniment.

créer un theme enfant

Comment créer un thème enfant ?

By | Aide et astuces, Thèmes Wordpress, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9 | No Comments

Cette capacité qu’a WordPress qui est de créer un thème enfant, offre la possibilité a des développeurs en herbe maitrisant le langage CSS de personnaliser une thème existant, sans pour autant se priver des mises à jours proposé par le développeur original du thème. Depuis la version 2.7 de WordPress, il même possible de modifier les fichiers PHP.

Qu’es ce qu’un thème enfant ?

Avant d’aller plus loin, petit mise au point sur ce qu’est thème enfant et un thème parant. L’idée est de créer un thème dit « enfant » en fonction d’un autre thème qui est autre le thème parant. Ainsi il est possible de faire des modifications profondes dans le code source du thème parant sans pour autant voir sont travail anéantie par une mise à jour de celui-ci.

Exemple : Un site utilisant le thème Twety Twelve. Ce sera notre thème parant. Figurant parmi les thèmes par défaut de WordPress, il n’est pas surprenant que ce dernier soit déjà utilisé sur des milliers de site. Pour personnaliser le thème parant sans pour autant perdre le bénéfice des mises à jours, un thème enfant sera créé. Ainsi toutes les modifications se feront dans le thème enfant.

Créer un thème enfant

Rendez-vous dans le dossier /wp-content/themes puis créez un nouveau sous-dossier avec le nom du thème enfant.

Ex : /wp-content/themes/childTT

Dans ce sous-dossier, créer un fichier style.css. Comme pour la création d’un thème classique, insérez les informations qui permettront de différencier ce thème des autres.

/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://example.com/
Description:    Thème enfant pour le thème Twenty Twelve
Author:         Votre nom ici
Author URI:     http://example.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

Ici, les informations sont les mêmes que pour n’importe quel thème, à un détail prés;La ligne template : twenty twelve à était ajouté pour permettre à WordPress d’associer ce thème au thème parant Twenty Twelve.

A ce stade, si le thème enfant était activé depuis la tableau de bord de WordPress, le code CSS du thème parant serait écrasé parce celui du thème enfant. Autrement-dit, il n’y a plus aucune règle CSS. Pour ceux qui souhaitent importer les règle CSS dans le thème enfant, ajoutez dans le fichier nouveau fichier style.css la ligne de code suivante :


@import url("../twentytwelve/style.css");
@import url("../twentytwelve/rtl.css");

Il doit y avoir autant le ligne d’importation qu’il y à de fichies CSS dans le thème parant. Pour l’exemple, seul les fichier style.css et rtl.css on étaient importé.

Activation du thème enfant

Rendez-vous à présent sur le tableau de bord de WordPress, plus précisément dans Apparence > Themes, le thème enfant devrait y figurer. Activez-le.

Votre thème enfant est à présent créé, activé et opérationnel. Dorénavant, le code CSS sera saisit dans le fichier style.css du thème enfant, et quant au fichiers PHP, il suffit de créer un nouveau fichier PHP emprunt du même nom que celui qui figure dans le thème parant, et d’y mettre votre propre code.

Migrer la base de donnée de Wordpress

Migrer la base de donnée de WordPress

By | Aide et astuces, sauvegarde wordpress, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9 | No Comments

Migration d’une base de donnée de WordPress d’un serveur web à un autre ou d’une installation locale vers un serveur pro.

La migration d’un base de donnée WordPress fait partie de ces opérations indispensable pour pouvoir migrer sont site WordPress d’un serveur Web à un autre. Qu’il s’agisse d’un changement de prestataire ou tout simplement d’une installation en local de Wordpres (via MAMP, WAMP ou XAMP) que l’on souhaite migrer chez un hébergeur, cette migration permettra de récupérer tous le contenu de votre site : pages, articles, menus…

Les prés-requis : Phpmyadmin, référence pour la gestion de votre base de données.

Les opérations export/import de la base de données, se feront à l’aide du logiciel PHPmyAdmin. Même si les avis sur ce logiciels sont très controversé, jugé facile d’utilisation par certain, jugé sur ses failles de sécurités par d’autre, en attendant, il a mérite d’être installé sur de nombreux serveurs xAMP. C’est pourquoi cet article sera articulé autour de ce dernier.

Il faudra également un éditeur de texte permettant d’ouvrir des fichiers au format .sql. Il devra permettre également de rechercher un terme et de le remplacer par un autre. L’idée est de remplacer toutes les lignes où est mentionnée l’URL actuel pour la remplacer par la nouvelle. Ici c’est Notepad++ qui est retenu pour sa notoriété, bien que cette fonction existe dans tous bons éditeurs de texte qui se respectent.

Exportation de la base de données :

Dans un premier temps il faut se connecter à PHPmyAdmin.

Pour ceux qui sont sur une installation en local via MAMP, WAMP, XAMP voire même sur un serveur LAMP maison, ouvrez votre navigateur, puis taper l’adresse IP du serveur suivit de phpmyadmin (ex : http://192.168.1.254/phpmyadmin).

Pour les autres qui doivent avoir installé WordPress chez un hébergeur, il faudra se connecter  au tableau de bord de l’hébergeur. Une fois dans ce tableau de bord repérez l’endroit où l’on gère les bases de données. Un bouton PHPmyAdmin devrait s’y trouver. En cas de besoin n’hésitez pas à contacter le support technique de l’hébergeur.

Nota : mise en garde concernant les serveurs LAMP. Il n’est pas rare que le dossier contenant PHPmyAdmin soit écrit comme ceci PhpMyAdmin mélangeant des majuscules/minuscule. Pour le vérifier, allez dans /usr/share. Pour rappel, Linux est sensible à la casse, pensez bien à mettre les majuscules dans l’URL, soit : http://192.168.1.254/PhpMyAdmin, ou bien créer un lien symbolique à l’aide la commande suivant :

# ln –s /usr/share/PhpMyAdmin /usr/share/phpmyadmin

Sélectionnez votre base de données dans la barre latérale de gauche, puis cliquez sur l’onglet Exporter.

Migrer la base de donnée de WordPress fait partie de ces opérations indispensable pour pouvoir migrer sont site WordPress d’un serveur Web à un autre. Qu’il s’agisse d’un changement de prestataire ou tout simplement d’une installation en local de Wordpres (via MAMP, WAMP ou XAMP) que l’on souhaite migrer chez un hébergeur, cette migration permettra de récupérer tous le contenu de votre site : pages, articles, menus…   Les prés-requis  Les opérations export/import de la base de données, se feront à l’aide du logiciel PHPmyAdmin. Même si les avis sur ce logiciels sont très controversé, jugé facile d’utilisation par certain, jugé sur ses failles de sécurités par d’autre, en attendant, il a mérite d’être installé sur de nombreux serveurs xAMP. C’est pourquoi cet article sera articulé autour de ce dernier. Il faudra également un éditeur de texte permettant d’ouvrir des fichiers au format .sql. Il devra permettre également de rechercher un terme et de le remplacer par un autre. L’idée est de remplacer toutes les lignes où est mentionnée l’URL actuel pour la remplacer par la nouvelle. Ici c’est Notepad++ qui est retenu pour sa notoriété, bien que cette fonction existe dans tous bons éditeurs de texte qui se respectent.  Exportation de la base de données :  Dans un premier temps il faut se connecter à PHPmyAdmin.  Pour ceux qui sont sur une installation en local via MAMP, WAMP, XAMP voire même sur un serveur LAMP maison, ouvrez votre navigateur, puis taper l’adresse IP du serveur suivit de phpmyadmin (ex : http://192.168.1.254/phpmyadmin).  Pour les autres qui doivent avoir installé WordPress chez un hébergeur, il faudra se connecter  au tableau de bord de l’hébergeur. Une fois dans ce tableau de bord repérez l’endroit où l’on gère les bases de données. Un bouton PHPmyAdmin devrait s’y trouver. En cas de besoin n’hésitez pas à contacter le support technique de l’hébergeur. Nota : mise en garde concernant les serveurs LAMP. Il n’est pas rare que le dossier contenant PHPmyAdmin soit écrit comme ceci PhpMyAdmin mélangeant des majuscules/minuscule. Pour le vérifier, allez dans /usr/share. Pour rappel, Linux est sensible à la casse, pensez bien à mettre les majuscules dans l’URL, soit : http://192.168.1.254/PhpMyAdmin, ou bien créer un lien symbolique à l’aide la commande suivant : # ln –s /usr/share/PhpMyAdmin /usr/share/phpmyadmin Sélectionnez votre base de données dans la barre latérale de gauche, puis cliquez sur l’onglet Exporter. IMAGE_2 Laissez les réglages par défaut, puis cliquez sur le bouton Exécuter, puis sur Enregistrer le fichier. Une fois enregistrer, ouvrez le fichier avec l’éditeur de texte. Dans Notepad++, allez dans le menu Rechercher, puis Remplacer…. Dans le champ Recherche : saisissez l’ancien nom de domaine de votre blog. Pour ceux qui utilisent un serveur local il s’agit de l’adresse IP du serveur (ex :http://192.168.1.254). Dans le second champ, Remplacer par : saisissez le nouveau nom de domaine, puis cliquez sur Remplacer tout. Notpad++ va alors modifier toutes les lignes où se trouve l’ancien nom de domaine par le nouveau.  Importation de la base de données :  Il va falloir se connecter au tableau de bord de l’hébergeur ou nouvel hébergeur pour ceux qui migrent d’un prestataire à l’autre. Rendez-vous à présent dans PHPMyAdmin, puis allez directement dans l’onglet Importer. Cliquez sur le bouton Parcourir… recherchez votre fichier.sql, puis cliquez sur le bouton Exécuter pour lancer l’opération

Laissez les réglages par défaut, puis cliquez sur le bouton Exécuter, puis sur Enregistrer le fichier.

Une fois enregistrer, ouvrez le fichier avec l’éditeur de texte. Dans Notepad++, allez dans le menu Rechercher, puis Remplacer…. Dans le champ Recherche : saisissez l’ancien nom de domaine de votre blog. Pour ceux qui utilisent un serveur local il s’agit de l’adresse IP du serveur (ex :http://192.168.1.254). Dans le second champ, Remplacer par : saisissez le nouveau nom de domaine, puis cliquez sur Remplacer tout. Notpad++ va alors modifier toutes les lignes où se trouve l’ancien nom de domaine par le nouveau.

Importation de la base de données :

Il va falloir se connecter au tableau de bord de l’hébergeur ou nouvel hébergeur pour ceux qui migrent d’un prestataire à l’autre. Rendez-vous à présent dans PHPMyAdmin, puis allez directement dans l’onglet Importer.

Cliquez sur le bouton Parcourir… recherchez votre fichier.sql, puis cliquez sur le bouton Exécuter pour lancer l’opération.

video webm dans Wordpress

Insérer une video webm dans WordPress

By | Aide et astuces, Wordpress 3.6, Wordpress 3.7 | No Comments

Insérer une video webm dans WordPress nécessite de posséder les bases en HTML et éventuellement en CSS. En effet, pour utiliser ce type de fichiers, il faudra utiliser la balise <video> disponible depuis l’avènement de l’HTML5.

Qu’es ce que le webm ?

Le webm est un format multimédia ouvert destiner à l’usage du web. La vidéo est encodé en VP8 ou VP9 et l’audio en Vorbis ou Opus.

Pour plus d’information : http://fr.wikipedia.org/wiki/WebM

Les avantages :

Le webm est optimisé pour le web, donc très léger pour un format vidéo. La balise <video> propose des propriétés et même une API qui permet de gérer en JavaScript beaucoup de paramètres pour gérer le flux.

Les inconvenants :

A l’heure ou est écrit cet article, le webm est supporter par Chrome 20+, Firefox 14+ et Opera 12+.

Internet Explorer et Safari utilise sont concurrent direct le H264 plus connu sous le nom de MPEG-4. Du coté des OS mobiles, seul Android 4.0+ supporte ce format. Espérons que iOS et Windows phone suivront rapidement le mouvement.

En pratique

La première étape consiste à convertir votre vidéo aux bons formats. Un grand nombre d’applications sont disponibles, pour Windows Mac OS X et Linux, en version libre et propriétaire. Pour rappel, il faudra au moins deux fichiers : l’un au format webm, l’autre au format mp4.

Une fois convertis, transférer vos fichiers webm et mp4 sur votre serveur Web à l’aide de votre client FTP favoris. Oubliez le tableau de bord de WordPress et son menu Bibliothèque. Ce type d’imploration passe par Apache. Pour des raisons de sécurité, Apache bride les uploads à 20Mo par fichiers. Toujours pour des raisons de sécurités, préférer le dossier /wp-content, car il faudra attribuer les droit 777 au fichier webm. Sans quoi, Firefox ne parvient pas à déterminer le type MIME et donc à lire la vidéo. Ici, c’est le dossier /wp-content/upload qui est retenu.

Créez une nouvelle page ou un nouvel article, puis saisissez le code source suivant :


<video controls="controls">
<source src="/wp-content/uploads/video.webm" type="video/webm" />
<source src="/wp-content/uploads/video.mp4" type="video/mp4" />
Votre navigateur ne supporte pas le tag <video>.
</video>

Si les fichiers webm et mp4 ne se trouvent pas dans /wp-content/upload, comme dans cet exemple, changez le chemin dans la propriété src.

Pour aller plus loin

Liste de propriétés de la balise <video>

video webm dans WordPress

Liste des propriétés disponible avec l’API Javascript

video webm dans WordPress

menu de navigation responsive

Créer un menu de navigation responsive pour WordPress

By | Le graphisme et wordpress, Plugin Wordpress, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9, wordpress 4.0, Wordpress 4.1 | No Comments

Créer un menu de navigation responsive simplement avec le plugin Responsive Select Menu.

 

Nombreux sont les thèmes gratuits qui ne possèdent pas encore de menu qui répondent aux exigences du responsive web design et corriger cet oubli n’est pas à la portée de tout le monde.

Heureusement des plugins comme Responsive Select Menu permettent au plus grand nombre d’entre-nous de créer un menu de navigation responsive sans taper une ligne de code.

 

Installation

Téléchargez puis Installez le plugin depuis le tableau de bord de WordPress, puis activez-le.

Rendez-vous dans Apparence -> Responsive Select.

A quoi peuvent bien servir tous ces plugin qu’il est demandé d’installer ?

 

Le développeur de ce plugin à également créer un menu appeler UberMenu dont la démo est disponible sur le site officiel.

C’est plugin additionels sont utiles seulement si UberMenu est installé. Dans le cas contraire, il n’y aura pas besoin de les installer.

 

Configuration

La configuration de Responsive Select Menu se fait essentiellement depuis la rubrique Basic Configuration. La rubrique Advanced Settings permet seulement d’activer/désactiver le menu responcive sur certaines pages.

menu de navigation responsive

Maximum Menu Width : choisissez la largeur à laquelle le menu deviendra responcive.

Menu Depth Limit : laissez sur 0 pour afficher tous les éléments du menu. Ou un chiffre si certaine rubrique du menu ne doivent pas être affichés.

Sub Item Space : permet de personnaliser l’espace présent devant les sous-catégories du menu.

Exclide Items Without Links : masque toutes les catégories qui n’ont pas de liens (# ou vide).

First Item Name : personnalise la première catégorie « factice » du menu

: affiche le nom de la catégorie active lorsque le mobinaute navigue sur votre site.

Activate All Theme Locations : rend tous les menus responcive.

Selectively Activate Theme Locations : rend uniquement le menu principal responcive. L’option précédente doit être désactivé.

 

Une démonstration du plugin est disponible sur : http://agility.sevenspark.com/responsive-select-menu

Wysija Newsletters

Wysija Newsletters : Le meilleur plugin Newsletter pour WordPress

By | Aide et astuces, Wordpress 3.6, Wordpress 3.7, Wordpress 3.8, wordpress 3.9, wordpress 4.0 | No Comments

Wysija Newsletters, est une extension efficace et gratuite pour la gestion de vos newsletters.

C’est un plugin à installer en série à chaque nouveau site ou nouveau blog. Afin de tenir informé vos utilisateurs de votre actualité, ou pour collecter un listing d’emails grâce à votre site wordpress, Wysija Newsletters est simple et particulièrement efficace.

Dans sa nouvelle version, Wysija vous apporte des outils simples : la création d’un widget ou d’un formulaire pour récupérer les emails et mettre en place l’inscription de vos utilisateurs. Ceci comme tout le monde, mais en gestion particulièrement simple.

La suite est encore plus réjouissante puisque vous posez en ligne un modèle HTML large, personnalisé et assisté.

MP6 ou comment profiter du nouveau design à venir de la version 3.7 de WordPress.

By | Wordpress 3.7 | No Comments

wordpress sans mp6 wordpress avec mp6C’est un secret! Mal gardé mais un secret qui permet aussi à la futur version 3.7 de wordpress de faire du bruit.

Nous avons donc tester cette version de MP6 qui s’avère effectivement plutôt agréable.

Après avoir fait la recherche du plugin, la description nous indique un plugin secret mais surtout simplificateur de notre habituel administration de wordpress.

Cette administration n’est autre que celle que l’on connait depuis quelques mois sur l’administration de « wordpress en ligne ». A nouveau la version final serveur attend les tests de la version online pour s’approprier le style et les nouveautés de wordpress.
Alors qu’on attends avec impatience la version 8 de drupal, il semble que wordpress préparer également une version avec de gros changements.

MP6 permet donc d’administrer votre site comme le sera l’admin de WordPress 3.7.

Pour résumé les grands changements, c’est plus noir, plus jolie et un gros effort a été fait du côté des ico, ce qui rend l’administration plus agréable. Ceux qui passes du temps dessus comme les blogeurs pourront donc profiter d’un espace plus agréable à la rentrée.

Pour les développeurs rien de nouveau hormis le fait de présenter à ses clients, un outil plus affiné et donc plus agréable.

Télécharger l’extension MP6