Grégoire Noyelle :: Webdesigner WordPress Freelance à Paris

Lire Mediapart sur le iPhone

2012-01-17T05:45:54Z

Je suis abonné à Mediapart. Soutenir ce journal en ligne me paraît important. Il est complètement indépendant, dépourvu de publicité et soutenu par ses abonnés.
Il a été créé par quatre journalistes: François Bonnet, Gérard Desportes, Laurent Mauduit et Edwy Plenel. Pour avoir le détail du projet Mediapart, je vous recommande ce PDF.

Je lis beaucoup d’informations sur mon iPhone par contre je ne suis pas fan de l’application dédiée pour iPhone qui est sortie fin décembre 2011. Du coup, je préfère surfer directement dans le navigateur. Et même si le site Mediapart « mobile » est bien optimisé pour les smartphones, je trouve la navigation par page moins pratique (voir capture qui suit).
En faisant quelques tests, j’ai remarqué que Safari, le navigateur par défaut sur iPhone avec une icône « Lecteur » (voir capture qui suit) qui permettait d’afficher le contenu d’un article dépourvu de tout autre élément que le texte.

En cliquant sur ce dernier, une nouvelle fenêtre apparaît et comme par magie, il est possible d’accéder à toutes les pages d’une seule traite sans avoir besoin d’utiliser les numéros qui permettent de passer d’une page à l’autre.

Ici, une capture de cette nouvelle fenêtre. La taille du texte est modifiable en cliquant sur les lettres en haut à gauche.

Et une autre capture qui montre le passage d’une page à l’autre. En cliquant sur « Terminé » vous quittez ce mode d’affichage.

Bonne lecture.

Chris Coyier est un Ninja du Web

2012-01-07T08:00:41Z

Voici une interview de Chris Coyier.

Parcours

Chris obtient un diplome supérieur dans une École d’art avec comme spécialités: Arts graphiques, céramique et multimédia (principalement avec Flash).
Rapidement, après son diplôme, le Web Design l’intéresse. Ses premiers sites sont réalisés avec WordPress. Naturellement c’est vers la logique XHTML/CSS qu’il se tournera aux dépens des sites en Flash.

Aujourd’hui, Chris Coyier s’occupe de Digging Into WordPress avec Jeff Star. C’est un site de ressources sur WordPress. Avec Jeff ont également édité un livre sur le même sujet. Quand vous achetez la version numérique, les mises à jour sont retransmises ad vitam aeternam.

Chris est aussi en poste à WooFoo, un service de formulaire en ligne. Enfin, c’est CSS tricks, son site personnel, qui a rendu Chris célèbre.

Si vous recevez l’article par email, la vidéo est ici.

CSS tricks

Ce site a commencé au moment ou Chris a démarré la profession. C’était une manière de s’améliorer en partageant sa connaissance.

CSS-Tricks, contrairement à ce qu’évoque le nom, ne concerne pas seulement les CSS. C’est une véritable encyclopédie sur de nombreux aspects de notre profession. Vous pouvez y trouver:

des articles réguliers sur les nouvelles approches et tendances
des modules, morceaux de code à télécharger avec une démonstration en ligne
des tutoriaux vidéos à voir en ligne, dans iTunes (podcast) ou à télécharger
un forum
une bibliothèque de code organisée par catégories
une bibliographie

Les sujets sont vastes comme vous pouvez le constater. Pour retrouver une information, le mieux est de passer par le moteur Google search, directement intégré au site.

Grandes lignes de l’interview

Plusieurs pistes sont abordées pendant cette interview. Pour ceux qui sont moins à l’aise avec l’anglais, voici les grandes lignes:

