Mise en forme des articles : fonctionnalités avancées.

de | 5 décembre 2011

Je ne ferai à personne l’affront d’essayer de lui apprendre à publier du contenu en utilisant WordPress, mais il existe quelques spécificités propres à Pratic 34 (plugins et autres…) qui méritent sans doute un supplément d’explicitation.

 

Si vous n’avez pas envie de vous fatiguer avec tout ça, pas de problème, je me chargerai de faire un petit ravalement de façade de temps à autres, de manière à préserver l’homogénéïté stylistique du site.

[learn_more caption=”1. Utiliser une image comme lettrine”]

A des fins esthétiques, mais pas seulement, tous les articles sont décorées d’une petite image placée en haut à gauche. Pour que celle-ci ne pose pas de problèmes de mise en page, voici les opérations à effectuer. Vous trouverez d’ailleurs dans la bibliothèque d’images, une série d’icônes (de EN à EN5) aux couleurs des différentes catégories du site.

Insérez l’image comme vous le faites habituellement, puis une fois celle-ci intégrée à l’article, cliquez dessus dessus pour faire apparaître deux icônes : modifier et supprimer. Cliquez sur modifier.

Dans la nouvelle fenêtre , cliquez sur l’onglet options avancées et saisissez/modifiez les informations suivantes :

  • Taille : si votre image n’a pas été redimensionnées au préalable, vous pouvez le faire ici. attention, il faut les calculs de proportionnalité tout seul si on veut que le ratio lhauteur/largeur soit conservé. Pour les petits symboles EN, j’utilise une taille de 50 x 58 par exemple.
  • Dans la ligne “Propriétés de l’image“, entrez 0 pour “bordure” et 5 pour espace “horizontal“. Ces informations sont répercutées dans la ligne “Styles” Placée au dessus.
  • Dans cette même ligne “Styles“, faites précéder les informations saisies précédemment de la mention : ” float : left; ” (sans les guillemets, bien sur). Attention, cet ajout disparaîtra si vous revenez dans l’interface de modification de l’image après avoir sauvegardé. assurez vous donc de bien avoir procédé à toutes vos modifications avant de valider.

Vous pouvez également utiliser la méthode alternative proposée par Bruno (qui comme à son habitude résout en 1 clic ce qui me prend 30 opérations à réaliser) et saisir simplement la mention lettrine1 (en remplacement du texte éventuellement déjà présent) dans le champ classe css. Cela appliquera une série de mises en forme similaire à votre image. Attention toutefois, ces modififactions ne seront pas visibles dans l’éditeur.

[/learn_more]

[learn_more caption=” 2. Onglets”]

Si le contenu de votre article est trop long pour être confortablement affiché en un seul bloc, vous pouvez avoir recours au système des onglets pour le répartir dans la page (voir ici par exemple).

Pour cela, cliquez sur le bouton “Add ET Tabs” placé à gauche de la première ligne de l’éditeur WYSYWIG :

Dans la fenêtre qui apparaît alors, vous pouvez :

  • Choisir le type d’onglets (Slider type) : verticaux (Top tabs), Horizontaux (Left tabs), Sans titre (Simple) ou à partir d’images (images). Personnellement, je n’ai encore jamais eu recours aux deux dernières possibilités ayant largement trouvé mon bonheur avec les top et left tabs.
  • Vous pouvez également choisir un effet de transition (Effect). Fade pour une transition en fondu, Slide pour une effet de coulissement.
  • Il est possible d’automatiser la rotation des onglets pour faire une sorte de diaporama, en choisissant  yes dans le menu Auto.
  • Entrez le titre de votre premier onglet dans la case Tab text.
  • Collez le texte à afficher dans l’onglet dans la case Tab content. attention, si vous souhaitez une mis en forme, il faut coller la version HTML du texte.
  • Vous pouvez ensuite ajouter un ou plusieurs autres onglets en cliquant sur le lien + Add one more tab. Attention, par défaut les nouveaux onglets conservent le titre du premier, pensez bien à les modifier.

Une fois vos onglets paramétrés et validés, un shortcode sera inséré dans votre article. Par exemple, le formulaire complété de la manière ci dessus, donnera le code suivant (NB tous les crochets ont été remplacés par des parenthèses pour inactiver le shortcode) :

(tabs slidertype=”left tabs” fx=”slide”) (tabcontainer) (tabtext)onglet 1(/tabtext) (tabtext)onglet 2(/tabtext) ) (/tabcontainer) (tabcontent) (tab]blah blah blah(/tab) (tab)Blih Blih Blih(/tab)  (/tabcontent) (/tabs)

On y retrouve le nom des onglet en vert et leur contenu en rouge. Personnellement, je trouve d’ailleurs plus simple de générer des onglets vides et de remplacer la mention “content goes here…” directement dans le shortcode en y collant mon contenu.

[/learn_more]

[learn_more caption=”3. Accordéons”]

Au risque de me faire appeler Yvette pour le restant de mes jours, il me faut maintenant vous exposer le fonctionnement des menus dépliants (ou accordéons) utilisés par exemple dans le présent article.

Pour insérer un accordéon, cliquez sur le bouton “Add ET learn More Block ” situé à l’extrémité à gauche de la première ligne de l’éditeur WYSYWIG :

 

Comme à l’accoutumé, une fenêtre s’ouvre dans laquelle vous pouvez entrer les valeurs que vous souhaitez donner à votre accordéon :

  • Dans la ligne “Caption” entrez le titre du menu dépliant.
  • Sélectionnez l’état de départ (State)  : fermé (close) ou déplié (open).
  • Entrez le contenu de l’accordéon dans la case “Content“.

Après validation, un shortcode est inséré dans votre article, Par exemple, le formulaire complété de la manière ci dessus, donnera le code suivant (NB tous les crochets ont été remplacés par des parenthèses pour inactiver le shortcode) :

(learn_more caption=”Accordéon“) C’est la java Bleue(/learn_more)

Là encore, il est possible de modifier l’accordéon directement depuis le shortcode, en y changeant le titre (en vert) ou le contenu (en rouge).

[/learn_more]

4 réflexions au sujet de « Mise en forme des articles : fonctionnalités avancées. »

  1. Bruno DAVID

    Excellent !!!
    “Yvette”, c’est le prénom de ma môman…
    Donc rassure-toi : je ne t’appellerai pas comme ça, bien que tu sois toujours très aimable avec tout le monde…
    😉

    Répondre
  2. Pascal RIVET Auteur de l’article

    En fait, il ne s’agit pas d’une extension, mais d’un greffon que j’ai effectué à partir d’un thème payant dont j’avais fait l’acquisition pour un usage privé. J’ai simplement copié une partie de l’admin de ce thème dans celui de Pratic pour palier le fait que ce dernier n’est pas compatible avec l’extension WP tabs & slides que j’utilise habituellement.

    Répondre

Répondre à Bruno DAVID Annuler la réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*