Category

Le graphisme et wordpress

Utiliser Twig pour les thèmes WordPress

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

Comment utiliser le moteur de rendu de chez SensioLab, Twig pour les thèmes WordPress ?

Par défaut, WordPress n’utilise aucun moteur de rendu. Pour les développeurs front ayant l’habitude d’en utiliser et plus particulièrement Twig, ils pourront se réjouir de savoir qu’il est possible de l’utiliser pour créer des thèmes WordPress.

Installation du plugin Timber

Cette compatibilité passe par l’installation d’un plugin nommé Timber. Pour l’installer allez dans Extensions -> Ajouter. Recherche Timber. Lancez l’installation puis activer le plugin.

Utilisation

Timber ne permet pas une substitution totale de PHP au profit de Twig. C’est pourquoi il va tout de même falloir créer les fichiers de templates de WordPress avec PHP. Voir l’article intitulé les fichiers de templates de WordPress pour de plus de détails.

Les fichiers PHP seront placés à la racine du thème, quant aux fichiers Twig, ils seront dans un nouveau sous-dossier nommé views.

Les fichiers Twig et PHP peuvent avoir des noms différents. Mais dans cet exemple les noms seront les mêmes. Dans chaque fichier PHP (sauf fonctions.php) ajouter uniquement le code source suivant:


$context = array();
$context['message'] = 'Hello Timber!';
Timber::render('header.twig', $context);

Ces lignes de code vont permettre au plugin Timber de transpiler les fichiers Twig en PHP et ce, en fonction des noms des fichiers renseignés à la troisième ligne.

Exemple avec le fichier d’en-tête fichier header.php contenant le code source ci-dessus. Créez également le fichier /views/header.twig qui contiendra tout le code (HTML, Twig, JS…). Le fichier header.twig sera transpilé (converti) à la volée par Timber et le résultat de cette transpilation sera placé dans le fichier header.php. De ce fait, WordPress pourra charger le fichier header.php en toute quiétude.

Le fichier Twig devrait ressembler à ceci:


{# welcome.twig #}
<div class="welcome">
    <h3>{{message}}</h3>
</div>

Liens utiles

Le site officiel de Timber: http://upstatement.com/timber/

La documentation officiel de Twig: http://twig.sensiolabs.org/documentation

Personnaliser WooCommerce

By | Le graphisme et wordpress, Plugin Wordpress, Thèmes Wordpress, woocommerce, Wordpress 4.4 | No Comments

Personnaliser WooCommerce afin qu’il s’intègre parfaitement au design de votre thème.

WooCommerce possède sa propre loop (boucle) pour afficher les produits dans les pages ainsi que ses propres fichiers de templates (modèles).

Rappel des fondamentaux

Dans un précédant article intitulé Installer WooCommerce, est expliqué comment procéder lorsque votre thème ne déclare pas le support de WooCommerce (voir paragraphe L’intégration du thème).
Le principe est de créer un nouveau modèle de page, est de substituer la boucle par défaut (la boucle du thème) par celle de WooCommerce.

Quelque soit thème choisi, les éléments propres à WooCommerce ont toujours le même aspect.
Pourquoi ? Tous simplement parce que WooCommerce possède ses propres fichiers de templating ainsi que son propre fichier CSS. Ce qui n’est pas toujours (jamais) en accord avec le reste du thème.

Modifier les fichiers de templating

Heureusement pour nos confrères Web Designers ce n’est pas à eux de s’adapter aux templates de WooCommerce, mais bien l’inverse.

Ces fichiers de templating se trouvent dans /wp-content/plugins/woocommerce/templates.
Pour les modifier sans prendre le risque de les perdre lors de la prochaine mise à jour de WooCommerce, rendez-vous à la racine de votre thème actif, créez un dossier nommé woocommerce (respectez bien la case), puis faites un copier/coller des fichiers à personnaliser du dossier /wp-content/plugins/woocommerce/templates vers /wp-content/votre_theme_actif/woocommerce/ et de faire les modifications dans ce dernier.

Ainsi, les fichiers contenus dans le thème actif seront prioritaires sur ceux de WooCommerce.

Attention toutefois à bien respecter les noms des fichiers. Pour ceux contenues dans des dossiers (ex: email), il faudra créer un dossier email à la racine du dossier /wp-content/votre_theme_actif/woocommerce/.

Personnaliser les Email de WooCommerce

Les différents Emails envoyés par votre site e-commerce via WooCommerce peuvent être eux aussi personnalisés.
Les templates par défaut se trouvent dans /wp-content/plugins/woocommerce/templates/emails.
Comme pour les fichiers de templatings, dupliquer le/les modèle(s) d’Email(s) à personaliser dans le thème actif. Plus précisément dans /wp-content/votre_theme_actif/woocommerce/emails.

Créer un thème WordPress sans taper une ligne de code

By | Le graphisme et wordpress, Thèmes Wordpress | One Comment

Créer un thème WordPress sans taper une ligne de code (ou WYSIWYG) sous Windows, Mac et Linux.

Lubith : le choix de la rédaction

Qu’ils soient gratuits, payants, en ligne ou installés en local sur votre PC, les générateurs de thème pour WordPress sont très nombreux. L’objectif de cet article n’est pas de tous les présenter, mais d’en présenter au moins un afin de se faire une idée de ce qu’il peut être fait sans trop de labeur.

Lubith est un service qui concilie beaucoup d’avantages :

  1. il est en ligne, donc multiplate-forme. Ce qui n’est pas le cas des logiciels qui doivent être installés en local qui ne fonctionne que sur Windows;
  2. il est gratuit;
  3. enfin Lubith est simple est ludique. Très axé sur le glisser/déplacer.

Outre l’aspect pécuniaire, il était important pour Formation-WP de ne pas faire publicité pour des logiciels payants.

Les premières étapes

Rendez-vous sur la page d’accueil de Lubith, puis cliquez sur Start Here it’s free. Créez un compte ou utilisez un compte existant sur les réseaux sociaux : Facebook, Google+ ou Yahoo.

La vidéo ci-dessous a été publiée sur Youtube par l’équipe de Lubith. Il s’agit d’un tutoriel vidéo pour aider ses nouveaux utilisateurs à créer un thème WordPress.

Installer son thème dans WordPress

Une fois le thème terminé, cliquez sur Test Theme afin de s’assurer que votre travail correspond bien à vos attentes. Si c’est le cas, cliquez sur le bouton Download (en haut à gauche). Lubith va créer un thème WordPress sous la forme d’un fichier ZIP.

Depuis le tableau de bord de WordPress allez dans Apparence -> Thèmes -> Ajouter -> Mettre un thème en ligne, puis cliquez sur Parcourir pour rechercher le fichier ZIP. Terminez l’installation en cliquant sur Installer maintenant.

Le thème est à présent installé, allez dans Apparence -> Thèmes -> Activer pour l’activer.

Theme Wordpress gratuit en Material design

Theme WordPress gratuit en Material design

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

Material Gaze est un theme WordPress gratuit en Material design. Basé sur le thème Stargazer, il reprend tous les codes du Material Design défini par Google.

Pour ceux qui ne connaissent pas encore le Material design, il s’agit d’un semble de règle de dessin établie par Google qui s’applique à la partie graphique des applications mobile (Android) et des sites Web.

Présenté en juin 2014 lors de la conférence Google I/O, commence doucement à conquérir le cœur des infographistes.

Pour ceux qui souhaitent rejoindre cette mouvance, voici un thème wordpress gratuit en Material design baptisé: Material Gaze.

Installation

Material Gaze, n’est pas un thème, mais un child theme (ou thème enfant) du thème Stargazer.

Par conséquant, il faut installé Stargazer et Material Gaze. Comme ils sont tous les deux gratuits, il est possible de lés installer de manière automatique.

Soit: Apparence -> Thèmes -> Ajout

Une fois Stargazer Material Gaze installé, activez Material Gaze.

Configuration

Les paramètres du thème se trouvent dans le menu Apparence -> Personnaliser et permettent d’effectuer les changements suivants:

Theme WordPress gratuit en Material design-2

  • Titre de site et slogan.
  • Disposition: choisissez entre quatre modèles de pages différents.
  • Couleurs: changez la couleur du texte d’en-tête, de l’arrière-plan ainsi que la couleur principale du thème.
  • Image d’en-tête: choisissez une image d’en-tête parmi les modèles proposés, ou bien choisissez une image personnelle.
  • Image d’arrière-plan: peur ceux qui n’ont pas pris la disposition 1 Column Wide, il est possible de changer l’image d’arrière-plan.
  • Navigation: trois emplacements sont prévus. Principal s’affichera en haut à droite, Secondaire juste au-dessus de l’image d’en-tête et Media sociaux dans le footer. Pour cet emplacement, créez un menu et placez-y des Liens vers vos pages de réseaux sociaux.
  • Widgets: un seul emplacement possible, il s’agit de la sidebare. Dans Disposition, l’option 2 Columns: Content / Sidebar ou 2 Columns: Sidebar / Content doit être activée.
  • Page d’accueil statique.

Ressources utiles

Tous savoir sur les thèmes enfants: Comment créer un thème enfant ?

Qu’est ce que le Material Design: Introduction au Material Design

Ultimate Coming Soon Page

Ultimate Coming Soon Page – Faire un page de maintenance d’attente pour un site wordpress

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

Votre site est en travaux ? Faites patienter vos internautes avec Ultimate Coming Soon Page.

Qu’ils soient en développement, en maintenance en refonte totale ou en attente d’événement particulier, nos sites Web sont un peu comme des vitrines de magasins. Toujours en évolution. Ce qui impose de rendre temporairement nos sites WordPress inaccessible au public.

Ultimate Coming Soon Page est un plugin de type freemium (entendez par cela, gratuit pour les fonctions principales, donc largement utilisables) permettant de substituer l’intégralité des pages de votre site Web par une page unique qu’il est possible de personnaliser à l’extrême.

Pour ceux qui ne se sentent pas l’âme d’un intégrateur Web, la version payante offre des modèles de pages avec décompteur intégré de qualité.

 Installer Ultimate Coming Soon Page : Un choix efficace et personnalisable

L’installation est très classique. Rendez-vous dans le tableau de bord de WordPress, -> Extensions -> Ajouter : taper Ultimate Coming Soon Page. Puis activer le plugin. A ce stade, la page indiquant aux internautes que le site est en travaux n’apparaît pas encore.

Configurer Ultimate Coming Soon Page : Voici les quelques astuces de réglages rapides.

Pour activer et configurer Ultimate Coming Soon Page, allez dans Réglages -> Coming Soon.
La page est divisé en deux panels : les réglages (Settings) et l’apparence (Style).

1. Les réglages:

Le premier réglage de ce panel (Enable : Yes) permet d’activer la page Coming Soon. Par cette page en entièrement blanche. Cliquez sur preview pour en avoir un aperçu.
A présent votre site n’est plus visible par les internautes. Seuls les utilisateurs connectés peuvent le voir.
Le texte est l’image seront à renseigner dans les champs suivants: Image, Heading, Description.
Avec Custom HTML il est possible d’utiliser n’importe quelles balises HTML, y compris la balise <script>. Ce qui est très pratique pour insérer du code JavaScript.

2. Style:

Inutile de présenter ce panel, le titre parle de lui-même. Tout ce qui aura été saisi dans Les réglages pourra être mis en forme ici : couleur ou image de fond, effet de bruit sur l’image de fond, personnalisation de la couleur du texte, choix de la police d’écriture via Google WebFont, copyright et même un champ Custom CSS.
Ce plugin est vraiment à la hauteur des plus exigeants en matière de Web design.

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

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.

Retoucher ses photos depuis Wordpress

Retoucher ses photos depuis WordPress

By | Aide et astuces, Le graphisme et wordpress, Plugin Wordpress | 3 Comments

Retoucher ses photos depuis WordPress sans passer par des logiciels spécialisés. Avec le plugin Aviary Photo Editor, plus besoin d’ouvrir Photoshop, gimp ou illustrator en parallèle de votre site pour modifier vos photos.

 

Installation du plugin :

L’installation est plutôt simple et conventionnelle. Soit en passant par le menu Extensions -> Ajouter. Rechercher Aviary Photo Editor puis Installer. Soit via les sources en téléchargeant le fichier ZIP qu’il faudra décompresser dans le dossier /wp-content/plugins via votre client FTP favoris.

Ensuite, activez le plugin depuis Extensions installées.

Rendez-vous ensuite dans la page Réglages -> aviary photo editor options. Une clé API y est demandée. Cliquez sur register here pour créer un compte sur le site d’Aviary.

Une fois votre compte créé, cliquez sur Add an app. Sélectionner sur le bouton Web puis saisissez un nom dans le champ Name your app (ex : photo editor), puis cliquez sur Add pour obtenir la fameuse clé API.

Il sera également possible de changer la langue du plugin. Pour information, le plugin n’est que partiellement traduit.

Enfin, lorsqu’une image aura été retouché, Aviary Photo Editor peut enregistrer les images au format PNG ou JPG.

Utilisation :

Pour éditer une image, il suffit de se rendre dans Bibliothèque -> Media, dans la dernière colonne de droite figure un bouton Edit photo en face de chaque image. Cliquez sur l’un d’entre eux pour afficher la fenêtre ci-dessous.

Retoucher ses photos depuis WordPress

L’interface se compose d’une barre horizontals de 11 outils, d’un bouton Valider pour enregistrer ses travaux, d’une loupe en haut à droite de l’image pour zoomer sur l’image ainsi qu’une flèche Annulé et Rétablir en bas à gauche de l’image.

Parmi les outils on retrouve :

  • Renforcer : Choisir parmi trois options de mise en valeur de préréglage pour améliorer vos images. Haute définition rehausse intelligemment la définition de l’image; illuminer résout les problèmes de faible éclairage et Répartition des Couleur effectue une correction de couleur incroyable.
  • Effets : Pour atteindre rapidement des résultats professionnels avec une gamme de filtres photo superbes, conçus pour améliorer facilement et styliser la photographie courante.
  • Cadres : Habiller vos photos a l’aide ces cadres artistiques.
  •  Stickers : Stimuler la créativité des autocollants originaux.
  • Recadrage, Taille et Orientation : Recadrer rapidement, redimensionner et faire pivoter la photo avec des outils intuitifs et image prédéfinies options de recadrage.
  • Luminosité, Contraste, Saturation, Chaleur : Modifier la luminosité, le contraste, la saturation, la netteté et la température à l’aide des curseurs.
  • Mise au point : changer la mise au point d’images pour créer un effet « tilt-shift ».
  • Dessin : Dessiner directement sur vos photos avec les couleurs de votre choix.
  • Texte : Ajouter du texte avec un très large choix de couleur et de typographie.
  • Yeux rouges : Utiliser cet outil pour corriger les yeux rouges due au reflet du flash de l’appareil photo.
  • Blanchir : Utiliser cet outil pour blanchir les dents de vos sujets.
  • Fondu : Ajouter un flou du type gaussien. Idéal pour flouter des visages par exemple.

Cliquez sur Valider pour enregistrer vos modifications. Cela créera un nouveau fichier dans le format prédéfinit dans Réglages -> aviary photo editor options.

Voila comment retoucher ses photos depuis WordPress !

Aviary Photo Editor est un programme écrit en Javascript, ce programme existe également pour Android et iOS.

menu de navigation responsive

Créer un menu de navigation responsive pour WordPress

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

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

 

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

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

 

Installation

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

Rendez-vous dans Apparence -> Responsive Select.

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

 

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

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

 

Configuration

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

menu de navigation responsive

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

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

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

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

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

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

Activate All Theme Locations : rend tous les menus responcive.

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

 

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