WordPress et l’expérimentation sur un thème pour apprendre. Autrement dit, charger un thème et tester les changements sur les styles et les fonctions PHP
le modèle de boîte (box model en anglais) dont voici un tutoriel en français. Tout fonctionne en terme de boîte et c’est capital dès que vous commencez à concevoir des maquettes avec des « floats ». Voici un tutoriel en français sur le positionnement CSS.
la puissance des standards, leur respect dans la profession et l’énorme avantage de cette situation. Regardez les problèmes que l’on rencontre dans d’autres domaines avec les milles et unes normes incompatibles entre elles
le choix du design au service de UX (User Experience ou expérience utilisateur) est plus important que la différence d’affichage d’un navigateur à l’autre
Woofo et les choix HTML5 sont faits pour des raisons de compatibilité générale. Il s’agit de trouver le bon équilibre
les Media query (article en français) et le choix des formats prioritaires en fonction des statistiques de visite du site. Dans une approche marketing, il s’agit de connaître son public et s’accorder
Sass et Less et les variables CSS. D’après Chris, il faudra attendre au moins 2015 avant de l’utiliser directement en ligne. Pour l’instant, il s’agit d’utiliser les compilateurs cités précédemment pour générer une feuille de styles standard.
participation aux nouveaux standards en s’inscrivant aux mailing lists et en justifiant ces besoins
de la technologie flash vers le canvas HTML5
librairie commune à tous les navigateurs comme standard en ligne et centralisé
quelques trucs très utiles sur la spécificité en CSS

Quelques liens

Je donne beaucoup de liens venant de Chris Coyier sur le Web Design dans cette partie de mon site.
Un autre interview de Chris Coyier sur le site de sitepoint (août 2011). C’est un podcast audio et la transcription est donnée en fin d’article. Vous pouvez enfin souscrire au podcast de sitepoint par iTunes.

Photoshop CS5 :: présentation des formes (pinceaux)

2011-12-05T05:28:13Z

Voici le début d’une série de tutoriels sur les Formes dans Photoshop. Ce sont des éléments que j’enseigne régulièrement à l’école des Gobelins. Et au regard de l’enthousiasme que génère ce sujet, je me suis dit qu’il serait utile de le partager avec une plus grande audience. Mon objectif est de vous montrer au final comme utiliser les formes dynamiques dans Photoshop.

Mais avant d’arriver là, Dans ce premier épisode, nous allons aborder les bases de la forme (ou pinceau) dans Photoshop. Je parle de base, mais je vous réserve une petite surprise de taille dont bénéficie la dernière version de Photoshop (v.12 comprise dans la CS5).

Commencer avec l’outil Forme

La forme ou pinceau fait partie des éléments incontournables de la palette d’outils.

La palette Outils

Avant de commencer, ouvrir un fichier de 1000px par 1000px environ.

Ensuite, il s’agit de se rendre dans la palette d’outils, communément placée à gauche de votre interface (voir capture qui suit). Si cette palette n’apparaissait pas, l’activer dans le Menu Fenêtre > Outils.

Le raccourci pour accéder à la forme est B comme “Brush” (pinceau en anglais). A ce propos, je me demande pourquoi la traduction française utilise l’intitulé “forme” et non “pinceau”.

Une fois l’outil activé, vous pouvez avoir accès au sélecteur de forme prédéfinie, dans la barre du haut de l’interface (voir capture qui suit).

En utilisant le menu déroulant (voir capture ci-dessus), “Réinitialiser les formes…” de manière à utiliser les formes par défaut.

Nous allons dans cet exercice utiliser une forme basique: « Arrondi Net ».

Les couleurs

Dans le document ouvert, vous pouvez expérimenter le pinceau en commençant à dessiner. C’est la couleur de premier plan qui sera utilisée. Pour activer la couleur d’arrière-plan, il suffit d’appuyer sur la touche X. Celle-ci permet de passer d’un plan à l’autre. Pour changer la couleur d’un des plans, double cliquer dans l’icône de couleur (voir capture ci-dessous). Une nouvelle fenêtre, le sélecteur de couleur, s’ouvrira (voir même capture).

Si vous désirez extraire la couleur d’un autre élément de votre écran, c’est possible une fois le sélecteur et un document ouvert. Nous aborderons cette technique dans la vidéo présente à la fin du tutoriel. Décrire le processus par l’intermédiaire du texte serait un peu fastidieux.

L’épaisseur et la dureté

Quand vous utilisez la forme, vous pouvez modifier l’épaisseur et la dureté. Le moyen classique est de lancer la commande par le clic droit (voir la capture suivante). Nous verrons plus tard qu’il existe un moyen plus rapide depuis la version CS5. En attendant, vous pouvez utiliser ces deux réglages grâce à cette fenêtre.

L’épaisseur change la taille tandis que la dureté permet de changer les bords de la forme. Plus cette dernière est faible et plus les bords sont flous.

L’opacité

L’opacité de la forme agit sur l’intensité des coups de pinceau. Plus l’opacité est faible et plus vous devrez accumuler vos coups pour obtenir une opacité à 100%.

Cette fonctionnalité est très utile dès que vous travaillez avec des masques de fusion (un futur tutoriel sur le sujet est prévu).

Utilisation des raccourcis dans la CS5

Depuis la CS4 un nouveau raccourci est apparu pour les formes. Il est vraiment optimisé depuis la CS5.

Une fois le pinceau activé, pour changer très rapidement l’épaisseur et la dureté de votre forme, vous allez activer deux touches: ctrl + commande sur Mac (je n’ai pas pu tester sur PC).
En gardant ces deux touches enfoncées, si vous déplacez votre souris horizontalement, vous changez automatiquement l’épaisseur de la forme. Si vous la déplacez verticalement, vous agissez sur la dureté.
Quand vous utilisez ces raccourcis, une prévisualisation rouge vous indique l’aspect de la forme. Attention, si vous utilisez une forme personnalisée (un tutoriel est dans les cartons), cette fonctionnalité sera moins utile. Le rendu se base toujours sur la forme ronde.

Processus total en image

Si vous recevez l’article par email, la vidéo est ici.

Pour visionner cette vidéo en HD:

Lancer le mode plein écran

En mode plein écran, choisir le réglage HD

YOU ADS

2011-11-10T19:52:46Z

Je suis heureux de vous présenter un nouveau réseau de sites pour l’Atelier de Sèvres à Paris.

website // clic

Client: Atelier de Sèvres
Caractéristique: Construit sur une structure Genesis.
Réalisation: Mise en place de la plate-forme Multisite WordPress. Tous les étudiants peuvent réaliser facilement leur propre portfolio. Création de l’interface complète en collaboration avec Agathe Hoffmann pour la partie graphique.

Steve Jobs 1955-2011

2011-10-06T06:31:02Z

Mon père a acheté son premier Apple en 1981. Depuis le début, le logo à la pomme m’a fasciné. Steve m’a vraiment inspiré. Je m’amusais en disant à mon épouse que j’avais une messe ce soir, à chaque fois qu’une nouvelle Keynote était diffusée.
Hier, pour la première fois depuis longtemps, la Keynote présentait les nouveautés sans la présence de Steve. Et la même journée, Steve nous quittait. Apple était sa vie, sa raison d’être. Merci infiniment Steve

Stay hungry, stay foolish

Émilie di Nunzio Joly

2011-11-10T19:44:10Z

Site personnel d’Émilie di Nunzio Joly.

website // clic

Client: Émilie di Nunzio Joly
Caractéristique: Construit sur une structure Genesis.
Réalisation: Création de l’interface complète: fonctionnalité et montage du thème.

WordPress :: MarkDown et la mobilité dans l’édition

2011-10-08T20:47:45Z

Avec l’arrivée des smartphones et tablettes, le langage MarkDown est sur les devants de la scène.
Dans ce tutoriel, je vous montrerai comment mettre en place le plus gros de vos articles WordPress n’importe où avec votre iPhone. Je ne parlerai pas des nombreuses applications Android compatibles Markdown. Pour ça les commentaires sont ouverts.

MarkDown

Qu’est-ce que MarkDown?

Markdown a été créé en 2004 par John Gruber et Aaron Swartz. Le but initial était de créer un outil de simplification pour éditer sur le web et générer du HTML. Un autre exemple de ce type de publication est le système Wiki dont le représentant le plus connu est Wikipedia. En résumé, si je devais lister les avantages de Markdown, je garderais:

le texte reste bien lisible tout en pouvant être utilisé sur le Web
les options d’exportations permettent de générer un texte avec sa sémantique HTML
l’édition peut se faire avec n’importe quel éditeur de texte

