Bootstrap et l'intégration du thème WordPress en 8 étapes faciles –

Ce tutoriel explique les étapes clés pour utiliser Bootstrap et WordPress ensemble, en intégrant la dernière version de la bibliothèque Bootstrap avec un thème WordPress

Bootstrap et WordPress sont très populaires: 3.7 sites web sur internet sont construits avec Bootstrap et 29% du Web utilise WordPress . De toute évidence, savoir comment créer des sites Web et des applications à l'aide de ces deux technologies ouvertes et robustes peut être une compétence précieuse pour les développeurs en milieu de travail.

Il y a beaucoup de choses à couvrir, alors allons-y! WordPress

WordPress est un logiciel open source que vous pouvez utiliser pour créer un site web, blog ou application.

La popularité de WordPress est principalement due à sa facilité d'utilisation et à ses puissantes options d'apparence, de personnalisation, et extensibilité (via des thèmes et des plugins).

Grâce aux thèmes WordPress, les webmasters avec peu ou pas d'expérience de codage peuvent alimenter leurs sites web avec une apparence professionnelle et des fonctionnalités personnalisées. Les utilisateurs peuvent facilement sélectionner différents thèmes en quelques clics en utilisant le menu Apparence du tableau de bord d'administration ou copier des fichiers de thème directement dans le dossier wp-content> themes . Les thèmes peuvent être achetés sur des places de marché dédiées, des développeurs individuels, ou peuvent également être librement installés à partir du répertoire de thèmes WordPress.org .

En tant que développeurs, nous pouvons créer notre propre thème, ce que nous sommes va faire dans ce tutoriel. Plus spécifiquement, nous allons effectuer les étapes clés vers la création d'un thème WordPress simple qui intègre la dernière version de la bibliothèque Bootstrap

Pourquoi Bootstrap?

Bootstrap est une bibliothèque d'interface utilisateur robuste et complète pour le développement rapide et mobile -Premiers sites Web et applications. Voici quelques avantages de l'utilisation de Bootstrap comme cadre de style pour un thème WordPress

Avantages de l'utilisation de thèmes Bootstrap et WordPress ensemble

Selon moi, l'utilisation de Bootstrap pour styliser un thème WordPress présente de nombreux avantages. Bootstrap est un projet open source populaire avec un développement étendu et une maintenance continue, ce qui au fil du temps a réduit le nombre de bogues.

Y at-il des inconvénients à utiliser Bootstrap et WordPress ensemble?

En ce qui concerne les inconvénients, la communauté des développeurs a soulevé quelques préoccupations, dont les suivantes. Bootstrap n'est pas conçu pour une intégration directe avec WordPress, mais cela ne devrait pas être un énorme obstacle pour la plupart des développeurs.

Conditions préalables pour le suivi Le long

Dans ce tutoriel, je suppose que vous avez un environnement de développement avec PHP, MySQL et WordPress installé – comme Homestead Improved . Cette astuce vous aidera à vous familiariser avec WordPress – en particulier pour installer et activer des thèmes, ajouter WordPress – en un rien de temps. Menus, créer des messages et des pages, etc

Enfin, vous devez avoir une certaine connaissance de la façon de construire un thème WordPress. En fait, c'est un tutoriel sur l'intégration de Bootstrap dans un thème WordPress, pas un tutoriel sur la façon de construire un thème WordPress entièrement fonctionnel, qui aurait une portée beaucoup plus large que ce que nous avons dans cet article.

Intégrer Bootstrap et WordPress

Dans cette section, nous allons apprendre les étapes clés que nous devons effectuer pour intégrer Bootstrap dans un simple projet de thème WordPress.

Tout d'abord, passons en revue les fichiers que nous allons créer

La structure d'un thème WordPress

Un thème WordPress a une structure de fichier prédéterminée. Certains fichiers sont requis pour que le thème soit reconnu par WordPress.

Le premier fichier requis est style.css . Ce fichier CSS contient des styles pour le thème. Plus important encore, ce fichier a également une tâche particulière: il fournit des méta-informations sur le thème telles que le nom du thème, la description, l'auteur et d'autres détails supplémentaires. Les méta-informations doivent être présentes dans la tête du fichier sous la forme de commentaires CSS

L'autre fichier requis est index.php qui est le fichier thème WordPress principal, et le dernier fallback Fichier template sur lequel WordPress s'appuie, au cas où il ne trouverait pas d'autre fichier template pour afficher son contenu.

Il y a beaucoup de fichiers optionnels, mais pour notre simple thème Bootstrap nous allons seulement ajouter les fichiers suivants:

• header.php et footer.php pour disposer respectivement les sections d'en-tête et de pied de page de notre thème WordPress, qui sont affichées sur chaque page de notre thème
• functions.php où nous allons écrire le code pour charger la feuille de style personnalisée de notre thème, styles et scripts Bootstrap, et plus encore.

Si vous êtes curieux, consultez les autres modèles que vous pouvez personnaliser à partir du Docs WordPress .

Passons aux affaires!

Étape 1: Créer le dossier thématique

Tout d'abord, nous nous dirigeons vers notre dossier d'installation de WordPress et naviguons vers wp-content -> themes . Ici, nous créons un dossier pour notre thème. Appelons-le bs-theme .

Étape 2: Ajout de style.css

Créons notre premier fichier requis, style.css où nous allons mettre notre code CSS personnalisé.

