Colorlib
Colorlib.com est un site en langue anglaise qui propose des thèmes WordPress gratuits ou payants. Dans cette article je vais m’attacher à vous expliquer comme corriger une erreur d’affichage dans leur thème phare Sparkling.
Le thème sparkling
Sparkling est un thème en Flat Design gratuit disponible directement sur le répertoire WordPress.org. Ce thème est développé à l’aide du framework Bootstrap 3, il est donc optimisé pour tous les appareils mobiles tels que iPad, iPhone, Android et Windows Phone. De plus, un slider conçu à partir de FlexSlider agrémente la page d’accueil et met le contenu le plus important en avant. Ce thème est facilement personnalisable grace au customizer de wordpress.
Défaut d’affichage du menu sous IE et Edge
Mais malgré tous ces atouts le thème a un problème d’affichage sous IE et Edge. En effet le menu principale du header présente un défaut et ne s’affiche pas correctement. Après avoir cherché pendant longtemps la solution, jusqu’à ce que le thème soit mis à jour, je la partage avec vous ici.
La pseudo class :focus-within
Le thème créé par Colorlib présente un problème de conception majeur : il utilise dans sa dernière version la pseudo class :focus-within. Cette pseudo-classe s’applique lorsqu’un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu’on clique sur un champ d’un formulaire). Cette pseudo-classe s’applique également aux descendants de l’élément ciblé.
Pour plus d’information sur cette pseudo classe je vous conseille la lecture de cet article : La Pseudo Classe :Focus-within.
Comme vous pouvez le constater à la fin de l’article, cette pseudo classe pose un problème de compatibilité avec Edge et IE qui ne fournissent aucun support pour le moment.
Le problème ne serait pas important si IE et Edge se contentaient de pas interpréter le seul sélecteur qui utilise cette pseudo classe. Malheureusement, IE et Edge n’interprètent tout simplement pas le bloc entier des sélecteurs où :focus-within est présent.
Les correction à apporter au thème
La seule solution pour régler le problème d’affichage est donc de séparer le bloc de sélecteur en deux partie, une partie que IE et Edge interprèteront et une autre qui contiendra la pseudo classe :focus-within qu’ils refuseront d’interpréter. Pour cela il faudra créer un thème enfant au thème Sparkling en reprenant dans le fichier styles.css tous les blocs contenant la pseudo classe :focus-within et en les divisant en deux.
Si vous ne savez pas comment créer un thème enfant je vous recommande la fiche explicative de wordpress.org. Mais voici à quoi devra ressembler le fichier fonctions.php
<?php
// On charge les styles parents et enfants
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 20);
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_dequeue_style('sparkling-style');
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
?>
Voici maintenant le fichier style.css avec tous les éléments repris.
/*
Theme Name: Sparkling Child
Theme URI: http://colorlib.com/wp/themes/sparkling
Author: Colorlib
Author URI: http://colorlib.com/
Description: Sparkling is a clean minimal and responsive WordPress theme well suited for travel, health, business, finance, design, art, personal and any other creative websites and blogs. Developed using Bootstrap 3 that makes it mobile and tablets friendly. Theme comes with full-screen slider, social icon integration, author bio, popular posts widget and improved category widget. Sparkling incorporates latest web standards such as HTML5 and CSS3 and is SEO friendly thanks to its clean structure and codebase. It has dozens of Theme Options to change theme layout, colors, fonts, slider settings and much more. Theme is also translation and multilingual ready and is available in Spanish. Sparkling is a free WordPress theme with premium functionality and design.
Version: 1.5.0
Template: sparkling
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sparkling
Domain Path: /languages/
Tags: green, light, white, gray, black, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, photoblogging, left-sidebar, translation-ready, custom-background, custom-colors, custom-menu, featured-images, full-width-template, post-formats, theme-options, threaded-comments
This theme, like WordPress, is licensed under the GPL.
sparkling is based on Underscores http://underscores.me/, (C) 2012-2013 Automattic, Inc.
*/
/*
Fichier CSS pour corriger l'erreur d'affichage sous IE et Edge
Ma couleur principale ici est orange #ff9911; à remplacer par votre couleur principale
*/
/* =Singe Post/Page Pagination
----------------------------------------------- */
.pagination li:hover a{
color: #ff9911;
}
.pagination li:focus-within a {
color: #ff9911;
}
/* =Media
----------------------------------------------- */
.single-featured:hover {
opacity: 0.8;
}
.single-featured:focus-within {
opacity: 0.8;
}
/* Recent Post widgets */
.popular-posts-wrapper .post .post-image img:hover{
opacity: 0.6 !important;
}
.popular-posts-wrapper .post .post-image img:focus-within {
opacity: 0.6 !important;
}
/* =Infinite Scroll
----------------------------------------------- */
#infinite-handle span:hover{
background-color: #ff9911;
color: #fff;
}
#infinite-handle span:focus-within {
background-color: #ff9911;
color: #fff;
}
/* =Navigation
----------------------------------------------- */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > .caret,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ff9911;
background-color: transparent;
}
.navbar-default .navbar-nav > li:focus-within > a{
color: #ff9911;
background-color: transparent;
}
.navbar-default .navbar-nav .dropdown-menu > li:hover{
color: #fff;
/*background-color: transparent;*/
background-color: #ff9911;
}
.navbar-default .navbar-nav .dropdown-menu > li:focus-within {
color: #fff;
/*background-color: transparent;*/
background-color: #ff9911;
}
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li:hover > a,
.dropdown-menu > li:hover > .caret{
background-color: transparent;
color: #fff;
}
.dropdown-menu > li:focus-within > a,
.dropdown-menu > li:focus-within > .caret {
background-color: transparent;
color: #fff;
}
.navbar-default .navbar-nav.sparkling-mobile-menu > li:hover > a{
color: #777;
}
.navbar-default .navbar-nav.sparkling-mobile-menu > li:focus-within > a {
color: #777;
}
.navbar-default .navbar-nav.sparkling-mobile-menu > li:hover > a,
.navbar-default .navbar-nav.sparkling-mobile-menu > li:hover > .caret{
color: #fff;
}
.navbar-default .navbar-nav.sparkling-mobile-menu > li:focus-within > a,
.navbar-default .navbar-nav.sparkling-mobile-menu > li:focus-within > .caret {
color: #fff;
}
.pagination > li > a,
.pagination > li > span,
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:hover {
color: #ff9911;
}
.pagination > li > span:focus-within{
color: #ff9911;
}
/* =Gallery
-------------------------------------------------------------- */
.gallery-item:hover .gallery-caption{
opacity: 1;
}
.gallery-item:focus-within .gallery-caption {
opacity: 1;
}
Le truc en plus : meilleur gestion des polices Google
Comme vous pouvez le constater, le thème Sparkling fait appel à des polices Google Fonts en bonus voici comment améliorer le temps d’affichage de votre site (vous pouvez utiliser cet outil gratuit pour mesurer votre score : GTmetrix). En effet si vous mesurez votre score sur PageSpeed Insights de Google, vous remarquerez que l’une des recommandation est de « s’assurer que le texte reste visible pendant le chargement des polices Web ». Les polices du thème Sparkling sont chargées par le fichier fonctions.php du thème parent et plus particulièrement par la function sparkling_scripts (lignes 308 à 316 du fichier functions.php)
Voici comment ne pas charger les scripts du thème parent et les remplacer par les scripts du thème enfant en ajoutant au chargement des polices Google le paramètres display=swap. Si vous souhaitez en savoir plus à ce sujet je vous conseille la lecture de cet article concernant le paramètre display des polices en CSS.
<?php
/**
* On enlève les scripts du thème parent
*/
function sparkling_child_dequeue_script() {
wp_dequeue_script( 'sparkling_scripts' );
}
add_action( 'wp_print_scripts', 'sparkling_child_dequeue_script()', 100 );
/**
* On charge nos propre srcipts et styles.
*/
function sparkling_child_scripts() {
// Add Bootstrap default CSS
wp_enqueue_style( 'sparkling-bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
// Add Font Awesome stylesheet
wp_enqueue_style( 'sparkling-icons', get_template_directory_uri() . '/assets/css/fontawesome-all.min.css', null, '5.1.1.', 'all' );
// on ajoute les font google en leur ajoutant le paramètre display
$font = of_get_option( 'main_body_typography' );
if ( isset( $font['subset'] ) ) {
wp_register_style( 'sparkling-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700&display=swap|Roboto+Slab:400,300,700&display=swap&subset=' . $font['subset'] );
} else {
wp_register_style( 'sparkling-fonts', '//fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700&display=swap|Roboto+Slab:400,300,700&display=swap' );
}
wp_enqueue_style( 'sparkling-fonts' );
// Add slider CSS only if is front page ans slider is enabled
if ( ( is_home() || is_front_page() ) && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
wp_enqueue_style( 'flexslider-css', get_template_directory_uri() . '/assets/css/flexslider.css' );
}
// On ne charge pas les styles du theme parent à cet endroit mais plus loin dans ce fichier
// wp_enqueue_style( 'sparkling-style', get_stylesheet_uri(), null, '2.4.2', 'all' );
// Add Bootstrap default JS
wp_enqueue_script( 'sparkling-bootstrapjs', get_template_directory_uri() . '/assets/js/vendor/bootstrap.min.js', array( 'jquery' ) );
if ( ( is_home() || is_front_page() ) && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
// Add slider JS only if is front page ans slider is enabled
wp_enqueue_script( 'flexslider-js', get_template_directory_uri() . '/assets/js/vendor/flexslider.min.js', array( 'jquery' ), '20140222', true );
// Flexslider customization
wp_enqueue_script(
'flexslider-customization', get_template_directory_uri() . '/assets/js/flexslider-custom.js', array(
'jquery',
'flexslider-js',
), '20140716', true
);
}
// Main theme related functions
wp_enqueue_script( 'sparkling-functions', get_template_directory_uri() . '/assets/js/functions.js', array( 'jquery' ), '20180503', false );
// This one is for accessibility
wp_enqueue_script( 'sparkling-skip-link-focus-fix', get_template_directory_uri() . '/assets/js/skip-link-focus-fix.min.js', array(), '20140222', true );
// Treaded comments
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
// Academicons
if ( of_get_option( 'academicons' ) == 1 ) {
wp_enqueue_style( 'academicons-css', get_template_directory_uri() . '/assets/css/academicons.min.css', null, '1.8.6', 'all' );
}
}
add_action( 'wp_enqueue_scripts', 'sparkling_child_scripts' );
// On charge les styles parents et enfants
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 20);
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_dequeue_style('sparkling-style');
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
?>
Téléchargement du thème enfant
Si vous le souhaitez, vous pouvez télécharger ici les fichiers du thème enfant de Sparkling complet. N’hésitez pas à me laisser vos remarques en commentaires.
