Una delle pagine che non può mancare in un qualunque sito che si rispetti è sicuramente la pagina dei contatti. Si tratta di una pagina in cui è presente un form di inoltro di una mail all’ amministratore del sito con l’intento di mandargli un messaggio o una segnalazione di qualunque genere.

A differenza di altri linguaggi di programmazione in cui l’ invio di mail comporta il dover scrivere diverse righe di codice , in PHP esiste una funzione ad hoc per per raggiungere lo scopo con il minimo sforzo : mail() .

Lo scenario di riferimento si compone di due pagine php: la prima per la raccolta dei dati tramite il form di invio e la seconda che riceva tali dati ed effettui il vero e proprio inoltro .

Lo scopo di questo post è quello di integrare una funzionalità del genere all’ interno di un sito basato su piattaforma WordPress, anche se di fatto la soluzione è valida anche per un normale sito in PHP.

Passiamo quindi a creare la pagina contact_page.php , per la raccolta dei dati. Al suo interno inseriamo :

<?php

/*
Template Name: Template Contact
*/
?>

<form  method="post" id="mail_form" action="<?php bloginfo('template_url'); ?>/mailSender.php" >
<div>Nome:</div><div><input style="margin:3px;" type="text" name="name" size="80"/> </div>
<div>Email:</div><div><input style="margin:3px;" type="text" name="email" size="80"/> </div>
<div>Argomento:</div><div><input style="margin:3px;" type="text" name="regarding" size="80" /> </div>
<div>Messaggio</div><div style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif">
<textarea cols="60" rows="10" style="margin:3px;" type="text" name="message" ></textarea>
</div>
<div><input type="submit" value="Invia" /></div>
</form>

La parte iniziale in cui appare Template Name , è necessaria per comunicare a WordPress che si tratta di una pagina di tipo Template, che viene poi applicato alla pagina WordPress che creeremo succcessivamente. Come si può notare l’attributo “action” del tag FORM ha come valore l’ indirizzo della pagina mailSender.php che è proprio la seconda pagina che serve al nostro scopo.
mailSender.php appare in questo modo:

<?

$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$regarding=$_REQUEST['regarding'];
$message=$_REQUEST['message'];
echo $name . $email . $regarding . $message ;
$oggetto= "Segnalazione dal tuo sito";
$messaggio="L'utente ".$name."(".$email.") ti ha inoltrato questo messaggio:\n ".$message . "\n\n Riferendosi a:\n ".$regarding;
if ( mail("IL TUO INDIRIZZO MAIL", $oggetto, $messaggio))
header( 'Location: http://www.gurucoder.org' );
else echo 'Errore in fase di inoltro della mail... :(';

?>

Ipotiziamo di voler creare una nuova pagina “contact” sul sito WordPress applicando il template appena creato. Quindi basta entrare in amministrazione e scegliere Pagine. A  questo punto cliccando su “Aggiungi nuova” , si aprirà un form in cui inserire il nome della pagina ( contact per l’appunto). Sulla destra poi si può notare un menù a tendina relativo a “Template di Pagina”, basterà selezionare il template: Template Contact precedentemente creato!

Bene, a questo punto accedendo alla pagina wordpress “contact” vi apparirà il form con funzionalità di inoltro mail desiderato! Eccovi il link ai due sorgenti impacchettati in un archivio.

Scompattate il file ed inserite i sorgenti nella cartella del vostro tema wordpress.

Vagando nella rete, vi segnalo questo blog in cui viene spiegata passo passo tutta la procedura per realizzare un tema WordPress come più vi piace. Il blog in questione si chiama ThemeTation , il nome è già tutto un programma , e offre la possibilità di scaricare molti temi wordpress in modo del tutto gratuito.

La cosa che mi ha colpito maggiormente è stata la cura con cui Kay Loon , l’ autore , abbia realizzato questi tutorial . Quindi se siete interessati questi sono i link diretti:

Parte 1 – Progettazione e Design in Photoshop

Parte 2 – Operazione di “Slicing” delle imamgini e codifica HTML/CSS

