Ajouter une barre latérale supplémentaire avec Themify

Dans cet article, nous allons explorer comment ajouter une deuxième barre latérale à votre thème Themify. Que vous utilisiez le thème “Basic” ou tout autre thème de chez Themify, ces étapes sont facilement applicables. Avoir une barre latérale supplémentaire peut considérablement enrichir l’expérience utilisateur de votre site, en offrant plus d’espace pour des widgets, des annonces ou des informations utiles.

Développement

Créez un thème enfant

La première étape consiste à créer un thème enfant. Cela est essentiel pour empêcher que vos modifications soient écrasées lors des mises à jour du thème principal. Pour ce faire, suivez les instructions disponibles dans la documentation de Themify pour créer et activer un thème enfant. Une fois cela fait, vous aurez un thème enfant fonctionnel avec un fichier style.css.

L’une des raisons pour lesquelles il est si important de travailler via un thème enfant est que cela vous donne une grande flexibilité en matière de personnalisation sans compromettre votre travail lors des mises à jour. Vous pourrez ainsi ajouter des fonctionnalités ou des styles sans crainte de perdre vos modifications.

Enregistrer la nouvelle barre latérale

Une fois que votre thème enfant est prêt, vous devez enregistrer la nouvelle barre latérale. Pour cela, créez un fichier nommé functions.php dans le répertoire de votre thème enfant. Si votre thème enfant existe déjà et que vous possédez déjà un fichier functions.php, vous pouvez simplement ajouter le code ci-dessous à ce fichier.

Ajoutez le code suivant dans le fichier functions.php :

php
add_action('widgets_init', 'child_register_sidebar');
function child_register_sidebar() {
register_sidebar(array(
'name' => 'Sidebar 2',
'id' => 'sidebar-2',
'before_widget' => '',
'after_widget' => '',
'before_title' => '#### ',
'after_title' => '
',
));
}

Ce code permet à WordPress de reconnaître votre nouvelle barre latérale intitulée “Sidebar 2”, que vous pourrez utiliser pour ajouter des widgets.

Ajouter la nouvelle barre latérale aux fichiers de modèle

Les prochaines étapes consistent à intégrer la nouvelle barre latérale dans les fichiers de modèle appropriés. Vous devrez modifier index.php, page.php et single.php pour ajouter la barre latérale sur les pages index (comme la page d’accueil, archive, catégorie, tag, recherche), les pages de post individuel, ainsi que sur les pages statiques.

Ouvrez le fichier index.php et cherchez la ligne de code suivante :

“`php

“`

Ajoutez ce code après la ligne que vous avez trouvée. Ainsi, vous indiquerez à WordPress d’afficher “Sidebar 2” si elle est configurée, sinon de ne rien afficher. Vous avez la flexibilité d’inclure ou d’exclure la nouvelle barre latérale à différents endroits en fonction de vos besoins. Par exemple, si vous ne souhaitez pas qu’elle soit visible sur les pages statiques, retirez-la du fichier page.php.

Style de la nouvelle barre latérale

Pour positionner et styliser votre nouvelle barre latérale correctement, ouvrez le fichier style.css de votre thème enfant et ajoutez le code CSS suivant, juste après le contenu existant :

“`css

sidebar-2 {

float: left;
padding: 5% 0 3%;
margin-right: 30px;
width: 138px;

}

.sidebar-none #sidebar-2 {
display: none;
}

content {

width: 528px;

}
“`

Ce style façonne la barre latérale afin qu’elle s’affiche sur le côté gauche de votre contenu principal. Vous pouvez ajuster les valeurs de padding, margin et width selon vos préférences pour s’adapter à l’apparence de votre site.

Rendre le thème réactif

Pour assurer que votre thème soit réactif et que les deux barres latérales s’affichent correctement sur les appareils de taille différente, vous devez également ajouter des styles CSS supplémentaires. Voici le code à ajouter :

“`css
@media screen and (max-width: 980px) {
#sidebar-2 {
margin-right: 3%;
max-width: 14%;
}

.sidebar1 #content {
    max-width: 54% !important;
}

}

@media screen and (max-width: 760px) {
#sidebar-2 {
margin: 0;
width: 100%;
max-width: 100%;
float: none;
clear: both;
}

.sidebar1 #content {
    max-width: 100% !important;
}

}
“`

Ces règles CSS veillent à ce que le contenu de votre site soit toujours visible, même sur des écrans plus petits. La barre latérale s’ajuste automatiquement, ce qui améliore l’expérience utilisateur lors de la navigation sur des appareils mobiles.

Étapes finales

Après avoir terminé la configuration et le style de votre barre latérale, n’oubliez pas de sauvegarder votre fichier style.css. Assurez-vous également d’avoir activé votre thème enfant dans le tableau de bord WordPress.

Une fois ces étapes réalisées, vous verrez une zone de widgets étiquetée “Sidebar 2” sous WP Admin > Apparence > Widgets. Cela vous permet d’ajouter des widgets qui apparaîtront dans votre nouvelle barre latérale, à gauche de votre contenu. C’est un excellent moyen d’améliorer l’interaction et la fonctionnalité de votre site, offrant ainsi plus de valeur à vos visiteurs.

Utiliser Themify et ses capacités pour ajouter des barres latérales permet de personnaliser votre site et d’adapter les informations selon vos besoins. Que ce soit pour afficher des annonces, des articles récents ou des liens vers d’autres contenus, la flexibilité apportée par cette nouvelle barre latérale sera sans aucun doute bénéfique pour votre stratégie de contenu. Ainsi, vous optimisez non seulement l’interface, mais aussi l’efficacité de votre site.