PHP è l’acronimo di Hypertext Preprocessor (originariamente Personal Home Page) ed è un linguaggio di scripting interpretato per la programmazione di pagine web dinamiche. In parole povere serve a programmare i siti web che, in alternativa, sarebbero dei semplici siti vetrina completamente statici e che non permettono praticamente nessuna interazione tra sito e utente che ne usufruisce.
Questo va spesso di pari passo con altri linguaggi come MySQL, il linguaggio dei database, e il solito, oramai potentissimo, Javascript.
In questo articolo vediamo come gestire le basi di costruzione di un layout in PHP utilizzando i classici linguaggi HTML5 e CSS3 e i costrutti include e require. Questi ultimi rivestono un ruolo importantissimo nel linguaggio, permettono infatti di inserire file esterni in una pagina web. Entrambi svolgono la stessa funzione e si differenziano solamente per la modalità di errore che viene mostrata in caso di insuccesso.
PHP infatti è un linguaggio che processa lato server il codice e restituisce a browser il risultato dello stesso che, di norma, è del puro e semplice HTML.
Se il web è la tua passione hai mai pensato ad un corso WordPress avanzato con PHP
Creazione del layout in HTML5 – CSS3
Andiamo quindi a creare una pagina HTML e inseriamo il seguente codice:
<header>
<img src="Immagini/logo-vf-alt.png" alt="">
<h1>Veneto Formazione</h1>
<h2>Innovazione continua</h2>
</header>
<nav>
<a href="#">Home</a>
</nav>
<article>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.<br>Ut enim ad minim veniam,
quis nostrud exercitation ullamco<br> laboris nisi
ut aliquip ex ea commodo consequat.</p>
</div>
</article>
<section>
<div class="content clearfix">
<div class="section">
<h3>Corso Web Designer</h3>
</div>
<div class="section red">
<h3>Corso Digital Marketing</h3>
</div>
<div class="section yellow">
<h3>Corso PHP-Wordpress</h3>
</div>
</div>
</section>
<footer>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</p>
</footer>
e il codice CSS da inserire nel foglio di stile
* {
margin:0;
padding:0;
}
.clearer {
clear:both;
}
body {
font-family: 'Roboto', serif;
font-weight:300;
}
img {
border:none;
}
.clearfix::before, .clearfix::after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clearfix::after {
clear: both;
}
.content {
width:1170px;
margin:0 auto;
}
header {
width:100%;
height:470px;
padding-top:100px;
text-align:center;
background:#00BCD4;
}
h1 {
font-size:56px;
color:#fff;
font-weight:300;
padding-top:70px;
}
h2 {
font-size:24px;
color:#fff;
font-weight:300;
}
nav {
width:100%;
padding:25px 0;
position:absolute;
top:0;
left:0;
}
a {
margin-left:30px;
text-decoration:none;
text-transform:uppercase;
color:#fff;
font-weight:400;
}
article {
width:100%;
padding:80px 0;
text-align:center;
background:#EEEEEE;
}
article p {
font-size:20px;
color:#212121;
}
section {
width:100%;
padding:70px 0;
}
.section {
width:386px;
height:360px;
margin:0 2px;
background:#90A4AE;
float:left;
text-align:center;
}
.red {
background:#E57373;
}
.yellow {
background:#FFCB28;
}
h3 {
font-size:20px;
font-weight:400;
background:#EEEEEE;
color:#212121;
padding:25px 0;
}
footer {
width:100%;
height:300px;
text-align:center;
background:#212121;
}
footer p {
font-size:15px;
color:#757575;
padding-top:250px;
}
Come potete vedere abbiamo utilizzato un font di Google ed è quindi necessario richiamarlo nella head del sito inserendo questa riga di codice:
<link href=”https://fonts.googleapis.com/css?family=Roboto:300,400″ rel=”stylesheet”>
Ora che la struttura ha un aspetto gradevole passiamo alla fase successiva.
Vi ricordiamo che la modalità che andremo a vedere sta alla base della gestione di un tema custom in WordPress.
Strutturazione del layout con PHP
La nostra cartella di lavoro al momento contiene questi file:
Come partenza andiamo a generare, utilizzando il vostro editor preferito, dei nuovi file in estensione PHP che, per ora, lasceremo vuoti.
La nostra cartella ora è così disposta:
Modifichiamo l’estensione del file index da HTML a PHP:
Il prossimo passaggio è molto semplice, dobbiamo infatti solamente distribuire il contenuto della nostra pagina HTML nei nuovi file. Possiamo già supporre che il contenuto iniziale della pagina, per intenderci dall’apertura di doctype alla chiusura di nav, verrà inserito nel file header.php come da figura.
Il contenuto naturalmente non dovrà semplicemente essere copiato ma tagliato, non dovrà perciò più essere presente nella pagina index.php
Eseguiamo la stessa operazione dall’apertura di footer alla chiusura di html e tagliamo/incolliamo il tutto nel file footer.php
La nostra pagina index ora riporta solamente il suo contenuto. Per poter richiamare i nuovi file all’interno della stessa e ricomporre il layout della pagina ci basta utilizzare include o require come già spiegato all’inizio dell’articolo.
Utilizzate quindi la sintassi di PHP per l’inserimento del codice e andate a eseguire il seguente step:
In questo modo è stato creato un modello a inclusioni che vi permette di avere 2 file fissi da inserire in tutte le pagine del sito web.
Perché è importante conoscere PHP?
Ogni sviluppatore web dovrebbe conoscere perlomeno i fondamentali di PHP e MySQL per poter fare questo lavoro con competenza. Molto spesso, se non si possiedono tali requisiti, ci si affida a temi premium e WordPress per poter agire ugualmente. Questi, purtroppo, hanno spesso bug da riparare e anche la più semplice richiesta di customizzazione da parte del cliente può diventare un problema se non sapete dove mettere le mani.
Ricordiamo che WordPress è interamente costruito in PHP-MySQL. Se la nostra struttura fosse stata creata per un layout/tema custom, da noi interamente pensato, avremmo avuto la dicitura in figura:
Mettetevi alla prova
Volete provare adesso a creare il nostro layout a inclusioni?
Partite scaricando il file di esempio a questo link e seguite il nostro articolo passo passo.
A voi buon divertimento.
Ancora nessun commento