Parte 3a – Implementazione WordPress

Parte 3b – Implementazione WordPress cont.

Ditemi cosa ne pensate!

Come continuazione del precedente post passiamo ad analizzare le restanti parti del nostro widget:

Passando alla funzione di aggiornamento, si tratta di una funziona richiamata dal framework proprio per aggiornare i valori dei parametri relativi al widget ogni volta che vengono modificati all’interno del form lato dashboard.

function update($new_instance,$old_instance){
   $instance = $old_instance ;
   $instance['title'] = strip_tags($new_instance['title']);
   $instance['nome'] =  strip_tags($new_instance['nome']);
   $instance['cognome'] = strip_tags($new_instance['cognome']);
   return $instance ;
}

Infine c’ è la funzione form(), utilizzata dalla dashboard per dare la possibilità all’utente di modificre le caratteristiche del widget:

function form($instance){            

      $instance = wp_parse_args( (array)$instance ,
                              array( 'title' => 'Primo Widget' ,
                                     'nome' => 'nome di default' ,
                                     'cognome' => 'cognome di default' ,
                              )
                           );
      ?>
     <p>
     <label for="<? echo $this->get_field_id('title'); ?>">
                                       <? _e('Title'); ?> </label>
     <input id= "<? echo $this->get_field_id('title'); ?>"
                 name="<? echo $this->get_field_name('title'); ?>"
                 value="<? echo $instance['title']; ?>"/></p>
     <p>
     <p>
     <label for="<? echo $this->get_field_id('nome'); ?>" >
                                       <? _e('Nome:'); ?> </label>
     <input id= "<? echo $this->get_field_id('nome'); ?>"
                 name="<? echo $this->get_field_name('nome'); ?>"
                 value="<? echo $instance['nome']; ?>"/></p>
     <p>
     <p>
     <label for="<? echo $this->get_field_id('cognome'); ?>" >
                                       <? _e('Cognome:'); ?> </label>
     <input id= "<? echo $this->get_field_id('cognome'); ?>"
                 name="<? echo $this->get_field_name('cognome'); ?>"
                 value="<? echo $instance['cognome']; ?>"/></p>

<? } }// end form

Come si può notare dal codice, inizialmente  la variabile $instance viene caricata con i valori di dafault per poi essere eventualmente aggiornata tamite il form sottostante.

L’ultimo passo per terminare il nostro Widget, è l’ inserimento della funzione di caricamento ed il successivo lancio del widget:

function primo_widget_load(){
  register_widget('PrimoWidget');
  }
add_action('widgets_init','primo_widget_load');

In particolare il lancio del Widget avviene tramite la chiamata della funzione add_action().

Installazione del Widget

Prima di tutti inserite tutti i pezzi di codice in unico file e chiamatelo primo-widget.php. Per installare ed attivare il widget è necessario prima di tutto caricarlo sul vostro spazio web all’interno della cartella plugin di wordpress . A questo punto, accedete all dashboard e andate alla voce Plugin->Installati e trovate il vostro widget che sarà denominato “Primo Widget”. A questo punto cliccate si “attiva” ed il gioco è fatto. Per inserire tale widget in una sidebar per poterlo visualizzare , basta cliccare sulla voce Widget della barra laterale, selezionare il nostro nuovo widget e trascinarlo all’interno della barra laterale desiderata.

Spero che sia tutto chiaro, per qualsiasi tipo di informazione o dubbio non esitate a lasciare Commenti!

Questo tutorial si pone l’obbiettivo di darvi una linea guida per creare il vostro primo Widget utilizzando il Framework di  WordPress. Dato che l’argomento è un pò troppo lungo per trattarlo in un unico post ho deciso di dividerlo in due post distinti.

Dato lo scopo puramente illustrativo il nostro Widget non farà altro che visualizzare informazioni di  Nome e Cognome così come inseriti nel form delle impostazioni del widget nella dashboard.

Partiamo! Per prima cosa apriamo il nostro editor di pagine PHP e creiamo il file primo-widget.php . Il framework prevede una struttura abbastanza prefissata su come i widget debbano essere strutturati.

