Come integrare elementi BOOTSTRAP nel nostro tema minimalista CAPABLANCA in WordPress!

come integrare elementi bootstrap in WP

Continuano i nostri esperimenti didattici all’ indirizzo: https://www.umbriaway.it/wp/ sul tema minimalista Capablanca che stiamo tirando su con un approccio BOTTOM-UP. Questa volta approfondiamo l’integrazione a BOOTSTRAP senza l’uso di plug-in con il metodo naturale! Parliamo quindi di ENQUEUE, una parolaccia molto brutta che ci aiuterà a inserire elementi del framework BOOTSTRAP nella pagina. Accodare in inglese si dice enquee e quindi se nel file function.php dovessimo aggiungere una funzione come:

function uwc_files(){
wp_enqueue_style('google_font' ,  '//fonts.googleapis.com/css?family=Montserrat:400,700');
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('bootcss', '//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css');
wp_enqueue_script('bootjs','//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js');
wp_enqueue_style('uwc_style' , get_stylesheet_uri(), NULL , microtime());
}
add_action('wp_enqueue_scripts' , 'uwc_files');

che cosa andremmo ad ottenere?

Prima soffermiamoci un attimo sull’ istruzione add_action, in quanto nella metafora della fabbrica che sempre portiamo avanti per capire l’universo WordPress(WP) questa azione rappresenta un famoso HOOK, ossia il gancio che sopra le catene di montaggio transita per spostare elementi da assemblare e completare le lavorazioni. A questo punto urge spiegare la stringa:

wp_enqueue_style('uwc_style' , get_stylesheet_uri(), NULL , microtime());

Hai presente quando fai delle modifiche ai CSS e andando sulla pagina non le vedi? E perchè ci sono delle dipendenze con la cache che vanno annullate e il codice di cui sopra con NULL e MICROTIME consente una piena autonomia nella visualizzazione senza inutili sclerate sul perchè non vedo quando invecxe dovrei vedere. Che accade, non va il CSS? Andando su ISPEZIONA e apro il documento alla voce che ci interessa mi accorgo che non vi è un ricarico ex-novo del documento (indagando sulla cache NETWORK) perchè si vede che il file CSS viene espressamente preso dalla cache con tanto di dicitura. Con la stringa di cui sopra evito questo processo in automatico. il NULL significa non devi dipendere da nulla e il MICROTIME che è una funzione di PHP che azzera la cache caricando in millesecondi. Devo quindi lavorare in tempo reale e inserendo lo script ottengo lo scopo. Adesso possiamo proseguire:

Supponiamo che vada ad aggiungere il seguente codice nel template della pagina (attenzione non del post!) che è page.php:

   <!-- Marketing messaging and featurettes
      ================================================== -->
      <!-- Wrap the rest of the page in another container to center all the content. -->

      <div class="container marketing">

        <!-- Three columns of text below the carousel -->
        <div class="row">
          <div class="col-lg-4">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Heading</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
          </div><!-- /.col-lg-4 -->
          <div class="col-lg-4">
            <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            <h2>Heading</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
          </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->

Salviamo e vediamo l’effetto che fa.

seo umbria
wow!

Se vedo tutto corretamente significa una cosa sola, che i miei collegamenti a bootstrap sono stati configurati correttamente essendo abituati alla programmazione tradizionale dove tutti i link, script e css vengono inseriti o al fondo del body per consentire prima l’intero caricamento della pagina o all’ interno della sezione HEAD, qui non subito ci si focalizza sul function.php che invece è il cervello che comanda! WP è una azienda con direttive tutte sue particolari che bisogna conoscere e certo che se dovessimo confrontare tecnologie diverse come ad esempio CODEIGNITER MVC con questo modo di lavorare su WP troveremo un solo comune denominatore che lega il tutto: PHP che impone la sua sintassi all’ interno di ogni diverso CMS in quanto istruzioni condizionali, array e cicli while sono universali.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Crea un sito o un blog gratuito su WordPress.com.

Su ↑

%d blogger hanno fatto clic su Mi Piace per questo: