Category

wordpress 3.9

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.

Ultimate Branding

Ultimate Branding : personnaliser votre site pour allez encore plus loin

By | Plugin Wordpress, wordpress 3.9 | No Comments

Ultimate Branding est une plugin développé par le célèbre wpmudev, à l’origine de nombreuses extensions et de nombreux thèmes.

L’extention Ultimate Branding, permet de personnaliser votre admin wordpress back-end très facilement. Nous avions déjà parlé dans ce blog de l’extension de personnalisation White Label, permettant de mettre l’admin à vos couleurs.

Ultimate Branding va plus loin, et de façon plus simple. Chaque élément du back-end peut être ou non activé, afin d’en profiter ou de le laisser selon les standards de WordPress.

Vous pourrez donc travailler les images types comme le contenu du texte standard,, simplement changer le header, travailler le footer ou encore totalement personnaliser le site pour imposer votre marque et celle de votre client.

C’est une application qui coûte 19$. Pourquoi ne pas profiter d’une application gratuite me direz vous? Et bien le temps. Une fois acheté, l’application évolue et avance vers de nouvelles fonctions et de nouvelles applications.

C’est de plus l’une des extensions que nous ajoutons automatiquement dans l’installation d’un wordpress pour un client, donc au final, le 19$ est très rapidement amorti!

Pour les purs, je sais que tout peut être fait dans le code et que WordPress laisse les fichiers bien ouverts, mais le gain de temps est parfois un bon moyen de travailler sur d’autres choses, plus stratégique pour le site du client que vous développer.

Voilà une vidéo Youtube qui présente rapidement l’extension.

web-design

Les 10 dernières tendances du Web design

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

Le Web design est comparable au monde de la mode, voici donc les 10 dernières tendances du Web Design pour bien choisir votre thème WordPress.

1. Le RWD pour Responsive Web Design

Avec la multiplication des mobiles devices (smartphones et tablettes en tête), il n’est plus conservable de créer des site uniquement destiné ordinateurs de bureau. En ce qui concerne WordPress, les thèmes payants sont RWD. Pour ceux qui souhaite utiliser les thèmes gratuit disponible depuis le tableau de bord, pensez à cocher la case Largeur flexible pour filtrer tous les thème qui ne sont pas RWD encore trop nombreux actuellement.

2. Le Flat Design : Le nouveau style qui s’impose depuis fin 2013.

Le temps du Web 2.0 avec ses barres en dégradé et ses boutons glossy aux coins arrondis c’est finit, place au Flat Design.
Le Flat Design fait référence à un style de dessin d’interface épuré de toute formes stylistique afin de ne garder que des formes vectoriel en deux dimension au couleurs unis. Les barres et les boutons ont de nouveau des coins carré.
Le Flat Design reprend les codes des premiers site Internet que l’on pourrait appeler le Web 1.0. La grosse différence réside dans le choix des couleurs. Aujourd’hui les couleurs sont claire et pétillantes, souvent dans des tons pastels.

3. Les font icone : Une intégration progressive dans les thèmes wordpress ou drupal.

Eléments indispensables de tous bon site Flat Design qui se respecte, les fonts icone. Comme sont nom l’indique, il s’agit de police d’écriture (font en anglais) qui représentent non pas des lettres mais des icônes.
Ainsi, les avantages sont nombreux :
– il n’est plus nécessaire de savoir dessiner pour avoir de beaux icône ;
– les polices d’écriture sont des formes vectoriel, donc pas de risque de pixellisation
– le temps de chargement d’une police d’écriture est moins long que celui d’une image pixelisé.

4. Le Parallax Scrolling : A utiliser en fonction des sites, et avec modération.

Autre tendances old school qui revient sur le devant de la seine c’est le parallax scrolling ou défilement parallaxe. Ce concept emprunt au monde du jeux vidéo en 2D consiste à faire défiler l’arrière plant plus lentement que le premier plan, donnant ainsi une impression de profondeur dans le décor.
Appliqué au Web cela ce traduit par une image en arrière plan (le background de la page) défilant plus lentement que le contenue de la page (le texte principalement).

Si votre thème ne permet de faire du parallax scrolling une série de plugins sur le site officiel de WordPress est disponible.

5. Les big images : L’image et la vidéo au service du contenu.

Avec les big images, rien de bien révolutionnaire, il s’agit tous simplement d’utiliser de très grandes images (en HD de préférence) en guise de background.
L’idée n’est pas de faire de le spectaculaire, mais simplement de créer un ambiance sur le site.

6. Les background videos : Impressionnant pour porter votre site internet.

Les background videos sont des vidéos encodées en webm (pour Chrome, Firefox et Opera) et en mpeg4 (pour Internet Explorer et Safari) qui sont utilisées comme des background de page web.
Comme pour les big images, la vidéo recouvre l’intégralité de l’arrière plan du site.
Seul contrainte, le téléchargement de la vidéo réclame une bonne connexion Internet.

Nous avons d’ailleurs bien détailler le fonctionnement du format Webm sur ce même blog.

7. Le Scrolling

Le scrolling ou défilement en français, plus connu sous le nom de : single page ou encore one page (pour trouver des thèmes WordPress ces deux mots clé sont à privilégier), propose une navigation des pages comparable à un rouleau de papiers.
Ici les pages sont positionnés les unes à la suite des autres formant une longue et unique page avec un en-tête tous en haut, pied de page tout en bas et pas de barre latérale.
Cet disposition des élément est plus propice à une utilisation pour écran tactile que pour une utilisation classique avec la souris. Pour palier à cet problème ce type de site utilisent des liens de type ancres pour délimité les sections de page et des sticky menu pour la navigation.

8. Le Sticky Menu

Le sticky menu est un menu qui reste en permanence collé en haut de la page web même lors d’un défilement horizontal. La timeline de Facebook ou encore la fonction Figer les volets d’Excel sont souvent pris en exemple pour expliquer ce qu’est le stiky menu.
Pour ceux qui souhaiterez l’appliqué à leur thème WordPress, les directives CSS position:fixed ou encore position:absolute peuvent remplir très simplement cette mission.

9. Le full screen menu

Le full screen menu est un menu qui recouvre l’intégralité de la page web. Cette tendances initié par Microsoft avec sont interface Metro, et parfaite pour les smartphones et éventuellement les tablettes 7 pouces. Les écrans sont petits et la navigation est tactile. Les boutons sur-dimensionnés font le bonheurs des mobinautes mal habile.
En revanche, pour les écrans de plus grande taille, non tactile, le succès est plus mitigé. Il faudra patienter encore un peut, le temps que les utilisateurs s’habituent au full screen menu sur de si grands écrans.

10.Le mobile first : Mobile, puis tablette puis desktop, pour une construction optimisée.

Le mobile first n’est pas vraiment une tendances mais plutôt une méthode de travail qui devient tendances.
Jusqu’à présent, les Web designers commençaient par créer la version desktop du site. Autrement dit, par la version la plus complète du site. Puis, ils l’épuraient une première fois pour la version tablettes puis une seconde et dernière fois pour la version smartphone.
Partant du principe que plus l’écran est petit, plus le contenu du site doit allé à l’essentiel, les Web designers conçoivent leurs site dans le sens inverse.
La méthode à prouvé qu’il était plus simple et plus rapide d’ajouter du contenue au fur et à mesure de l’avancement du site, plutôt que de faire le trier et réorganiser l’ensemble.

Les éléments présentés dans cet article peuvent être visualisés sur le site de Dronelis.

Themeforest : Le grand gagnant des thèmes et plugins WordPress

By | Aide et astuces, Plugin Wordpress, Thèmes Wordpress, wordpress 3.9 | No Comments

