Si vous n’êtes pas un grand fan de travailler avec l’éditeur HTML dans WordPress ou si vous souhaitez fournir des améliorations intéressantes pour vos thèmes premium, les codes courts sont une excellente solution pour étendre les capacités de votre éditeur de publication tout en gardant les choses simples.

Je pensais que ce serait cool d’ajouter une sorte de bouton sur mon site lors de la fourniture de liens vers des fichiers gratuits ou d’autres sites (en utilisant des codes courts bien sûr) donc après avoir ajouté le code court à mon thème, j’ai pensé que je partagerais le code ici sur le blog afin que les autres personnes intéressées par l’ajout de shortcodes de bouton sur leur site puissent simplement copier et coller mon code dans leur thème et ne pas avoir à passer trop de temps à créer le shortcode et à styliser le bouton.

Que sont les codes courts?

Les codes courts ont été introduits dans WordPress 2.5 et vous permettent de créer des codes de macro à utiliser dans le contenu de l’article. Un simple shortcode ressemblerait à ceci:

[shortcode]

Qui, lorsqu’il est ajouté à l’éditeur de publication, renverra la valeur du shortcode tel que défini dans vos fichiers de thème. Je vais vous montrer comment créer un shortcode qui vous permettra d’ajouter facilement des boutons à votre éditeur de publication sans toucher à aucun code.

Ajout d’un shortcode “bouton” personnalisé

La première chose à faire est d’ajouter le code php de votre shortcode à votre thème. Le code suivant peut être utilisé pour ajouter un simple bouton à votre site. Ce code peut être placé dans le fichier functions.php. Si vous utilisez un thème tiers, il est préférable de le faire via un thème enfant WordPress.

function myprefix_button_shortcode( $atts, $content = null ) {
    
    // Extract shortcode attributes
    extract( shortcode_atts( array(
        'url'    => '',
        'title'  => '',
        'target' => '',
        'text'   => '',
        'color'  => 'green',
    ), $atts ) );

    // Use text value for items without content
    $content = $text ? $text : $content;

    // Return button with link
    if ( $url ) {

        $link_attr = array(
            'href'   => esc_url( $url ),
            'title'  => esc_attr( $title ),
            'target' => ( 'blank' == $target ) ? '_blank' : '',
            'class'  => 'myprefix-button color-' . esc_attr( $color ),
        );

        $link_attrs_str = '';

        foreach ( $link_attr as $key => $val ) {

            if ( $val ) {

                $link_attrs_str .= ' ' . $key . '="' . $val . '"';

            }

        }


        return '<a' . $link_attrs_str . '><span>' . do_shortcode( $content ) . '</span></a>';

    }

    // No link defined so return button as a span
    else {

        return '<span class="myprefix-button"><span>' . do_shortcode( $content ) . '</span></span>';

    }

}
add_shortcode( 'button', 'myprefix_button_shortcode' );

Utilisation du shortcode dans votre éditeur de publication

Maintenant que vous avez un shortcode, vous pouvez ajouter le nouveau “bouton” (qui ressemble maintenant à un simple lien puisque nous ne l’avons pas stylé) à votre éditeur de publication.

// Example usage 1
[button href="YOUR LINK" target="self"]Button Text[/button]

// Example usage 2
[button href="YOUR LINK" target="self" text="Button Text"]

Styliser le bouton

Quel est l’intérêt de créer un shortcode s’il va juste ressembler à un simple lien? Rien. C’est pourquoi je vais vous montrer comment ajouter du CSS3 sympa pour styliser le bouton de téléchargement et le rendre sexy.

Comme vous l’avez remarqué dans le shortcode, j’ai ajouté la classe “myprefix-button” afin que vous puissiez facilement la styliser via votre fichier style.css. Insérez le code suivant dans votre feuille de style pour créer un joli bouton bleu comme celui de l’image.

/* Main Button Style */
.myprefix-button{ background:#65A343; text-shadow:1px 1px 1px #000; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; display: inline-block; overflow: hidden; padding: 1px; vertical-align: middle; }

.myprefix-button span { border-top: 1px solid rgba(255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; color: #fff; display: block; font-weight: bold; font-size: 1em; padding: 6px 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); }

/* Hover */
.myprefix-button:hover{ background: #558938; text-decoration:none; }

/* Active */
.myprefix-button:active{ background:#446F2D; }

Prise en charge de plusieurs couleurs

Si vous avez remarqué que le shortcode a un paramètre de couleur que vous pouvez utiliser pour ajouter des styles CSS pour différentes couleurs de bouton. Par exemple, si vous pouvez ajouter une option de couleur bleue en ajoutant ce CSS supplémentaire:

/* Blue Button */
.myprefix-button.color-blue { background:#2981e4 }

/* Blue Button Hover */
.myprefix-button.color-blue:hover { background:#2575cf }

/* Blue Button Active */
.myprefix-button.color-blue:active { background:#0760AD }

Maintenant, utilisez simplement le paramètre de couleur dans le shortcode:

[button href="YOUR LINK" target="self" color="blue"]Button Text[/button]

Share: