WordPress Shortcodes Complete Tutorial : Création, utilisation et personnalisation (avec des exemples de boutons et de galeries)

Utiliser des codes courts(Shortcode), vous pouvez facilement intégrer des fonctionnalités complexes telles que des formulaires, des galeries, des boutons et du contenu dynamique sans avoir à écrire beaucoup de HTMLetCSS peut-être PHP Code. C'est pourquoi les codes courts sont devenus un outil puissant et facile à utiliser, même pour les débutants.

Cet article explique en détail comment créer, utiliser etPersonnaliser WordPress Des codes courts qui vous aident à rationaliser votre flux de travail et à améliorer l'interactivité et la fonctionnalité de votre site web.

Qu'est-ce qu'un shortcode WordPress ?

code courtest un mot entre crochets ([ ]) est un court extrait de code qui est utilisé dans le contenu de WordPress pour entourer l'élémentInsertion de fonctions spécifiques. Exemple :

[galerie ids="1,2,3"]
[galerie ids="1,2,3"]
[galerie ids="1,2,3"]

Ce shortcode indique à WordPress d'afficher une galerie sur la page d'accueil contenant des images avec les ID 1, 2 et 3. Le shortcode rend une tâche complexe simple et intuitive en simplifiant le processus d'insertion du code.

Les numéros courts présentent de nombreux avantages, notamment

• simplicitéLe code court est simple et facile à comprendre : il n'est pas nécessaire d'écrire des codes HTML, CSS ou JavaScript complexes.
• dextéritéLes shortcodes peuvent être utilisés sur les pages, les articles, les widgets et même les types d'articles personnalisés.
• RéutilisableAprès avoir créé un shortcode une fois, vous pouvez l'utiliser plusieurs fois à différents endroits du site.
• Facile à gérerLes shortcodes : L'utilisation de shortcodes permet d'avoir des pages et des articles bien ordonnés, sans avoir à intégrer directement un code complexe.

Comment créer des codes courts dans WordPress

Étape 1 : Accédez au fichier functions.php

La première étape de la création d'un shortcode est d'ouvrir la section functions.php Fichier. C'est dans ce fichier que vousAjouter des fonctionnalités et du code personnalisés au thèmeLorsque vous souhaitez ajouter des fonctionnalités personnalisées à votre site web, comme la création d'un shortcode personnalisé pour afficher un contenu ou une fonctionnalité spécifique, l'option functions.php pour ajouter le code.

Suivez les étapes ci-dessous :

1. Connectez-vous au tableau de bord de WordPress.
2. commutateur à Apparence > Editeur de thème.
3. Sur le côté droit, recherchez et ouvrez le fichier functions.php Documentation.

Étape 2 : Définir la fonction du code court

Au cœur du shortcode se trouvent les fonctions PHP que vous créez. Vous trouverez ci-dessous un exemple de shortcode simple qui affichera le message "Hello, World !" sur une page :

