Share
Har du noen gang ønsket å påskynde prosessen med temautvikling? Jeg antar at svaret er "ja", og du vet allerede om Bootstrap og bruker det i mock-ups for utvikling. Dette reiser spørsmålet: "Hvordan kan du integrere Bootstrap-komponenter i et WordPress-tema?"
Denne serien av opplæringsprogrammer vil dekke integrering av de mest populære Bootstrap-komponentene i et WordPress-tema. La oss starte med Navbar-komponenten som gjør det enkelt å lage en responsiv navigasjonslinje. For å holde denne opplæringen enkel å følge, tar jeg en navigeringslinje som består av bare en logo og meny.
Hvis du trenger å få dette gjort raskt og pålitelig, kan du finne mange Bootstrap- og WordPress-eksperter over på Envato Studio som kan hjelpe deg.
Bootstrap-eksperter på Envato Studio Her er kildekoden fra Bootstrap dokumentasjonssiden:
La oss se nærmere på koden og avklare ting for å få en bedre forståelse av neste del av opplæringen.
wrapper - en tag med klassen "navbar" og rollen "navigasjon" bryter hele innholdet i navigeringslinjen.
...
Overskrift - en Veksle-knappen - en Merke - en lenke med logoen; det er valgfritt, du kan utelate det her og inkludere det andre steder. Sammenleggbart innhold - en Meny - en Dette trinnet forutsetter at du allerede har WordPress installert, og temaet du utvikler er aktivert. Åpne din functions.php fil og registrer navigasjonen din hvis du ikke har det ennå. Registrer bootstrap-filer og jQuery: Last ned Edward McIntyre Naviger til ditt Wordpress-nettsted-back-end Appearance-> Meny. Opprett en ny meny kalt "Primær" og legg til elementer til den. Gå til kategorien Administrer steder og for temaplassering kalt "Primary" tilordnes menyen "Primary". Lagre endringer. Åpne din header.php og kopier og lim inn navigeringslinjen på tvers av stedet der du vil at den skal vises. Nå erstatter vi deler av mock-up med WordPress 'malfunksjoner. Først legger du til riktig link for logoen. Endre denne linjen: til: Det neste trinnet er å utføre menyen fra den bakre endadadoen til opptaksmenyen. For disse linjene: Med: Nå har du bootbar Navbar-komponent integrert i temaet ditt. I denne opplæringen har vi studert hvordan å integrere en navigeringslinje opprettet med Bootstrap CSS-rammen i et WordPress-tema. For å fremskynde temautviklingen kan du bare laste ned kildefilene og lime dem inn i temaet ditt. Du kan også finne noen flotte Bootstrap-temaer og maler på Envato Market, for eksempel Neon Bootstrap Admin Template eller Selphy Electronics eCommerce Boostrap Template. som representerer kollapset innhold på små skjermer; denne knappen er et must, men du kan endre innholdet i den.Merke
...
2. Integrere Mock-Up i en mal
2.1. Forbered ditt tema for menyen
funksjon 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'); funksjon 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 klasse fra GitHub. Plasser filen i tema rotmappe. Gå tilbake til din functions.php og lim inn følgende kode:2.2. Opprett en meny i Back-End
Wordpress Menyhåndtering Side 2.3. Integrer navigasjonslinjen Mock-Up i en mal
Merke
">
'top_menu', 'depth' => 2, 'container' => false, 'menu_class' => 'nav', // Pros nav nav med vår tilpassede nav walker 'walker' => nye wp_bootstrap_navwalker ())); ?>
Konklusjon
Neon Bootstrap Admin Template
Accentsconagua