Category

Wordpress 3.8

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.

processingjs

Utiliser Processingjs sous WordPress

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

Processingjs est une librairie JavaScript permettant de faire du dessin vectoriel en 2D ou en 3D. Ces tracés vectoriels peuvent être fixes ou animés. Le code source Processingjs s’utilise avec la balise HTML <canvas>. C’est pourquoi il est compatible avec tous les navigateurs HTML 5 et ne requière aucun plugin particulier pour les internautes.



Cet exemple intitulé Multiple Particle Systems est disponible sur le site officiel de Processing.

Installation par le plugin

Par défaut il n’y qu’une seule façon d’installer Processingjs. Mais Wordpres est un framework populaire, ainsi il existe une seconde méthode plus simple. Cette méthode consiste à installer le plugin du même nom.

Depuis le tableau de bord de WordPress, allez dans Extentions -> Ajouter puis taper processingjs en tant que mot-clef. Installez le plugin nomé: Processing.js

Installation pour les puristes

Rendez-vous sur le site officiel de processingjs pour y télécharger la dernière version du fichier processing.js. Placez-le à la racine de votre thème WordPress, puis chargez le script dans la balise <head> de votre thème.

Ouvrez le fichier header.php puis ajouter la ligne de code suivante :


<script src="/chemin-vers-votre-dossier/processing.js"></script>

Intégration du code source avec le plugin

Le plugin permet d’intégrer le code source à l’intérieur d’une page ou d’un article.

Créez votre nouvelle page/article, puis insérez les shortcodes [processing] et [/processing].

Le code source Processing devra être insérer à l’intérieur des shortcodes.

Intégration du code source sans le plugin

L’avantage de cette méthode par rapport à la précédente est que l’intégration du code Processing ne se limite pas aux articles et aux pages de votre site. Il est également possible de l’intégrer directement dans les fichiers sources de votre thème. Car ici pas de shortcode, mais l’utilisation de la balise .

Première méthode à privilégier si votre sketch est constituer de plusieurs ou fichiers (au format .pde), ou bien que votre code est très dense.

Exemple avec un seul sketch :


<canvas data-processing-sources="/hemin-vers-votre-dossier/sketch.pde">
</canvas>

Exemple avec deux sketchs :

<canvas data-processing-sources="/chemin-vers-votre-dossier/sketch_1.pde chemin-vers-votre-dossier/sketch_2.pde">
</canvas>

Deuxième méthode à privilégier si votre sketch est très court et qu’il tient dans un seul fichier. Le code s’intègre à l’aide d’une balise JavaScript. Le code source Processing est à saisir dans les balises