Creare un blog è un modo eccellente per condividere le tue passioni, esperienze, competenze o persino avviare una carriera di scrittura online. WordPress è una delle piattaforme più popolari per la creazione di blog, grazie alla sua facilità d'uso e alla sua flessibilità, per questo motivo dopo aver realizzato un sito Web personalizzato, ed aver modificato le pagine a piacimento grazie all'integrazione di HTML e CSS, siamo pronti per passare alla creazione di un piccolo blog.
Prima di essere utilizzato per lo sviluppo di siti Web ed e-commerce WordPress aveva l'obiettivo di essere una piattaforma ideale per la creazione ed il mantenimento di blog, infatti al suo interno troviamo ancora oggi la sezione "Articoli" che ne rappresenta l'area specifica.
Se entriamo in questa sezione noteremo che al suo interno è presente un articolo di prova chiamato "Ciao Mondo!". Prima di eliminarlo capiamo il funzionamento del blog di WordPress e impostiamo tutti i parametri necessari.
Come sviluppare un Blog con WordPress
Per prima cosa andiamo all'interno delle categorie e creiamo una categoria apposita chiamata "Blog" in modo tale da poterla facilmente riconoscere e richiamare.
A questo punto torniamo all'interno degli articoli e creiamone un paio di esempio ai quali dovremo assegnare "Blog" come categoria di riferimento.
Ora andiamo all'interno di "Aspetto > Menu" e impostiamo la voce "Blog" selezionando dalle categorie la nuova categoria chiamata anch'essa "Blog".
Ora che abbiamo settato il backend del sito Web in modo corretto passiamo alla parte visibile al pubblico. All'interno di questa guida dedicata alla creazione di un sito Web personalizzato con WordPress abbiamo sviluppato un template su misura e creato ogni singolo file necessario al suo corretto funzionamento, per questo motivo dobbiamo ora aggiungere due nuovi file: category.php e single.php.
Partiamo dal file di categoria (category.php) il quale avrà il compito di richiamare tutti gli articoli presenti nella categoria. Apriamo il code editor, creiamo un nuovo file ed inseriamo il seguente costrutto di codice:
<?php
/**
* A Simple Category Template
*/
get_header(); ?>
<section id="primary" class="site-content">
<div id="content" role="main">
<?php
// Check if there are any posts to display
if ( have_posts() ) : ?>
<?php
// The Loop
while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_excerpt(); ?>
</div>
<?php
endwhile;
endif;
?>
</div>
</section>
<?php get_footer(); ?>All'interno del loop saranno richiamati tutti gli articoli creati in WordPress, ciò significa che possiamo personalizzare via codice ogni singolo elemento della nostra categoria. In questo momento la situazione è la seguente:
Modifichiamo la pagina creando una struttura a griglia che consenta di visualizzare al meglio i nostri articoli sul blog. Aggiungiamo un <div> contenitore agli articoli in maniera da poterli allineare con l'utilizzo di CSS.
<!--cat-item-->
<div class="cat_item">
<div class="cat_item_i">
<div class="cat_item_color">
<div class="cat_item_color_i">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>
</div>
<!--cat-item-->Ed ovviamente procediamo alla stilizzazione:
.cat_item{
width: 33.3%;
height: auto;
float: left;
}
.cat_item_i{
padding: 10px;
}
.cat_item_color{
width: 100%;
height: 300px;
background-color: #fff;
box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
}
.cat_item_color_i{
padding: 10px;
}
Iniziamo a vedere i primi risultati, infatti la nostra category page ci restituisce tutti gli articoli ordinati in 3 colonne. Proseguiamo richiamando l'immagine di background in questo modo:
<?php
$cat_item_image = get_the_post_thumbnail_url($post->ID, 'full');
?>
<div class="cat_item_image" style="background-image: url(<?php echo $cat_item_image; ?>);"></div>
.cat_item_image{
width: 100%;
height: 150px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Formattazione dei caratteri e dettagli della pagina
Ora passiamo alla formattazione dei caratteri ed ai dettagli della pagina.
<div id="wrapper_cat">
<div id="wrapper_cat_i">
<?php
$cat_item_image = get_the_post_thumbnail_url($post->ID, 'full');
?>
<!--cat-item-->
<div class="cat_item">
<div class="cat_item_i">
<div class="cat_item_color">
<div class="cat_item_image" style="background-image: url(<?php echo $cat_item_image; ?>);"></div>
<div class="cat_item_color_i">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>
</div>
<!--cat-item-->
</div>
</div>Inseriamo all'interno del file style.css le regole CSS per ottimizzare la visualizzazione.
#wrapper_cat_i{ padding: 50px;}
#wrapper_cat h2{ font-size: 21px; font-family: Arial, Helvetica, sans-serif;}
#wrapper_cat p{ font-size: 16px; font-family: Arial, Helvetica, sans-serif;}
#wrapper_cat a{ font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #5400ff;}
Ora che abbiamo creato e personalizzato la pagina di categoria "Blog" clicchiamo su un articolo ed entriamo nel merito della personalizzazione della pagina interna.
Personalizzazione della pagina
Di default la pagina potrebbe risultare scomposta e disordinata, infatti anche in questo caso dobbiamo creare un file PHP dedicato alla visualizzazione e personalizzazione degli articoli. Generiamo quindi un nuovo file e chiamiamolo single.php, il nome predefinito per questo tipo di contenuto.
All'interno della pagina inseriamo il seguente costrutto di codice che ci permetterà di richiamare tutti gli elementi essenziali.
<?php
/**
* The template for displaying all single posts and attachments
*
* @package WordPress
* @subpackage Twenty_Sixteen
* @since Twenty Sixteen 1.0
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) : the_post();?>
<?php the_post_thumbnail(); ?>
<h2><?php the_title();?></h2>
<?php the_content();?>
<?php
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?>
Personalizzazione del contenuto della pagina
A questo punto non dobbiamo far altro che personalizzare il contenuto della pagina single.php utilizzando HTML e CSS. Aggiorniamo quindi il file come segue, aggiungendo un <div> di tipo contenitore proprio come fatto con la pagina category.php, in maniera da donare un maggiore spazio e pulizia alla pagina.
<div id="wrapper_item">
<div id="wrapper_item_i">
<?php
// Start the loop.
while ( have_posts() ) : the_post();?>
<?php the_post_thumbnail(); ?>
<h2><?php the_title();?></h2>
<?php the_content();?>
<?php
// End of the loop.
endwhile;
?>
</div>
</div>
#wrapper_item{ width: 1200px; text-align: center; margin: 0 auto;}
#wrapper_item_i{ padding: 50px;}
#wrapper_item h2{ font-size: 21px; font-family: Arial, Helvetica, sans-serif;}
#wrapper_item p{ font-size: 16px; font-family: Arial, Helvetica, sans-serif;}
Ovviamente il design assegnato alla pagina single.php verrà acquisito da tutti gli articoli della sezione in quanto pagina di riferimento. Abbiamo quindi realizzato un semplice blog personalizzato sfruttando le regole classiche di WordPress ed inserendo all'interno delle pagine elementi di codice e regole in grado di restituirci il design desiderato.