All Posts By

Franck

rss-functions.php

Full Path Disclosure sur le fichier rss-functions.php

By | Aide et astuces, côté serveur, Sécurité, Wordpress 4.2 | One Comment

Full Path Disclosure ou (FPD) est un faille de sécurité qui concerne le fichier /wp-includes/rss-functions.php sur les sites WordPress.

 

Qu’es ce qu’une Full Path Disclosure ?

Il s’agit d’une vulnérabilités permettent de voir le chemin d’accès au webroot dans la fenêtre du navigateur. Si votre site est assujettie à cette faille, le simple fait de taper l’URL complète du fichier rss-functions.php (ex: http://site-wordpress.fr/wp-includes/rss-functions.php) affichera dans le navigateur une Fatal error ainsi que le chemin complet depuis la racine du serveur jusqu’à ce fameux fichier rss-functions.php.

 

Fatal error: Call to undefined function _deprecated_file() in /homepages/19/d253383552/htdocs/wp-includes/rss-functions.php on line 8

 

La faille FDP est executé en injectant un caractère inattendu à certains paramètres d’une page web. Le script défaillant, ne s’attendant pas à l’injection de ce caractère, retourne un message d’erreur dans lequel figure, le nom de la fonction PHP incriminé _deprecated_file(), le webroot /homepages/19/d253383552/htdocs/ ainsi que le numéro de ligne où se trouve la fonction line 8.

 

Quel sont les risques ?

Les vulnérabilités FPD sont généralement perçues comme des menaces à faibles risques. Toutes fois, il ne faut pas oublier que les messages d’erreurs sont des gardes fous, qui s’adressent aux développeurs afin qu’ils puissent garantir code stable et intègre et non aux utilisateurs.

 

Local File Include et injection SQL

La faille Local File Include (LFI) permet l’injection de fichier malveillant sur le serveur. Quant à l’injection SQL appelé aussi faille XSS, permet quant à elle d’injecter du code (écrit en JavaScript) malveillant interprété par le serveur.

Mais pour s’assurer que ces scripts malveillants pointent bien vers les bons fichiers, il est nécessaire de connaitre son emplacement dans l’arborescence.

Et c’est à ce moment précis qu’une petite faille du type Full Path Disclosure est la bienvenue. Devenant pour l’occasion un véritable mouchard.

Comment combler la faille ?

 

La faille Full Path Disclosure peut être facilement comblé en désactivant l’affichage des messages d’erreur par le serveur Apache. Deux méthodes sont possibles:

Depuis le fichier de configuration de PHP, /etc/php5/apache2/php.ini


display_errors = 'off'

Depuis le fichier de configuration d’Apache, /etc/apache2/apache2.conf


php_flag  display_errors  off

Nota: Les chemins mentionnés ci-dessus s’appliquent au système  Debian et ses dérivée tel que Ubuntu. Il est possible que ces chemins diffèrent en fonction du système d’exploitation utilisé.

 

Le cas 1&1

Pour une raison inconnu, les serveurs Web de chez 1&1 sont configurer avec l’option display_errors = ‘on’. Malheureusement il n’est pas possible de changer ce paramètre sur off.

Pour résoudre ce problème, deux autres méthodes sont encore exploitables.

  1. La suppression pur et simple du fichier rss-functions.php. En effet, ce fichier est une relique, remplacé depuis par rss.php lui aussi un déprécier et remplacé par class-simplepie.php. Si après cette suppression, un plugin ou une fonction du thème rencontre des difficultés avec les flux RSS, rétablissez le fichier rss-functions.php et préférez la seconde méthode.
  2. Editer le fichier rss-functions.php et y ajouter le code ci-dessous juste avant la fonction:

(isset($var) && is_array($var)) ? logfunction() : /*continue*/;

Moins conviviales et pouvant être considérées comme du rafistolage, ces deux dernières méthodes ont un inconvenant commun: Les mise à jour de WordPress. A chaque fois que WordPress est mis à jour, un nouveau fichier rss-functions.php est créé, écrasant à chaque fois vos modifications. C’est pourquoi, il faudra renouveler l’opération après chaque mise à jour.

 

marqueurs conditionnels de Wordpress

Les marqueurs conditionnels de WordPress

By | Aide et astuces, Plugin Wordpress, Thèmes Wordpress, Wordpress 4.2 | One Comment

Les marqueurs conditionnels de WordPress permettent d’agir différemment sur le rendu d’un thème en fonction d’une situation spécifique.

Qu’entent-on par une situation spécifique ?

Par exemple, si l’on utilise la sidebar pour faire de la taxonomie, autrement dit afficher du contenu différent dans la sidebar en fonction de la page où l’internaute se trouve, il va falloir créer un modèle de page spécifique dans lequel figurera un marqueur conditionnel.

Liste des marqueurs conditionnels de WordPress

Il n’est pas question ici de lister tous les marqueurs conditionnels car ils sont bien trop nombreux, non l’objectif est de présenter une liste des marqueurs conditionnels les plus utilisés. Une liste complète est disponible sur le codex officiel de WordPress.

Fonction Condition Arguments (optionnels)
is_single() un article (seul) id, slug ou titre d’un ou plusieurs articles
is_singular() un article ayant un Custom Post Type en particulier Slug d’un ou plusieurs Custom Post Type
is_sticky() un article déclaré comme Mis en avant id d’un article
is_attachment() une image, une vidéo, un son
is_page() une page id, slug ou titre d’une ou plusieurs pages
is_page_template() un template de page en particulier nom du fichier (ex: page-fullwidth.php)
is_preview() lorsque l’on prévisualise une page ou un article
is_post_type_archive() une archive d’un Custom Post Type
is_category() une archive d’une catégorie id, slug ou titre d’une ou plusieurs catégories
is_tag() une archive d’un tag id, slug, ou titre d’un ou plusieurs tags
is_tax() une archive d’une taxonomie id, slug ou titre d’une ou plusieurs taxonomie
is_author() une archive d’un auteur id, slug ou pseudo d’un ou plusieurs auteurs
is_search() un résultat de recherche
is_404 une page d’erreur 404
is_home() la page principal
is_front_page() la page d’accueil
is_admin une page du tableau de bord de WordPress

 

Dans la colonne Argument, le terme id correspond à l’identifiant (ex: ?p=202). Quant au Slug cela correspond à un identifiant unique figurant dans l’URL à la suite du nom de domaine.

ex: www.formation-wp.com/contact //ici, l’identifiant de la page est contact

Utilisation des marqueurs conditionnels de WordPress

Les marqueurs conditionnels de WordPress s’utilisent avec la fonction if

Exemple avec is_page():

if (is_page('contact')) {
    echo "C'est bien la page contact !";
}

Dans l’exemple ci-dessous, est retournée la chaine de caractère suivante C’est bien la page contact ! si l’on est bien dans la page contact.

exemple avec plusieurs conditions

Quant un marqueur conditionnel accepte de recevoir plusieurs arguments, il faut insérer ces arguments dans un array.

if (is_author(array('Jean', 'Jacques', 'Martin'))) {
    //do something
}

Faire une migration Drupal vers WordPress

By | Aide et astuces, Plugin Wordpress, Wordpress 4.2 | No Comments

Cet article s’adresse aux utilisateurs Drupal qui souhaiteraient faire une migration Drupal vers WordPress en toute simplicité.

Le but de ici n’est pas de d’énigrer Drupal ni même d’inciter qui que ce soit à rejoindre la communauté WordPress. Non, l’objectif est bien de présenter une solution simple pour tous ceux qui veulent/doivent faire une migration Drupal vers WordPress.

L’opération s’effectuera à l’aide d’un plugin WordPress nommé Drupal2Wordpress.

Prérequis

Côté WordPress:

  • Une version récente de WordPress installée.
  • Les accès FTP à votre blog WordPress, soit l’adresse FTP, l’identifiant et le mot de passe.
  • (Optionnel) le logiciel Git installé sur votre PC/Mac.

Côté Drupal:

  • Drupal 7.0 au minimum d’installé.
  • L’adresse IP du serveur MySQL.
  • Le nom de la base de données.
  • L’identifiant de la base de données.
  • Le mot de passe de la base de données.

Installation de Drupal2Wordpress

Drupal2Wordpress est un plugin développé par Jeremy Simkins , qui permet d’importer les pages, les articles, les commentaires, les utilisateurs, les catégories, les mots clé et même les médias.

Ce plugin n’a pas été publié sur le site officiel de WordPress, mais sur le dépo Git du développeur.

Télécharger le plugin au format ZIP ou bien clonez le dépo avec le logiciel Git. Dans le dossier racine (Drupal2WordPress-Plugin) se trouve un sous-dossier nommé drupal2wp. Copiez-le dans le dossier /wp-content/plugin de votre blog WordPress.

Il faut à présent activer le plugin. Pour cela, allez dans le tableau de bord de WordPress (http://votre-site.net/wp-admin), puis dans le menu Extensions. Le plugin doit apparaitre sur deux lignes comme ci-dessous:

migration Drupal vers WordPress 2

Si Drupal2Wordpress n’apparaît pas, c’est que les restrictions en lecture, écriture et exécutions sont trop restrictives, dans ce cas appliquer un chomd 775 au dossier drupal2wp.

Activez au minimum Drupal 2 WordPress et éventuellement Drupal 2 WordPress Page Tags Support pour importer également les tags (mots-clé) des pages Drupal.

Importation Drupal vers WordPress

Toujours depuis le tableau de bord de WordPress, allez dans Outils > Importer puis cliquez sur Drupal 2 WordPress.

Saisissez les informations demandées puis cliquez sur Proceed to Next Step.

Créer-un-plugin-Wordpress

Créer un plugin WordPress

By | Aide et astuces, Plugin Wordpress | No Comments

Le guide du développeur pour créer un plugin WordPress.

 Avant-propos

Pour créer un plugin WordPress, il est nécessaire de connaitre au minimum les bases des langages PHP et HTML. Il est bien entendu possible d’y ajouter d’autres langages tels que le CSS, JavaScript et XML pour ne citer que les plus couramment utilisés.

A ce jour, WordPress compte plus de 36 000 plugins.

 

Pour illustrer ce tutoriel, les exemples porteront sur un plugin nommé, formation-wp. Il ne possèdera pas de fonctionnalité particulière. Il peut être considéré comme un gabarit regroupant les indispensables pour créer un plugin WordPress.

L’arborescence des plugins

La première étape consiste à trouver un nom unique à votre plugin. Choisissez-le bien, car il figurera à différents endroits: dans le code est dans l’arborescence. De plus, si le plugin est voué à être publié sur le site officiel de WordPress, la publication de ce dernier pourrait être refusé si le nom est déjà pris.

Enfin, les plugins sont à placer dans le dossier /wp-content/plugins.

Le minimum vital

Créez un fichier PHP ayant pour nom celui du plugin (ici, formation-wp.php), ajoutez-y l’entête suivant:

<?php
/**
 * Plugin Name: Formation-WP.
 */

A ce stade, le plugin est considéré comme valide par WordPress. Il est désormais possible de taper du code à la suite de cet en-tête.

Pour aller plus loin

Bien que valide, notre plugin n’est pas suffisamment fourni pour être publié sur le site officiel de WordPress. L’en-tête du fichier formation-wp.php n’est pas complet et un fichier readme.txt manque à l’appel.

Dans la mesure où notre plugin contient plus d’un fichier, il faut également créer un dossier racine qui reprend le nom du plugin.

/wp-content
/plugins
/formation-wp
formation-wp.php
readme.txt

Reprenons l’entête du fichier formation-wp.php comme dans l’exemple ci-dessous:

<?php
/**
 * Plugin Name: Formation-WP.
 * Plugin URI: URL du site officiel du plugin.
 * Description: Description courte qui figurera dans le tableau de bord de wordpress
 * Version: 1.0.0
 * Author: Jeremy SPAETH
 * Author URI: URL du site de l'auteur.
 * Text Domain: Optionnel. Plugin's text domain for localization. Example: mytextdomain
 * Domain Path: Optionnel. Chemin relatif vers les fichiers de traduction .mo - Example: /languages/
 * Network: Optionnel. Valeurs: true/false. Si true, le plugin peut être activé/désactiver indépendamment sur chaque sites d'une structure Mulitsite.
 * License: Tout les plugins WordPress doivent être sous licence GPL2
*/

Pour ceux qui ont déjà eu l’opportunité de rédiger un fichier readme.txt savent que c’est une tache longue est ingrate. Heureusement le site GenerateWP se propose de le créer à votre place.

L’internalisation du plugin

Dans l’en-tête du fichier formation-wp.php il est mentionné l’informaiton Domain Path qui pour rappel indique le chemin relatif vers les fichiers de traduction. La ligne de code ci-dessous permet le chargement des fichiers .mo contenu dans le sous-dossier languages.


load_plugin_textdomain('your-unique-name', false, basename( dirname( __FILE__ ) ) . '/languages' );

Ressources externes

codex.wordpress.org

Template_Tags

Plugin_API

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.

Google Web Font sous WordPress

Utiliser Google Web Font sous WordPress

By | Aide et astuces, Le graphisme et wordpress | No Comments

Utiliser Google Web Font sous WordPress s’effectue en 5 étapes. Relativement simple, il est accessible à tous, même pour ceux qui ne possèdent pas de compte Google.

 

Qu’est-ce que Google Web Font ?

Google Web Font est un site Internet proposé par Google, permettant d’ajouter plus facilement des polices d’écriture à votre site Web. En effet, par défaut les navigateurs Web prennent en compte 9 polices d’écriture qui sont : Arial, Georgia, Helvetica, Lucida, Palatino, Tahoma, Times, Trebuchet et Verdana.
Sans Google Web Font, ajouter des polices d’écriture personnaliser peut vite devenir un vrai casse-tête:

Premier problème, il existe plusieurs formats de fichier pour les polices d’écriture, et les navigateurs Web prennent en en charge qu’un seul formats de fichiers et bien entendu de l’un à l’autre ce n’est pas toujours le même format qui est supporté. Par conséquent, il faut pas moins de 4 fichiers pour que la police d’écriture personnalisé s’affiche correctement sur tous les navigateurs. Sans compter le fichier JavaScript pour les version d’IE6 et IE7.

Second problème, est que c’est fameux fichiers seront hébergé sur votre serveur xAMP, plus précisément dans un dossier situé à la racine du thème actif. Lors du téléchargement de la page, le navigateur devra également télécharger la police d’écriture. Avec une connexion Internet 3G ou bas débit cela ralentis l’ouverture de la page.

C’est pour pallier à ces problèmes que Google à mis en place Google Web Font. Le site héberge une galerie de 629 polices d’écriture à ce jour.Avec ce concept on sélectionne sa/ses police(s) d’écriture et on ajoutez les lignes de codes adéquate dans le fichier CSS.Le téléchargement de la page est moins long car il s’effectue en parallèle sur les serveurs Google pendant que votre navigateur charge la page de votre site.

Rendez-vous sur la page d’accueil de Google Web Font, puis choisissez une police de caractère.

Google Web Font sous WordPress-2

Dans cet exemple c’est la police Chango qui sera utilisé. Cliquez sur le bouton Quik-use en bas à gauche de la police d’écriture (ici case orange).

Dans les étapes 1 et 2 permettent modifier quelques paramètre de la police d’écriture. Ces réglages diffèrent quelques peut d’une police à l’autre.

Dans l’étape 3 se trouve une ligne de code HTML semblable à celle-ci:

Ouvrez le fichier &lt;strong&gt;header.php&lt;/strong&gt; de votre thème et dans le bloc &lt;strong&gt;head&lt;/strong&gt; àjouter cette ligne de code :


Dans l’étape 4 se trouve une ligne de code CSS semblable à celle-ci:

font-family: 'Chango', cursive;

Cette ligne de code sera à ajouter dans le/les fichiers CSS de votre thème. Dans l’example ci-dessous la police Chango sera utiliser pour les balises H1 :

h1 {

font-family: 'Chango', cursive;

}

Comme toute police d’écriture, il sera possible de changer la couleur, la taille, mettre en gras, italique, souligné…

wp-cron

WP-Cron pour planifier des tâches récurentes

By | Aide et astuces, sauvegarde wordpress | No Comments

WP-Cron est un programme qui permet d’exécuter périodiquement un script.

Historiquement Cron (contraction de chrono table) est un programme d’arrière-plan (ou deamon) développer pour les systèmes UNIX. Par la suite les descendants d’UNIX (BSD, Darwin, Linux…) en ont hérité.

Et WordPress dans tout ça ?

WordPress possède ça propre version de Cron appelé WP-Cron. Bien entendu il n’a de Cron que le nom. Comme beaucoup d’autres programmes UNIX, Cron est entré dans les moeurs. Dire d’aujourd’hui « faire un Cron » cela veut dire que l’on crée une planification.

Programmer une tâche unique

Sans le savoir, à chaque fois qu’une page ou un article est publié en différé (Publier tout de suite Modifier), l’utilisateur délègue la publication à WP-Cron.

Sous le capot, cela revient à faire appel à la fonction wp_schedule_single_event() avec comme paramètres la date/heure et une action du type hook. Il s’agit d’une fonction contenant le script que devra exécuter WP-Cron. Mais avant d’utiliser wp_schedule_single_event() WordPress préconise de vérifier si l’exécution du script n’a pas déjà été panifier à l’aide de la fonction wp_next_scheduled.Dans le cas contraire, la fonction retourne la date de la prochaine exécution.

// création de la tâche sous forme de fonction

add_action('action_hook', 'cron_script');

function cron_script {
	// le code source de la tâche figure ici
}

// vérification et planification de la tâche

if( !wp_next_scheduled('action_hook')){
	wp_schedule_single_event( time() + 3600, 'action_hook');
}

La fonction wp_schedule_single_event() à deux arguments obligatoires:

  • La date à laquelle le script sera exécuté. Pour cela il faut fournir un timestamp, comme dans l’exemple ci-dessous avec time() qui retourne l’heure courante, mesurée en secondes depuis le début de l’époque UNIX, (1er janvier 1970 00:00:00 GMT) plus 3600 secondes pour ajouter 1 heure.
  • Le nom du hook associé à la tâche action_hook.

Déprogrammer une tâche

WordPress stocke la date de la prochaine exécution d’une tâche planifiée dans la table wp_options. Pour la déprogrammer, il faut utiliser la fonction wp_clear_scheduled_hook() en précisant le hook associé à la tâche. Soit, action_hook.

<?php wp_clear_scheduled_hook('action_hook'); ?>
sticky menu

Créer un sticky menu en CSS

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

Le sticky menu est une des nouvelles tendances du webdesign. Cela consiste, à maintenir le menu principal collé en haut de la fenêtre du navigateur, lors du défilement vertical des pages.

Il est possible de créer un simple sticky menu à l’aide de la propriété CSS position: fixed. C’est la méthode qui va être présenté ici. L’avantage de cette méthode, c’est qu’elle est simple et donc à portée de tous. L’inconvenant est qu’il n’est pas possible de bloquer le menu seul. Il faudra bloquer tous l’entête de la page. Pour les thèmes ayant un en-tête fin (200px de haut environ) cela ne posera pas de problème, pour les autres oui. Car pendant le défilement vertical de la page cet en-tête figé sera trop imposant sur les écrans de petites tailles.

Pour ceux qui possède un en-tête trop volumineux, il est préférable d’utiliser un plugin, voir même de Jquery. Avec cette méthode, seul le menu sera maintenu en haut de page, le reste de l’en-tête disparaitra.

Pour créer un sticky menu, il faut commencer par repérer la balise div qui englobe la totalité du header de votre site. Généralement appelé header. Pour la localiser facilement, afficher la page d’accueil de votre site puis utiliser les outils de développement de votre navigateur web. Une fois localisé, ouvrez le fichier style.css de votre thème à l’aide de votre éditeur de texte préféré, puis en fin de fichier ajouter le code suivant :

.header {
	position: fixed;
	left: 10%;
	z-index: 1000;
	background-color: #FFF;
}

Dans l’exemple ci-dessus, l’en-tête du thème se trouve dans : div class= »header »
.

  • position: fixed. Permet de maintenir l’en-tête haut de la page pendant le défilement vertical.
  • left. Par défaut, l’élément vient se caller dans le coin supérieur gauche du navigateur, utilisez left pour recentrer l’en-tête.
  • z-index. Si le menu passe en dessous du contenu, ajoutez également la propriété z-index et le contenue passe en dessous.
  • background-color. Ajoutez en un car pendant le défilement de la page, le contenue peut être visible dans les espaces vides du header.

Pour la propriété left préférez une valeur en pourcentage, cela permet une meilleure intégration en responsiv web design. Ou bien, faite un en-tête faisant toute la largeur de la fenêtre du navigateur. La propriété left prendra la valeur auto

.header {
	position: fixed;
	left: auto;
	width: 100%;
	z-index: 1000;
	background-color: #FFF;
}

Pour finir, repérer la balise div qui contient le contenu de la page, généralement appelé : content, container ou wrap. Ajouter lui un padding-top dont la valeur correspond à la hauteur de l’en-tête.

Ai to canvas

Ai to canvas – Exporter un fichier AI en Canvas HTML5

By | Aide et astuces, Le graphisme et wordpress | No Comments

Ai to canvas est un plugin pour Illustrator développé par Mikes Wanson, permettant d’exporter des tracés vectoriels dans le caneva HTML5.

Qu’est-ce que le Canva HTML ?

Canva est une balise HTML5. Elle s’utilise conjointement avec le langage JavaScript pour créer des tracés vectoriels statiques ou animer.
Le code source des tracés et des animations est en JavaScript. La balise <canvas></canvas> est placée là où les tracés vectoriels et leurs animations devront figurer.

Installer Ai to Canevas

1. Télécharger le plugin sur le blog officiel de l’éditeur.

Nota: Choisissez bien le plugin en fonction de votre version d’Illustrator, CSS3, CS4, CS5, CS6 ou CC. Les versions CS6 et CC sont disponibles en version 32bits et 64btis. Là encore il ne faut pas se tromper.

Pour connaitre votre version d’Illustrator allez dans le menu Aide -> A propos d’Illustrator…

2. Une fois téléchargé, dézippez le fichier, puis placer le dans le dossier des modules.

Pour les versions:

    • Windows 32bits: C:Program Files(x86)AdobeAdobe Illustrator CSxPlug-ins
    • Pour les versions Windows 64bits: C:Program FilesAdobeAdobe Illustrator CSx (64 Bit)Plug-ins
    • Mac: /Applications/Adobe Illustrator CSx/Plug-ins

Comment utiliser Ai to canevas ?

L’utilisation de Ai to canevas est très simple. Créez un nouveau document Illustrator, puis réaliser un tracé votre vectoriel.
Une fois votre tracé vectoriel achevé, allez dans Fichier -> Exporter…. Dans type sélectionnez canevas (*.HTML)., puis Enregistrer.

Un fichier au format .html sera alors créé, et votre navigateur Web par défaut ouvrira ce dernier permettant ainsi de visualiser le résultat.

Le canvas dans WordPress

Le fichier HTML créé par Ai to canvas ne peut pas être utilisé tel quel sur votre site. Il va falloir ouvrir le fichier avec un éditeur de texte pour en extraire les parties importantes. A savoir, le contenu dans des balises <script></script> et <canvas></canvas>.

Dans WordPress, créez une nouvelle page, puis copiez/collez la balise <canvas></canvas> et sont contenu. Cliquez sur Publier pour enregistrer votre travail.

Quant au script JavaScript, copiez/collez le (sans les balises <script></script> ) dans un nouveau fichier, puis enregistrez-le avec l’extension .js. Pour notre exemple ce sera: canvas.js.
A la racine de votre thème, créez un sous-dossier js si il n’est pas déjà présent, puis placez-y votre fichier.js à l’intérieur.

Ouvrez à présent, le fichier header.php situé dans le dossier racine de votre thème. Localiser la balise fermante </head> et ajouter le code HTML suivant juste au-dessus de cette dernière:

...
	<script type='text/javascript' src="js/canvas.js"></script>
</head>

Pour aller plus loin

Bien que l’image soit de type vectoriel elle n’en est pas pour autant responsive. Pour remédier à cela, ajoutez dans votre fichier CSS.

canvas#canvas {
	width: 100%;
}

Cet article a pour but de présenter le plugin AI to canvas ou plutôt une introduction à celui-ci afin de permettre au plus grand nombre de créer simplement des tracés vectoriels et de les exploiter au sein d’un page WordPress..

C’est pourquoi la fonction animation ne sera pas décrite dans cet article, car trop difficile pour ceux qui ne maitrisent pas JavaScript.
Pour les plus courageux, rendez-vous sur le site officiel, pour y trouver des tutoriels, des exemples ainsi que des vidéos faites par Mikes Wanson en personne.