Crea temi Bootstrap per WordPress in 8 semplici passaggi

Con così tanti dispositivi con risoluzioni, dimensioni dello schermo e sistemi operativi diversi, i siti Web e le applicazioni reattivi sono diventati un requisito essenziale per la presenza online di un marchio.

Oltre il 52% di tutto il traffico web proviene da dispositivi mobili e il numero è in aumento. Gli sviluppatori Web, gli esperti di marketing e i designer comprendono l’enorme potenziale se il sito Web è reattivo e può essere visualizzato, navigato e sfogliato facilmente su qualsiasi dispositivo, indipendentemente da qualsiasi risoluzione e formato.

I temi reattivi sono un approccio alla progettazione Web in cui gli elementi di un sito Web si autoregolano in base alle dimensioni dello schermo e ai browser per una migliore leggibilità, esperienza utente e tempo di caricamento. Sviluppatori e designer di temi stanno incassando il concetto di siti Web reattivi. Molti marchi assumono sempre più spesso anche sviluppatori WordPress per rendere i loro siti Web reattivi e ottimizzati per i dispositivi mobili.

Nel novembre 2013, Matt Cutts, il capo del team antispam di Google, ha pubblicato un video spiegando che il design reattivo non influirà negativamente su di te nelle SERP. Inoltre, Google ha anche pubblicato le sue linee guida su siti web ottimizzati per i dispositivi mobili che contengono dettagli su come Google tratta i siti web responsive.

Con l’aumento degli smartphone e di altri dispositivi simili, l’uso di desktop e laptop è in (lento) declino. Ciò significa che le persone utilizzano i loro smartphone per cercare qualsiasi cosa: dalle notizie ai negozi locali, dalle richieste di voli agli ultimi film. Questa tendenza in aumento rappresenta una grande opportunità di business per la comunità online.

WordPress e Web reattivo

WordPress è il CMS più popolare che alimenta una parte significativa di Internet. Gode ​​del supporto di una forte comunità di sviluppatori e designer open source. Con l’avvento del responsive web design, molti rinomati sviluppatori di temi sono passati al responsive design e hanno introdotto framework di facile comprensione, come Redux Framework, Carrington Core e Bootstrapideale per creare da zero un tema WordPress reattivo.

Cos’è Bootstrap?

Bootstrap è un framework open source utilizzato per lo sviluppo web front-end mobile friendly. Ciò significa che può essere utilizzato per creare temi WordPress reattivi attraverso i suoi modelli di progettazione basati su CSS e Java Script.

Bootstrap è un toolkit che semplifica il processo di sviluppo per applicazioni web complesse. È nato da un’idea del team di sviluppo di Twitter ed è stato reso disponibile alla comunità open source. Il framework è diventato popolare grazie alla sua struttura leggera poiché è codificato in LessCSS.

Aggiungendo Bootstrap al tuo sito Web, puoi chiamare le sue classi per aggiungere elementi predefiniti come pulsanti, griglie, tabelle, menu, ecc. Allo stesso modo, puoi rendere reattivi gli elementi esistenti, senza aggiungere complesse query multimediali.

Crea un tema Bootstrap per WordPress

La creazione di un tema bootstrap per WordPress è in realtà un processo in 8 fasi. La buona notizia: è facile creare un tema basato su Bootstrap.

Passaggio 1: decomprimere Bootstrap

1. Prima di tutto, installa WordPress sul tuo dominio.
2. Scarica e decomprimi Bootstrap.
3. Una volta terminato, connettiti Usando un client FTP come FileZilla.
4. Navigare verso contenuto wp > temi.
5. Crea una nuova cartella in Temi cartella e nominarla BootSTheme. Carica il contenuto di Bootstrap decompresso in questa cartella.
6. Quasi ogni installazione di WordPress contiene i seguenti file:

• footer.php
• header.php
• index.php
• style.css

Ora, crea quattro file vuoti con i nomi sopra nel file BootSTheme cartella.

Passaggio 2: configurazione di Bootstrap

Nella cartella BootSTheme, apri il file style.css e incolla il codice seguente.

