Devenez votre propre Webmaster

Ajouter des shortcodes à votre site WordPress

créez vos shortcodes wordpressMême si votre thème contient quelques shortcodes, bien souvent lors de la rédaction du contenu de votre site, vous vous êtes dit qu'il serait bien de pouvoir ajouter facilement des éléments graphiques comme un bouton ou une div dans vos textes, mais ce n'est pas prévu dans votre thème.

De même il serait bien de pouvoir ajouter facilement des formulaires ou des fonctions dans vos pages sans avoir à faire, à chaque fois, un copier / coller du code html, ce qui est toujours fastidieux.

Si votre design n'est pas conçu pour vous permettre d'ajouter des shortcodes, je vous propose de vous expliquer comment cela fonctionne et comment le faire vous-même.

 

A quoi servent les shortcodes dans WordPress ?

les design de sites wordpress par imc proposent des shortcodes

Exemple de paramétrage de shortcode des design de sites wordpress conçu par imc

L'utilité des shortcodes est divers. Ils peuvent permettre d'ajouter

  • des éléments graphiques comme des boutons, des images,
  • des formulaires de saisies,
  • des div spécifiques,
  • des publicités occasionnelles sur tous les articles sans avoir à les modifier,
  • des animations,
  • des vidéos,
  • ...

Le nombre d'utilisations pour les shortcodes est important. Il existe des dizaines de possibilités.

Dans tous les design de sites que je développe sous WordPress, je prévois une vingtaine de "div" paramétrables et des shortcode qui vont avec, en plus des shortcodes prévus par défaut pour le thème. Bien évidemment j'ai conçu une interface graphique qui permet aux utilisateurs de paramétrer les dimensions et l'alignement, les couleurs du texte, les couleurs de fond et des bords, le biseautage, ... de chaque div même s'ils ne connaissent rien en css ou en php.

Comment créer ses propres shortcodes dans WordPress ?

Comment ce matérialise un shortcode dans le texte de vos pages ?

Les shorcodes se matérialisent généralement par un mot clé placé entre 2 accolades "[MOTCLE]".

Au même titre que les bornes html, les shortcodes peuvent être composés

  • D'une seule borne "[MyFunction]"
  • Ou alors de deux bornes. Une borne de début et une borne de fin. La borne de fermeture est quasiment identique à celle d'ouverture, si ce n'est que l'on ajoute un signe slash "/" après le crochet ouvrant. "[Mydiv] ... [/Mydiv]"

Il est aussi possible d'intégrer des paramètre entre les deux accolades par exemple pour donner la taille d'une div ou d'une vidéo : "[MYVIDEO width=480 height=385]".

La seule limite au contenu et à la forme des shortcodes que vous pouvez créer, dépend de votre capacité à programmer le comportement de vos shortcodes.

La base commune à tous les shortcodes

Tous les shortcodes fonctionnent de la même façon. On place des mots clés dans le texte des pages des sites réalisé avec WordPress, tel que détaillé dans le paragraphe juste au-dessus. On créé une ou plusieurs fonctions qui sont appelées par WordPress au moment du chargement de chaque page et qui remplacent le shortcode par le code qu'il est censé représenter.

La procédure standard WordPress

Un premier exemple graphique

Au début de l'article sur la méthode de tracking avec Google analytics, vous pouvez y voir une "div" contenant le menu de l'article. Pour obtenir ce menu, j'ai créé un shortcode composé de 2 balises : "[MENU]" "[/MENU]" et je place le texte du menu entre les balises.

Lors du chargement de la page, une fonction placée dans le fichier "functions.php" remplace la borne "[MENU]" par l'ouverture d'un div de classe "menuArt" et la borne "[/MENU]" par la fermeture de la div

<div id="menuArt"></div>

Ensuite j'ai défini les caractéristiques de la "classe menuArt" dans le fichier de style "style.css".

Un second exemple fonctionnel

En bas du même article sur la méthode de tracking avec Google analytics, vous trouvez un outils qui vous permet de générer le code html de liens avec les codes de tracking. Pour ce faire, j'ai créé un shortcode "[UrlTraking]". Lors du chargement de la page, une fonction remplace de shortcode par le code html de l'outil.

Un troisième shortcode

Toujours dans le même article méthode de tracking avec Google analytics vous pouvez constater qu'en cliquant sur les liens du menu, vous êtes automatiquement dirigé vers la partie de l'article concerné.

Pour ce faire, il faut que les liens du menu pointent vers l'id d'un élément de la page. Donc je commence par créer des liens html dans le menu qui pointent vers de id

<a href="#ID_de_la_partie_de_la_page">le menu</a>

Ensuite dans le texte des articles, je place des shortcodes qui sont remplacés par des "span" dont l'id correspond au menu correspondant. Par exemple le shorcode est remplacé par

