Si vous n’êtes pas un grand fan de travailler avec l’éditeur HTML dans WordPress ou si vous souhaitez apporter des améliorations intéressantes à vos thèmes premium, les codes abrégés 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 à mon site lors de la fourniture de liens vers des fichiers gratuits ou d’autres sites (en utilisant des shortcodes bien sûr) donc après avoir ajouté le shortcode à 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 codes abrégés de bouton à leur site puissent simplement copier et coller mon code dans leur thème et ne pas avoir à passer trop de temps à créer le code abrégé et à styliser le bouton.
Que sont les codes courts ?
Les shortcodes ont été réintroduits dans WordPress 2.5 et ils vous permettent de créer des codes de macro à utiliser dans le contenu de la publication. Un simple shortcode ressemblerait à ceci :
[shortcode]Qui, une fois 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 que vous devez 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' );Utiliser le shortcode dans votre éditeur de publication
Maintenant que vous avez un shortcode, vous pouvez ajouter le nouveau « bouton » (qui ressemble maintenant à un lien simple puisque nous ne l’avons pas stylisé) à 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 doit simplement ressembler à un lien simple ? 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 color dans le shortcode :
[button href="YOUR LINK" target="self" color="blue"]Button Text[/button]