Tout en haut de ce document (assurez-vous de ne laisser aucun espace vide en haut), nous ajoutons les méta-informations sur notre thème entre les commentaires CSS (n'oubliez pas de remplacer le [19659056]et espaces réservés avec des valeurs relatives à votre propre projet):

 / *
Nom du thème: BS 4 Thème
URI de thème: 
Description: Un thème pour WordPress avec Bootstrap pour le style.
Auteur: 
URI de l'auteur: 
Version: 1.0
* /

Maintenant, WordPress peut afficher les informations de notre thème dans la zone d'administration.

Nous pouvons ajouter nos styles personnalisés sous les commentaires des méta-informations. Par exemple, ajoutons quelques règles CSS pour styler le :

 @import url (https://fonts.googleapis.com/css?family=Montserrat:700);

corps {
  rembourrage-top: 4.5rem;
  famille de fontes: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  couleur: # 001A33;
}

Commençons par créer header.php dans le dossier thèmes . Ensuite, nous ajoutons le contenu suivant:

   <! - 
  
    
    

    

    
    

    
     <link rel = "pingback" href = "" />

    

 <corps >
  

Dans le code ci-dessus, la plupart des méta-informations pour la section HTML head sont ajoutées en utilisant divers tags WordPress, tels que bloginfo ('name') pour obtenir le nom du site, [19659071] wp_title () pour obtenir le titre de la page, et wp_head () pour déclencher le wp_head action hook utilisé par WordPress pour ajouter des liens et d'autres fonctionnalités à head section.

Nous avons également utilisé différentes classes Bootstrap pour créer une barre de navigation réactive. Cependant, comme c'est le cas, la barre de navigation n'est pas dynamique. Autrement dit, il n'est pas intégré à la fonctionnalité de menu WordPress . Cela signifie que nous ne pouvons pas créer un menu WordPress dans la zone d'administration et le voir affiché sur la page d'accueil de notre site Web.

La barre de navigation statique Bootstrap sera la prochaine étape. accomplir notre tâche, nous avons besoin d'une classe WordPress walker qui permet aux développeurs de parcourir des structures de données arborescentes en vue de rendre le balisage HTML. Il existe quelques classes de navigation Bootstrap walker disponibles sur Internet. Pour ce tutoriel, nous irons avec le BS4navwalker de Dominic Businaro, qui est disponible gratuitement sur GitHub.

Nous récupérons bs4navwalker.php et l'enregistrons dans le répertoire racine de notre thème (que nous avons appelé bs-theme plus haut dans ce tutoriel).

Ensuite, nous allons créer un fichier functions.php (ce nom est requis par WordPress) dans le dossier racine du thème, et nous écrirons cette ligne de code:

 require_once ('bs4navwalker.php');

Maintenant, nous pouvons utiliser la classe Bootstrap walker dans nos fichiers de thème.

Nous localisons le balisage de l'élément nav que nous venons d'écrire et le modifions comme suit:

Le code ci-dessus suppose que nous avons déjà créé un menu dans la zone d'administration WordPress et que quelques pages sont stockées dans la base de données WordPress.

Pour afficher notre barre de navigation, nous utilisons Fonction wp_nav_menu () .

Les valeurs du menu et theme_location paramètres que nous passons à wp_nav_menu () proviennent des paramètres de notre menu WordPress, que nous devrions Les valeurs des paramètres container container_id et container_class proviennent des classes Bootstrap et CSS ] id attribut sur l'élément div qui enveloppe l'élément ul contenant les éléments de liste pour nos liens de navigation.

La valeur du paramètre menu_class vient de la classe Bootstrap sur l'élément ul

La valeur du paramètre depth indique le nombre de niveaux hiérarchiques que notre menu de navigation va avoir. Nous avons mis ceci à 0 qui est la valeur par défaut et représente tout .

Le paramètre marcheur est ici très important, et nous ' Nous l'avons défini sur une nouvelle instance de la classe bs4navwalker qui est responsable du rendu du balisage de navigation Bootstrap.

Et nous avons terminé!

Vous trouverez une explication détaillée avec le texte intégral. liste de paramètres pour la fonction wp_nav_menu () sur la page de documentation WordPress.org .

L'étape suivante consiste à créer le fichier footer.php et ajoutez le contenu suivant:

 
    < ?php wp_footer(); ?>
  

wp_footer () est utilisé par WordPress pour placer dynamiquement différents éléments de balisage, tels que des liens vers des fichiers de stylesheet et JavaScript, en bas de la page.

Il est important de noter que de nombreux plugins utilisent le wp_head () et wp_footer () hooks pour placer les éléments requis dans l'en-tête et le pied de page. Par conséquent, vous devrez vous assurer d'ajouter les deux crochets comme indiqué dans ce tutoriel. Cela évitera de casser la fonctionnalité de ces plugins lorsque notre thème est activé

Etape 6: Ajout du fichier modèle index.php

index.php est le deuxième fichier requis pour chaque thème WordPress, alors allons-y et créons-le. Nous ajoutons ensuite le contenu ci-dessous:

L'utilisation de get_header () et get_footer () indique à WordPress d'inclure les modèles précédemment créés, header.php et footer.php à l'intérieur index.php .

Etape 7: Ajout de la boucle WordPress

Pour afficher nos messages, nous utiliserons la fameuse boucle WordPress .

Inside index.php entre le En-têtes et pieds de page, ajoutons le code suivant:

 

  
    

      <a href="">
        
      
    
    
  
    
 Il n'y a aucun sujet à afficher 
  

Voici ce qui se passe ci-dessus:

• Nous vérifions s'il y a des posts en appelant have_posts () .
• En utilisant une boucle while nous bouclons tous les
• Enfin, nous montrons le titre et le contenu de chaque article. Nous pourrions également obtenir des informations supplémentaires telles que la date à laquelle le message est publié, l'auteur de la publication, les commentaires associés à chaque article, etc.

Étape 8: Ajout de Bootstrap

Après avoir ajouté nos fichiers modèles, Maintenant, nous avons un bon thème de départ que nous pouvons activer via le menu Apparence dans le panneau d'administration.

Si nous prévisualisons notre thème, nous obtiendrons un site non créé, qui ressemble à la capture d'écran suivante: [19659003]

Pour donner un aspect Bootstrap à notre thème, nous devons inclure les fichiers Bootstrap dans notre projet.

Reprenons le fichier ZIP Bootstrap de getbootstrap.com et copiez les fichiers dans notre thème. (Pour des raisons d'organisation, nous pouvons ajouter des dossiers css et js à notre projet et placer les fichiers correspondants dans le dossier approprié.)

Notre structure de dossiers devrait ressembler à ceci: [19659117] – bs-theme
  – style.css
  – footer.php
  – functions.php
  – header.php
  – index.php
  – single.php
  – css
      – bootstrap.min.css
  – js
    – vendeur
      – bootstrap.bundle.min.css

Ensuite, nous allons faire ce qui suit:

• Enqueue Bootstrap stylesheet et les fichiers JavaScript
• utilisent WordPress hooks pour insérer les fichiers Bootstrap dans le web Commençons par ouvrir functions.php et ajouter le code suivant:

   <? php
  
  function themebs_enqueue_styles () {
  
    wp_enqueue_style ('bootstrap', get_template_directory_uri (). '/css/bootstrap.min.css');
    wp_enqueue_style ('core', get_template_directory_uri (). '/style.css');
  
  }
  add_action ('wp_enqueue_scripts', 'themebs_enqueue_styles');
  
  function themebs_enqueue_scripts () {
    wp_enqueue_script ('bootstrap', get_template_directory_uri (). '/js/vendor/bootstrap.bundle.min.js', array ('jquery'));
  }
  add_action ('wp_enqueue_scripts', 'themebs_enqueue_scripts');
  

  Nous avons utilisé différentes méthodes WordPress ici, examinons donc brièvement chacune d'entre elles:

  • wp_enqueue_style () : cette méthode met en file d'attente et charge la feuille de style passée en paramètre. Dans le code ci-dessus, nous l'utilisons pour charger à la fois la feuille de style Bootstrap et notre fichier CSS personnalisé.
  • wp_enqueue_script () : cette méthode met en file d'attente et charge un fichier de script. Nous l'avons utilisé pour charger le bundle JavaScript de Bootstrap, indiquant que la bibliothèque jQuery était une dépendance. jQuery est déjà livré avec WordPress, nous n'avons donc pas besoin de le charger en utilisant une URL. (WordPress sait exactement où l'obtenir.)
  • get_template_directory_uri () : cette méthode obtient l'URI du répertoire de thème actif en cours
  • add_action ('wp_enqueue_scripts', '...') : cette méthode rattache nos fonctions à l'action wp_enqueue_scripts (utilisée lors de la mise en file d'attente de styles et de scripts devant apparaître sur le front-end du site Web).

  Vous pouvez en savoir plus sur l'inclusion de CSS et Fichiers JavaScript dans le document WordPress thème .

  Voici notre thème avec son apparence Bootstrap brillante:

  

  Conclusion

  Dans ce tutoriel, nous avons vu comment créer un thème WordPress simple qui intègre la dernière version de Bootstrap.

  Avec cette nouvelle compétence sous votre ceinture de développeur, vous êtes maintenant prêt à créer votre propre thème WordPress basé sur Bootstrap et le partager avec le monde!

  Si vous avez entendu parler de Bootstrap mais que vous avez Nous avons retardé l'apprentissage parce que cela semble trop compliqué, puis nous avons joué avec notre cours Introduction à Bootstrap 4 pour une introduction rapide et amusante au pouvoir de Bootstrap.

  
  

  Ahmed est un entrepreneur web, un développeur, un spécialiste du marketing numérique et un blogueur. Il écrit sur le développement de logiciels et de sites Web, des trucs pour gagner de l'argent, le référencement et plus encore. Vous pouvez trouver plus de ses écrits sur son site Techiediaries .
  
  

  Le meilleur outil 2023 pour ta croissance Instagram !

  
  
  
  Source link

  Partager :

  • Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)

  Articles similaires