Tous ces points donnent un nouvel élan avec l’édition sur iOS. Il est alors possible, même sur un iPhone de générer facilement du code HTML pour alimenter du contenu. Ainsi, il est possible sur ce smartphone de créer un email avec une vraie mise en forme: gras, italique, titrages, listes, liens…
Par contre, Markdown est moins adapté pour construire des pages Web et ce n’est pas son but. C’est avant tout un outil qui fonctionne à merveille avec une structure préétablie comme le email ou un CMS de type WordPress.

Ressources en Anglais

Sur le site de John Gruber, Daring Faringball, vous avez accès à plusieurs ressources en anglais:

introduction
syntaxe de base
syntaxe en détail
Dingus (éditeur/convertisseur Markdown en temps réel)

D’autres ressources:

Ressources en Français

Il existe moins de ressources en français. En voici une sélection. Si vous êtes moins à l’aise avec l’anglais, je vous conseille Google traduction; c’est une traduction automatique certes, mais c’est amplement suffisant pour comprendre le sens général.

Synchroniser avec iOS

La synchronisation entre le iPhone et l’ordinateur sera effectuée avec DropBox.

Je me concentre ici sur les applications mobiles iPhone. Beaucoup d’applications sont compatibles iPad. Il suffit de taper “Markdown” dans le apps Store. Beaucoup d’outils similaires existent sur Android merci de partager votre expérience avec les commentaires.

DropBox

DropBox est un outil de partage de fichiers multiplateforme (Mac, PC, Linux). Les documents sont stockés en ligne et sur vos machines. Il est gratuit jusqu’à 2Go.

Une fois votre compte en ligne créé, vous téléchargez l’application sur votre ordinateur. Au premier lancement, un guidera pour les fonctions principales.

Une fois le lien fait avec votre compte en ligne, la synchronisation sera effective dans les deux sens et ce avec autant d’ordinateurs que vous le souhaitez à condition de respecter:

avoir installé DropBox
avoir fait la connexion avec le même compte en ligne
placer les fichiers à synchroniser dans le dossier parent ou enfant de Dropbox

Différentes petites icônes vous indiquent l’état de la synchronisation.

Note: Apple a annoncé en juin dernier la sortie de iCloud en septembre 2011. Ce service sera un super DropBox.

Applications tierces sur iPhone

Les applications sur iOS, compatibles Markdown et DropBox sont nombreuses. Je n’en citerai que quelques-unes.

Notesy que j’utilise quotidiennement et notamment pour écrire cet article. Cette application possède beaucoup d’options avancées.
Elements: Presque aussi complète que Notesy. Les différentes exportations possibles sont bien pensées.
Note & Share: Autre application recommandée que je n’ai pas encore eu l’occasion de tester.

Vous l’avez compris, c’est Notesy que j’utiliserai pour ce tutoriel. Voici quelques captures d’écran de cette application.
Édition (à gauche) et prévisualisation (à droite) d’un texte Markdown avec mes styles personnels (voir image ci-dessous).

Réglages des styles CSS dans Notesy en rédigeant ses propres CSS (voir image ci-dessous).

Applications tierces sur Mac

Les applications qui servaient à éditer le code sur les ordinateurs furent en toute logique les premières à pouvoir générer du code à partir de Markdown. BBEdit sur Mac fut sans doute la première. Comme John Gruber, avant de devenir indépendant, travaillait chez Bare Bones Software, compagnie éditrice de ce logiciel, tout devient plus clair.

Dans le même registre, des plug-ins existent pour d’autres éditeurs (PC ou Mac):

Vous pouvez également écrire en Mardown avec votre éditeur de texte. Préférez des logiciels avec le moins de mises en forme possible: TextEdit sur Mac ou Notepad sur PC. Vous pourrez visualiser et générer le code HTML en ligne avec Dingus.

Ces applications pour ordinateur, contrairement aux applications iOS, ne nécessitent pas de compatibilités particulières avec Dropbox. La seule chose à respecter est de placer les fichiers dans le dossier parent ou enfant de Dropbox.

