Aggiungere le pagine portfolio ad un tema Wordpress

Nella costruzione del mio tema personalizzato, di cui ti consiglio di leggere la prima lezione “Creare un tema WordPress personalizzato con _s e Bootstrap“, una delle esigenze che avevo era aggiungere le pagine Portfolio.

La cosa in WordPress è abbastanza semplice senza naturalmente aggiungere nessun plugin.

Si tratta di creare un “custom post type“, ed ho trovato un sacco di risorse online che mi sono state di aiuto. Ho trovato persino un sito che, inserendo i parametri desiderati, genera direttamente il codice da inserire per creare questo tipo di post in più : WordPress Custom Post Type generator, consigliato da Html.it in questo articolo.

Su consiglio di Piero Bellomo (che è diventato ormai il mio GURU per questo progetto), mille volte più veloce è anche GenerateWP, ne parla lui stesso qui.

Io mi sono spulciata un po di siti, anche per capire dove andasse inserita questa funzione, ho così appreso che le funzioni per il corretto funzionamento del tema vanno inserite in (come dice il nome) “functions.php“, che naturalmente è presente nel nostro tema _strap.

Non sono programmatore per cui ho cercato di capire a cosa serviva il codice che andavo ad inserire, cioè questo:

add_action( 'init', 'create_my_post_types' );

function portfolio_custom_post() { 
    // creazione (registrazione) del custom post type
    register_post_type( 'portfolio_page', /* nome del custom post type */
        // aggiungiamo ora tutte le impostazioni necessarie, in primis definiamo le varie etichette mostrate nei menù
        array('labels' => array(
            'name' => 'Portfolio', /* Nome, al plurale, dell'etichetta del post type. */
            'singular_name' => 'Pagina portfolio', /* Nome, al singolare, dell'etichetta del post type. */
            'all_items' => 'Tutte le pagine portfolio', /* Testo mostrato nei menu che indica tutti i contenuti del post type */
            'add_new' => 'Aggiungi nuovo', /* Il testo per il pulsante Aggiungi. */
            'add_new_item' => 'Aggiungi nuovo Portfolio', /* Testo per il pulsante Aggiungi nuovo post type */
            'edit_item' => 'Modifica Portfolio', /*  Testo per modifica */
            'new_item' => 'Nuova pagina Portfolio', /* Testo per nuovo oggetto */
            'view_item' => 'Visualizza Portfolio', /* Testo per visualizzare */
            'search_items' => 'Cerca Portfolio', /* Testo per la ricerca*/
            'not_found' =>  'Nessun Portfolio trovato', /* Testo per risultato non trovato */
            'not_found_in_trash' => 'Nessun portfolio trovato nel cestino', /* Testo per risultato non trovato nel cestino */
            'parent_item_colon' => ''
            ), /* Fine dell'array delle etichette */   
            'description' => 'Le pagine portfolio', /* Una breve descrizione del post type */
            'public' => true, /* Definisce se il post type sia visibile sia da front-end che da back-end */
            'publicly_queryable' => true, /* Definisce se possono essere fatte query da front-end */
            'exclude_from_search' => false, /* Definisce se questo post type è escluso dai risultati di ricerca */
            'show_ui' => true, /* Definisce se deve essere visualizzata l'interfaccia di default nel pannello di amministrazione */
            'query_var' => true,
            'menu_position' => 8, /* Definisce l'ordine in cui comparire nel menù di amministrazione a sinistra */
            'menu_icon' => get_stylesheet_directory_uri() . '/inc/images/portfolio-32x32.png', /* Scegli l'icona da usare nel menù per il posty type */
            'rewrite'   => array( 'slug' => 'portfolio/%portfolio_category%', 'with_front' => false ), /* Puoi specificare uno slug per gli URL */
            'has_archive' => 'true', /* Definisci se abilitare la generazione di un archivio (equivalente di archive-libri.php) */
            'capability_type' => 'post', /* Definisci se si comporterà come un post o come una pagina */
            'hierarchical' => false, /* Definisci se potranno essere definiti elementi padri di altri */
            /* la riga successiva definisce quali elementi verranno visualizzati nella schermata di creazione del post */
            'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'sticky')
        ) /* fine delle opzioni */
    ); /* fine della registrazione */

} 

