Share
Ați vrut vreodată să accelerați procesul de dezvoltare a temelor? Presupun că răspunsul este "da" și deja știți despre Bootstrap și folosiți-l în machete pentru dezvoltare. Acest lucru ridică întrebarea: "Cum puteți integra componentele Bootstrap într-o temă WordPress?"
Această serie de tutoriale va acoperi integrarea celor mai populare componente Bootstrap într-o temă WordPress. Să începem cu componenta Navbar care permite crearea unei bare de navigare receptive. Pentru a păstra ușor acest tutorial, voi lua o bară de navigare care constă doar dintr-un logo și un meniu.
Dacă aveți nevoie să obțineți acest lucru rapid și fiabil, puteți găsi o mulțime de experți în Bootstrap și WordPress pe Envato Studio care vă pot ajuta.
Experții în Bootstrap pe Envato Studio Aici este codul sursă din pagina de documentare Bootstrap:
Să examinăm mai atent codul și să clarificăm lucrurile pentru o mai bună înțelegere a următoarei părți a tutorialului.
ambalaj - A eticheta cu clasa "navbar" și rolul "navigare" împachetează întregul conținut al barei de navigare.
...
Antet - A Buton de comutare - A Marca - o legătură cu sigla; este opțional, o puteți omite aici și includeți-o în altă parte. Conținut pliabil - A Meniul - A Acest pas presupune că ați instalat deja WordPress și că tema pe care o dezvoltați a fost activată. Deschide-ți functions.php fișier și înregistrați navigația dacă nu ați făcut-o încă. Înregistrați fișierele bootstrap și jQuery: Descărcați Edward McIntyre Navigați la site-ul dvs. Wordpress back-end Au apărut la> Meniu. Creați un nou meniu numit "Primar" și adăugați elemente la acesta. Accesați fila Gestionați locațiile iar pentru locația tematică denumită "Primary", atribuiți meniul "Primary". Salvează modificările. Deschide-ți header.php și copiați și inserați macheta barei de navigare în locul în care doriți să apară. Acum înlocuim părți ale machetei cu funcțiile șablon ale WordPress. Mai întâi plasați legătura corectă pentru logo. Schimbați această linie: la: Următorul pas este să scoateți meniul din interacțiunea din spate a machetei. Pentru aceste linii: Cu: Acum aveți componentă Navbar de bootstrap integrat în tema dumneavoastră. În acest tutorial am studiat modul de integrare a unei bare de navigare create cu cadrul CSS Bootstrap într-o temă WordPress. Pentru a accelera dezvoltarea temelor, puteți să descărcați fișierele sursă și să le inserați în tema dvs.. Puteți găsi, de asemenea, câteva teme și șabloane excelente pentru Bootstrap pe Envato Market, cum ar fi Șablonul de administrare pentru Neon Bootstrap sau Șablonul Boostrap pentru eCommerce Selphy Electronics. care reprezintă conținutul colapsat pe ecrane mici; acest buton este o necesitate, dar puteți schimba conținutul în interiorul acestuia.Marca
...
2. Integrați macheta într-un șablon
2.1. Pregătiți tema pentru meniu
funcția 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'); funcția 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 clasa de la GitHub. Plasați fișierul în dosarul root root. Întoarce-te la tine functions.php și lipiți următorul cod:2.2. Creați un meniu în Back-End
Wordpress Management Page 2.3. Integrați macheta barei de navigare într-un șablon
Marca
„>
'top_menu', 'adâncime' => 2, 'container' => false, 'menu_class' => 'nav', // meniu Process nav folosind navigatorul nostru walker '=> new wp_bootstrap_navwalker ()); ?>
Concluzie
Neon Bootstrap Admin Template
Accentsconagua