Peu importe la fonctionnalité mise en place par un shortcode, il est possible d'utiliser une feuille de style pour ajuster l'apparence du code HTML généré.
Lorsqu'un shortcode est défini dans une extension, ses styles ne doivent pas être définis dans le fichier style.css du thème. En effet, le shortcode pourrait continuer à être utilisé après avoir changé de thème. On créera donc une feuille de style propre à ce shortcode.
Même si le shortcode est défini dans un thème enfant (rappel : c'est correct de le faire puisque le thème enfant ne sera pas distribué), il est préférable d'utiliser une feuille de style qui lui est propre au cas où on choisirait par la suite de déplacer le code du shortcode dans une extension.
Les feuilles de style seront placées dans un dossier css placé sous le dossier du thème enfant ou de l'extension.
Bien qu'il existe plusieurs façons d'ajouter une feuille de style dans notre site, on privilégiera l'utilisation de la fonction wp_enqueue_style().
Pourquoi? Pour une foule de raisons techniques dont la description dépasse les buts de cette formation. Pour exposer les choses simplement, citons seulement le fait que cette fonction peut faire en sorte qu'une même feuille de style ne soit pas ajoutée deux fois.
La fonction wp_enqueue_style() peut accepter plusieurs paramètres dont certains sont optionnels. Nous travaillerons ici avec les deux premiers :
Suggestion : utilisez un nom du thème enfant ou de l'extension suivi du mot shortcodes. N'utilisez aucun trait d'union ni barre de soulignement (ex : monprefixeshortcodes).
wp_enqueue_style( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/css/shortcodes.css' );
ou, si le shortcode est défini dans une extension :
wp_enqueue_style( 'monprefixemonextension', plugins_url( 'css/shortcodes.css', __FILE__ ) );
Lorsque la fonction wp_enqueue_style() sera exécutée, une balise <link> sera ajoutée dans la zone <head> de la page Web. Dans le cas où on ajoute une feuille de style dans un thème, on aura la balise suivante :
<link rel='stylesheet' id='monprefixeshortcodes-css' href='https://mondomaine.com/wp-content/themes/monthemeenfant/css/shortcodes.css?ver=...' media='all' />
Depuis WordPress 3.3, si vous utilisez wp_enqueue_style() directement dans votre fichier functions.php, tout fonctionnera correctement mais le message suivant sera ajouté dans votre fichier debug.log :
« PHP Notice: La fonction wp_enqueue_style a été appelée de façon <strong>incorrecte</strong>. Les scripts et les styles ne peuvent pas être enregistrés ou ajoutés avant le déclenchement des crochets <code>wp_enqueue_scripts</code>, <code>admin_enqueue_scripts</code> ou <code>login_enqueue_scripts</code>. »
Il faut donc utiliser le hook wp_enqueue_scripts() (remarquez le s à la fin) pour ajouter correctement les scripts et les feuilles de styles qui seront utilisés dans le site Web (front-end). wp_enqueue_scripts() sera utilisé autant pour les shortcodes que pour les extensions.
/**
* Charge les scripts et feuilles de style propres au thème.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* Utilisation : add_action('wp_enqueue_scripts', 'monprefixe_charger_css_js_web');
*/
function monprefixe_charger_css_js_web() {
wp_enqueue_style( 'monprefixeshortcodes', get_stylesheet_directory_uri() . '/css/shortcodes.css' );
}
add_action('wp_enqueue_scripts', 'monprefixe_charger_css_js_web');
Remarquez le « _web » à la fin du nom de la fonction de rappel. Ce suffixe n'est pas obligatoire mais il permet de différencier le code utilisé côté site Web de celui utilisé côté tableau de bord.
Notez que si les scripts et les feuilles de style sont utilisés dans le tableau de bord, on utilisera plutôt wp_admin_enqueue_scripts().
Puisque la feuille de style est placée dans un sous-dossier (le sous-dossier css), vous devrez ajuster en conséquence les URL dans les règles CSS.
Considérant que l'URL est toujours donné relativement à la feuille de style, vous devrez descendre d'un niveau avant de trouver le dossier medias.
background-image: url("../medias/commun/fond.png")
▼Publicité
