Share
Hai mai desiderato accelerare il processo di sviluppo del tema? Presumo che la risposta sia "sì" e tu sai già di Bootstrap e usalo nei simulatori per lo sviluppo. Ciò solleva la domanda: "Come si possono integrare i componenti Bootstrap in un tema WordPress?"
Questa serie di tutorial coprirà l'integrazione dei componenti Bootstrap più popolari in un tema WordPress. Iniziamo con il componente Navbar che consente di creare facilmente una barra di navigazione reattiva. Per mantenere questo tutorial facile da seguire, prenderò una barra di navigazione che consiste solo di un logo e di un menu.
Se hai bisogno di fare questo in modo rapido e affidabile, puoi trovare un sacco di esperti di Bootstrap e WordPress su Envato Studio che può aiutarti.
Esperti Bootstrap su Envato Studio Ecco il codice sorgente dalla pagina di documentazione di Bootstrap:
Diamo uno sguardo più da vicino al codice e chiariamo le cose per una migliore comprensione della prossima parte del tutorial.
involucro - un tag con classe "navbar" e il ruolo "navigazione" avvolge l'intero contenuto della barra di navigazione.
...
Intestazione - un Interruttore - un Marca - un collegamento con il logo; è facoltativo, puoi ometterlo qui e includerlo altrove. Contenuto pieghevole - un Menu - un Questo passaggio presuppone che hai già installato WordPress e che il tema che stai sviluppando è stato attivato. Apri i tuoi functions.php file e registra la tua navigazione se non l'hai ancora fatto. Registrare i file di bootstrap e jQuery: Scarica Edward McIntyre's Passare al back-end del sito Wordpress Aspetto-> Menu. Crea un nuovo menu chiamato "Primario" e aggiungi elementi ad esso. Vai alla scheda Gestisci posizioni e per la posizione del tema chiamata "Primaria" assegnare il menu "Primario". Salva I Cambiamenti. Apri i tuoi header.php e copia e incolla la barra di navigazione del mock-up nel punto in cui vuoi che appaia. Ora sostituiamo le parti del mock-up con le funzioni dei modelli di WordPress. Innanzitutto inserire il link corretto per il logo. Cambia questa linea: a: Il prossimo passo è quello di emettere il menu dal pulsante back-end del menu mock-up. Per queste linee: Con: Ora hai integrato il componente Navbar di bootstrap nel tuo tema. In questo tutorial abbiamo studiato come integrare una barra di navigazione creata con il framework CSS Bootstrap in un tema WordPress. Per accelerare lo sviluppo del tema, puoi semplicemente scaricare i file sorgente e incollarli nel tuo tema. Puoi inoltre trovare alcuni fantastici temi e modelli Bootstrap su Envato Market, come ad esempio il modello di amministrazione Neon Bootstrap o il modello di eCommerce Boostrap di Selphy Electronics. che rappresenta il contenuto collassato su piccoli schermi; questo pulsante è obbligatorio ma puoi modificare il contenuto al suo interno.Marca
...
2. Integrare il modello in un modello
2.1. Prepara il tuo tema per il 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 da GitHub. Inserisci il file nella cartella principale del tema. Torna al tuo functions.php e incolla il seguente codice:2.2. Crea un menu nel back-end
Pagina di gestione menu Wordpress 2.3. Integrazione della barra di navigazione Mock-Up in un modello
Marca
">
'top_menu', 'depth' => 2, 'container' => false, 'menu_class' => 'nav', // Elabora menu nav usando il nostro custom nav walker 'walker' => new wp_bootstrap_navwalker ())); ?>
Conclusione
Modello di amministrazione bootstrap al neon
Accentsconagua