Share
Avez-vous déjà voulu accélérer le processus de développement de thèmes? Je suppose que la réponse est "oui" et que vous connaissez déjà Bootstrap et que vous l’utilisez dans des maquettes pour le développement. Cela soulève la question suivante: "Comment intégrer des composants Bootstrap dans un thème WordPress?"
Cette série de didacticiels couvrira l'intégration des composants Bootstrap les plus populaires dans un thème WordPress. Commençons par le composant Navbar qui permet de créer facilement une barre de navigation réactive. Pour que ce tutoriel soit facile à suivre, je vais utiliser une barre de navigation qui ne contient qu'un logo et un menu..
Si vous avez besoin de faire cela rapidement et de manière fiable, vous pouvez trouver beaucoup d’experts Bootstrap et WordPress sur Envato Studio qui peuvent vous aider..
Experts en bootstrap sur Envato Studio Voici le code source de la page de documentation Bootstrap:
Examinons de plus près le code et clarifions les choses pour une meilleure compréhension de la suite du didacticiel..
Wrapper - une la balise avec la classe "navbar" et le rôle "navigation" enveloppe tout le contenu de la barre de navigation.
…
Entête - une Bouton à bascule - une Marque - un lien avec le logo; c'est optionnel, vous pouvez l'omettre ici et l'inclure ailleurs. Contenu pliable - une Menu - une Cette étape suppose que WordPress est déjà installé et que le thème que vous développez a été activé.. Ouvrez votre functions.php déposer et enregistrer votre navigation si vous ne l'avez pas encore. Enregistrez les fichiers d'amorçage et jQuery: Télécharger Edward McIntyre's Accédez au back-end de votre site Wordpress Apparence-> Menu. Créez un nouveau menu appelé "Principal" et ajoutez-y des éléments. Aller à l'onglet Gérer les emplacements et pour l'emplacement du thème appelé "Primaire", assignez le menu "Primaire". Sauvegarder les modifications. Ouvrez votre header.php et copiez-collez la maquette de la barre de navigation à l'endroit où vous souhaitez qu'elle apparaisse. Nous remplaçons maintenant certaines parties de la maquette par les fonctions de modèle de WordPress. Tout d'abord, placez le lien correct pour le logo. Changer cette ligne: à: L'étape suivante consiste à sortir le menu à partir du back-end du menu maquette. Pour ces lignes: Avec: Maintenant, vous avez un composant de bootstrap Navbar intégré dans votre thème. Dans ce tutoriel, nous avons étudié comment intégrer une barre de navigation créée avec le framework CSS Bootstrap dans un thème WordPress. Pour accélérer le développement du thème, vous pouvez simplement télécharger les fichiers source et les coller dans votre thème.. Vous pouvez également trouver d'excellents thèmes et modèles Bootstrap sur Envato Market, tels que le modèle d'administration Neon Bootstrap ou le modèle Booster de Selphy Electronics eCommerce.. qui représente le contenu effondré sur de petits écrans; ce bouton est indispensable mais vous pouvez en modifier le contenu.Marque
…
2. Intégrer la maquette dans un modèle
2.1. Préparez votre thème pour le menu
function wpt_register_js () wp_register_script ('jquery.bootstrap.min', get_template_directory_uri (). '/js/bootstrap.min.js', 'jquery'); wp_enqueue_script ('jquery.bootstrap.min'); add_action ('init', 'wpt_register_js'); function wpt_register_css () wp_register_style ('bootstrap.min', get_template_directory_uri (). '/css/bootstrap.min.css'); wp_enqueue_style ('bootstrap.min'); add_action ('wp_enqueue_scripts', 'wpt_register_css'); wp-bootstrap-navwalker classe de GitHub. Placez le fichier dans le dossier racine du thème. Retournez à votre functions.php et collez le code suivant:2.2. Créer un menu dans le back-end
Page de gestion de menu Wordpress 2.3. Intégrer la maquette de la barre de navigation dans un modèle
Marque
">
'top_menu', 'depth' => 2, 'container' => false, 'menu_class' => 'nav', // Traite le menu de navigation à l'aide de notre navigateur de navigation personnalisé 'walker' => new wp_bootstrap_navwalker ()); ?>
Conclusion
Modèle d'Admin Bootstrap Admin
Accentsconagua