function hello_world_shortcode() {<br>    return 'Hello, World !<br>}<br>
function hello_world_shortcode() {<br>    return 'Hello, World !<br>}<br>
function hello_world_shortcode() {
    return 'Hello, World !
}

Ce code définit une fonction PHP simple hello_world_shortcodequi renverra une chaîne de caractères : "Hello, World !".

Étape 3 : Enregistrement d'un numéro abrégé

Après avoir créé la fonction du shortcode, l'étape suivante consiste à l'enregistrer auprès de WordPress. Vous pouvez le faire en utilisant la fonction add_shortcode() pour enregistrer le code court et spécifier un nom et une fonction correspondante. Exemple :

add_shortcode('hello_world', 'hello_world_shortcode') ;<br>
add_shortcode('hello_world', 'hello_world_shortcode') ;<br>
add_shortcode('hello_world', 'hello_world_shortcode') ;

Cette ligne de code enregistre un code court [hello_world]Lorsqu'il est inséré dans une page ou un article, WordPress appelle la fonction hello_world_shortcode() et affiche ce que la fonction renvoie.

Étape 4 : Testez le numéro abrégé

Après avoir terminé la création et l'enregistrement du shortcode, vous pouvez le tester.

Vous trouverez ci-dessous le code complet qui regroupe l'ensemble du processus :

// Définissez la fonction shortcode
function hello_world_shortcode() {
    return 'Hello, World !
}
// Enregistrez le shortcode
add_shortcode('hello_world', 'hello_world_shortcode') ;
// Définissez la fonction shortcode
function hello_world_shortcode() {
    return 'Hello, World !
}

// Enregistrez le shortcode
add_shortcode('hello_world', 'hello_world_shortcode') ;
// Définissez la fonction shortcode
function hello_world_shortcode() {
    return 'Hello, World !
}

// Enregistrez le shortcode
add_shortcode('hello_world', 'hello_world_shortcode') ;

Insérer dans une page ou un message [hello_world]Regardez ensuite la page d'accueil. Elle devrait afficher "Hello, World !".

Si vous n'êtes pas en functions.php est ajouté, et sur la page d'accueil, il doit afficher le fichier[hello_world]

Créez plus de codes courts personnalisés

Exemple 1 : Création d'un code court pour un bouton

boutonsest un élément clé de l'interaction avec le site web et peut être utilisé pour les appels à l'action (CTA) et la navigation. Nous pouvons créer un simple bouton personnalisé avec un code court :

function custom_button_shortcode($atts) {<br>    $atts = shortcode_atts(<br>        array(<br>            'text' => 'Click Me',<br>            'url' => '#'.<br>        ), $atts<br>    );<br><br>    return '<a href="/fr/' . esc_url($atts['url']) . '/" class="custom-button" style="padding : 10px 20px;background-color : #0073aa;text-decoration : none">' . esc_html($atts['text']) . '</a>' ;<br>}<br><br>add_shortcode('custom_button', 'custom_button_shortcode') ;<br>
function custom_button_shortcode($atts) {<br>    $atts = shortcode_atts(<br>        array(<br>            'text' => 'Click Me',<br>            'url' => '#'.<br>        ), $atts<br>    );<br><br>    return '<a href="/fr/' . esc_url($atts['url']) . '/" class="custom-button" style="padding : 10px 20px;background-color : #0073aa;text-decoration : none">' . esc_html($atts['text']) . '</a>' ;<br>}<br><br>add_shortcode('custom_button', 'custom_button_shortcode') ;<br>
function custom_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Click Me',
            'url' => '#'.
        ), $atts
    );

    return '' . esc_html($atts['text']) . '' ;
}

add_shortcode('custom_button', 'custom_button_shortcode') ;

Dans cet exemple, un code court est défini [custom_button]qui prend deux arguments :texte(texte du bouton) et url(adresse du lien).

Par exemple, vous pouvez l'utiliser comme suit :

[custom_button text="En savoir plus" url="https://example.com"]<br>
[custom_button text="En savoir plus" url="https://example.com"]<br>
[custom_button text="En savoir plus" url="https://example.com"]

Cela génère unbleu (couleur)qui, lorsqu'il est cliqué, renvoie à l'URL spécifiée.

Exemple 2 : Création d'un numéro court pour une galerie

Créez unShortcode de la galerieC'est également très simple. En spécifiant l'image IDWordPress génère automatiquement une galerie :

function custom_gallery_shortcode($atts) {<br>    $atts = shortcode_atts(<br>        array(<br>            'ids' => ''<br>        ), $atts<br>    );<br><br>    $ids = explode(',', $atts['ids']) ;<br>    $output = '<div class="custom-gallery">' ;<br><br>    foreach ($ids as $id) {<br>        $image = wp_get_attachment_image_src($id, 'medium') ;<br>        $output . = '<img src="' . esc_url($image[0]) . '" class="gallery-image">' ;<br>    }<br><br>    $output . = '</div>' ;<br>    return $output.<br>}<br><br>add_shortcode('custom_gallery', 'custom_gallery_shortcode') ;<br>
function custom_gallery_shortcode($atts) {<br>    $atts = shortcode_atts(<br>        array(<br>            'ids' => ''<br>        ), $atts<br>    );<br><br>    $ids = explode(',', $atts['ids']) ;<br>    $output = '<div class="custom-gallery">' ;<br><br>    foreach ($ids as $id) {<br>        $image = wp_get_attachment_image_src($id, 'medium') ;<br>        $output . = '<img src="' . esc_url($image[0]) . '" class="gallery-image">' ;<br>    }<br><br>    $output . = '</div>' ;<br>    return $output.<br>}<br><br>add_shortcode('custom_gallery', 'custom_gallery_shortcode') ;<br>
function custom_gallery_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'ids' => ''
        ), $atts
    );

    $ids = explode(',', $atts['ids']) ;
    $output = '
' ;

    foreach ($ids as $id) {
        $image = wp_get_attachment_image_src($id, 'medium') ;
        $output . = '' ;
    }

    $output . = '
' ;
    return $output.
}

add_shortcode('custom_gallery', 'custom_gallery_shortcode') ;

Créez un [custom_gallery] code court qui accepte ids vous pouvez passer plusieurs ID d'images pour générer la galerie. Par exemple, vous pouvez passer plusieurs ID d'images pour générer une galerie :

