Share
Har du någonsin velat påskynda temat utvecklingsprocessen? Jag antar att svaret är "ja" och du vet redan om Bootstrap och använder den i mock-ups för utveckling. Detta ställer frågan: "Hur kan du integrera Bootstrap-komponenter i ett WordPress-tema?"
Denna serie av handledning kommer att omfatta integration av populäraste Bootstrap-komponenter i ett WordPress-tema. Låt oss börja med Navbar-komponenten som gör det lätt att skapa en responsiv navigationsfält. För att hålla denna handledning lätt att följa ska jag ta en navigeringsfält som består av bara en logotyp och en meny.
Om du behöver göra det snabbt och tillförlitligt kan du hitta många Bootstrap- och WordPress-experter på Envato Studio som kan hjälpa dig.
Bootstrap-experter på Envato Studio Här är källkoden från Bootstrap dokumentationssida:
Låt oss titta närmare på koden och klargöra saker för en bättre förståelse av nästa del av handledningen.
Omslag - en tagg med klassen "navbar" och rollen "navigation" wraps hela innehållet i navigeringsfältet.
...
Rubrik - en Växlingsknapp - en varumärke - en länk till logotypen; det är valfritt, du kan släppa det här och inkludera det på annat håll. Fällbart innehåll - en Meny - en Det här steget förutsätter att du redan har WordPress installerat och det tema du utvecklar har aktiverats. Öppna din functions.php fil och registrera din navigering om du inte har än. Registrera bootstrap-filer och jQuery: Hämta Edward McIntyre s Navigera till ditt Wordpress-baksidan Appearance-> Meny. Skapa en ny meny som heter "Primär" och lägg till objekt till den. Gå till fliken Hantera platser och för temat plats som heter "Primär" tilldela menyn "Primär". Spara ändringar. Öppna din header.php och kopiera och klistra in navigeringsfältet på plats där du vill att den ska visas. Nu ersätter vi delar av mock-up med WordPress 'mallfunktioner. Först placerar du rätt länk för logotypen. Ändra den här raden: till: Nästa steg är att mata ut menyn från back-end-ikonen på mock-up-menyn. För dessa rader: Med: Nu har du bootbar Navbar-komponent integrerad i ditt tema. I denna handledning har vi studerat hur man integrerar en navigeringsfält som skapats med Bootstrap CSS-ramverket i ett WordPress-tema. För att påskynda temat utveckling kan du helt enkelt ladda ner källfilerna och klistra in dem i ditt tema. Du kan också hitta några bra Bootstrap-teman och mallar på Envato Market, till exempel Neon Bootstrap Admin Template eller Selphy Electronics eCommerce Boostrap Mall. vilket representerar kollapsat innehåll på små skärmar; den här knappen är ett måste men du kan ändra innehållet inuti det.varumärke
...
2. Integrera mock-up i en mall
2,1. Förbered ditt tema för menyn
funktion 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'); funktion 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 klass från GitHub. Placera filen i temat rotmapp. Gå tillbaka till din functions.php och klistra in följande kod:2,2. Skapa en meny i baksidan
Wordpress Menyhanteringssida 2,3. Integrera Navigation Bar Mock-Up i en mall
varumärke
">
'top_menu', 'deep' => 2,' container '=> false,' menu_class '=>' nav ', // Process navmeny med vår egna nav walker' walker '=> nya wp_bootstrap_navwalker ())); ?>
Slutsats
Neon Bootstrap Admin Template
Accentsconagua