WordPress e l’inedito tema Capablanca minimalista: evoluzioni, come personalizzare la pagina 404

costruisci la tua pagina personalizzata 404.php

All’ indirizzo https://umbriawaytarget.wordpress.com/ ci sono numerosi articoli didattici che seguono la filosofia del “chi ha la pretesa di insegnare, in realtà impara“, infatti sono più consigli utili per chi ha in testa di migliorare il suo profilo di wordpress developer riferito all’ autore medesimo! Tuttavia l’intera metafora della factory regge magnificamente PER TUTTI e non solo per l’autore dei post perchè possiamo immaginarci quel famoso ordine fatto dall’ utente all’ interno di un’ area produttiva che non è altro che il SERVER paragonato al sito dell’ industria, la location. Un ordine che passa attraverso un URL e questo prodotto finito in realtà muove tutte le risorse interne dell’ azienda che con i carrelli che corrono a fianco delle catene di montaggio si danno molto da fare per recuperare tutte le risorse richieste da assemblare. Tornando al nostro primo tema ribattezzato CAPABLANCA per il suo stile minimalista all’ indirizzo https://www.umbriaway.it/wp/, se digitiamo una URL assente (che nella metafora della factory era “voglio acquistare una 500”) tutto il sistema complesso di pesi e contrappesi interno a wordpress non fa altro che andare a cercare in prima istanza la pagina 404.php e se non dovesse trovarla ripiega alla pagina numero uno che sta in testa a tutti e cioè alla index.php. Questo ci dice che nel caso non esistesse all’ interno del nostro blocco di file del tema una pagina 404.php dobbiamo comunque crearla. Tornando al mondo reale digitando una risorsa assente sul sito indicato compare un messaggio di risorsa mancante e fin qui ci siamo, da dove salta fuori quel messaggio, nello specifico:

ops...non ho trovato articoli!

dalla index.php! Infatti il sistema non trovando la pagina 404.php si affida al supporto naturale offerto dalla sua prima porta di accesso, la index.php che al suo interno avrà una istruzione condizionale che dice di stampare a video un messaggio di errore nel caso che non si fossero articoli con quel tipo di contenuto cercato dal WIDGET. Ma in questo caso non ho cercato un articolo, ma una risorsa specifica sulla barra degli indirizzi del browser! Qualcosa non quadra! Quindi si crea come prima cosa la pagina 404.php, poi il passo successivo è modellarla:

<?php
//Template Name: 404 Page
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php bloginfo('name'); ?></title>
<style>
a:link {color: yellow;}
a:visited {color: #ff9900;}
a { text-decoration:none; }
</style>
</head>
<body style="font-size:16px;font-family:verdana;background: url(https://www.tuodominio.it/tuadirectorywp/wp-content/recipiente/2021/01/nomefile.jpg) no-repeat center center fixed;">

<!-- Corpo articolo-->
    <section>
        <div style="color:white;margin:4%">

<div>
<h1><?php _e('La risorsa che cercavi è latitante' , 'uwc'); ?></h1>
<h2><?php _e('ma non ti lasciamo in braghe di tela come dicono a Padova<br>TORNA A CASA <a href="https://www.umbriaway.it/wp/">HERE</a> oppure ecco dei suggerimenti:' , 'uwc'); ?></h2>
<div class="row">

<div>
  <?php the_widget('WP_Widget_Recent_Posts' , 'title=Recent Posts' , 'before_title=<h4>&after_title=</h4>'); ?>
</div>

<div>
  <?php the_widget('WP_Widget_Pages' , 'title=Le mie pagine' , 'before_title=<h4>&after_title=</h4>'); ?>
</div>

<div>
  <?php the_widget('WP_Widget_Tag_Cloud' , 'title=Le nuvola del tag' , 'before_title=<h4>&after_title=</h4>'); ?>
</div>

<div>
  <?php the_widget('WP_Widget_Categories' , 'title=Naviga nelle categorie' , 'before_title=<h4>&after_title=</h4>'); ?>
</div>

  </div>

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

</div>	
</body>
</html>

Qui si è voluto spogliare la pagina di tutto lo schema base presente ad esempio nella index, dove solo per dirna una, avevamo la funzione che all’ interno dell’ HEAD attivava tutta una serie di link e collegamenti canonici per esempio a framework come bootstrap. Qui nella 404.php personalizzata si è voluto togliere l’impaginazione tradizionale per differenziare la pagina AIRBAG da tutte le altre (parliamo sempre della 404.php) e renderla ULTRA-MINIMALISTA come era nell’ intenzione dell’ assegnazione del NOME. Da notare le funzioni the_widget recuperabili sempre dalla nostra bibbia https://codex.wordpress.org/Main_Page che agganciano i WIDGET che desideriamo sulla pagina. Il lavoro fatto qui è davvero molto spartano e in un ottica professionale a gioco corretto era più elegante utilizzare per esempio oltre wp_head per agganciare le risorse anche il set di icone alternativo a font-awesome recuperabile all’ indirizzo https://developer.wordpress.org/resource/dashicons/#admin-network e messo a disposizione dallo stesso wordpress per arricchire le nostre creazioni. In ogni caso abbiamo lavorato per colmare una lacuna, quella cioè di garantire un paracadute all’ utente con una pagina 404 che non esisteva e abbiamo portato a casa il risultato, anche se spartano. Da notare anche il blocco CSS aggiunto nell’ HEAD per rendere almeno i LINK più piacevoli e coerenti con la grafica DARK.

Come costruire il primo plug-in personalizzato in wordpress senza nozioni applicando il Colpo SplitCode della Sacra Scuola di Hokuto

Definire la missione

Personalizzare l’area admin con aforismi tematici


Anche senza essere Ken Shiro e sfoderare i suoi numerosi colpi segreti, c’è un modo semplice di esordire come sviluppatore wordpress mettendo in pista il tuo primo plug-in senza dover sclerare con l’approccio del tutto e subito (non puoi travasare un intero oceano di conoscenza WP con un bicchiere d’acqua in un giorno). Per sviluppare i plug-in bisogna conoscere prima tutto il contesto in cui viene fatto nascere, le funzioni di base, le dinamiche della fabbrica wordpress, come vengono assemblati i materiali sulla catena di montaggio etc etc , quindi solo il conte di Cagliostro potrebbe cimentarsi in una simile impresa con il supporto “della scienza dell’ alambicco” nel suo background culturale. Eppure no! Anche noi semplici novizi possiamo studiare il meccanismo del famoso file dolly.php messo a disposizione nativamente nel pacchetto di file scaricabili, per personalizzare la nostra prima applicazione, con tanto di nome e cognome a supporto! Come fare?

web design umbria
wow

Partiamo dal ciao Dolly e dalle sue origini jazz, all’ indirizzo https://it.wordpress.org/plugins/hello-dolly/ abbiamo la spiegazione del plug-in, che nasce come tributo a famose parole pronunciate da un grande jazzista. Questo semplice file di fatto fa scorrere pezzi della canzone in alto a destra sulla barra dell’ amministratore, quando ovviamente siamo loggati nell’ area back-end. Però metti che io sia un architetto, o uno scrittore o uno scacchista e mi piacerebbe visualizzare quello che dico io per avere delle associazioni con la mia attività, o anche solo come approvvigionamento motivazionale o culturale, come potrei procedere?

web design umbria
superwow

Copiare per copiare serve a ben poco quando hai come obiettivo quello di essere autonomo per cui vediamo subito lo script pezzo per pezzo prima di assemblarlo alla fine. C’è da dire che il ciao dolly nativo di WP funziona dalla root della famosa cartella plugins che tutti noi sappiamo individuare all’ interno della cartella content, ma in questo caso vogliamo migliorare l’accrocchio e personalizzarlo per cui di fatto abbiamo creato una directory dentro la cartella plugins e abbiamo riversato al suo interno il file cambiando nome, battezzandolo chess.php dove l’obiettivo che ci poniamo è quello di far transitare in alto a destra famosi aforsimi che hanno fatto la storia degli scacchi. vediamo quindi come si parte e lo facciamo dal codex dove arriviamo alle info che ci servono digitando intestazione plug-in wordpress nei motori di ricerca, troveremo in giro in rete qualcosa di simile:

/**
 * Plugin Name:       My Basics Plugin
 * Plugin URI:        https://example.com/plugins/the-basics/
 * Description:       Handle the basics with this plugin.
 * Version:           1.10.3
 * Requires at least: 5.2
 * Requires PHP:      7.2
 * Author:            John Smith
 * Author URI:        https://author.example.com/
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       my-basics-plugin
 * Domain Path:       /languages
 */

questo serve al pannello di controllo per attivare o disattivare il tema dopo averlo identificato correttamente come un componente esterno. Nell’ area https://umbriawaytarget.wordpress.com/ il cms è simile a una fabbrica e il plug-in nella metafora assume il tema del meccanismo esterno che deve essere importato per ottenere un diverso tipo di produzione, con il riferimento specifico al famoso motore a razzo da sfornare alla fine dei processi sulle linee di produzione, in una azienda che di fatto invece produce solo motori per seicento. Quindi nel nostro plug-in scriveremo qualcosa tipo:

<?php
/**
 * @Scacchi al Top!
 * @version 1.0
 */
/*
Plugin Name: Best Chess
Plugin URI: https://www.umbriaway.it/wp
Description: Gli scacchi sono una risorsa, un mare dove indifferentemente un moscirino può fare il bagno con un elefante, seguendo un famoso aforisma del matematico Dedekind
Author: Faraoni Enrico
Version: 1.0
Author URI: https://www.farwebdesign.com
*/

a questo punto mi creo una funzione

function chess_get_aforismi() {
$aforismi = "

e al suo interno inserisco tutte le frasi critiche per chiudere poi il tutto con:

";



	// Here we split it into lines.
	$aforismi = explode( "\n", $aforismi );

	// And then randomly choose a line.
	return wptexturize( $aforismi[ mt_rand( 0, count( $aforismi ) - 1 ) ] );
}

in PHP esiste una funzione che esplode tutto il contenuto inserito nella funziona e la randomizza, con la graffa finale abbiamo chiuso la nostra prima funzione! Adesso dobbiamo estrarre dal mucchio e stampare a video, quindi incorporiamo la funzione precedente alla nuova che deve mostrare i risultati a video e lo fa andando ad assegnare il tutto a una zona specifica identificata come id=”chess”, che diventerà l’oggetto di una stilizzazione successiva

function best_chess() {
	$chosen = chess_get_aforismi();
	$lang   = '';
	if ( 'it_' !== substr( get_user_locale(), 0, 3 ) ) {
		$lang = ' lang="it"';
	}

	printf(
		'<p id="chess"><span class="screen-reader-text">%s </span><span dir="ltr"%s>%s</span></p>',
		__( 'quote from world chess network:' ),
		$lang,
		$chosen
	);
}

e ora viene il bello, perchè come si fa a rendere eseguibile tutta questa roba nel complesso labirinto WP? Con:

add_action( 'admin_notices', 'best_chess' );

dove best_chess non ha bisogno di commenti perchè sto solo invocando una funziona, mentre admin_notices è una funzione specifica che consente a video la stampa di un quid quando si è loggati da amministratori: https://developer.wordpress.org/reference/hooks/admin_notices/ anche add_action è molto importante e sempre insistendo nella metafora della fabbrica possiamo paragonarlo a una sorta di gancio che arriva sopra la nostra catena di montaggio e preleva magari una parte di carrozzeria per portare il tutto altrove per la verniciatura, in questo caso è la funzione che rende eseguibile tutto il nostro lavoro precedente: https://developer.wordpress.org/reference/functions/add_action/ , abbiamo quasi finito non ci resta che modellare la nostra stilizzazione con i CSS:

function chess_css() {
	echo "
	<style type='text/css'>
	#chess {
		color:blue;
		float: right;
		padding: 4px 8px;
		margin: 0;
		font-size: 14px;
		line-height: 1.5;
		background-color:#ccc;
		border-top: 0px solid black;
		border-right: 1px solid black;
		border-bottom: 1px solid black;
		border-left: 1px solid black;
	}
	.rtl #chess {
		float: left;
	}
	.block-editor-page #chess {
		display: none;
	}
	@media screen and (max-width: 782px) {
		#dolly,
		.rtl #chess {
			float: none;
			padding-left: 0;
			padding-right: 0;
		}
	}
	</style>
	";
}

add_action( 'admin_head', 'chess_css' );

Anche qui come sopra admin_head e add_action sono molto importanti, dove il primo identifica la barra di stato admin nera che compare quando si è loggati mentre add_action è il famoso gancio che scende dal cielo per spostare e finire il lavoro che nel caso specifico è addizionare le mie regole di stile alla parte di HTML che ha un identificativo univoco e cioé id=”chess” ; a questo punto abbiamo il nostro plug personalizzato e abbiamo visto l’importanza degli HOOK (tradotto letteralmente GANCIO) per esempio quandi si inizia a vedere WP da dentro. Il risultato finale è a dir poco strabiliante e a questo punto chiunque da ZERO, usando il trucco di KEN SHIRO del colpo spaccaHTML (inedito) può ottenere grandissime soddisfazioni dai suoi aforismi liberamente in circolo nel pannello amministratore del suo CMS! Riassumendo ecco l’intero codice:

<?php
/**
 * @Scacchi al Top!
 * @version 1.0
 */
/*
Plugin Name: Best Chess
Plugin URI: https://www.umbriaway.it/wp
Description: Gli scacchi sono una risorsa, un mare dove indifferentemente un moscirino può fare il bagno con un elefante, seguendo un famoso aforisma di Dedekind
Author: Faraoni Enrico
Version: 1.0
Author URI: https://www.farwebdesign.com
*/

function chess_get_aforismi() {
$aforismi = "

frasi da inserire  rispetto a un argomento specifico, ognuna su  singola riga

";

	// Here we split it into lines.
	$aforismi = explode( "\n", $aforismi );

	// And then randomly choose a line.
	return wptexturize( $aforismi[ mt_rand( 0, count( $aforismi ) - 1 ) ] );
}

// This just echoes the chosen line, we'll position it later.
function best_chess() {
	$chosen = chess_get_aforismi();
	$lang   = '';
	if ( 'it_' !== substr( get_user_locale(), 0, 3 ) ) {
		$lang = ' lang="it"';
	}

	printf(
		'<p id="chess"><span class="screen-reader-text">%s </span><span dir="ltr"%s>%s</span></p>',
		__( 'quote from world chess network:' ),
		$lang,
		$chosen
	);
}

// Now we set that function up to execute when the admin_notices action is called.
add_action( 'admin_notices', 'best_chess' );

// We need some CSS to position the paragraph.
function chess_css() {
	echo "
	<style type='text/css'>
	#chess {
		color:blue;
		float: right;
		padding: 4px 8px;
		margin: 0;
		font-size: 14px;
		line-height: 1.5;
		background-color:#ccc;
		border-top: 0px solid black;
		border-right: 1px solid black;
		border-bottom: 1px solid black;
		border-left: 1px solid black;
	}
	.rtl #chess {
		float: left;
	}
	.block-editor-page #chess {
		display: none;
	}
	@media screen and (max-width: 782px) {
		#dolly,
		.rtl #chess {
			float: none;
			padding-left: 0;
			padding-right: 0;
		}
	}
	</style>
	";
}

add_action( 'admin_head', 'chess_css' );
web developer umbria
ancora wow

Da notare che questo file non è propio uguale all’ originale perchè sono state applicate delle impercettibili personalizzazioni (CSS) che nella pratica si notano subito. Per dubbi e perplessità, malfunzionamenti, basta risolverli apoggiandosi al famoso file nativo dolly.php

Integrare elementi del framework bootstrap nel codice sorgente del tema wordpress, istruzioni per l’uso

All’ indirizzo https://www.umbriaway.it/wp/ vediamo uno slider, un componente del framework bootstrap basico, senza opzioni di scorrimento, felicemente lavorare all’unisono con tutto il resto dei comparti produttivi della FACTORY. Ci sono molti plug- in che potrebbero soperrire a queste implementazioni estetiche (minimalismo va bene, ma senza grafica l’utente non trova il modo di restare sul nostro sito) ma la cosa migliore è integrare tutto direttamente nel codice nativo. Qui mi limiterò a suggerire la soluzione per rispettare l’aforisma inedito “la formazione è un viaggio di scoperta” e non vorrei mai contrariare qualcuno spoilerando il finale del film. Però il momento è importante e quando si inizia con WP, l’integrazione di elementi esterni che non siano attivazioni nude e crude di temi diversi, è un fatto positivo da celebrare con un brindisi perchè sta a significare il punto di inizio di una evoluzione che ci lascerà immaginare altre implementazioni! Partiamo dall’ inizio. Come si fa a integrare BOOTSTRAP nei siti normali? Vogliamo usare un CDN? Usiamo un CDN, andiamo all’ indirizzo https://getbootstrap.com/docs/5.0/getting-started/download/#cdn-via-jsdelivr e copiamoci i due link preposti per portare il framework nel nostro WP:

<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">
<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>

Ok e dove dobbiamo mettere questi link in WP? Qui mi limiterò a fare il criptico e citerò solo il function.php che sovraintende al motore delle operazioni. Inoltre citerò le funzioni da richiamare nella function che sono:

wp_enqueue_style

e

add_action

Ora andando sul codex wordpress, indirizzo https://codex.wordpress.org/Main_Page , o anche cercando in rete non dovrebbe essere complicato risolvere questa ricerca del Graal. Ok e adesso? Adesso sappiamo di avere di fronte il paracadute iniziale, la famosa index.php che al suo interno avrà tutte le inclusioni e anche le zone divisorie di struttura e quindi andiamo sugli snippet offerti da bootstrap e cerchiamo slider e tra i molti preleviamo quello più semplice senza fronzoli barocchi:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

questo codice statico va copiato in corrispondenza della zona che per noi dovrebbe immortalare lo slider. Da notare che le immagini devono essere dinamiche quindi serve PHP per andare a prelevarle, quindi ipotizzando di avere inserito le nostre immagini dentro la cartella IMG, potremmo avere sulla index.php:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="<?php echo get_theme_file_uri('/img/1.jpg') ?>" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="<?php echo get_theme_file_uri('/img/2.jpg') ?>" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="<?php echo get_theme_file_uri('/img/3.jpg') ?>" class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Da notare il lavoro svolto dalle classi di bootstrap che ci consentono di osservare da spettatori tutto il meccanismo. Inoltre a questo punto potremmo anche approfondire sempre sul codex di WP anche la funzione

get_theme_file_uri

A questo punto la domanda rivolta a web design umbria sorge spontanea, ma allora posso integrare anche altri framework nel mio WP a livello di codice sorgente? Certo che sì, ma la cosa migliore è sperimentarne le implicazioni allenandosi con la pratica. Infine la soluzione di questo specifico esercizio di integrazione dello slider si trova INDIRETTAMENTE all’ indirizzo https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Il tutto è più della somma delle singole parti, come entrare nei misteri di WordPress ottenendo la comprensione con la psicologia GESTALT

Intervenire nativamente sulle pagine WP senza usare PLUG-IN

Facendo seguito agli articoli apparsi su https://umbriawaytarget.wordpress.com/ dove si racconta in sostanza il tipo di disorientamento che può provare uno studente di fronte a qualcosa di complesso che non conosce, il tema di questo post è: quale è il modo migliore di imparare WordPress, visto che lo abbiamo paragonato a una industria sofisticata che può fare uscire biciclette dalla catena di montaggio ma anche motori a razzo? Bisogna acquisire una visione olistica su come funziona il tutto. La GESTALT, psicologia della FORMA o rappresentazione, ci può aiutare!

è una corrente psicologica incentrata sui temi della percezione e dell’esperienza. Nata e sviluppatasi agli inizi del XX secolo in Germania (nel periodo tra gli anni Dieci e gli anni Trenta), proseguì la sua articolazione negli Stati Uniti, territorio nel quale i suoi principali esponenti erano immigrati durante il periodo delle persecuzioni naziste.

wikipedia

Il novizio che si avvicina a WP senza un vaccino corre gravi rischi, quello in sostanza di scappare alla velocità della luce dalla tecnologia. Lo studente vede un gigantesco PUZZLE e non ha i pezzi in mano per coprire dei buchi. Non sa neanche dove andare a coprire quelle zone e recuperare le tessere mancanti. Sapere però come è composto il puzzle ti aiuta a conoscere dove sono esattamente i pezzi per completare il quadro generale. Il motto per antonomasia dei gestaltisti è: “Il tutto è più della somma delle singole parti” , significa che la totalità del percepito è caratterizzato non solo dalla somma dalle singole attivazioni sensoriali, ma da qualcosa di più che permette di comprendere la forma nella sua totalità. WP è sostanzialmente una fabbrica. Se scomponiamo una fabbrica scopriamo che dentro c’è un mondo. Prima di entrare nei dettagli devi tenere presente la struttura della fabbrica, altrimenti procederai alla cieca nel buio. La buona notizia è che la planimetria si può assimilare. L’altra buona notizia è che con la pratica possiamo risolvere i problemi.
Come faccio a inserire nativamente direttamente nel codice le icone dei social media? Come faccio a mettere le mani sul logo aziendale e farlo diventare un link per ritornare nella HOME quando ne ho bisogno? La risposta è FACENDO COSE. Facendo cose, si genera il problema e inevitabilmente si trova dopo una ricerca febbrile anche una soluzione. E si va avanti a generare altri problemi per innescare altre soluzioni da assimilare.

Come linkare nell’ header, esercitazione!

Vediamo quindi il problema del link sul BRAND, se non sai dove mettere le mani e non hai una comprensione generale di quello che è uno STILE in WP e come é strutturato difficilmente ti viene da mettere le mani sulla index per vedere dove intervenire. Si suppone in alto nella header, poi magari ti accorgi che di fatto non c’è una header perchè non capisci che è inclusa. Allora dovresti recarti sul file header.php e iniziare a curiosare per scoprire finalmente che la zona di tuo interesse è sprovvisto di link! Quindi intervieni e risolvi la questione!

Come creare un link su FWD?

Social Media fai da te senza plug-in esterni

Invece per la storia delle icone social se ti scoraggi devi ricorrere a un plug-in esterno, ce ne sono molti a supporto, ma sei in testa di diventare un wordpress developer sarebbe per te una sconfitta. Devi intervenire sul codice nativo. Che fare? Dopo infinite testate contro un muro, legate a come importare il link CSS dall’ esterno, quello che alimenta FONT AWESOME e dopo altre furiose litigate con la formattazione e il posizionamento delle icone, alla fine risolvi il problema intervenendo prima nel function.php per il collegamento esterno da incorporare , poi te la giochi sui file critici footer.php e quello centrale per gli stili style.css. A quel punto con un tira e molla serrato riesci ad apportare un altro impercettibile miglioramento alla tua HOME PAGE!

function fwd_files(){
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts' , 'fwd_files');

Nel footer abbiamo la parte statica:

<footer>
<div class="container">
<h2>©<?php the_time('Y');?> - <?php bloginfo('name'); ?> - <a href="https://www.facebook.com/pinko" target="_blank"><i class="fa fa-facebook fa-1x" aria-hidden="true"></i></a><a href="https://twitter.com/pinko" target="_blank"><i class="fa fa-twitter fa-1x" aria-hidden="true"></i></a><a href="https://www.linkedin.com/in/pinko/" target="_blank"><i class="fa fa-linkedin fa-1x" aria-hidden="true"></i></a></div></h2>
</div>	
</footer>

L’icona I va stilizzata (per dargli un margine) nel foglio style.css e anche questa è risolta!

Il problema è che se non hai in mano le tessere del puzzle che servono per rattoppare il buco, non vai avanti quando devi fare cose reali! Ed è qui che serve la formazione, per darti quegli strumenti in grado di renderti autonomo! In ogni caso prima di entrare nei dettagli serve un APPROCCIO OLISTICO, altrimenti si rischia di non andare da nessuna parte! In rete ci sono molti corsi da cui approvvigionarsi e c’è solo l’imbarazzo della scelta.

Le catene di montaggio di WORDPRESS, come azionare il pulsante di produzione: un esempio concreto

L’approccio per il problem solving

Vediamo come fare prima la teoria e solo alla fine applichiamo la tecnica per risolvere un problema.
All’ indirizzo https://umbriawaytarget.wordpress.com/2021/02/02/imparare-wordpress-per-immagini-perche-pensare-al-cms-piu-famoso-al-mondo-come-una-factory-ci-aiuta-nella-comprensione/ si è vista la metafora della FACTORY per WP. Il luogo della fabbrica è il SERVER, con il consumatore (il BROWSER) che emette ordini di produzione (URL) per i prodotti finiti (PAGINE WEB, nella metafori della factory, l’auto). Questo in una visione olistica ma poi l’assemblaggio diventa capilare e ramificato, dobbiamo entrare a un maggior livello di dettaglio. Come faccio a consegnare i prodotti finiti assemblando, recuperando i componenti dal magazzino, aspettando altri pezzi provenienti da altre linee per stoccare il tutto? C’è una carrozzeria da sistemare, un motore, bisogna verniciare, implementare la parte elettrica dopo che la base è stata montata e tanto altro da fare a corredo, interni, finiture etc. Il mattone fondamentale di WP è il POST a livello di rappresentazione utente. Il contenuto del POST si archivia in un campo testo del database. Il POST come cornice è composto da strutture di codice HTML, PHP, JS integrato etc. I contenuti vengono considerati il cemento fondamentale di WP, materie prime preziose custodite nel magazzino che il DATABASE. Il DB MySQL (costituito da una collection di tabelle, ciascuna delle quali costituita da righe e colonne, record e campi) memorizza informazioni sugli utenti, post, configurazioni e molto altro! Ad esempio, ogni post di WordPress ottiene la propria riga in una tabella chiamata per impostazione predefinita, wp_posts. Le auto sono fatte con materiali diversi, magari con leghe e metalli di scocca diversa. Anche le informazioni racchiuse nel DB seguono queste differenziazioni e ogni tipo di materiale ha la sua area per essere preso in custodia, custodito e protetto.

I TEMI WP

Ora possiamo andare oltre e pensare alla catena di montaggio e a come il pavimento che la sorregge sia di fatto corredato da tutta una serie di strumenti per portare avanti i componenti ed effettuare le lavorazioni sulla risorsa da assemblare: ci sono cavi elettrici, ganci per appendere ventilatori, luci accese, quadri di comando, monitor. Siamo sostanzialmente dentro al WP CORE! Sono i fatti sull’ ambiente software che consentono l’esecuzione di wordpress. Ma a questo livello succede anche qualcosa di fondamentale: WP accetta le materie prime che arrivano dal magazzino, i contenuti, e li organizza per smistarli in altre catene di montaggio per l’elaborazione finale! Come si può vedere, tutta la storia legata alla factory, al FLOOR e ai suoi ganci per lavorare le materie prime che arrivano dala magazzino, continua a regalarci una visione nitida e chiara di WP, che raggruppa in una forma e smista le risorse per l’assemblaggio finale. Questa lavorazione che avviene sulla linea di montaggio rappresenta simbolicamente anche il tema WP. In un tema, sempre giocando con l’alternanza del prodotto AUTO, devi saldare le porte, assemblare la meccanica, integrare la parte elettrica, verniciare, inserire i sedili e tanto altro! Potremmo avere a che fare con fabbriche semplici che hanno una sola linea di montaggio o FACTORY sofisticate che hanno diverse linee di montaggio. Potrebbero esserci delle diramazioni mentre le varie parti della vettura vengono assemblate. Un tema semplice fa un lavoro semplice: prende le materie prime, le avvita insieme lungo un’unica linea e le finisce in modo che siano presentabili per il consumatore finale. WP utilizza una gerarchia di modelli per individuare il tipo di risorsa richiesto dall’ utente e un tema complesso diventa quindi una factory sofisticata che preleva risorse da varie linee di montaggio per direzionarle verso l’output finale. LA COSA IMPORTANTE E’ CHE OGNI SITO WP DEVE ESSERE ESEGUITO SU UN TEMA. I temi sono il software che dice ai dati di WordPress (post, pagine, immagini e molto altro) come apparire, come un prodotto finito. I temi hanno un controllo totale su quello che accade.

Funzionalità specifiche con i PLUG IN

Ok, ma se arriva un cliente e mi chiede un auto che funziona a idrogeno che faccio? Le mie linee di montaggio non sono predisposte a tanto. Certo abbiamo la lavorazione in parte impostata, perchè di certo un auto a idrogeno ha anche essa delle ruote, dei sedili, parabrezza etc. Ci serve solo qualcuno che dall’ esterno ci fornisca i motori a razzo e siamo a posto! Per garantire questo tipo di potenziamento ci servono i plug-in. Ci sono aziende esterne pronte a soddisfare ogni nostra esigenza. I PLUG IN non vivono in fabbrica. Ci entrano solo quando dobbiamo risolvere un problema specifico. Come fornire le funzionalità per montare un motore a razzo! E’ formidabile questa metafora della fabbrica, perché di fatto è proprio così che funziona WP! Con quale parte della fabbrica stai lottando? Forse conosci bene quello che accade sulla linea di montaggio principale ma se subentrasse un problema sulle luci posteriori? Come lo risolveresti? Con un plug-in esterno?

Conclusioni

Con la FACTORY, IL FLOOR e tutto il resto compreso l motore a RAZZO la nostra visione di WP è ora completa! La prima cosa da fare quando si impatta con qualcosa che non si conosce, è avere il quadro generale e osservare la foresta dall’ alto. Ora viene il bello? Perchè non riesci a inserire uno stile CSS nella pagina, magari su un form di commento richiamato da WP? Come mai la formattazione stilistica dell’ header ti dà dei problemi? Vorresti implementare un altra sidebar ma non sai neanche da dove partire, oppure come mai non riesci a trasformare una immagine all’ interno del singolo post in elemento flottante: ecco questi sono problemi che si incontrano quando una prima porta è stata attraversata e ne arriva subito un’altra davanti con l’igresso sbarrato. Sapere quello che c’è da imparare aiuta a definire le aree di intervento e ci indica la direzione per attraversare sempre nuove porte!

OK, un conto è la teoria e un conto è la pratica. Adesso serve un risultato concreto, oppure tutto quello che abbiamo studiato diventa FUFFA. Andiamo all’ indirizzo http://www.umbriaway.it/wp/ e poniamoci un obiettivo: adesso che vedo tutta la FACTORY, so quale importanza riveste il TEMA, in questo caso costruito con un approccio BOTTOM-UP, quindi mattote dopo mattone con le funzioni, posso migliorare l’header del sito?

prima dell’ intervento, dobbiamo migliorare la parte superiore

Sappiamo che il foglio stile domina la vista dall’ alto per tutti i componenti della catena di montaggio. Sappiamo che il file header.php inglobato nella index.php comprende tutte le intestazioni e le nostre aree di intervento, in particolare quella contrassegnata da HEADER che nel foglio stile verrà modellato con:

header{
background-color: red;
text-align: left;
color: #fff;
margin-top: 0px;
border: 2px red solid;
}

a questo punto la scritta BLU di Umbriaway Blog va cambiata altrimenti non ci sarebbe armonia cromatica, per cui siamo andati sul file header e abbiamo inserito una regola di stile in locale:

<header>
<div class="container">
<h2><?php bloginfo('name'); ?></h2>
<span><h3 style="color:#ff9900"><?php bloginfo('description'); ?></h3></span>
</div>
</header>
dopo l’intervento, quando la teoria si converte in pratica

per ottenere come effetto finale qualcosa di concreto, ossia abbiamo capito dove intervenire per fare cosa, ma quello che conta è che il nostro sito minimalista e spartano alla CARVER adesso ha un miglior impatto estetico e si sa che che la UX per fidelizzare gli utenti è importante! Quindi va bene studiare la fabbrica sui libri, ma poi serve anche far rullare le catene di montaggio!

Imparare wordpress per immagini: perchè pensare al CMS più famoso al mondo come una FACTORY ci aiuta nella comprensione

developer wordpress umbria
nessuna differenza!

All’ indirizzo https://wpshout.com/ gestito da Fred Meyer and David Hayes, viene proposta una metafora illuminante per imparare WORDPRESS, l’immagine suggestiva del titolo! Se andiamo a curiosare all’ indirizzo https://umbriawaytarget.wordpress.com/2021/01/30/come-approcciare-lo-studio-del-labirinto-wordpress-senza-rischiare-un-tso-e-vivere-sereni/ in questo articolo avendo l’intenzione di entrare come potenziale sviluppatore nel mondo WP avevo proposto l’accostamento audace del LABIRINTO, ma Fred Meyer and David Hayes mi battono di brutto per dimostrare i legami di complessità che ruotano intorno al CMS e dimostrano una completezza nell’ approccio formativo che lascia illuminati.

L’idea di fondo è che una fabbrica ha un luogo dove si appoggia, ha un impianto idraulico, ha un impianto elettrico, ha una catena produttiva che sforna magari “AUTO”. Facciamo attenzione a questa espressione legata a fare uscire in output un prodotto che nel caso di WP diventa “la pagina richiesta dall’ utente dopo averla digitata su un brower per richiederla a un server!”.

Prima però facciamo un passo indietro rispetto all’ articolo https://umbriawaytarget.wordpress.com/2021/02/01/wordpress-e-lapproccio-bottom-up-vs-top-down-pro-e-contro-delle-due-strategie-di-formazione/ e cerchiamo di capire perchè appena tentiamo di aprire la conoscenza di WP una vocina interiore ci circuisce e subdolamente ci suggerisce di non aprire quella porta, proprio perchè tanti fili annodati insieme e tutti incomprensibili seminano in noi un profondo sconcerto. Poi agiscono delle convinzioni limitanti per cui sempre quella voce viene da noi a dirci che non diventeremo mai sviluppatori di A, B o C perchè davvero è troppo complicato. Il segreto nella didattica sta nel mettere a fuoco il quadro generale e la metafora della fabbrica è perfetta perchè simbolicamente c’è un SITO (un luogo) che consente alla fabbrica con le sue mura di esistere (SITO = SERVER), esiste un consumatore (IL BROWSER) che richiede un ordine di produzione (una pagina specifica o URL) ed esiste il prodotto finito che visualizza il risultato della richiesta (l’auto che esce dalla catena di montaggio).

Questa precisione nei dettagli è davvero profonda e mostra un approccio diverso da quello che ci si potrebbe aspettare visualizzando un labirinto che non è altro che un insieme di mura insormontabili da aggirare nella nostra immaginazione. Quindi anche se all’ inizio si tende a scoraggiarsi (a me è successo con REACT NATIVE quando dopo aver perso tantissimo tempo per cercare di configurare gli strumenti di base senza riuscirci, ho deciso di soprassedere verso successivi assalti che al momento non mi penso di fare), tenendo presente il funzionamento generale di questa gigantesca macchina del caffè, abbiamo in testa la soluzione a tutti i nostri drammi.

web design umbria
stessi livelli di difficoltà!

Come ammettono gli stessi autori, sotto WP c’è un mondo sconfinato e vedere il funzionamento generale del sistema ci semplifica la vita e ci spinge ad andare avanti piuttosto che andare indietro. Ogni fabbrica deve essere costruita da qualche parte, su un pezzo di terra con un indirizzo specifico, ecco quindi il SERVER.

Quella terra deve essere adeguatamente suddivisa in zone, accessibile dalle strade, dotata di impianti idraulici ed elettrici e così via. Il sito della fabbrica non è il macchinario all’interno della fabbrica, o le materie prime all’interno del magazzino; piuttosto, fornisce l’ambiente per tutto quanto sopra.

Poi abbiamo il Browser: il consumatore, le fabbriche vengono gestite pensando al consumatore. Per un sito WordPress, questo è (un essere umano che esegue) un browser web. Il browser – e l’utente – non vuole davvero sapere cosa succede in fabbrica o altrove; non ne capirebbe molto. È interessato solo al prodotto finale che esce dall’intero processo: un documento HTML elaborato che può essere riprodotto in una pagina web leggibile dall’uomo. Il browser richiede questi documenti e il server lavora duramente per consegnarli, quindi tutto ciò che accade in fabbrica è in ultima analisi legato alla soddisfazione delle richieste del browser.

URL: l’ordine di produzione; fortunatamente per tutti noi, il consumatore sa come dire alla fabbrica quello che vuole. Un browser dice a un sito WordPress quale pagina web produrre, inviando una richiesta HTTP per un URL specifico. Come utente, ogni URL digitato nel browser diventa in realtà un “ordine di produzione” inviato dal browser al sito WordPress. Alla fabbrica di WordPress viene detto di restituire una pagina web specifica al browser e a te.

Ad esempio, l’URL https://www.farwebdesign.com/ è un “ordine”, da un browser a un sito WordPress, per creare e restituire la home page di FWD, che elenca gli ultimi post.

https://www.farwebdesign.com/chisiamo è un “ordine” per creare e distribuire la pagina chisiamo di farwebdesign, che fornisce solo i contenuti di quella singola pagina WordPress. Pagina web “chisiamo”: il prodotto finito!

Come una fabbrica di automobili produce auto finite per la consegna ai concessionari autorizzati e, da lì, ai consumatori, WordPress produce pagine web finite per la consegna ai browser web e, da lì, agli utenti.

Le pagine web sono scritte in HTML e hanno gli elementi che ti aspetti: menù di navigazione, un piè di pagina, un content, un header e sidebar e gli invisibili tag meta. Il punto importante è che una pagina web consegnata, è un prodotto solido e confezionato, proprio come un’auto. È compito di WordPress creare questo prodotto e spedirlo all’utente che lo ha richiesto.

Questa analogia della fabbrica è potentissima e ha un senso! Bravissimi quelli di https://wpshout.com/ che mostrano un simile approccio nella didattica!

A questo punto quello che ci terrorizza per andare avanti è la risposta alla domanda: che cosa si nasconde sotto il cofano della vettura uscita dalla catena di montaggio?

WordPress e l’approccio bottom-up vs top-down: pro e contro delle due strategie di formazione

approccio bottom-up

All’ indirizzo https://www.umbriaway.it/wp/ sta in piedi l’ennesimo sito wordpress, decisamente dallo stile minimalista. Infatti navigando ci si accorge che tutte le funzionalità base sono attive, ma non ci sono effetti strabilianti e grafiche avvincenti a supporto. Anche senza guardare la serie televisiva Murdoch o Elementary si capisce subito che l’approccio non può che essere bottom-up, ossia il designer ha messo in piedi la costruzione partendo dalle fondamenta, senza togliere nulla a coloro che preferiscono acquistare direttamente un prefabbricato e farselo installare direttamente dal cielo con l’elicottero. Infatti nell’ approccio top-down si implementa subito tutto in blocco, avendo magari un template già pronto e un CSS che non parte da zero come nell’ approccio bottom-up, che prevede la costruzione mattone dopo mattone, applicando cioè alle pagine funzione dopo funzione ( quelle proposte dal codex wordpress, indirizzo https://codex.wordpress.org/Main_Page ). Va da se che l’approccio bottom-up è consigliato quando non si sa nulla e si parte da zero su una discplina! In ogni caso per iniziare a districarsi con wordpress avendo ambizioni da sviluppatore, conviene appoggiarsi a siti che erogano formazione online come Udemy che ospita ottimi corsi della Tocci per esempio (https://www.udemy.com/), Eduonix (https://www.eduonix.com/ ) e tanti altri come DevAcademy (https://devacademy.it/) e Linkedin (https://it.linkedin.com/learning/ ) solo per citarne alcuni. E’ bene tenere presente che un corso completo come quello proposto come sviluppatore wordpress su Linkedin assorbe più di trenta ore di nozioni disgiunte dalla parte di apprendimento con la parte pratica, questo dà anche l’idea di quale labirinto si nasconde dietro al CMS più scaricato al mondo (download https://it.wordpress.org/download/ )!

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/

Blog su WordPress.com.

Su ↑