// Inizializzazione della funzione
add_action( 'init', 'portfolio_custom_post');

Come vedi, viene utilizzata la funzione “portfolio_custom_post()” per creare un nuovo formato di post, con le varie opzioni che vedi nel codice commentate.

Magicamente appare nell’admin una nuova voce “Portfolio” nel menu e potremo iniziare ad inserire articoli nel formato “portfolio”.

Come vedi nella label “rewrite”, lo slug è impostato così: “

portfolio/%portfolio_category%

“

Io infatti volevo che gli URL del mio portfolio fossero: /portfolio/categoriaPortfolio/paginaPortfolio.

Per prima cosa avevo quindi bisogno di crearmi le categorie dedicate al portfolio, per cui mi è servita un’altra funzione:

/* Create Portfolio Categories */

add_action( 'after_setup_theme', 'create_portfolio_taxonomies', 0 );
if (!function_exists('create_portfolio_taxonomies')) {
function create_portfolio_taxonomies() 
{
   $labels = array(
    'name' => __( 'Categorie Portfolio', 'taxonomy general name' ),
    'singular_name' => __( 'Categoria portfolio', 'taxonomy singular name' ),
    'search_items' =>  'Cerca categorie portfolio',
    'all_items' => 'Tutte le categorie portfolio',
    'parent_item' => 'Categoria portfolio genitore',
    'parent_item_colon' => 'Categoria portfolio genitore:',
    'edit_item' => 'Modifica categoria portfolio', 
    'update_item' => 'Aggiorna categoria portfolio',
    'add_new_item' => 'Aggiungi nuova categoria portfolio',
    'new_item_name' => 'Nome nuova categoria portfolio',
    'menu_name' =>  'Categorie portfolio',
  );     

  register_taxonomy('portfolio_category',array('portfolio_page'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'portfolio' ),
  ));

}
}

Il principio è identico alla funzione precedente, creo un array che conterrà le categorie portfolio con le loro caratteristiche. In questo caso viene creata una “tassonomia”, cosa che ti spiegherò nella prossima puntata del tutorial.

Infine per creare il giusto URL per le pagine portfolio, ho trovato questa utile funzione, dopo essermi spaccata la testa per trovare istruzioni sul MOD_REWRITE e sulla funzione wp_rewrite di WordPress. Mi hanno anche detto che modificare gli URL è una delle cose più complicate da fare, cofermo la cosa.

Bisognerebbe conoscere bene coem si configura il file .htaccess e le regole del mod_rewrite, cosa che ho cercato di capire, impiegandoci due giorni 😀 Te l’ho detto, sono solo una semplice web designer!

Comunque alla fine la mia necessità era più semplice del previsto, e mi è bastato utilizzare questa funzione, per estrapolarmi la categoria giusta da mettere nell’url dell’articolo portfolio:

add_filter( 'post_type_link', 'portfolio_type_link', 1, 3 );
function portfolio_type_link( $post_link, $id = 0 ){

  $post = get_post( $id );
  $post_type = 'portfolio_page';
  $taxonomy = 'portfolio_category';

  if( !is_object( $post ) || $post->post_type != $post_type )
    return $post_link;

  $slug = 'default';  // Slug per i portfolio che non hanno nessuna categoria portfolio impostata

  if( $terms = wp_get_object_terms( $post->ID, $taxonomy ) )
    $slug = $terms[0]->slug;

  return str_replace( '%'. $taxonomy .'%', $slug, $post_link );

}

Semplice vero?

Devo dire che una volta messe le mani nella creazione di tassonomie e categorie di post, la cosa è estremamente semplice. Qui si tocca veramente con mano la magia e potenza di WordPress!

Non ti resta che proseguire con la prossima puntata: “Assegnare template personalizzati ad un tema WordPress“, oppure rileggere la lezione precedente “Imparare LESS ed applicarlo ad un tema WordPress“.