WordPress: gestire i post di tipo status

WordPress supporta vari formati per i suoi post. Il formato status serve per quei post che hanno la forma di brevi messaggi, quasi dei tweet. In questo articolo vedremo come gestire questo tipo di post.

Nel file functions.php aggiungiamo il supporto a questo formato:

add_theme_support( 'post-formats', array( 'status') );

Quindi modifichiamo il file single.php per intercettare questo tipo di post:

[php htmlscript="true"] <?php if ( have_posts() ) while ( have_posts() ) : the_post(); if(!has_post_format('status')) { // Loop normale ?> <?php } else { ?> <div id="status"> <div id="status-main"> <h1><a href="<?php the_permalink();?>"><?php the_title();?></a></h1> <div id="status-date"><?php the_time('j-m-Y H:i:s');?></div> <div id="status-content"> <?php the_content(); ?> </div> </div> <div id="status-image"> <?php echo get_avatar( get_the_author_email(), '80' );?> </div> </div> <?php } ?> <?php endwhile;?>

Infine aggiungiamo gli stili CSS:

/*= Status */

#status {
	padding: 0 0 1em 0;
	font-size: 2em;
	font-family: Georgia, serif;
	position: relative;
}

#status h1,
#status a {
	border: none;
	font-family: Georgia, serif;
	color: #000;
}

#status-main {
	margin-left: 100px;
	padding: 1em;
	background: #ddd;
	border-radius: 5px;
	position: relative;
}

#status-main:after {
    
   content:"";
   display:block; 
   position:absolute;
   bottom:-15px;
   left:50px;
   width:0;
   border-width:15px 15px 0;
   border-style:solid;
   border-color:#ddd transparent;
    
 }


#status-image {
	position: relative;
	left: 90px;
	border: 1px solid #666;
	width: 80px;
	height: 80px;
	margin: 1em;
	border-radius: 4px;
}

#status-date {
	margin: 5px 0;
	font-style: italic;
	color: #666;
}

Abbiamo creato l'effetto delle nuvolette da fumetto con il contenuto generato. E questo è il risultato.