WordPress eventi

Creare un calendario eventi con WordPress senza Plug-in

By Andrea Marchetti
@marchetti_design

Oggi vediamo come costruire un calendario eventi senza plug-in con WordPress. Nello specifico mostreremo nella sidebar del nostro blog una lista di eventi ordinati secondo la data dell’evento.
Il sistema quando la data viene raggiunta nasconderà automaticamente l’evento.

Per fare ciò utilizziamo alcuni strumenti che wordpress ci mette a disposizione: un custom field per salvare la data dell’evento, un loop personalizzato per visualizzare tutti gli articoli.

Functions.php

Come prima cosa apriamo il file functions.php e creiamo un custom metabox da aggiungere a i post di wordpress. All’interno di questo metabox inseriamo il custom field data_cl_eventi.

<?php

/**

 * Adds a box to the main column on the Post and Page edit screens.

 */

function cl_eventi_add_custom_box() {
    $screens = array(

    			‘post’, 					// The post type you want this to show up on, can be post, page, or custom post type

	            ‘normal’, 						// The placement of your meta box, can be normal or side

	            ‘high’ );						// The priority in which this will be displayed
    foreach ( $screens as $screen ) {
        add_meta_box(

            	‘meta-box-cl-eventi’,

            	‘Calendario Eventi’,

            	‘cl_eventi_inner_custom_box’,

            $screen

        );

    }

}

add_action( ‘add_meta_boxes’, ‘cl_eventi_add_custom_box’ );
/**

 * Prints the box content.

 *

 * @param WP_Post $post The object for the current post/page.

 */

function cl_eventi_inner_custom_box( $post ) {
  // Add an nonce field so we can check for it later.

  wp_nonce_field( ‘cl_eventi_inner_custom_box’, ‘cl_eventi_inner_custom_box_nonce’ );
  /*

   * Use get_post_meta() to retrieve an existing value

   * from the database and use the value for the form.

   */
	$data_cl_eventi = get_post_meta($post->ID, ‘data_cl_eventi’, true);
	?>
			<p><strong>Data dell’evento</strong> – Inserisci la data in formato aaaa/mm/gg. <br/><input name="data_cl_eventi" value="<?php echo $data_cl_eventi; ?>" style="border: 1px solid #ccc; margin: 10px 10px 0 0"/> Data dell’evento in programma.</p>
  <?php
}
/**

 * When the post is saved, saves our custom data.

 *

 * @param int $post_id The ID of the post being saved.

 */

function cl_eventi_save_postdata( $post_id ) {
  /*

   * We need to verify this came from the our screen and with proper authorization,

   * because save_post can be triggered at other times.

   */
  // Check if our nonce is set.

  if ( ! isset( $_POST[‘cl_eventi_inner_custom_box_nonce’] ) )

    return $post_id;
  $nonce = $_POST[‘cl_eventi_inner_custom_box_nonce’];
  // Verify that the nonce is valid.

  if ( ! wp_verify_nonce( $nonce, ‘cl_eventi_inner_custom_box’ ) )

      return $post_id;
  // If this is an autosave, our form has not been submitted, so we don’t want to do anything.

  if ( defined( ‘DOING_AUTOSAVE’ ) && DOING_AUTOSAVE )

      return $post_id;
  // Check the user’s permissions.

  if ( ‘cl_eventi’ == $_POST[‘post_type’] ) {
    if ( ! current_user_can( ‘edit_page’, $post_id ) )

        return $post_id;
  } else {
    if ( ! current_user_can( ‘edit_post’, $post_id ) )

        return $post_id;

  }
  /* OK, its safe for us to save the data now. */
  // Sanitize user input.

  $mydata = sanitize_text_field( $_POST[‘data_cl_eventi’] );
  // Update the meta field in the database.

  update_post_meta( $post_id, ‘data_cl_eventi’, $mydata );
}

add_action( ‘save_post’, ‘cl_eventi_save_postdata’ );

?>

Una volta inserito il codice in functions.php ci apparirà nel backend il metabox calendario eventi.

In questo box dobbiamo inserire la data dell’evento in formato aaaa/mm/gg: anno, mese, giorno. Questo è molto importante se la data non è formattata così il sistema non funziona correttamente.

Dopo aver impostato la data evento per i nostri articoli andiamo a pubblicarli in una categoria appositamente creata, la categoria Eventi.

Visualizzare gli eventi

Per mostrare gli eventi utilizziamo un loop personalizzato nel nostro caso inserito in sidebar.php.

<!– Loop Eventi –>

<?php

	$todaysDate = date(‘Y/m/d’);
    $specialPosts = new WP_Query();

    $specialPosts->query(‘showposts=3&cat=8&meta_key=data_cl_eventi&meta_compare=>=&meta_value=’ . $todaysDate . ‘&orderby=meta_value&order=ASC’);

?>
<h3 class="cal-tit"> Next Events </h3>
<?php if ($specialPosts->have_posts()) : while($specialPosts->have_posts()) : $specialPosts->the_post(); ?>
	<div class="event">
		<a href="<?php the_permalink(); ?>" class="img-event">
			<?php if ( has_post_thumbnail() ) { the_post_thumbnail( ‘thumbnail’); } ?>
			 <?php

			 $originalDate = get_post_meta($post->ID, ‘data_cl_eventi’, TRUE);

			 $newDateDay = date(" j", strtotime($originalDate));

			 $newDateMes = date(" M", strtotime($originalDate));

			 ?>
		</a>

		 <div class="date"><span class="giorno"><?php  echo $newDateDay ?></span><span class="mese"> <?php echo $newDateMes ?> </span> </div>
		<h4><a title="<?php the_title(); ?>"  href="<?php the_permalink(); ?>"><?php the_title(); ?></a> &nbsp;<i class="fa fa-angle-double-right"></i> </h4>
	</div>
<?php endwhile; else : ?>
	<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>

Dando un occhio alla query vediamo che ci sono varie istruzioni. Partiamo mostrando 3 post della categoria 8 (id della nostra categoria eventi) con showposts=3&cat=8.

Successivamente richiamiamo la data evento con &meta_key=data_cl_eventi e la compariamo con la data di oggi &meta_compare=>=&meta_value=’ . $todaysDate . ‘. Se la data evento è >= la data di oggi l’evento relativo viene mostrato nel loop.

Come istruzione finale troviamo &orderby=meta_value&order=ASC che ordina gli eventi da quello più imminente a quello più distante.

CSS

Rendiamo il calendario degli eventi più chiaro e accattivante con un pizzico di CSS.

.cal-tit{padding-bottom:10px}

	.event{border-bottom: 1px solid #eee;float:left; width: 100%;margin-bottom: 20px;  }

	.event .img-event{position: relative;float:left;width:30%;margin-right:10px;margin-bottom: 20px;}

	.event .img-event img{width:100%; height:auto; }

	.event .date{padding: 5px 10px; color:#fff;margin:0;font-weight: bold; background: #666; font-size: 13px;}

	.event  h4{margin:10px  0 0 0;}

Ecco il risultato finale, un calendario per i nostri eventi.

I file per il download sono disponibili qui di seguito..

Stay Tuned!

eventi

Potrebbero interessarti:

WPDAY: Creare una Area Riservata con WordPress – Slide e Download File