Dare scacco matto ai temi wordpress in 425 mosse, istruzioni per l’uso

web developer UmbriaNon ti piaccioni i temi wordpress tradizionali oppure costano troppo? Ne vuoi personalizzare uno a tuo uso e consumo? Vediamo come risolvere la questione in poche semplici mosse e guadagnare elo. Possono esserci varie soluzioni e diverse game per arrivare allo stesso obiettivo, quindi le mosse proposte qui vanno prese elasticamente in quanto nello sviluppo web si arriva allo stesso risultato seguendo diversi percorsi, quello proposto è solo una linea di sviluppo fra molte.

Mossa numero 1, creare una certella all’ interno del wp-content/themes con il nome del nuovo tema, in questo caso chess-themes

Mossa numero 2, creare nella root della cartella appena creata il file index.php responsabile della lettura del file, per gioco possiamo anche scrivere al suo interno dei tag di contenuto tipo <h1>Prima pagina in WP</h1>

Mossa numero 3, creare nella root del nuovo tema allo stesso livello di index.php il foglio di stile, quindo style.css

Mossa numero 4, digitare sul motore codex css e atterrare sulla pagina https://codex.wordpress.org/CSS andare dal menù di destra su design layout , cercare la voce theme development e fare il copia e incolla dell’ header proposto per personalizzarlo in base alle nostre esigenze, in questo caso l’originale proposto per il tema twentythirteen è:

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

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.
*/

Mossa numero 5, personalizzare queste informazioni in base alle proprie esigenze, questa parte verrà poi vista dalla preview dei temi dal pannello di controllo epr la selezione dalla dashboard, quindi nella nostra versione definitiva personalizzata, facendo attenzione a non dimenticare ilk blocco dei commenti per non interferire con il contenuto di css, il tutto diventa:

/*
Theme Name: Chess Theme
Theme URI: https://farwebdesign.com/chesstheme
Author: FWD & Umbriaway Consulting
Author URI: https://www.farwebdesign.com
Description: tema a topic scacchistico
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: bianco, nero. duale, aperture, campioni, finali, mediogioco
Text Domain: chesstheme
*/

Mossa numero 6, creo un file grafico rigorosamente di nome screenshot.png di dimensioni ottimizzate 1200 x 900 e la inserisco nella root della cartella chess-theme del nostro nuovo tema, in questo modo la preview del nostro template quando proporrà la selezione e la scelta del tema tramite l’attivazione avrò tutto quello che gli serve per proporsi in maniera corretta. A questo punto nonc i resta che lavorare sulla index.php

Mossa numero 7, creo la struttura base della pagina HTML, inserendo dentro il contenuto dimostrativo della mossa numero due:

/*
<!DOCTYPE html>
<html>
<body>

<h1>Prima pagina in WP</h1>

</body>
</html>
*/

Mossa numero 8, prendere le impostazioni generali del nostro sito, come TITOLO e descrizione sfruttando tutta la potenza della funzione predefinita bloginfo che accetta vari parametri come name, description e charset e le inserisco, iniziamo con il TITLE che non è altro il nome variabile del sito

/*
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo(‘name’);?></title>
</head>
<body>

<h1>Prima pagina in WP</h1>

</body>
</html>
*/

Mossa numero 9, inserisco la stessa informazione precedente in una intestazione header presente all’ interno del body:

/*
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo(‘name’);?></title>
</head>
<body>
<header>

</header>

<h1>Prima pagina in WP</h1>

</body>
</html>
*/

Con questo sistema una volta che andiamo dal menù generale impostazioni della dashboard di WP a cambiare il nome, tutte le modifiche verranno effettuate in automatico su tutte le pagine

Mossa numero 10, inserisco la descrizione sempre nell’ header, come si fa? Inserendo un parametro diverso:

/*
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo(‘name’);?></title>
</head>
<body>
<header>

<span><h4><?php bloginfo(‘description’);?><h4></span>
</header>
<h1>Prima pagina in WP</h1>
</body>
</html>
*/

Mossa numero 11, inseresco nell’ head il meta tag relativo al charset, con il parametro dedicato masticato sempre dalla funzione predefinita bloginfo():

/*
<!DOCTYPE html>
<html>
<head>
<meta charset=<?php bloginfo(‘charset’);?>
<title><?php bloginfo(‘name’);?></title>
</head>
<body>
<header>

<span><h4><?php bloginfo(‘description’);?><h4></span>
</header>
<h1>Prima pagina in WP</h1>
</body>
</html>
*/