/*
Theme Name: MyTheme
Theme URI: https://cloudways.com
Description: Mytheme Built on bootstrap
Version:1.1
Author: Ahsan Parwez
Author URI: https://cloudways.com
*/

Questi sono fondamentalmente commenti che forniscono descrizioni e dettagli sul tema. Ti consiglio vivamente di modificare questi commenti per riflettere i dettagli del tuo tema.

Passaggio 3: copia del codice

Per questo tutorial, non utilizzerò tutti i file CSS e JS forniti nel pacchetto Bootstrap. Per avviare il processo di sviluppo, copia il codice nel file bootstrap.min.css archiviare e incollare nel style.css file. A questo punto, il style.css il file dovrebbe assomigliare a questo.

Nota: puoi ottenere il completo codice CSS ridotto dal sito Bootstrap.

I Page Builder ti consentono di sviluppare siti Web senza codice

Scopri quale page builder offre le prestazioni migliori e quali funzionalità ti servono per creare un sito web.

Passaggio 4: impostazione del modello HTML

Ho bisogno di un modello HTML di base con cui lavorare. Per semplificare le cose, userò questo Tema HTML. Ti consiglio di scaricare per continuare con il tutorial.

WordPress ha funzioni integrate get_header() e get_footer() che per impostazione predefinita chiamano i file header.php e footer.php rispettivamente.

Inizia tagliando il codice HTML dall’alto fino al primo contenitore div e incollalo nel file header.php file. Il file sarebbe simile a:

Il footer.php il file conterrà il resto del codice:

A questo punto, se carichi il tema WordPress Bootstrap e lo attivi, non vedrai nulla perché il index.php non contiene nulla.

Per caricare l’intestazione e il piè di pagina, utilizzerò la funzione integrata di WordPress per chiamare questi elementi. Per questo, incolla il codice seguente nel file index.php:

<?php get_header(); ?>

<?php get_footer(); ?>

Ora gli elementi di intestazione e piè di pagina verranno caricati sul nostro sito Web, ma otterremo una pagina di base senza alcun tipo di stile.

Passaggio 5: impostazione dell’intestazione e del piè di pagina

Nel header.php file, importerò il foglio di stile Bootstrap utilizzando la funzione WordPress eco get_stylesheet_uri() (leggi di più la funzione nel Codice WordPress). Importerà il style.css sul sito Web e ora vedrai una barra dei menu in alto.

Puoi anche aggiungere il style.css aggiungendo il codice seguente nella parte superiore del file header.php file.

<link rel="stylesheet" type="text/css" href="https://www.cloudways.com/blog/wordpress-bootstrap/<?php echo get_stylesheet_directory_uri()."/style.css' ?>">

Ma non è tutto, le funzionalità JavaScript sulla nostra pagina non funzioneranno ancora e non vedremo alcun menu a discesa. Per abilitare ciò, importeremo i nostri file js importando direttamente il file tramite URL nel file footer.php. Incolla il codice seguente prima della chiusura corpo etichetta.

<script src="https://www.cloudways.com/blog/wordpress-bootstrap/wp-content/themes/MyBSTheme/js/bootstrap.min.js"></script>

WordPress è noto per la sua personalizzazione e plugin. Per dire a WordPress dove posizionare gli hook dei plugin, incolleremo e in header.php e footer.php File. Inoltre, per impostare i titoli dinamici del sito Web, utilizzeremo wp_titolo(); funzione nel header.php file tra il tag.

<title><?php wp_title(' | ',true,'right'); ></title>

Il codice sopra chiamerà il titolo del post separato da ‘|’ rispetto al nome del sito. Il booleano VERO visualizzerà il titolo. Se lo imposti su falsorestituirà semplicemente il valore e non lo visualizzerà. ‘giusto’ definisce la posizione del titolo del post a destra del separatore.

Passaggio 6: visualizzazione dei post in primo piano

Successivamente, chiamerò i post in modo dinamico nella home page (come visualizzato da ) e visualizzarli in alto (simile ai post in primo piano che vediamo su molti siti basati su WordPress).

Scrivi il seguente codice nel tuo index.php:

<?php

query_posts('posts_per_page=1');