[custom_gallery ids="1,2,3"]<br>
[custom_gallery ids="1,2,3"]<br>
[custom_gallery ids="1,2,3"]

Cela affichera les images avec les ID 1, 2 et 3 sur la page.

Comment utiliser les codes courts dans les pages et les articles de WordPress

Méthode 1 : Utilisation de l'éditeur classique

Si vous utilisez WordPress Éditeur classiqueIl suffit d'insérer le code court directement dans la zone de texte de l'éditeur.

Exemple :

[custom_button text="Buy Now" url="https://yourlink.com"]<br>
[custom_button text="Buy Now" url="https://yourlink.com"]<br>
[custom_button text="Buy Now" url="https://yourlink.com"]

Après la mise à jour ou la publication d'une page, le shortcode est traité sur le front-end pour afficher le contenu approprié.

Méthode 2 : Utilisation de l'éditeur de blocs Gutenberg

existent Éditeur GutenbergVous pouvez utiliser la mention spéciale "code court"pour insérer le code court. La procédure est la suivante :

1. Ouvrez l'éditeur de pages ou d'articles.
2. frappe (sur le clavier) + pour ajouter un nouveau bloc.
3. Recherchez et sélectionnez Code court Blocs.

4. Saisissez votre code court dans le bloc du code court, par exemple :

[custom_button text="Sign Up" url="https://yourlink.com"]<br>
[custom_button text="Sign Up" url="https://yourlink.com"]<br>
[custom_button text="Sign Up" url="https://yourlink.com"]

Ensuite, sauvegardez ou mettez à jour le contenu et le shortcode affichera le résultat sur le front-end.

Méthode 3 : Utilisation de l'éditeur de pages

De nombreux éditeurs de pages populaires tels que Elementor répondre en chantant WPBakeryLe constructeur de sites web fournit des widgets ou des modules pour l'insertion de codes courts. Il vous suffit de coller le shortcode dans le widget approprié et le constructeur affichera son effet en temps réel.

Comment utiliser les shortcodes dans les widgets WordPress

Vous pouvez également utiliser le shortcode pourZone de widgets(par exempleune barre latérale (dans un logiciel)etpieds de page(etc.). Voici la marche à suivre :

1. Dans le tableau de bord, allez à Apparence > Widgets.
2. commandant en chef (militaire) Widget texte Faites un glisser-déposer dans la zone du widget où vous souhaitez que le shortcode soit affiché.

3. Saisissez un code court dans la zone de texte, par exemple :

[custom_button text="Contactez-nous" url="https://yourlink.com"]<br>
[custom_button text="Contactez-nous" url="https://yourlink.com"]<br>
[custom_button text="Contactez-nous" url="https://yourlink.com"]

Enregistrez et consultez le site et le shortcode apparaîtra sous forme de bouton dans la zone des widgets.

Simplifiez le processus avec un générateur de codes courts

Pour les utilisateurs qui ne sont pas familiarisés avec l'écriture de code, la fonctionGénérateur de numéros courtsest un outil très utile. Grâce à ces outils, il est facile de générer des codes courts à l'aide de formulaires sans avoir à écrire le code manuellement. Les plugins de génération de shortcodes les plus populaires sont les suivants :

• Shortcodes UltimateLes codes courts : Une bibliothèque complète de codes courts est fournie, prenant en charge les curseurs, les accordéons et bien d'autres fonctions.
• MyThemeShop WP ShortcodeLe logiciel de gestion de contenu : Il fournit des générateurs de shortcodes faciles à utiliser pour les boutons, les onglets, les colonnes et bien d'autres choses encore.
• ShortcoderLes utilisateurs plus expérimentés peuvent créer des numéros courts personnalisés.

Grâce à ces plugins, vous pouvez rapidement générer des codes courts et les insérer dans le contenu de WordPress, ce qui vous évite d'avoir à écrire un code complexe.

Résumé :

Les shortcodes de WordPress vous permettent d'insérer facilement des éléments complexes tels que des boutons, des galeries et du contenu dynamique dans vos pages, vos articles ou vos widgets sans avoir à écrire beaucoup de code. Il vous suffit de [shortcode] syntaxe, vous pouvez réutiliser ces fonctions à différents endroits afin d'améliorer l'efficacité et la maintenabilité de votre site web. Cet article explique en détail comment vous pouvez réutiliser ces fonctions dans les pages de WordPress. functions.php Création et enregistrement de shortcodes dans des fichiers, avec des exemples pratiques de shortcodes de boutons et de galeries. Les façons d'utiliser les shortcodes dans l'éditeur classique, l'éditeur de blocs Gutenberg et les widgets sont également décrites pour vous aider à rationaliser votre flux de travail.