Checkmate a wordpress in 4 mosse con il tuo primo sito internet: il matto del barbiere alla moviola

Di solito c’è una certa avversione a imparare cose nuove visto che se sai fare una cosa velocemente in un modo (magari piccoli CMS dinamici con codeigniter) non hai nessuna necessità di andare a litigare con una tecnologia che non conosci, sembra quasi una inutile perdita di tempo! Invece costruire siti dinamici con WordPress è un esercizio molto utile, se non altro per uscire dalla zona di comfort, anche perché indirettamente si finisce per studiare la programmazione PHP orientata agli oggetti come effetto collaterale, che male non fa! Come sappiamo negli scacchi il numero minimo di mosse per vincere la partita è di quattro e per chi conosce la notazione algebrica è sintetizzato dai tratti tipo 1 e4 e5 2 Ac4 Cc6 3 Df3 Cd4 4 Df7 scacco matto, perchè in coordinazione donna e alfiere creano una minaccia diiretta sul punto più debole dello schieramento nemico, il pedone f7. Questo simpatico scacco matto definito del “barbiere” di solito è quello che si incassa mille volte da principianti quando si impara a giocare! Questo matto si può dare in diversi modi in apertura (anche portando la regina sulla casa h5) e ha successo perché l’avversario di nero trascura le minacce avversarie e non si difende. Per inciso nella sequenza 1 e4 g5 2 Ac4 f6?? 3 Dh5 e scacco matto il bianco vincerebbe in sole tre mosse come numero minimo ma questa sequenza è viziata da un palese atto di suicidio da parte del nero che non fa mosse logiche o quasi normali di sviluppo come nella linea precedente. Quindi adesso cerchiamo di capire come vogliamo dare scacco matto a wordpress con il nostro primo sito costruito da zero in sole 4 mosse! Sembra un impresa titanica che può funzionare solo se arriviamo a un compromesso: per sito non intendiamo una decina di pagine tutte piene di immagini e di contenuti ma solo una intestazione che ci manda un messaggio quando compare la pagina. Anche così non è semplice e bisogna dare per scontato il fatto che a lavoro preliminare, si sia già installato tutto l’ambiente in locale, compreso il database. La prima mossa da fare è andare all’ indirizzo:

C:\xampp\htdocs\nometuacartellapersitowp\wp-content\themes 

MOSSA NUMERO 1

creare il nome della cartella del tuo prima tema wordpress, noi l’abbiamo chiamata umbriaway consulting attraverso l’abbreviazione uwc, entrare nella cartella e completare la manovra creando due file che identificano il tema, quelli vitali che il sistema riconosce per inizializzare il tutto e cioé index.php (ma non index.html ovvio!) e style.css

MOSSA NUMERO 2

aprire un editor di codice (ATOM o VISUAL STUDIO CODE sono consigliati) e inizializzare il file CSS con l’intestazione classica segnalata dal codex che riporta all’ indirizzo https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/ il seguente codice template da customizzare spiegando che nella sezione ASPETTO del tema, il sistema riconosce i dati inseriti nel file style.css che si possono filtrare in base alle esigenze e quindi può caricare il tutto senza controindicazioni avendo riscontrato un format di dati per lui compatibili:

/*
Theme Name: Twenty Twenty
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Nel nostro caso per sintetizzare ci siamo limitati alla seguente versione definitiva e filtrata:

/*!
Theme Name: umbriaway
Theme URI: https://www.umbriaway.eu/
Author: FWD
Author URI: https://www.farwebdesign.com/
Description: Questo è il mio primo sito wordpress!
Version: 1.0
Text Domain: fwd
*/

Per completare la mossa numero due adesso dobbiamo costruire il nostro primo sito internet e quindi dobbiamo riempire di contenuti minimali la pagina index.php che diventerà in termini di risikata generosità un brutale snippet di codice:

<h1>Fantastico! Hai appena creato il tuo primo sito wordpress!</h1>

Bene siamo stati veramente tirchi, non abbiamo nemmeno inserito i tag canonici per impostare un documento HTML; ora ci manca l’immagine che il sistema riconosce per il caricamento del tema quindi…

MOSSA NUMERO 3

costruire una immagine rigorosamente di nome screeshot.png di dimensioni 1200 pixel x 900 pixel che andrà posizionata nella root del tema

MOSSA NUMERO 4

A questo punto non ci resta che mandare in esecuzione la mossa numero 4 e dare scacco matto gabbando wordpress e dimostrando la nostra superiorità momentanea di fronte alla macchina: digitare sul browser l’indirizzo localhost\nometuacartellapersitowp dopo aver attivato il tema dal pannello di controllo dall’ area amministrazione e con nostra grande sorpresa vedremo comparire a video la scritta magica:

WOW!

Tema attivato

Ecco raccontata così sembra che sia un gioco da ragazzi mettere in piedi un sito personalizzato con un tema ma non lo è affatto! Ricordiamoci che siamo riusciti a dare lo scacco matto del barbiere a wordpress in pochi minuti senza soffrire solo perché abbiamo riempito il nostro sito con una sola riga di codice che non è proprio la casistica migliore per rientrare nella definizione del titolo che recita improrpiamente “il tuo primo sito”, quando qui in realtà c’è una sola pagina (la index) e non abbiamo un gruppo coeso di link e documenti! A questo punto però abbiamo imparato che per creare un tema serve una cartella con nome univoco identificativo che al suo interno deve avere tre oggetti tutti rigorosamente chiamati come vuole il sistema e cioè index.php (provate a chiamarla index.html e ad attivare il tema e osservate che cosa capita!) , style.css e screenshot.png, immagine che di fatto si può anche omettere per l’attivazione ma che va comunque inserita. Abbiamo visto anche che il file style.css va compilato con le dichiarazioni tra i commenti per dare a wordpress l’opportunita di attivare il tema dopo averlo focalizzato correttamente nel pannello di gestione ASPETTO, TEMI.

web design umbria

Generare contenuti fittizi in WP e risolvere con la fuffa edulcorata un problema reale?

web design umbria
Generare contenuti fittizi? Si può fare!

I fatti sono sempre la cosa migliore e premiante da perseguire, in ogni settore. Abbiamo installato wordpress e dobbiamo generare contenuti e riempire con testi fittizi le nostre aree per fare dei test di sviluppo, che fare? Verrebbe da dire procedi uno a uno singolarmente e mutismo! Ma allora l’automazione tipica delle scienze informatiche a che serve? WP mette a disposizione plug-in che fanno il lavoro sporco senza arroganza, ossia parlano parlano ma non producono danni, anzi mettono in piedi veloci impalcature senza controindicazioni. Esistono numerosi plug-in che risolvono il problema dei test da fare per gli sviluppatori wordpress che hanno bisogno di operare su una cornice ricca di contenuti e hanno poca voglia e tempo per generare i classici titoli e testi fittizi, che siano post o pagine. Ne abbiamo testati diversi senza andare incontro alla nevrosi del “li provo tutti”. I plug-in possono avere nel tempo problemi di compatibilità con le versioni successive di WP e anche con la piattaforma che parsifica il codice (php). Al momento quelli segnalati sotto non mi hanno recato problemi:

Questo plugin semplifica la vita degli utenti di WordPress.
Ora gli utenti possono creare automaticamente articoli casuali per riempire il database. È possibile selezionare il numero di articoli, il tipo di articoli, lo stato degli articoli, l’autore degli articoli e l’immagine in evidenza.


Crea un pulsante sulle barre degli strumenti wysiwyg per aggiungere una quantità configurabile di testo Lorem Ipsum a un post, una pagina o qualsiasi altro tipo di post personalizzato.


FakerPress è un plugin per generare del contenuto fittizio per WordPress in modo pulito, ottimo per gli sviluppatori che hanno bisogno di eseguire dei test


è una raccolta completa di vari elementi visivi e funzionali, che puoi utilizzare nell’editor dei post, nei widget di testo o anche nei file modello. Utilizzando Shortcodes Ultimate puoi creare facilmente schede, pulsanti, caselle, cursori e caroselli, video reattivi e molto altro ancora.