A questo punto facendo tasto dx, ispezione da Chrome verrà visualizzato il charset UTF-8 inserito nella pagina dinamicamente

Mossa numero 12, completo la parte di intestazione inserendo una funzione predefina di WP che é wp_head(); che non fa altro che recuperare tutte le risorse indispensabili a questa sezione, come i collegamento ai link js e css per esempio, quindi il file index.php diventa:

/*
<!DOCTYPE html>
<html>
<head>
<meta charset=<?php bloginfo(‘charset’);?>
<title><?php bloginfo(‘name’);?></title>
<?php wp_head();?>
</head>
<body>
<header>

<span><h4><?php bloginfo(‘description’);?><h4></span>
</header>
<h1>Prima pagina in WP</h1>
</body>
</html>
*/

A questo punto se andiamo ad analizzare questa pagina costruita dinamicamente sempre dalla seziona ispeziona di Chrome ci acoorgiamo che la pagina statica ha quasi tutto ciò che gli serve, una volta che è stata parserizzata dal browser. Attenzione a non fare confusione tra HEAD e HEADER, la prima parola fa riferimento a una sezione strutturale della pagina che contiene tutta una serie di meta informazioni e i collegamento alle librerie esterne, la seconda a un tag semantico presente all’ interno del body.

Mossa numero 13, aggiungere un tag semantico footer per il copyright ad esempio, e curiamo meglio il nome delle classi, ad esempio è buona norma dare il nome alla scatola esterna di container e a quella interna main, dopodichè facciamo conoscenza di una nuova funzione di Wp, quella che setta il tempo the_time():

/*
<!DOCTYPE html>
<html>
<head>
<meta charset=<?php bloginfo(‘charset’);?>
<title><?php bloginfo(‘name’);?></title>
<?php wp_head();?>
</head>
<body>
<header>

<span><h4><?php bloginfo(‘description’);?><h4></span>
</header>
<h1>Prima pagina in WP</h1>
<footer>

&copy –

</footer>
</body>
</html>
*/

Mossa numero 14, inserisco una funzione che mi legge le risorse/librerie esterne come JQuery alla fine del body, perché come sappiamo i tempi di caricamento della pagina si riducono, funzione che é simile a <?php wp_head();?> e che si chiama wp_footer();

/*
<!DOCTYPE html>
<html>
<head>
<meta charset=<?php bloginfo(‘charset’);?>
<title><?php bloginfo(‘name’);?></title>
<?php wp_head();?>
</head>
<body>
<header>

<span><h4><?php bloginfo(‘description’);?><h4></span>
</header>
<h1>Prima pagina in WP</h1>
<footer>

&copy –

</footer>
<?php wp_footer();?>
</body>
</html>
*/

A questo punto se facessi tasto destro ispeziona da chrome vedrei che alla fine della pagina sono stati inseriti dei link di collegamento, quindi tutto funziona! A questo punto se visualizzassi a video mi ritroverei la barra di amministrazione in alto che prima non c’era, questa perchè la sidebar è richiamata quando abbiamo aggiunto l’istruzione <?php wp_footer();?>

Mossa numero 15, lavorare sui contenuti con i LOOP e i controlli condizionali, cioè il programma deve tradurre l’espressio “guardami se ci sono i contenuti e mostrali se non vedi nulla dammi un messaggio di avvertimento”, il tutto si traduce in materiale ciclabile, usiamo nel nostro script la sintassi STRINGA che prevede l’uso dei due punti alla fine delle incorporazioni php, toglierò quindi il mio codice di prova <h1>Prima pagina in WP</h1> e lo sostituisco:

/*
<!DOCTYPE html>
<html>
<head>
<meta charset=<?php bloginfo(‘charset’);?>
<title><?php bloginfo(‘name’);?></title>
<?php wp_head();?>
</head>
<body>
<header>

<span><h4><?php bloginfo(‘description’);?><h4></span>
</header>

“>

 

Articolo creato da |

<?php endif; ?>

<p><?php the_excerpt(); ?></p>

<a class=”btn” href=”<?php the_permalink(); ?>”>Leggi tutto…</a>

</article>

<?php endwhile; ?>

<?php else : ?>

<?php echo wpautop(‘ops…non ho trovato articoli!’); ?>

<?php endif; ?>

</div>

<footer>

&copy –

</footer>
<?php wp_footer();?>
</body>
</html>
*/