Enfin, depuis la renaissance de Markdown, de nouvelles applications ont vu le jour. Elles se distinguent des autres éditeurs de texte par la sobriété de leur ergonomie. Certaines simplifient l’écriture Markdown, quelques-unes sa visualisation, son exportation et d’autres exécutent toutes ces tâches. Et comme les applications de votre ordinateur dont je vous parlais, elles fonctionnent parfaitement avec DropBox.

Voici un choix de quelques-unes des ces applications:

ByWord: qui permet d’éditer en Markdown et de prévisualiser la page HTML. (Mac 7,99€)
Marked: qui ne sert qu’à la prévisualisation en HTML. Vous éditez dans n’importe que éditeur et la mise à jour se fait automatiquement. Vous pouvez même ajouter vos propres styles CSS. (Mac 2,39€)
Macchiato: éditeur de texte et Markdown (Mac 15,99€)
Markdown Pro: éditeur Markdown avec fenêtre simultanée: markdown et rendu (Mac 7,99€)
Notational Velocity: application gratuite pour éditer sur Mac
writemonkey: application gratuite PC
codeboje application gratuite PC

Intégration dans WordPress

Avec tous ces outils, je travaille souvent sur mes articles en déplacement et je complète certains éléments sur l’ordinateur. En arrière-plan, DropBox synchronise tout. Une fois votre article finalisé, vous pouvez l’intégrer dans WordPress. Soit à partir de votre ordinateur, soit en unissant l’application WorsPress dédiée pour iOS (iPhone et iPad).

Intégration à partir de l’ordinateur

Il s’agit d’obtenir le code HTML que peut générer Markdown. Pour ce faire vous avez plusieurs possibilités:

utililiser Dropbox avec une des applications compatibles (voir la partie : synchroniser avec iOS) qui pourra générer automatiquement le HTML. Coller ce contenu dans la partie Code de votre article
exporter le code Markdown par email à partir du iPhone (comme le fait Notesy) et utiliser Dingus pour générer le HTML à partir de contenu en Markdown. Et le coller dans la partie “code” de WordPress.
en copier/coller envoyer le texte Markdown et le coller dans la partie WYSIWYG de WordPress en utilisant le plugin Mardown On Save (par Mark Jaquith) ou Mardown for WordPress and bbPress par Mitcho Erlewine qui générent automatiquement le HTML directement à partir d’une syntaxe Markdown.

Intégration avec l’application iPhone

Il est possible bien sûr d’éditer la plupart de son article avec l’application par défaut. Par contre plusieurs obstacles la rendent difficile à utiliser:

il faut une connexion internet
l’édition avancée est ardu. Pour les liens, listes, titrages…
l’édition est moins spontanée sur l’ordinateur

Toutefois il est possible d’ajouter des médias. Du coup, nous verrons comment combiner les deux.

Notesy permet de copier dans le presse-papier le code HTML généré par Markdown si vous activez « Copy on Preview » dans « Settings ».

Il s’agit ensuite de coller ce code directement dans l’application iPhone. Attention à bien enlever le code superflu, utiliser pour la prévisualisation:

au début, enlever la partie du "" au « " inclus
à la fin, enlever la partie du « " au « " inclus

Il serait très intéressant qu’Automattic, éditeur de l’application iPhone, s’inspire de ces nouveaux développements de Markdown pour l’intégrer nativement dans une prochaine version. Celle-ci deviendrait le coeur de la publication.

Enjoy!

Note (évidente cette fois):
Article initialement écrit avec le langage Mardown; sur le iPhone avec Notesy et sur le Mac avec Bywords. La synchronisation est faite avec DropBox. Au final, le tout est exporté en HTML vers l’interface de WordPress. C’est également dans WordPress que j’ajoute les images ou les médias.

Migration vers un serveur virtualisé (VPS)

2011-10-03T15:30:55Z

J’ai changé de serveur cette nuit. Ou plutôt le service de WebHostingBuzz s’en est occupé. Très réactifs comme toujours. Je suis chez eux depuis 2008 et suis toujours étonné par leur réactivité 24/24. La configuration WordPress s’est faite en douceur et sans encombre.

