skip to Main Content

3 nouvelles personnalisations du thème Twenty Seventeen

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Twenty Seventeen est le thème par défaut le plus polyvalent de WordPress jamais vu. Cependant, les options intégrées dans le thème laissent quelque peu à désirer.

Dans ce tutoriel, je vais vous montrer cinq méthodes pour personnaliser ce thème afin qu’il corresponde à votre blog. Nous allons commencer avec les bases et passer à des personnalisations plus difficiles et percutantes.

Quand nous aurons terminé, vous serez en mesure de transformer Twenty Seventeen en un site magnifique et moderne pour les affaires ou les blogs. Vous ne me croyez pas? Regardez, voici ce que vous pourrez créer :

#1 Créer un menu des liens sociaux

Bon, cette première partie est plus qu’un simple hack. Mais c’est une personnalisation à faire uniquement sur Twenty Seventeen.

Twenty Seventeen dispose d’un menu attrayant pour des liens sociaux sur le pied de page.

Le problème est que quelques utilisateurs ont signalé qu’ils avaient des difficultés à trouver comment ajouter leurs liens des réseaux sociaux sur ce menu. Heureusement, c’est vraiment très simple une fois que vous savez comment le faire.

Tout ce que vous avez à faire est de créer un menu avec des liens vers vos réseaux sociaux et de l’affecter à l’emplacement du Menu des Liens sociaux.

  • Explorons à travers le processus.
  • Commencez par ouvrir le « Customizer » ( Apparence> Personnaliser ).
  • Sélectionnez l’option « Menus » ensuite sélectionnez « Social Links Menu ».
  • Renommez votre nouveau menu.
  • Ajoutez un lien à chacun des réseaux sociaux disponibles.
  • Cochez la case à côté de « Social Links Menu ».

Lorsque vous avez terminé, votre menu devrait ressembler à ceci:

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

La dernière étape consiste à cliquer sur le bouton « Enregistrer et Publier » dans le Customizer pour enregistrer le nouveau menu. Vos liens vers les réseaux sociaux seront désormais affichés dans le menu sur le bas de page.

# 2 Changer la signature « Fièrement propulsé par WordPress »

Il y a deux raisons pour lesquelles vous pourriez vouloir modifier le texte sur le pied de page qui affiche que votre site est « Fièrement propulsé par WordPress. »

Peut-être que vous souhaitez étendre ce dernier, en ajoutant un texte supplémentaire : « Fièrement propulsé par WordPress, conçu par WebPress Designs, et hébergé par LAMPress Hosting. »

Peut-être que vous souhaitez complètement modifier votre signature pour quelque chose de plus personnel.

La première chose que vous devez faire est de créer et activer un thème enfant (indice: si vous voulez vous simplifier la vie, téléchargez le thème enfant préconçu pour ça).

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Une fois que vous avez créé et activé votre thème enfant, copiez le fichier « footer.php ». Ensuite, ouvrez ce fichier « footer.php » et retrouver ce morceau de code: get_template_part( ‘template-parts/footer/site’, ‘info’ );.

Maintenant, vous avez deux options. Vous pouvez simplement commenter cette ligne en ajoutant « // » juste avant le code, ou vous pourriez envisager de le remplacer par votre propre texte de pied de page personnalisé. Voici le code que à ajouter pour créer le texte du pied de page.

#3 Menu de navigation amélioré

En plus de créer un menu de navigation fonctionnel sur une page de navigation, nous allons également corriger l’effet de survol du menu de navigation et ajouter le défilement régulier pour améliorer l’expérience globale.

Tout d’abord, nous allons commencer à ajouter le code suivant sur votre thème (enfant):

/*
 One page nav code 
 */

jQuery( document ).ready(function(){
  /* Add padding and id's to each front page section */
  jQuery( "h2.entry-title" ).each( function() {
    var panelId = jQuery( this ).html().toLowerCase().replace(/\s+/g, "-");
      jQuery( this ).wrapInner(function() {
        return "<span style='padding-top:96px;' id='" + panelId + "'></span>";
      })
  })
    
  /* Remove navigation link highlighting */
    jQuery('#top-menu li').removeClass('current-menu-item current_page_item ');
  
  /* Add highlighting on click */
    jQuery('#top-menu li a').on('click', function(event) {
    jQuery(this).parent().parent().find('li').removeClass('current-menu-item');
    jQuery(this).parent().addClass('current-menu-item');
  });
  
    /* Check current URL and highlight nav for current page */
  jQuery('#top-menu li a').each( function() {
      var pageUrl = jQuery( location ).attr( 'href' );
      var navUrl = jQuery( this ).attr( 'href' );
      if ( navUrl == pageUrl ) {
          jQuery( this ).parent().addClass('current-menu-item');
        } 
    })
})

Vous pouvez ajouter ce code sur un fichier JavaScript chargé par un thème enfant (ce qui est recommandé) ou utilisez un plugin qui vous permet d’ajouter JavaScript sur votre site. Assurez-vous de charger le code après jQuery a déjà chargé.

Jetez un coup d’œil aux commentaires dans le code pour obtenir une image complète de ce qui se passe.

En outre, nous pouvons rendre le mouvement vers chaque section beaucoup plus lisse en installant et en activant un plugin gratuit: jQuery Smooth Scroll.

Bien sûr, vous aurez toujours besoin de construire votre menu de navigation en ajoutant un lien personnalisé à chaque section en utilisant le nom de la page affichée dans cette section.

Par exemple, pour créer un lien vers La section « A propos de », vous devez créer un lien personnalisé et utilisez « #about » comme l’ancre du lien. Pour plus de détails, consultez Comment personnaliser le thème « Twenty Seventeen WordPress ».

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Avec un peu d’efforts vous arriverez à un résultat convainquant :

Ce n’est certainement pas tout ce que l’on peut faire avec Twenty Seventeen, nous vous proposerons ultérieurement d’autres tutoriels sur Twenty Seventeen.

Cet article comporte 5 commentaires
  1. bizarre,

    les caracteres accentués ne sont pas acceptés ! je me retrouve avec des points d’interrogation à la place une idée ?

    ps: merci pour ces astuces en tous cas !

  2. Bonjour,

    J’ai suivi vos instructions mais mes icônes ne s’affichent que sur la version mobile de mon blog et pas sur la version pc, si vous pouvez m’aider ça serait top !
    Merci,
    Julie

    1. Bonjour,
      vous devez vérifier que le style des menus est effectivement chargé. Vous pouvez aussi inspecter le code du menu pour vous assurer que les balises qui portent les icônes sont présente.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
6 Partages
Partagez
Tweetez1
Enregistrer5