<span id="ID_de_la_partie_de_la_page"></span>

Créez votre shortcode wordpress

Définir les shortcodes et les placer dans le texte de vos pages

Définissez les shortcodes que vous souhaitez utiliser. Partons sur l'idée des "div" intégrées dans le texte de vos pages. Je vous propose de créer le shortcode sui ouvre par la borne [MENU] et qui finit par la borne [/MENU]. Il vous suffit de placer ces bornes aux bons endroits dans votre texte.

Créer la fonction dans le fichier functions.php

Dans le fichier "function.php" j'ai créé une function "FIMC_shortcodes" dans laquelle je place le traitement des différents shortcodes de "C' ça le net". Pour notre exemple, il faut que cette fonction traite les shortcodes [MENU] et [/MENU]

Depuis le menu "Apparence" puis "Editeur" de votre back office, ouvrez le fichier "functions.php" et créez la fonction "FIMC_shortcodes". En dessous de la fonction ajoutez un filtre "the_content" qui permet d'indiquer à WordPress qu'il doit appeler la fonction "FIMC_shortcodes" lors du chargement des pages. La fonction reçoit le contenu de la page en paramètres ($content) et retourne le contenu de la page une fois modifié.

function FIMC_shortcodes($content){ return $content; }
add_filter ( 'the_content', 'FIMC_shortcodes' );

Ensuite dans la fonction nous allons ajouter le code PHP qui remplacera les shortcodes [MENU] et [/MENU] par l'ouverture et la fermeture de la div.

function FIMC_shortcodes($content){
  if (strpos($content, "[MENU]") !== FALSE)
      $content = str_replace( '[MENU]', '<div class="menuArt">', $content );

  if (strpos($content, "[/MENU]") !== FALSE)
      $content = str_replace( '[/MENU]', '</div>', $content );

   return $content;
}
add_filter ( 'the_content', 'FIMC_shortcodes' );

Sauvegardez les modifications.

Paramétrez l'apparence de la div dans le css

Enfin, ouvrez le fichier css "style.css" de votre thème depuis le menu "Apparence" et "Editeur". Définissez l'apparence de la class ".menuArt". La définition du style de la div sur le site C' ça le net :

#menuArt, .samepostmain{
            background: #f5eaef;
               padding:    10px;
                 width:   600px;
            margin-top:    20px;
         margin-bottom:    20px;
                border: 1px solid #e6f0f4;
          border-right: 1px #977a88 solid;                 
         border-bottom: 1px #977a88 solid;
         border-radius: 15px 15px 15px 15px;
    }

#menuArt a{ color: #0000ff; }
#menuArt a:hover{ color: #8a0145; }

Évidemment vous pouvez ajouter autant de particularités à la div. Par exemple si vous souhaitez vous en servir pour afficher une div à droite en début d'article, vous pouvez y ajouter un paramètre "float:right;" dans le CSS.

Pour aller plus loin

Il est évident que si vous souhaitez vous souvenir de tous les shortcodes que vous ajoutez, il faudrait développer une page de gestion qui les listerait.

De même pour les paramètres à incruster dans les shortcodes, il est préférable d'ajouter une interface de gestion qui vous permettra de les modifier facilement plutôt que de devoir modifier le code PHP ou le CSS manuellement à chaque fois.

Mais on verra cela dans un prochain article 😉

Posts Similaires
Sécurisez votre site Internet WordPress

Des mauvaises pratiques peuvent mettre en danger votre site Internet. Cet article propose une dizaine de manipulations pour sécuriser votre site Internet créer avec Wordpress.

Quels widgets WordPress utiliser dans votre sidebar

Dans cet article je vous conseille les widgets à utiliser ou ne pas utiliser dans le sidebar du blog de votre entreprise. N'oubliez pas que votre blog est professionnel et pas le journal intime d'un adolescent.

Ouvrir les liens des commentaires WordPress dans une nouvelle fenêtre

Ne perdez plus de visiteurs. Ouvrez les liens des commentaires Wordpress dans une nouvelle fenêtre. Les liens qui ne pointent pas vers votre site s'ouvrent dans une nouvelle fenêtre en ajoutant une fonction dans le fichier functions.php

A propos de

Consultant en informatique et concepteur de sites Internet.

Il a travaillé pendant plus de quinze ans pour une multinationale dans le secteur de l'ingénierie Informatique.

Durant ces années, il a participé à des projets sur les systêmes de facturation et la conception des sites Internet de différentes Banques et opérateurs téléphonique à travers le monde

Senior Analyst Programmer/Team Leader, il a participé et dirigé des projets sur les plus gros clusters d'Europe.

Il habite à Paris, en ile de France .

Le Site :

Le Blog :

Vos Commentaires pour "Ajouter des shortcodes à votre site WordPress"