Share
Heb je ooit het proces van thema-ontwikkeling willen versnellen? Ik neem aan dat het antwoord "ja" is en je weet het al van Bootstrap en gebruik het in mock-ups voor ontwikkeling. Dit werpt de vraag op: "Hoe kun je Bootstrap-componenten integreren in een WordPress-thema?"
Deze serie tutorials behandelt de integratie van de meest populaire Bootstrap-componenten in een WordPress-thema. Laten we beginnen met de component Navbar waarmee u eenvoudig een responsieve navigatiebalk kunt maken. Om deze handleiding gemakkelijk te volgen te houden, zal ik een navigatiebalk gebruiken die alleen uit een logo en een menu bestaat.
Als u dit snel en betrouwbaar moet doen, vindt u genoeg Bootstrap- en WordPress-experts op Envato Studio die u kunnen helpen.
Bootstrap-experts op Envato Studio Hier is de broncode van de documentatiepagina van de Bootstrap:
Laten we de code van dichtbij bekijken en verduidelijken voor een beter begrip van het volgende deel van de zelfstudie.
Wikkel - een tag met klasse "navbar" en rol "navigatie" wikkelt de volledige inhoud van de navigatiebalk.
...
hoofd - een Schakelknop - een Merk - een link met het logo; het is optioneel, je kunt het hier weglaten en elders opnemen. Opvouwbare inhoud - een Menu - een Bij deze stap wordt ervan uitgegaan dat WordPress al is geïnstalleerd en dat het thema dat u ontwikkelt is geactiveerd. Open je functions.php bestand en registreer uw navigatie als u dat nog niet hebt gedaan. Registreer bootstrap-bestanden en jQuery: Download Edward McIntyre's Navigeer naar de back-end van uw Wordpress-site Appearance-> Menu. Maak een nieuw menu met de naam "Primair" en voeg er items aan toe. Ga naar het tabblad Beheer locaties en voor themalocatie genaamd "Primair" wijst u het menu "Primair" toe. Wijzigingen opslaan. Open je header.php en kopieer en plak de mock-up van de navigatiebalk naar de plaats waar u deze wilt weergeven. Nu vervangen we delen van de mock-up door de sjabloonfuncties van WordPress. Plaats eerst de juiste link voor het logo. Verander deze regel: naar: De volgende stap is het uitvoeren van het menu vanuit de back-end in plaats van het mock-upmenu. Voor deze regels: Met: Nu heb je bootstrap Navbar-component geïntegreerd in je thema. In deze zelfstudie hebben we onderzocht hoe een navigatiebalk die met het Bootstrap CSS-framework is gemaakt, kan worden geïntegreerd in een WordPress-thema. Om de thema-ontwikkeling te versnellen, kunt u eenvoudig de bronbestanden downloaden en in uw thema plakken. Je kunt ook enkele geweldige Bootstrap-thema's en -sjablonen vinden op Envato Market, zoals de Neon Bootstrap Admin-sjabloon of de Selphy Electronics eCommerce Boostrap-sjabloon. die ingeklapte inhoud op kleine schermen vertegenwoordigt; deze knop is een must, maar je kunt de inhoud erin wijzigen.Merk
...
2. Integreer de Mock-Up in een sjabloon
2.1. Bereid je thema voor op het menu
functie 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'); functie 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 klas van GitHub. Plaats het bestand in de hoofdmap van het thema. Ga terug naar jouw functions.php en plak de volgende code:2.2. Maak een menu aan de achterkant
Wordpress Menu Management Pagina 2.3. Integreer navigatiebalkmodel in een sjabloon
Merk
">
'top_menu', 'depth' => 2, 'container' => false, 'menu_class' => 'nav', // Process nav-menu met onze aangepaste nav walker 'walker' => nieuwe wp_bootstrap_navwalker ())); ?>
Conclusie
Neon Bootstrap Admin-sjabloon
Accentsconagua