Cominciamo con l’ inserire nel file la descrizione del Widget che apparirà nell’elenco “Plugin” della Dashboard di WordPress:

<?php
/*
Plugin Name: Primo Widget
Plugin URI: none
Description: breve descrizione delle funzionalità
Version: 1.0
Author: GuruCoder
Author URI: none

== Changelog ==
* Added category option (July 28, 2009)
= 1.0 =
* First release (August 28, 2009)
Copyright 2009  GuruCoder
 This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; either version 2 of the License, or
 (at your option) any later version.

*/

Un Widget WordPress può essere logicamente distinto in quattro blocchi. Un primo blocco di inizializzazione ( funzione PrimoWidget() ) , un blocco per la “business logic” in altri termini “cosa fa il nostro widget” ( funzione widget() ) , un blocco per l’aggiornamento dei dati ( funzione update() ) ed un blocco per la visualizzazione del form lato amministrazione per l’nserimento dei parametri ( funzione form() ).

Cominciando dal primo blocco, abbiamo la dichiarazione della classe ed il cotruttore ( PrimoWidget() ):

class PrimoWidget extends WP_Widget{
   function  PrimoWidget(){

       $widget_ops = array('classname' => 'Primo Widget' ,
                     'description' => __('Un semplice Widget')
                      );
       $this->WP_Widget('PrimoWidget', __('Un Semplice Widget') , $widget_ops);
   }

In particolare il metodo WP_Widget() ha il compito di creare il widget con relativo nome, descrizione e opzioni che sono state inserite nella variabile $widget_ops .

Passando al secondo blocco:

function widget($args,$instance){
 extract($args);
 $title = apply_filters('widget_title',$instance['title']);
 $nome = $instance['nome'];
 $cognome = $instance['cognome'];
 echo $before_widget;        
 if ($title) echo $before_title . $title . $after_title;
 if ( $nome && $cognome ) {            
 $nomecompleto = $nome . " " . $cognome ;            
 printf( __('Ciao, io sono %1$s.','esempio'),$nomecompleto );            
 }
 echo $after_widget;
 wp_reset_query();
}

Qui avviene il prelievo dei dati, in questo caso il nome ed il cognome, che vengono visualizzati nel widget tramite il metodo printf(). I tags $before_widget ,$after_widget , $before_text e $after_text , in questo caso non sono stati ridefiniti quindi seguiranno le caretteristiche del tema in uso.

Nella seconda parte andrò avanti ad illustrare le restarti parti del codice..

Ipotiziamo di avere a disposizione un tema wordpress che si adatta alle vostre esigenze …ma con un piccolo problema … c’è una sola sidebar. Niente paura! invece di cambiare completamete tema , è possibile aggiungere al tema corrente una nuova sidebar e inservi all’interno i vari widgets desiderati.

La prima cosa da fare è aggiungere le informazioni relative alla nuova sidebar all’interno del file functions.php del vostro tema, tramite la chiamata alla funzione register_sidebar() come riportato di seguito:

register_sidebar(array('name'=>'sidebar_left',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>')
 );

A questo punto salviamo e chiudiamo il file. Il prossimo passo consiste nell’ accedere al file sidebar.php ed inserire il seguente codice:

<div id="sidebar_left">
<?php if ( !function_exists('dynamic_sidebar') ||
                    !dynamic_sidebar('sidebar_left') ) : ?>
<div>
<h3>Categorie</h3>
<ul>
 <?php wp_list_categories('show_count=0&title_li='); ?>
</ul>
</div>
</li>
<?php endif; ?>
</ul>
</div> <!-- Closes Sidebar_left -->

In questo modo stiamo dicendo a WordPress che se non sono presenti Widgets all’interno della sidebar , questa verrà visualizzata con all’ interno l’elenco delle categorie presenti nel blog.

L’ultima operazione sta nel gestire eventuali problemi di allineamento della nuova sidebar con il resto del blog, ma questo è un problema che dipende da come il vostro blog è organizzato in temini di CSS.