L’uso è facile e intuito un pò per tutti i plug-in, fakepress e short codes ultimate generano un menù di gestione sulla sinistra, mentre gli altri due hanno la possibilità di settings direttamente da plug in o direttamente nel post (per wp-lorem-ipsum-generator). In ogni caso un sito vuoto in pochi secondi viene generato con decine di contenuti o immagini o altro messo a disposizione dal plug-in specifico. La cosa migliore è sperimentarli e vedere con quale di questi ci si trova meglio alla fine. A me è piaciuto senza nazionalismi il wp-lorem-ipsum di paternità italiana, semplice e veloce! Certo che però il codice snippet messo a disposizione da Short Codes Ultimate non scherza come alternativa, mette a disposizione tantissime gadget per riempire i nostri spazi bianchi, ma in generale questi visti mi hanno convinto per la loro efficacia, poi ognuno testando troverà il suo plug-in preferito!

Come approcciare lo studio del labirinto WORDPRESS senza rischiare un TSO e vivere sereni

wordpress è simile a un labirinto?

La mitologia greca del minotauro la conosciamo tutti. Ripassiamo da WIKI:

Figlio del Toro di Creta e di Pasifae, regina di Creta, era un essere mostruoso e feroce, con il corpo di un uomo e la testa di un toro che nacque per volere di Poseidone, il dio del mare, che intendeva punire il re di Creta, Minosse. Atene, sconfitta da Minosse, fu costretta a pagare un orribile tributo offrendogli ogni anno sette ragazzi e sette ragazze nel Labirinto di Cnosso…

wikipedia

Certo che paragonare WP da un NEWBIE al mostro sopra descritto sembra quasi un sacrilegio. Immaginiamo un aspirante web designer che soltanto perché conosce HTML5, CSS e sa implementare piccole parti di JS sulle sue pagine decida improvvisamente di svegliarsi un mattino e vendersi al mondo ICT come un web designer a tutti gli effetti! Ok arriva un cliente prestigioso e ti propina un sito da fare rigorosamente con WP e secondo certe specifiche di lay-out rigorose. Il cliente ci consegna il portatile e noi non facciamo altro che scaricarci sopra WP per configurare il tutto con un DB MySQL. Semplice no? E’ già ora di passare alla cassa. Peccato che il cliente non vuole un tema acquistato, ma uno rigorosamente inedito di sua concezione. Quindi avendo una bozza dell’ idea del cliente in mano siamo costretti a motorizzare quella versione sul nostro WP, come procedere? Ma come! Eravamo abituati a installare un tema o magari acquistare un tema, ma personalizzare una intera area di sviluppo è come andare a sbattere contro un muro con una macchina nuova! Di colpo tutte le nostre certezze vengono meno, noi che sapevamo districarci con i CSS e BOOTSTRAP e implementare componenti statici adesso ci ritroviamo di fronte a un labirinto insondabile e a un universo fatto di imponderabili misteri da risolvere. Ok il cliente salta ma ormai siete stati contagiati dalla tarantola, da WP! Fortunatamente WP ci mette a disposizione degli strumenti di supporto gratuiti come https://codex.wordpress.org/ e https://developer.wordpress.org/ !

Per tornare al tema, ho avuto la fortuna di conoscere un tizio che pubblica libri di ottima qualità e che in un suo profilo social si professa anche full-stack-developer. Bo! Se pubblichi tanti libri e anche di ottima qualità come fai ad essere riconosciuto anche come un full-stack-developer in ICT? Vabbè che adesso va di moda la public speacking edulcorata, anche a Roma, capisco che oggi vendere solo libri non basta. Quante vite hai avuto? Forse perchè uno dei suoi personaggi principali si da da fare con il computer e abbiamo in atto una identificazione tra autore ed eroe letterario? Fatto sta che prima di andare in giro a dire dal nostro CV che siamo anche “sviluppatori wordpress” occorre una enorme cautela perchè prima o poi i limiti formativi sulla materia saltano fuori! WP è un labirinto come quello descritto dalle mitologie greche e va conosciuto e sperimentato da autodidatti. Se non fai, non incontri problemi e non li risolvi. Certo è che il primo approccio con una tecnologia sconosciuta da assimilare è sempre traumatico e forse potremmo farla franca uno o due volte dichiarandoci massimi esperti mondiali di qualsiasi disciplina, ma dopo comunque sbattere contro un muro sarà inevitabile. Quindi non c’è altra strada che imparare WP sporcandosi le mani ed entrando nel suo mondo complesso attraverso un processo conoscitivo.