Le funzioni have_posts(), the_post(), the_permalink(), the_title(), the_author(), the_time(argomenti) con i parametri vari di formattazione, the_tags(), has_post_thumbnail(), the_post_thumbnail(‘thumbnail’), the_excerpt(), wpautop sono tutti metodi che stampano sulla pagina tutte quelle informazioni tipiche di un blog che ha delle news che hanno un titolo e che devono ciclare con il nome dell’ autore, una data di creazione, dei contenuti, una immagine piccola che lo identifica etc. La mossa numero 14 è quella che nel gergo scacchistico incasina tutto il piano di gioco, una fase complessa del mediogio che ha bisogno di articolare e pianificare tutta una serie di sottopiani per arrivare all’ obiettivo, quindi per ora il codice dinamico che cicla i contenuti non costituisce certo lo scacco matto finale che ci eravamo prefissi, ma solo una tappa intermedia prima di quella che viene definita in gergo scacchistico miniatura, il tutto verrà analizzato in uno dei prossimi articoli

Annunci

Quante ne sai di wordpress? E per vincere contro Polugaevsky cosa bisogna fare?

agenzia web marketingIntanto comprati la macchina del tempo, passa in Fiat e chiedi lumi. Poi vai su http://www.chessgames.com/perl/chessgame?gid=1092096 dove si materializza la game Lev Polugaevsky vs Ljubomir Ljubojevic Linares 5th (1985), Linares ESP, rd 2, Mar-09 Queen’s Indian Defense: Kasparov Variation (E12) vinta alla mossa 42 dal nero. In questa partita il bianco che non ha propriamente l’indole di un terrosita accetta i giochi provocatori di Ljubo che quel giorno aveva voglia di metterla in caciara e di creare risse tattiche. Dopo un mediogioco dove non si capisce nulal la partita sembra confluire in una fase altrettanto complessa caratterizzata da enormi squilibri di materiale da chiarire. Il tutto si chiarisce però alla mossa 42 per un finale drammatico! E ora veniamo a noi caro wordpress, innanzitutto ti devo installare in locale o via FTP (file transfert protocol) da qualche parte? Iniziamo a vedere in locale. Per installare wordpress si va su https://wordpress.org/download/ e si procede allo scarico. Uno dei file critici del pacchetto é il famoso wp-config.php che predispone tutti i parametri per la connessione al database ma anche il settaggio di alcuni parametri tipo il tempo di intervallo di salvataggio da dedicare ai nostri post che agenzia web marketingsi esplica con l’istruzione: define(‘AUTOSAVE_INTERVAL’, ‘300’); in questo modo attivo l’autosalvataggio ogni tot tempo, un’ altra opzione che posso usare é quella della gestione della memoria per cui se imposto a define(‘WP_MEMORY_LIMIT’,’64M’); non dovrei avere problemi. Digitando wp config option troverò in rete nel codex tutti i parametri di configurazione che si possono usare all’ interno del file sensibile wp-config.php indirizzo https://codex.wordpress.org/Editing_wp-config.php. Se siamo in locale avviamo MANP (linux) o XAMPP for windows per aprire sul browser il famoso localhost. Posizionare il sito wordpress dentro a HTDOCS dopo la decompressione. Ora che ci sono i contenuti dobbiamo creare la connessione database. Se sono in locale prima di completare l’autocomposizione iniziale dove vengono richiesti i parametri posso anche creare un database specifico prima con phpadmin. Di solito le impostazioni di default richieste sono quelle canoniche di MAMP o XAMPP cioé localhost come server (HOST), root come user e pwd bianca con il nome del DB come suggerito prima. Nella schermata successiva vengono richiesti un titolo per il nostro blog, il nome utente e una pwd da usare per connettersi al pannello di controllo per gestire il ns blog wordpress. Per la password inserire delle password forti sicure. E approfondire il back-end no? Ma quali sono le configurazioni di default e i contenuti offerti standard dopo l’installazione di wordpress e come posso configurare i servizi minimo vitali? Le risposte non sono dentro di te come dice qualche maestro zen condominiale, ma ti verranno fornite da Umbriaway Consulting!