Je suis passé d’un serveur mutualisé à un serveur virtualisé (VPS). Le site fut inaccessible pendant quelques heures samedi 13 août, au matin. Au premier abord, les premières minutes, je fus un peu déçu par la reprise du site. Je le trouvais lent. Et rapidement, les changements s’avérèrent vraiment significatifs. Les pages se chargent beaucoup plus vite. Une période de rodage est sans doute nécessaire.

J’ai accès à la racine du serveur et j’ai beaucoup plus d’options dans la gestion de son rendement. Enfin, comme mes ressources ne sont plus partagées, je n’ai normalement plus de mauvaises surprises quand un autre site est trop gourmant. Ceci est très courant sur les serveurs mutualisés et cela me causait de plus en plus de problèmes.

La prochaine étape va consister à créer une nouvelle plate-forme sur une des partitions.

À suivre….

WordPress :: Gestion des Menus depuis la version 3

2011-08-11T09:22:54Z

Depuis la version 3 de WordPress, la gestion des menus s’est énormément simplifiée. Ce qu’il s’agissait de programmer à l’avance dans le thème est désormais modifiable par l’administrateur du site quand le thème le supporte.

Dans ce tutoriel nous verrons dans un premier temps comment créer et gérer les menus et, dans un deuxième temps, comment intégrer les menus dans les différentes zones de votre site. Au final, comme extra, je vous parlerai de l’utilisation du plug-in “Genesis Simple Sidebar”

Création et gestion des menus

Une fois connecté à votre site, sur le côté, dans la partie “Apparence”, vous trouverez un lien vers vos “Menus”.

Présentation de l’interface

L’interface de la page “Menus” se présente en deux grandes parties. La zone droite et la zone gauche. En haut à droite, avec “Options de l’écran”, vous pourrez ajouter de nouvelles options, valables dans les deux parties.

Nous allons commencer par la zone droite pour juste créer notre premier menu. Cette action permettra d’ajouter le contenu qui se gère par la zone gauche. Entrez le “Nom du menu” et cliquez sur “Enregistrer le menu”. Du coup, la zone gauche ne sera plus grisée et vous pourrez l’utiliser.

Zone Gauche

Sur la zone gauche, vous choisissez les options d’affichage de vos menus et vous ajoutez du contenu. Plusieurs boîtes de dialogues vous offrent différentes options pour afficher les contenus qui sont à votre disposition. Dans la configuration pas défaut, vous trouvez:

Emplacements du thème
Liens personnalisés
Pages
Catégories

“Emplacements du thème”:
Vous choisissez la place de vos menus dans votre thème. Cette option dépend donc des fonctionnalités de votre thème. Je détaille cette fonction plus loin dans l’article.

“Liens personnalisés”:
Cela vous permet d’ajouter des liens externes à votre site. Il suffit de copier/coller l’adresse complète de votre page web dans le champ réservé à cet effet. Attention a bien mettre “http://…” au début.

“Pages” et “Catégories”:
Il s’agit de cocher les éléments qui vous intéressent. S’ils n’apparaissaient pas, il suffit de choisir l’onglet “Tous” ou d’utiliser le moteur de recherche intégré. Une fois votre choix fait, vous cliquez sur “Ajouter au menu”. Les éléments vont se placer automatiquement dans le menu qui est ouvert. Remarque: les derniers contenus créés se placent en haut de la liste.

Zone Droite

Sur la zone droite, vous pouvez créer des menus et régler leur affichage. Nous allons réutiliser le menu créé au début de cet article.

Dans la partie précédente, nous avons ajouté des éléments au menu. Une fois installés, vous pouvez les déplacer en glissé/déposer. Il est également possible de créer une hiérarchie parents/enfants. Vous cliquez sur un des menus et, sans lâcher la souris, vous le déplacez. En déplaçant l’élément sur la droite, il devient un enfant de l’élément supérieur. Pour déplacer tout un groupe, il suffit de sélectionner le parent et les enfants suivent le parent . Dans un même menu, vous pouvez mixer les contenus: afficher des pages à côté de catégories ou de liens.
Attention à bien sauvegarder les changements une fois les ajouts et modifications effectuées.

Si vous cliquez sur la flèche de droite, vous voyez apparaître les options du menu (voir image ci-dessous). Il est possible de changer le “Titre de la navigation” par défaut. “Attribut de titre” donne une information supplémentaire sur le lien. C’est cette petite boîte de dialogue qui apparaît pour donner une information sur le lien.
C’est aussi lorsque les options du menu apparaissent que vous pouvez supprimer le menu. Malheureusement, il n’existe par encore de fonctions pour supprimer plusieurs menus d’un seul coup.

Il est bien sûr possible de créer autant de menus que vous voulez avec des contenus différents. Il suffit de cliquer sur “+”, à droite du dernier onglet (si vous possédiez plusieurs menus).

Options avancées

Les options avancées du menu se trouvent dans l’onglet, en haut à droite: “Options de l’écran”. Cet onglet est présent dans de nombreuses pages de l’interface WordPress. Souvent, il sert à ajouter de nouveaux éléments dans l’interface.

Vous pouvez ajouter ici:

des liens pour les contenus personnalisés
des liens vers les articles
changer la cible du lien (pour ouvrir dans un nouvel onglet ou une nouvelle page)
ajouter une classe CSS au lien

Intégrer les menus dans votre thème

Selon votre thème, les menus peuvent s’afficher à plusieurs endroits.

Réglage de votre thème

Certains thèmes permettent d’afficher plusieurs menus de manière optionnelle. Dans la zone gauche, si “Emplacement du thème” apparaît, vous avez cette possibilité de choisir, quel menu sera visible pour ces zones, dédiée. Le menu déroulant listera automatiquement les menus que vous avez créés (voir image ci-dessous).

Utilisation du widget

Le Widget “Menu personnalisé” peut se placer dans vos zones de Widget. L’une des plus communes est la barre latérale de votre site.

Pour utiliser ce widget, il suffit de clic/glisser celui-ci dans la zone qui vous intéresse. Une fois installée, une liste déroulante affichera tous les menus que vous avez installés. Comme tout widget, vous pouvez empiler plusieurs fois cet outil avec d’autres menus personnalisés.

Utilisation des menus avec Genesis Simple Sidebar

Genesis Simple Sidebar est un plug-in développé par Nathan Rice. Cet outil ne fonctionne qu’avec le framework de thème Genesis. Il permet d’afficher une barre latérale différente pour:

un article
une page
une page de catégorie
une page de mots clefs

Dans ce contexte, et c’est ce qui le rend vraiment intéressant, ce plug-in vous pouvez afficher un menu de navigation différent selon vos besoins.

Création d’une nouvelle barre latérale

Vous devez avant toute chose créer une nouvelle barre latérale (sidebar en anglais) dans les sous-menus de “Genesis”.

Ensuite, vous entrez un nouveau nom dans le champ… . Attention, ce nom doit être sans accent. Ensuite, vous entrez manuellement l’identifiant en respectant ces principes:

sans accent
en minuscules
en remplaçant les espaces par des tirets simples: “-“

Enfin, cliquez sur “…” pour sauvegarder votre nouvelle barre latérale.

Utilisation des ces nouvelles barres latérales

Dans la partie “Widget” qui se trouve dans la partie “Apparence”, votre nouvelle zone latérale est apparue. Vous pouvez y glisser les widgets dont vous auriez besoin.

Une fois dans vos articles, vos pages ou vos pages d’archives, une nouvelle option apparaît pour sélectionner votre barre latérale.

Voici la boîte de dialogue pour les pages et les articles

Et la version pour les pages d’archives

Evidemment l’utilisation de menus personnalisés différents selon le type de pages est fortement recommandée.

Note:
Article initialement écrit avec le langage Mardown; sur le iPhone avec Notesy et sur le Mac avec Bywords. La synchronisation est faite avec DropBox. Au final, le tout est exporté en HTML vers l’interface de WordPress. C’est également dans WordPress que j’ajoute les images ou les médias.

Enjoy!

Noyelle&Co

2011-11-10T19:43:34Z

Site personnel pour les photographies d’I-Chun et de moi-même.

website // clic

Client: noyelle&Co
Caractéristique: Construit sur une structure Genesis.
Réalisation: Création de l’interface complète: fonctionnalité et montage du thème