A detta di alcuni esperti, il problema degli autodidatti é che non hanno in testa il quadro generale, l’intera logica con cui quella tecnologia si muove. Fai funzionare le cose perchè vedi quel singolo dettaglio, ma scoprire che cosa c’è sotto la carrozzeria è un’ altra situazione! Esistono dei laureati in wordpress? Così siamo di fronte a un paradosso. Il punto di forza della piattaforma che è la sua completa fruibilità, diventa anche il suo punto debole. Quando ti avvicini a vedere sotto la carrozzeria non sai ancora come funziona il quadro generale e sei dentro a una nebbia fitta. La domanda allora sorge spontanea, da neofiti, è possibile imparare rapidamente i pezzi mancanti e vedere il quadro generale senza trascorrere eoni a miagolare nel buio? Agiscono nella tua indole induzioni limitanti che ti parlano in maniera negativa con frasi subdole del tipo: WP è troppo complesso, non lo imparerò mai! Allora devi fare un esercizio di ristrutturazione come lo chiamano in PNL. Domandati piuttosto: cosa ti impedisce di diventare uno sviluppatore WordPress esperto? Quindi il primo passo è iniziare a vedere il labirinto da fuori e avvicinarsi con la nostra curiosità in modo graduale

developer.wordpress.org

Prendiamo l’indirizzo https://www.farwebdesign.com/wp/category/western/ ci verrà restitutito un #page-content di conferma, nel senso che vediamo i contenuti! Ma se avessi digitato https://www.farwebdesign.com/wp/category/ufotranoi/ che risultati avrei ottenuto? WP segue una sua linea di azione per le ricerche. Prima cerca un file modello nella directory del tema corrente che corrisponda allo slug della categoria. Se lo slug della categoria è “ufotranoi”, WordPress cerca un file modello denominato category-ufotranoi.php. Se manca category-ufotranoi.php WP cerca l’ID della categoria che magari è 8, allora WP si mette a curiosare tentando di afferrare un file modello denominato category-8.php. Se manca category-8.php, WP cercherà un file modello di categoria generico, category.php o un modello di archivio generico, archive.php. Se manca category.php e anche archive.php, si atterrerà infine alla pagina 404.php o alla pagina principale del tema, la index.php

Ne deriva anche l’importanza della pagina index.php, che procedendo nella ricerca a ritroso, si pone come ultimo stadio e paracadute sicuro per il corretto funzionamento di WP e quindi è da consisderarsi di conseguenza file molto importante. Questo è in sintesi il processo di ricerca per lo slug della categoria /ufotranoi/ che non esiste e dà anche l’idea di quello che c’è dietro a WP che però non va focalizzato come un muro insormontabile, ma solo come un labirinto complesso -come quello dell’ antico palazzo di Cnosso dove ci è stato tramandato il MINOTAURO- da studiare! Interessante comunque il sito https://it.wikipedia.org/wiki/Cnosso per carpire di più sulle storie e sul modo in cui esse si propagano per necessità negli eoni. Approfondimenti precedenti sul tema WP all’ indirizzo: https://umbriawaytarget.wordpress.com/2021/01/26/microcosmo-e-macrocosmo-perche-lanatomia-di-un-tema-wordpress-con-i-suoi-template-files-ha-analogie-con-la-cupola-del-brunelleschi/ o anche https://umbriawaytarget.wordpress.com/2021/01/26/sviluppare-un-tema-con-wordpress-come-iniziare/

Progressbar dinamiche regolate da una funzione: come misurare le proprie competenze

FUNCTION PHP WOW!

All’ indirizzo http://umbriawayformazione.great-site.net/resume.html troviamo una bozza del mio nuovo CV, non male le barre sulla sinistra per misurare le competenze, peccato che siano tutte statiche e fatte digitando codice per ogni rappresentazione grafica! Va bene allora da aspiranti programmatori dobbiamo cercare di dinamicizzare e prova oggi e prova domani arriviamo a una evoluzione di questi tentantivi di autovalutazione con http://umbriawayformazione.altervista.org/uwcode/ajaxjson/ ma anche qui la fatica è tanta nel senso che il file json chè c’è dietro diventa lungo un KM! Ma allora come posso semplificare il lavoro? Come faccio a fare le cose celermente senza passare gli eoni a compilare base dati o documenti HTML? Niente paura le funzioni in PHP esistevano (FORSE) ancora prima che nascessi. Con le funzioni posso automatizzare i processi e renderli snelli e leggeri. Qui ad esempio abbiamo una funzione che accetta due parametri in ingresso personalizzabili a cui abbiamo dato dei valori di default e solo in fase di stampa a video possiamo decidere se lasciare intatti quei valori o cambiarli! Magia allo stato puro! Se andiamo alla pagina http://umbriawayformazione.altervista.org/uwcode/progressbar.php vediamo che in termini di prestazioni gli altri due lavori preliminari sono allo stato brado in confronto. Naturalmente abbiamo usato bootstrap perché le progressbar si possono colorare cambiando classe per cui avremo un bg-success per il verde, un bg-danger per le materie a rischio (rosso), un bg-warning per l’avvertimento in giallo e se vogliamo un blu per l’eccellenza con bg-primary. In questo modo potremmo decidere ad esempio:

bg-primary - eccellenza raggiunta nella materia
bg-success - sufficienza consolidata
bg-warning - attenzione sei molto vicino al sei ma non ci siamo ancora
bg-danger - per l'insufficienza totale e quindi occorrono interventi per risalire 

La gestione della percentuale risulta intuitiva osservando lo script:

<?php
function creaHtml($style='bg-primary', $percentuale='30') {
return '
<div class="progress">
<div class="progress-bar '.$style.'" role="progressbar" style="width:'. $percentuale.'%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
';
}
?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello progressbar!</title>
  </head>
  <body style="margin:100px">
    <h2>Progressbar dinamiche per criteri di autovalutazione</h2>
<br>
barra statica 
<div class="progress">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br><br><br><br>
    <h2>Progressbar gestite da un funzione dove si inseriscono due parametri (il colore e l'ampiezza)</h2>
<br>
<?php
echo 'html<br>';
echo creaHtml('bg-warning','80'); 
echo '<br><br>';
echo 'js<br>';
echo creaHtml('bg-success', '50'); 
echo '<br><br>';
echo 'angular<br>';
echo creaHtml('bg-danger', '30'); 
echo '<br><br>';
?>

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

  </body>
</html>

Tengo un valore 30 di default che se non specificato nei parametri viene applicato, utilizzo in fase di costruzione della funzione delle variabili che mi funzionano da segnaposto per andare a coprire i valori dinamici che voglio occupare all’ interno del codice statico, e ho anche definito un colore di default che è bg-primary. Utilizzando quindi la potentissima opzione RETURN all’ interno di una funzione:

<?php
function creaHtml($style='bg-primary', $percentuale='30') {
return '
<div class="progress">
<div class="progress-bar '.$style.'" role="progressbar" style="width:'. $percentuale.'%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
';
}
?>

mi consente di ottenere un risultato a dir poco strabiliante e alla fine la soluzione adottata per mettere in piedi criteri di autovalutazione all’ indirizzo http://umbriawayformazione.altervista.org/uwcode/progressbar.php batte le concorrenti http://umbriawayformazione.great-site.net/resume.html e http://umbriawayformazione.altervista.org/uwcode/ajaxjson/ 3 a 0 senza l’ausilio del VAR!

JSON come base dati

Microcosmo e Macrocosmo: perché l’anatomia di un tema wordpress con i suoi template files ha analogie con la cupola del Brunelleschi

Dopo aver visto la parte di preparazione all’ indirizzo https://umbriawaytarget.wordpress.com/2021/01/26/sviluppare-un-tema-con-wordpress-come-iniziare/ dal sito underscores.me abbiamo ottenuto un pacchetto di file per costruire il nuovo tema che abbiamo definito come fwd, questo blocco lo abbiamo scompattato. La cartella “fwd” è quella del tema che andremo a creare e che ci ritroveremo nella directory di WordPress in:

/wp-content/themes/fwd

A questo punto però da NEWBIE abbiamo un problema: capire come i singoli file permettono l’interazione complessiva di WordPress che è una operazione con il dovuto rispetto da accostare alla costruzione della cupola di Firenze a fine ‘400, nel senso che il microcosmo offerto dalle dipendenze gerarchiche di WP è un labirinto che ha a che fare comunque con la complessità di una costruzione architettonica. Quindi il compito che ci aspetta è capire che cosa fanno i singoli file, che cosa visualizzano, quando non visualizzano che cosa richiamano e che cosa c’è al loro interno per farli funzionare. Un primo approccio conoscitivo sulla struttura complessiva di un tema è doveroso per avere ben chiaro ad esempio che se tolgo l’accoppiata index.php e lo style.css associato e magari per completare la frittata anche un function siamo davvero alla canna del gas! Quindi altro che chiacchiere e distintivo, andiamo subito ad analizzare il quid. I template files sono i files principali di un tema WP. Da definizione accademica un Template files descrive il modo e il luogo della corretta visualizzazione dei nostri contenuti. Questi file contengono codice PHP e HTML e impartiscono le istruzioni necessarie per ogni tipologia di file per visualizzare di volta in volta il contenuto richiesto seguendo certi criteri di priorità. Per questo si parla di gerarchia e di dipendenze. La prima rivelazione è che ogni file si occupa di un compito specifico. Il file page.php non potrà mai visualizzare i post di un blog. La cosa migliore è fare delle prove direttamente sul campo, andiamo su IMPOSTAZIONI -> LETTURA e impostiamo una pagina statica.

pagina statica

Adesso andiamo su page.php e aggiungiamo un H1 per vedere se questa pagina è davvero responsabile della visualizzazione del contenuto della pagina statica:

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package fwd
 */

get_header();
?>
<h1>Sei tu che fai accendere la pagina statica mio caro file page.php?</h1>

	<main id="primary" class="site-main">

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

			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) :
				comments_template();
			endif;

		endwhile; // End of the loop.
		?>

	</main><!-- #main -->

<?php
get_sidebar();
get_footer();

andiamo a vedere che cosa succede ora andando a osservare la mia home page:

page.php

Per modificare i file si può andare anche su ASPETTO -> EDITOR del tema ma in questo caso noi abbiamo aperto tutta la cartella di lavoro su visual studio code. Quindi siamo già arrivati a una conclusione, la pagina statica viene visualizzata con un LOOP, caratterizzato da un ciclo WHILE. Da notare come l’inclusione di header e footer e della sidebar siano vitali con l’incipit GET per visualizzare correttamente la pagina. In ogni caso abbiamo già fatto un notevole passo in avanti, abbiamo capito come intervenire per modificare nel caso specifico una pagina statica, ma potremmo fare lo stesso anche per gli altri file. Proviamo a vedere la differenza con un file come single.php che già dal nome ci dice che gestisce come unico compito il singolo post, vediamo come diventa dopo l’inserimento della pagina h1:

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package fwd
 */

get_header();
?>

	<main id="primary" class="site-main">
<h1>Sei tu che fai accendere la pagina mio caro file single.php?</h1>
		<?php
		while ( have_posts() ) :
			the_post();

			get_template_part( 'template-parts/content', get_post_type() );

			the_post_navigation(
				array(
					'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'fwd' ) . '</span> <span class="nav-title">%title</span>',
					'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'fwd' ) . '</span> <span class="nav-title">%title</span>',
				)
			);

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) :
				comments_template();
			endif;

		endwhile; // End of the loop.
		?>

	</main><!-- #main -->

<?php
get_sidebar();
get_footer();

che cosa ottengo a video?

single.php

A questo punto dobbiamo riportare indietro la lancetta sui TEMPLATE FILES e rispondere a delle domande basiche tipo: ma quali sono i principali file che costituiscono un tema? E perché un tema lo puoi vedere solo se PHP trova nella cartella il file index.php con il relativo CSS? I file dove dobbiamo spingere l’analisi e la nostra curiosità sono:

index.php, style.css, header.php, footer.php, functions.php e sidebar.php

di fatto chi smanetta con il cemento del web (html per creare strutture) sa bene quale significato esprimano i termini solo dal nome per cui sappiamo che semanticamente con HTML5 abbiamo delle aree specifiche che dicono ai moti di ricerca già chi sono e che cosa fanno. Quindi abbiamo una testata, un footer, una barra laterale etc etc. Per capire la vastità delle dipendenze e dei richiami delle funzioni facciamo un esperimento al contrario, induttivo. Andiamo sulla directory template-parts e inseriamo un h1 nel content.php. Che cosa succederà andando a visualizzare il sito?

<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package fwd
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
	<h1>vediamo se ho ottenuto una modifica</h1>
		<?php
		if ( is_singular() ) :
			the_title( '<h1 class="entry-title">', '</h1>' );
		else :
			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
		endif;

		if ( 'post' === get_post_type() ) :
			?>
			<div class="entry-meta">
				<?php
				fwd_posted_on();
				fwd_posted_by();
				?>
			</div><!-- .entry-meta -->
		<?php endif; ?>
	</header><!-- .entry-header -->

	<?php fwd_post_thumbnail(); ?>

	<div class="entry-content">
		<?php
		the_content(
			sprintf(
				wp_kses(
					/* translators: %s: Name of current post. Only visible to screen readers */
					__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'fwd' ),
					array(
						'span' => array(
							'class' => array(),
						),
					)
				),
				wp_kses_post( get_the_title() )
			)
		);

		wp_link_pages(
			array(
				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'fwd' ),
				'after'  => '</div>',
			)
		);
		?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<?php fwd_entry_footer(); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->

Ossia ho ottenuto bensì 4 modifiche inserendo la stringa tra i tag h1 “vediamo se ho ottenuto una modifica”. Questo perchè questa pagina viene richiamata dalla index.php a un livello superiore con l’istruzione:

get_template_part( 'template-parts/content', get_post_type() );
modifiche ripetute per ogni articolo agendo sul content!

Il discorso si fa complesso ora come i problemi legati alla costruzione della cupola dell’ incipit perchè di fatto la index delega la ricerca di ogni tipo di contenuto diverso per tipologia e se nello SLUG, ossia una stringa composita contrassegnata da un trattino non salta fuori la seconda parte, allora la scelta ricade sul content.php presente dentre la cartella template-parts una volta esaurita la ricerca dei post_type.

Si è voluto solo accennare alla vastità di implicazioni dei tempate files, basta scavare appena sotto la sabbia per scoprire mondi complessi da scoprire, certamente la cosa più importante è il CODEX, un punto di riferimento indispensabile, un faro nella notte, la bibbia dello sviluppatore WP, indirizzo https://codex.wordpress.org/Main_Page; qui ad esempio se inserissi nel campo di ricerca get_post_type() ottengo numnerose delucidazioni su cosa fa la funzione con esempi, magari allunando su pagine come https://developer.wordpress.org/reference/functions/get_post_type/

Sviluppare un tema con wordpress: come iniziare

scegli un editor

Il tema non è quello serafico dato dalla maestra a Pierino con la dicitura “descrivi la più bella giornata della tua vita” e magari con una frase di svolgimento come: quando il Torino calcio è riuscito a vincere una partita nel 2021 non mi sembrava vero ed ero felice! Si fa presto a dire sviluppo un tema! Ma quante sono le operazioni preliminari da fare prima di concludere? Inutile perdere tempo a rispondere “tante”. Intanto c’è da andare a recuperare gli editor per sviluppare il codice, eccone un paio, per visual studio code procedere al download su https://code.visualstudio.com/ o se preferito ATOM, indirizzo https://atom.io/; a questo punto bisogna scaricare in locale wordpress, quindi andare all’ indirizzo https://it.wordpress.org/download/ e procedere. Poi si attiva XAMPP in modo da prepararci per l’installazione e si copia il contenuto scaricato dentro la cartella HTDOCS. Vado sul database phpmyadmin e creo un database. A questo punto si lavora sul file di configurazione rinominandolo e togliendo il sample per farlo diventare semplicemente config.php. Dentro metto i parametri di collegamento al DB e di installazione con il nome utente e password e nome della macchina collegata (in genere localhost, root, root e nomeDBscelto). Fatto questo si cerca in rete un generatore API di KEY per wordpress ad esempio: https://api.wordpress.org/secret-key/1.1/salt/ e si copiano i valori tipo:

define('AUTH_KEY',         '%y{|T+;.9K~T$e.e=os``C9z/.7fhN#)#l,Zr+G6n4o(Z:)$yI!Hu(V6</I?@557');
define('SECURE_AUTH_KEY',  '  >Y+aMpXg){d,LS2)-%rhiE3m!6B4p0Ch+<J4,CY5OBE4++%[@?uL~j<p9b90/a');
define('LOGGED_IN_KEY',    'JJ&rLUf/S0%:+2o JnxCB.869h}.ymkU-_fss}=LY T8@y8U|Sc?$35`7!cRrVsa');
define('NONCE_KEY',        'xp,p`QygivXykGm2>5pzirH-sG$58.ECu^!DXHNh-,rjb{-^PC7CiuDrA_Fy6!;(');
define('AUTH_SALT',        'c~ZRCwjN*SwCcL!TrbdbVXhy+;$4yh1>/l83[X}hV>yMc&,xq+LiW[&/UP* MLoG');
define('SECURE_AUTH_SALT', 'w>]MF|/0TByL/CGn[9#T:.#n-r[[jazF(Z+#eMXqLA31*ZFJ{(z%o)%hhjmCr>)@');
define('LOGGED_IN_SALT',   '6Ll8d-~9jegP3_p|`6|R?Ae.$@#~-F1,Fe}XMA.[$U>*md6a.xo2!VOnG?D7dEsr');
define('NONCE_SALT',       'hOI+a0[TMQ3jM3<4sGL%D&E!GF{9@#g6!W}&{7,+D`N1avm;$R4<|Y-2ZfGLlI=)');

Le Security Keys di WordPress o Secret Keys, vengono utilizzate per aumentare la sicurezza del CMS nell’accesso al back end, cioè al pannello di amministrazione. Chiamate anche Authentication Unique Keys and Salt (in italiano Chiavi Univoche di Autenticazione) costituiscono una funzione di sicurezza per le password e le password di hashing in quanto garantiscono una migliore codifica delle informazioni memorizzate nei cookie degli utenti. Le security keys di WordPress possono essere generate automaticamente da un generatore online e devono essere configurate nel file wp-config.php. Le security keys di WordPress possono essere modificate in qualsiasi momento. Ricordiamoci però che modificandole invalideremo i cookie di WordPress memorizzati nei login, costringendo gli utenti che accedono al sito tramite una password a ripetere il login per ottenere l’autenticazione

Memex

ora tutto è pronto per l’installazione, basta andare su localhost e puntare alla cartella di WP che mostrerà una procedura guidata, semplice e intuitiva, compilare i campi, scegliere pwd e inserire mail e installare! Il nostro wordpress è pronto! Ma fatto questo non abbiamo ancora fatto nulla perché ci serve un blocco base di file per inserire all’ interno della cartella wp-content/theme, il nostro nuovo tema da sviluppare. Questo finto problema si risolve andando su siti come https://underscores.me/ e generando il pacchetto di dati con il nome scelto da collocare nel wp-content, ora sì che possiamo dare un occhiata al blocco di file! Prima però creiamo qualche post di prova variabile per lunghezza e contenuto dal sito con il template inserito di default, perché abbiamo bisogno di districarci sul modo in cui WP cattura le informazioni con relazioni gerarchiche che ora ci sfuggono. Quindi andare sul LIPSUM GENERATOR, sito https://www.lipsum.com/ e con la più classica delle operazioni dell’ informatico procedere con il copia e incolla! A questo punto siamo nel vivo della discussione: come visulizza pagine e post WP? E’ vero che ha una pagina base per tutti i tipi di visualizzazione e che se non trova le sue informazioni delega le viste alle pagine di livello superiore che hanno dipendenze? Come gestisce gli SLUG WP? e i file footer, header e sidebar con estensione PHP sono importanti? E a che serve il function? Ma è vero che l’index è un file nevralgico? Insomma tanto lavoro da fare e cose da chiarire in uno dei prossimi POST!

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

Su ↑