Immagine in evidenza personalizzate con Wordpress

Avrete certamente notato che sul tema predefinito per Wordpress, TwentyEleven, nella header appare una immagine personalizzata (header image), che può essere modificata via dashboard, e che può essere diversa per ogni pagina e articolo.

Il codice che richiama quella immagine è il seguente:

            <?php
                // Check to see if the header image has been removed
                $header_image = get_header_image();
                if ( ! empty( $header_image ) ) :
        ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php
                    // The header image
                    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                    if ( is_singular() &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                    else : ?>
                    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                <?php endif; // end check for featured image or standard header ?>
            </a>
            <?php endif; // end check for removed header image ?>

 
Per modificare i valori delle dimensioni di quella immagine, è sufficiente inserire questo codice nel file functions.php del nostro tema:

define('HEADER_IMAGE_WIDTH', 1920); // inserire la larghezza dell'immagine
define('HEADER_IMAGE_HEIGHT', 460); // inserire l'altezza dell'immagine

Leggi tutto...

Thumbnails dei nostri articoli con Wordpress

Con Wordpress 2.9 e successivi è stata introdotta una importante novità: la possibilità di impostare, per ogni articolo o pagina, una immagine in miniatura, utilizzabile in una lista di articoli o post che dir si voglia.
Nelle versioni precedenti molti temi sopperivano a questa mancanza del core di Wordpress creando campi personalizzati per l'inserimento di una immagine oppure prelevavano con una funzione la prima immagine inserita nel testo dell'articolo.

Per attivare la gestione dell'immagine lato backend dobbiamo inserire questo codice nel file functions.php del nostro tema Wordpress:

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
}

 

Utilizzando appunto la funzione add_theme_support() di Wordpress. 

E' possibile scegliere anche la dimensione della miniatura che vogliamo utilizzare:

set_post_thumbnail_size( 50, 50 );

 

Fatto questo possiamo stamparla nel nostro tema con questo codice:

the_post_thumbnail();

Vi consiglio comunque di leggere questi due articoli per tutte le informazioni:
http://www.undolog.com/2010/04/09/wordpress-2-9-la-nuova-funzione-post-thumbnails/
http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/

Leggi tutto...

Menu personalizzati in Wordpress

Con Wordpress 3 è stata introdotta nella popolare piattaforma di blogging una importante novità: i menu personalizzati.
Per avere il nostro menu personalizzato, ovvero un menu diverso rispetto alla solita lista di pagine o di categorie, è sufficiente crearlo dal menu Aspetto > Menu, e poi assegnarlo alla posizione di navigazione principale. Le posizioni dipenderanno dal nostro tema.
Normalmente un tema che supporti i menu personalizzati ha una sola posizione a disposizione, ma possiamo aggiungere noi tutte quelle che ci servono, grazie alle funzioni register_nav_menu() e wp_nav_menu().

Nel file functions.php del nostro tema è sufficiente aggiungere questo codice (per ogni posizione di menu che vogliamo aggiungere):
if ( function_exists( 'register_nav_menu' ) ) {
    register_nav_menu( 'menu1', 'Il mio menu' );
}


e nel nostro tema, nella posizione in cui vogliamo far apparire il menu, dobbiamo scrivere questo codice:
wp_nav_menu(array('theme_location'  => 'menu1'));

Come vedete il valore della chiave "theme_location" deve essere il nome che abbiamo dato al nostro menu. Invece il secondo parametro della funzione register_nav_menu() sarà il nome che apparirà nella nostra dashboard alla sezione Aspetto > Menu > Posizione dei temi.
Ricordiamoci di assegnare un menu a quella posizione nella dashboard, altrimenti apparirà il menu di navigazione di default.

Possiamo personalizzare il nostro menu in molti modi, semplicemente modificando la Walker Class di Wordpress. Infatti l'ultimo parametro accettato dalla funzione wp_nav_menu() è proprio un eventuale walker object personalizzato da usare.

Ma cosa potremmo fare modificando questa classe? Per esempio potremmo voler mostrare una descrizione per ogni voce del menu, e questo articolo (Improve your wordpress navigation menu output) ci spiega come fare.
Oppure potremmo voler mostrare una thumbnail per ogni voce del menu, come ci spiega quest'altro articolo (Wordpress - Featured images thumbnails in menus).
Oppure ancora potremmo aver bisogno di mostrare anche un id della pagina che andiamo a linkare, per esempio per qualche effetto con jQuery, e per questo vi consiglio di seguire questo articolo (WordPress – adding page id’s to menu).


 

Leggi tutto...

Includere jQuery in un tema di Wordpress

Molti di voi sapranno che Wordpress contiene già al suo interno tutte le principali librerie javascript, aggiornate in base alla versione di Wordpress che state utilizzando.
Supponete di voler utilizzare del codice javascript basato sulla libreria jQuery, e che vogliate usare la libreria preinstallata in Wordpress. Come fare? Molti temi non caricano automaticamente le librerie che ci servono.

Per far sì che il nostro tema di Wordpress carichi jQuery, occorre usare la funzione wp_enqueue_script():

<?php wp_enqueue_script("jquery"); ?>

che va inserita prima della funzione <?php wp_head();?> nella <head></head> del nostro tema (presumibilmente all'interno del file header.php).

Ora potete richiamare il vostro file js DOPO la funzione wp_head(); :

<script type="text/javascript"
   src="<?php bloginfo("template_url"); ?>/js/yourScript.js"></script>

Per essere sicuri che tutto funzioni però, anzichè utilizzare il simbolo standard di jQuery ($) che può generare conflitti con altre librerie, adottiamo questo metodo:

var $j = jQuery.noConflict();

$j(function(){

    alert('ciao'); //qui il vostro codice :)

});

In questo modo tutto funzionerà perfettamente!

Ecco un esempio completo:
 

<head>

[...]

<?php wp_enqueue_script("jquery"); ?>

<?php wp_head(); ?> 

<script type="text/javascript">

var $j = jQuery.noConflict();

$j(function(){

    alert('ciao'); //qui il vostro codice :)

});

</script> 

</head> 

Leggi tutto...