Création de sites Internet avec WordPress ne passe plus nécessairement par la création d’un thème graphique. Désormais avec la hausse du nombre de sites proposant des thèmes déjà créés, il suffit de choisir son mode de thème, sachant graphique, et de l’adapter aux couleurs de son client. Les connus était jusque là pour WordPress, MonsterTemplate, c’est désormais Themeforest, le petit poucet de l’époque qui est devenu grand.

Themeforest, référence et meilleure banque de données pour l’achat d’un thème WordPress Premium, de qualité professionnelle.

L’un des grands gagnants sur le sujet, spécialiste dans la création de thèmes WordPress (Drupal, Joomla, ou encore de simples feuilles HTML) c’est ThemeForest. Il s’agit d’une banque de données payantes mais libres de droit. Un avantage précieux par rapport au temps que cela fait gagner. Car au-delà des couleurs, et de la mise en forme, il y a surtout certains types de thèmes déjà intégrés, comme pour la création d’une boutique ou un site tout spécialement dédié aux photographes.

WordPress reste simple dans son administration est parfaitement accessible pour celui qui saura faire les modifications standards que l’on retrouve sur les blogs. À partir de la l’intégration d’un thème acheté, on peut donc facilement utiliser WordPress pour créer un site internet totalement professionnel, sans pour autant être un grand spécialiste du code.

Mais tout cela a une limite car en réalité, Themeforest s’adresse aux Agences qui achètent là une matière première plus aboutie que de simples lignes de code. Si on peut réaliser un site, le modifier reste donc à la porter des professionnels de la création web.

Themeforest est donc une banque de données que pourront utiliser les agences de création de sites au profit d’un gain de temps et ceci pour quelques euros. Un thème se vendra entre 30 et 50 $, et un plugin en moyenne entre 8 et 20 $.
Ainsi au lieu de créer un plugin dédié à quelque chose dont vous avez besoin dans votre site Internet, il suffira de l’acheter et de l’intégrer sur votre site. Le meilleur exemple reste l’utilisation de plugin permettant la création d’un CRM ou d’un système de facturation sur WordPress. Besoin de personnaliser en fonction de ce que fait l’entreprise, mais en aucun cas il n’est nécessaire de tout reprendre à zero. Il suffira donc d’acheter un plugin et de le faire ensuite évoluer. Pour souvent moins de 20€ on gagne plusieurs jours de programmation, c’est donc évidement rentable et pratique.

Mais Themeforest, s’il est concentré sur un très grand nombre de produit WordPress, ne travail pas que pour cela. Vous trouverez également des thèmes de qualité pour Drupal, Joomla, Photoshop, ou des simples feuilles en HTML pour les sites les plus simples. En dehors du Web, on peut également trouver de la matière pour le print, pour le son et le montage vidéo, permettant réellement d’aller très loin. Projet After Effect, présentations powerpoint… tout est là pour fournir à votre agence une matière première efficace.

WordPress reste un logiciel libre de droit ce qui permet donc de modifier, d’adapter et de personnaliser à la charte graphique de celui qui intégrera dans son site Web les éléments de Themeforest. La qualité du travail final n’est donc pas impacté, mais le temps gagné dans l’inspiration et la structuration du site est précieux!

Je vous conseil donc d’utiliser sans réserve cette source que beaucoup d’entre vous ont déjà dans leurs bases de données j’en suis certain!

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.

Geo my Wordpress

Utiliser la géolocation avec Geo my WordPress

By | Plugin Wordpress, wordpress 3.9 | No Comments

Geo my WordPress est une solution complète de géolocation pour WordPress.

Utilisant les API de Google Maps il permet d’ajouter l’emplacement à tous ou partie de vos articles, pages et même à vos membre BuddyPress lorsque celui-ci est installé.

 L’installation du plugin Geo, prenez juste la précaution de sélectionner le bon plugin.

L’installation ce fait de manière classique, attention toutes fois lors de l’installation automatique (via le tableau de bord de WordPress), car un autre plugin porte le même nom. Sans doute que les développeurs aient voulu s’approprier la notoriété de sont ainé. Quoi qu’il en soit, veuillez à bien installer celui qui déteind les 5 étoiles.

 

Le sous menu Modules

Ce menu permet l’ajout de modules complémentaires pour accroitre le nombre de fonctionnalité. Par défaut seul Post types locator est installé mais pas active. Activez-le tous de suite car il est indispensable pour la plupart des fonctionnalités de base.

Les plugins où figure le liserer rouge à coté du nom, signifie qu’ils ne sont pas activé. Le liserer passe en bleu lorsqu’ils sont activés. Certain plugin nécessite l’ajout d’un numéro de licence, il apparaissent avec le liserer vert.

Dans la liste figure un plugin nommé : Gravity Form Geo field. Pour ceux qui ne connaissent pas encore Gravity Form un article lui est consacré sur FranceWordpress.

Les fonctionnalités

Après avoir ajouter votre localité, il sera possible de créer un formulaire de recherche avancé en y incluant la localité et ainsi proposé un solution de recherche par taxonomie par localité. La recherche peut être étendu à l’aide d’un rayon d’action dont la distance peut être configurer en miles ou en kilomètres.

Geo My WordPress propose d’autres fonctionnalités comme : l’emplacement actuel de l’utilisateur de positionnement automatique, affichage de la distance de conduite,
TogethWP est très proche de Google Maps, en proposant la géolocalisation automatique de l’utilisateur et permétant d’afficher l’itinéraire jusqu’à votre lieu physique.

Les principales caractéristiques

  • Fonctionne avec les Articles et les Pages.
  • Fonctionne avec Buddypress – Les membres de Buddypress peuvent ajouter leur adresse.
  • Possible recherche par ville ou code postale.
  • Utilisé la localisation automatique pour obtenir l’emplacement actuel de l’utilisateur.
  • Utilisé la localisation automatique pour afficher les résultats à proximité de l’emplacement de l’utilisateur.
  • Rechercher dans n’importe quel rayon choisi parmi un menu déroulant..
  • Pour les post types – Utilisez les catégories pour filtrer resultats.
  • Pour Buddypress – Utiliser le champs profile pour des résultats complexes de filtrage.
  • Recherche par miles ou kilomètres
  • Afficher Google map avec les marqueurs de la fenêtre, des emplacements et des informations pour chacun des marqueurs.
  • Utilise les API de Google pour affiche les itinéraires.
  • Pagination – choisissez le nombre de résultats par pages.

Paramètres généraux.

  • Entrez votre Google API key
  • Choisissez votre région.
  • Choisissez si obtient automatiquement l’emplacement actuel de l’utilisateur lors de la première visite sur le site.
  • Personnalisez l’icône de localisation parmi les modèles proposés ou en en important les vôtres.
  • Choisissez le Post types où vous voulez ajouter la localisation.
  • Choisissez le thème de couleur pour les Titres, liens et adresse dans les résultats de recherche.

Nouveautés et mises à jour dans la page admin

  • Les champs d’adresse sont automatiquement créés pour les types de poste choisis.
  • Les Meta boxes pour le numéro de téléphone, fax, adresse email et site web for sont affiché dans les résultats et dans les fenêtres d’information de la carte.
  • Des Meta boxes pour ouvrir l’heure et la date.
  • Crée des champs d’adresse obligatoire pour s’assurer que les utilisateurs souhaitant créer un nouvel article soient bien une personne morale et nom un serveur.
  • 5 possibilités pour ajouter l’adresse et les coordonnées géographique (longitude, latitude) :
    • Géolocalisation automatique de l’emplacement actuel.
    • Champs de saisie auto-complété qui obtiennent des résultats de Google.
    • Glissez/Déplacez du marqueur sur la carte pour choisir la localité.
    • Entrez l’adresse manuellement pour retrouver la longitude et la latitude.
    • Entrez la longitude et la latitude manuellement pour retrouver l’adresse.

 

installer woocommerce

Installer WooCommerce

By | Aide et astuces, Plugin Wordpress, Thèmes Wordpress, wordpress 3.9 | 2 Comments

Installer WooCommerce correctement peut s’avérer fastidieuse, l’aide officiel est très dense, et la configuration par défaut de WordPress n’est pas toujours adéquate.

Installation du plugin

Pour installer WooCommerce il faut impérativement télécharger les fichiers sources sur le site officiel, puis les décompacter dans le dossier /wp-content/plugins.

Changez le Chmod du dossier WooCommerce est de son contenue, la valeur par défaut est de 700, passez le en 775, sans oublier d’activer la recurtions pour les sous-dossiers

Pour finir, activer le plugin : Extensions -> Extensions installées, puis Activer

Finaliser l’installation du plugin

Après l’activation de WooCommerce le bandeau ci-dessous devrait s’affiché en haut du tableau de bord.

Installer WooCommerce

Cliquez sur Installer les pages WooCommerce, cela créera un ensemble de page d’exemple pour la boutique.

Pour finaliser l’installation, rendez-vous sur la page WooCommerce -> Etat du système. Un rapport système s’affiche alors, indiquant tous ce qui va (en vert) et tous ce qu’il ne va pas (en rouge). Les lignes inscrites en noir ne sont là qu’à titre indicatif.

Comme souvent les lignes WC Connexion et WP Limite mémoire sont en rouge.

WP Limite mémoire : indique que WordPress n’alloue pas suffisamment de mémoire pour les fichiers PHP. Ouvrez le fichier wp-config.php puis ajouter la ligne de code suivante en début de fichier.


define( 'WP_MEMORY_LIMIT', '64M' );

WC Connexion : indique le dossier qui contient les journaux d’évènements (logs) n’est pas accessible en écriture par WooCommer. Changer le Chmod du dossier woocommerce/logs en 777.

L’intégration du thème

Si votre thème ne déclare pas le support WooCommerce le bandeau suivant apparait en haut du tableau de bord :

Installer WooCommerce

Dans le cas contraire, l’installation de WooCommerce s’arrête là.

Pour les autres il va falloir remettre les mains dans le cambouis. Deux méthodes sont possibles, soit en créant un modèle de page, soit en éditant le fichier fonction.php de votre thème.

Créer un modèle de page

Créez un fichier nomé woocommerce.php, puis copier/coller le contenu du fichier page.php de votre thème.

Dans le fichier woocommerce.php, localisez la boucle (loop), le code devrait commencer par <?php if ( have_posts() ) : et se terminer par <?php endif; ?> Supprimer ce code et remplacez-le par <?php woocommerce_content(); ?>

Edition du fichier fonction.php

Ici l’idée est d’exploiter les crochés (hooks) de WordPress, afin de substituer la boucle du thème par celle de WooCommerce lorsqu’il est question d’afficher une page produit. Ouvre le fichier fonction.php et ajouter les lignes de code suivantes :


remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

Ainsi que celle-ci à la suite:


add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '&amp;lt;section id=&amp;quot;main&amp;quot;&amp;gt;';
}

function my_theme_wrapper_end() {
  echo '&amp;lt;/section&amp;gt;';
}

Déclarer le support de Woocommerce

Le thèmes est à présent optimisé pour afficher les produits de la boutique dans la page. Toute fois, le bandeau figurant dans le tableau de bord indique toujours le contraire. Pour terminer cette optimisation, ouvrez de nouveau le fichier fonction.php puis insérez la ligne de code suivante :

add_theme_support( 'woocommerce' );

Cet ligne de code est à placer non pas à la suite mais avant celle qui ont été ajoutés dans le paragraphe précédent, comme dans l’exemple ci-desous:


add_theme_support( 'woocommerce' );

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '&amp;lt;section id=&amp;quot;main&amp;quot;&amp;gt;';
}

function my_theme_wrapper_end() {
  echo '&amp;lt;/section&amp;gt;';
}

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.