while(have_posts()) : the_post(); ?>
<div>
<h2><a href="https://www.cloudways.com/blog/wordpress-bootstrap/<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?>&lt;/p>
</div>

<?php endwhile; wp_reset_query(); ?>

Come puoi vedere, sto usando a mentre loop e imposta il numero di post su uno utilizzando post_per_pagina. Questa riga mostrerà solo l’ultimo post del blog nella parte superiore della pagina e, dopo la chiusura del ciclo, il file query_posts si ripristina.

La classe jumbotron è definita in bootstrap.min.css file. Lo userò per dare uno stile ai post in primo piano usando i tag

e the_permalink(); funzione. Il collegamento ipertestuale viene creato sul titolo del post e the_permalink(); la funzione si collega all’URL dell’intero post. Per mostrare un estratto del post, ho utilizzato un’altra funzione integrata di WordPress, l’estratto();.

Passaggio 7: elencare le tue categorie

Ora elencherò le categorie sulla sinistra della home page. Creerò diverse istanze di un div in stile con le classi Bootstrap e la funzione WordPress wp_list_categories();.

Incolla il codice seguente nel file index.php:

<div class="panel panel-default panel-body">
<div>
<div>

<ul>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>

</div>
</div>
</div>

Questo elencherà le categorie per nome con un piacevole effetto al passaggio del mouse.

Passaggio 8: mostra gli ultimi post e autori

Infine, mostreremo gli ultimi post del blog sulla home page. Ne inizieremo un altro div tag e sotto questo divuseremo simili mentre tecnica del loop che abbiamo usato nel post in primo piano, ma non la limiteremo post_query();.

<div>

<?php while(have_posts()) : the_post(); ?>

<h3><a href="https://www.cloudways.com/blog/wordpress-bootstrap/<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php the_excerpt(); ?></p>
<p> posted by <?php the_author(); ?>

<?php endwhile; wp_reset_query(); ?>

</div>

Funzioni di WordPress l’autore(); e recuperare il nome utente dell’autore del post. Possiamo usarlo per visualizzare dinamicamente il nome dell’autore in ogni post.

Una volta completato tutto con successo, avrai una pagina come quella che vedi nell’immagine mostrata sopra.

Aggiunta di Bootstrap a un tema WordPress esistente

Se stai utilizzando un tema WordPress che non è reattivo, puoi aggiungere Bootstrap per renderlo mobile-friendly. Puoi utilizzare WordPress e Bootstrap in due modi diversi.

Aggiunta di Bootstrap utilizzando una CDN

Puoi iniziare a utilizzare gli elementi Bootstrap semplicemente aggiungendo la sua CDN al tuo file header.php.

Nota: Questo metodo può causare problemi di compatibilità, quindi assicurati di eseguire un backup completo prima di aggiungere il codice seguente.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Puoi accedere al file header.php usando FTP o usando un plugin. Il codice sopra contiene le versioni ridotte dei file CSS e JS che offrono prestazioni migliori.

Aggiunta di Bootstrap all’interno di functions.php

In questo metodo, devi scaricare la libreria Bootstrap. Carica il file Bootstrap.min.css e il file Bootstrap-theme.min.css nella cartella CSS del tuo tema e carica il file Bootstrap.js nella cartella del tema chiamata “js” del tuo tema WordPress.

Ora accedi al tuo file functions.php per accodare questi script.

Aggiungi il seguente codice all’interno del tuo file functions.php.

function reg_scripts() {
    wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
    wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');

Puoi anche saltare la parte di caricamento e accodare direttamente la CDN di bootstrap in questo modo.

function my_scripts_enqueue() {
    wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, NULL, 'all' );

    wp_enqueue_script( 'bootstrap-js' );
    wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Salva il file e caricalo di nuovo sul server.

Qual è il prossimo?

Questo tutorial si concentra principalmente sulla creazione di un tema WordPress di base da un modello HTML e renderlo reattivo utilizzando Bootstrap 3.x. Nei post futuri, creerò più pagine come single.php, front-page.php e functions.php. Spiegherò anche come importare fogli di stile e JavaScript dal file functions.php.

Se hai bisogno di aiuto, pubblica un commento qui sotto e ti risponderò.