Category

Wordpress 3.6

Sécuriser WordPress dès l’installation

By | Aide et astuces, Plugin Wordpress, sauvegarde wordpress, Wordpress 3.6 | 3 Comments

Sécuriser WordPress dès l’installation est primordial. Avec une popularité toujours croissante, beaucoup de sites Web créés avec WordPress sont victimes d’attaques en tout genre.

L’objectif de cet article est d’adopter les bons réflex pour sécuriser WordPress dès l’installation, car une telle entreprise après installation est déjà trop tard.

Etape 1 : Installer WordPress avec les premières sécurités

Télécharger la dernière version de WordPress sur le site office, est non sur des sites tiers. N’oubliez pas que WordPress est un logiciel libre de droit et que par conséquent, le code source est facile à modifier, donc à corrompre. Pour ceux qui sont sous Windows ou Mac OS X, préférer l’archive .zip pour les utilisateurs sous Linux, préférer l’archive en .tar.gz.

Décompressez l’archive, puis à l’aide d’un client FTP tel que Filezilla copiez le contenu du dossier /wordpress à la racine de votre site. Le dossier racine peut être différent d’un serveur à l’autre :

–          Sur un serveur Debian, comme dans l’article sur lequel nous avons déjà travaillé et qui vous permet de savoir comme installer un serveur lamp pour wordpress et ses dérivés tel que Ubuntu pour ne citer que la plus populaire, le chemin est /var/www/

–          Sur les serveurs Red Hat ses dérivés, le chemin est /srv/www/.

–          Sur les serveurs des hébergeurs comme 1&1, OVH, Amen… le chemin peut-être /www/ ou encore est /httpdocs/.

Vérifiez à présent les droits en lecture, écriture et exécution des dossiers et des fichiers:

–          Les dossiers doivent être en 755

–          Les fichiers doivent être en 644

A la racine de votre site figure un fichier nomé readme.html. Supprimez-le, car il pourrait fournir des informations précieuses aux hacker sur votre version de WordPress.

Attention ! Lors des mises à jour de WordPress, le fichier réaparait à chaque fois. Penssez à le supprimer après chaques mises à jours.

Créez à présent une base de données SQL. Ne pas utiliser le nom de votre site ou encore le nom de « wordpress »  pour votre base donnée. Ce nom est trop commun et trop simple.

Etape 2 : Configurer

Depuis votre navigateur Web, entrer le nom de domaine ou l’adresse IP du serveur web suivit de /wp-admin/install.php

Ex : www.serveur_web.com/wp-admin/install.php

Suivez l’assistant, puis remplissez les champs du premier formulaire avec les informations relatives à votre base de donnés. Pour le préfixe de la table, remplacez wp_ par autre chose. Peu importe le préfixe utilisé, le tout c’est qu’il soit différent.

Dans le second formulaire, à la ligne Identifiant remplacez admin par l’identifiant de votre choix. N’hésitez pas à utiliser des majuscules et des minuscules, les chiffres et les signes de ponctuation n’aident en rien à la sécurité.

Pourquoi les chiffres et les signes de ponctuation n’aident en rien à la sécurité de WordPress ? Un article est entièrement consacré à cette question.

Quant au mot de passe, depuis la  version 4.3 de WordPress un mot de passe (très) fort est proposé. N’hésitez pas à garder ce mot de passe. Dans le cas contraire, créez un mot de passe fort. N’oubliez pas que le compte administrateur a tous les droits.

Entrez à présent au tableau de bord de WordPress avec votre compte Administrateur. Ce compte ayant tous les droits, il est fortement conseillé de créer un nouvel utilisateur avec moins de privilèges : Utilisateur -> Ajouter. Avec comme précédemment un identifiant et un mot de passe digne de ce nom. Quant au Rôle, choisissez parmi : Abonné, Contributeur, Auteur ou Editeur, mais en aucun cas Administrateur.

Etape 3 : Renforcer la sécurité.

3.1 Protéger l’accès au fichier wp-config.php via .htaccess

Pour ceux qui n’ont pas accès au fichier de configuration d’Apache2, autrement dit ceux qui ne font pas d’auto-hébergent, ont un fichier .htaccess situé à la racine du site. Ajouter la ligne suivante empêchera un hacker de récupérer votre identifiant et mot de passe en cas de problèmes avec PHP sur le serveur.


<FilesMatch ^wp-config.php$>
    deny from all
</FilesMatch>

3.2 Restreindre l’accès au dossier wp-content et wp-content/uploads

Les dossiers wp-content et wp-content/uploads sont des emplacements de choix pour les hackeurs qui souhaiteraient placer des malware du type porte dérobé (backdoors). Ce script permet de bloquer l’exécution de fichiers PHP dans le répertoire où il se situe.

Dans le dossier wp-content  et wp-content/upload, créez un nouveau fichier .htaccess et ajoutez le code source suivant:

<FilesMatch "\.(?i:php)$">
    <IfModule !mod_authz_core.c>
        Order allow,deny
        Deny from all
    </IfModule>
    <IfModule mod_authz_core.c>
        Require all denied
    </IfModule>
</FilesMatch>

3.3 Restreindre l’accès au dossier wp-includes

Le dossier wp-include doit lui aussi faire l’objet de certaines restrictions. Créez un fichier .htaccess et ajoutez le code source suivant:

<FilesMatch "\.(?i:php)$">
    <IfModule !mod_authz_core.c>
        Order allow,deny
        Deny from all
    </IfModule>
    <IfModule mod_authz_core.c>
        Require all denied
    </IfModule>
</FilesMatch>

<Files wp-tinymce.php>
   Allow from all
</Files>
<Files ms-files.php>
   Allow from all
</Files>

Il s’agit du même code source que dans le paragraphe 3.2 à un détail près. Une exception est faite pour les modules wp-tinymce et ms-files qui eux sont des éléments essentiels à WordPress.

3.4 Cachez votre version de WordPress

La version de WordPress est une information précieuse pour les hackeurs. Alors cachons là !

Supprimer le fichier readme.html, situé à la racine. Dans ce fichier, est inscrit le numéro de version de WordPress.

Dans le fichier functions.php du thème ajoutez les lignes de code suivantes :

// Supprimez la balise « generator » visible depuis le code source des pages du site.
remove_action("wp_head", "wp_generator");

// Banaliser les erreurs de connexion de WordPress lorsque l’identifiant et/ou mot de passe sont incorrectes.
add_filter('login_errors',create_function('$erreur', "return 'Erreur de connexion';"));

// Supprimez la meta generator de votre flux RSS.
add_filter('get_the_generator_rss2', '__return_false');
add_filter('get_the_generator_atom', '__return_false');

Désactiver l’éditeur de thèmes et de plugin en ajoutant la ligne de code suivante dans le fichier wp-config.php:


define( 'DISALLOW_FILE_EDIT', true );

Etape 4 : La sécurité par les plugins

Des plugins peuvent contribuer à renforcer la sécurité de votre site, voici un échantillon des plus populaires :

Login LockDown,Limite le nombre de tentatives de connexions, et donc les attaques de type Brut force

Theme Authenticity Checker (TAC) permet de scanner un thème installé afin de vérifier qu’il ne contient pas de code malicieux.

WP Security Scan et Better WP Security, version bêta, pour déceler toutes les failles de sécurité de votre site.

HC Custom WP-Admin URL, pour personnaliser l’accès au wp-admin.

Sucuri Security, un plugin d’audit de sécurité et scanner de malwares.

Etape 5 : Dernies conseils de sécurité

Car il vaut mieux prévenir que guérir, quelques conseils avant de clôturer cet article.

Pensez à faire les mises à jour de WordPress :

Pour ceux qui auto-hébergent leur site, faites également les mises à jour système mais également du trio Apache2, MySQL et PHP. Sous Debian, dans un terminal en tant que root, taper la ligne de code suivante :

# apt-get update (pour la mise à jour la liste des dépôts)

# apt-get upgrade (pour la mise à jour les packages)

Sauvegarder régulièrement votre site WordPress et sa base de donné :

Pour sauvegarder WordPress, il suffit de conserver sur votre ordinateur une copie de l’intégralité des fichiers de votre site.

Pour sauvegarder la base de donné SQL, certains hébergeurs proposent ce type de service. Pour les autres, il est possible d’exporter la base de donné depuis PhpMyAdmin via le menu Exporter.

Ne téléchargez pas de thème gratuit provenant d’un autre site que celui de http://wordpress.org/themes/

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.

wordpress-3.6

Mise à jour de WordPress 3.6 disponible

By | Wordpress 3.6 | No Comments

WordPress 3.6est sortie la semaine dernière et vous permettra de profiter de quelques ajustements nécessaire aux exigences des utilisateurs.

Les principales nouveautés de WordPress 3.6.

    • Un nouveau thème, Twenty-Thirteen. Le thème est pour la première fois, coloré, ce qui va faire du bien aux puristes. De même il conserve sa forme responsive qui avait marqué l’évolution de l’ancien thème.
    • Blocage et sauvegarde des articles révisés : cette révision répond à l’exigence des sites ou blogs multi auteurs. Les sauvegardes et le verrouillage se font désormais par auteur, un bon moyen de rendre chaque auteur indépendant sur son travail et sur son article.
    • La gestion HTML5 est améliorée et intégrée nativement. Plus besoin de plugins tiers, la gestion HTML5, pour l’audio et la vidéo sont désormais parfaitement gérées

.Pour le reste, c’est surtout un avant-goût de la version 3.7 qui engagera des changements plus profonds. Il répond en attendant à des exigences de Google qui donne de plus en plus de place à l’auteur pour qualifier la qualité d’un blog ou d’un site internet. Un moyen précieux de répondre de façon automatique à cette question de l’authorrank.

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é.