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...

Freedcamp, valida alternativa gratuita a Basecamp

Non è facile gestire un progetto complesso, soprattutto quando le operazioni devono essere svolte da più persone, da un team, e peggio ancora se le persone non si trovano tutte insieme nello stesso ufficio.
Grazie ad un'agenzia ho scoperto e utilizzato con soddisfazione Basecamp, ottimo software di collaborazione online, o di gestione di progetti online (project management). La sua unica pecca è di essere a pagamento :)
Stavo cercando una valida alternativa gratuita, e mi sono imbattuta in Freedcamp.
Il funzionamento è molto semplice. Si crea un account - gratuitamente - e, una volta confermato, è possibile iniziare a creare progetti ed invitare altri utenti (anche non registrati) a partecipare.

PROGETTI
Per ogni progetto creato è possibile scegliere quali utenti invitare e a che titolo. Saranno admin come noi, oppure user oppure ancora client. Ciascuno di questi ruoli ha chiaramente permessi differenziati.
Inoltre per ogni progetto posso scegliere quali applicazioni installare.
In comune a tutti i progetti c'è il WALL, una bacheca dove è possibile postare messaggi in plain text.

TO-DOS (applicazione)
Per ogni progetto, oltre ad un nome ed una descrizione, è possibile inserire una lista di to-do (cose da fare), con priorità e data di consegna, e assegnare ciascuno di questi ad un utente tra quelli presenti nel progetto. Semplicemente cliccando sul to-do, ogni utente potrà cambiare il suo status (da fare, in progress, completato) e commentarlo.

DISCUSSIONS (applicazione)
Per ogni progetto è a disposizione una specie di forum, dove gli utenti possono aprire discussioni e rispondere. Molto utile in progetti lunghi e complessi, decisamente meno utile in altri contesti.

MILESTONES (applicazione)
Molto simili ai to-dos, le milestones sono le pietre miliari del nostro progetto. Ovvero le scadenze vere e proprie.Vengono trattati diversamente dai to-dos, infatti hanno un loro widget e una loro rappresentazione sul calendario. Non possono essere commentate ma hanno l'utile funzione di poter essere ordinate per data, priorità o assegnatario.

TIME (applicazione)
Una cosa a mio avviso utilissima è il time. Ovvero la possibilità di creare dei timer per ogni attività svolta su quel progetto. Il timer può segnalare un tempo impiegato in passato, oppure lo possiamo far partire da un comodo pulsante sulla barra in alto per conteggiare il tempo che trascorriamo svolgendo una specifica attività. Veramente comodo per chi deve conteggiare le ore per ogni progetto a fine mese ;)

FILES (applicazione)
Una lista dei file caricati per il progetto corrente. Praticamente inutile nella versione free di Freedcamp, dato che lo spazio a disposizione per tutti i progetti è di 20Mb. Per avere uno spazio decente è necessario sottoscrivere uno dei loro abbonamenti.

CALENDAR (applicazione opzionale gratuita)
Questa è una delle cose indispensabili su app di questo tipo. Nel calendario vengono visualizzate tutte le milestone e i to-do per i quali sia stata impostata una data di consegna. Peccato solo che non sia possibile visualizzarlo sulla dashboard, dove sarebbe veramente molto utile.

WIDGET
Nella dashboard è possibile creare dei widget (solo quelli predefiniti in Freedcamp), come per esempio una lista delle milestone, oppure dei to-do, oppure ancora le ultime modifiche, i timer, ecc. Peccato che le funzionalità e le possibilità di personalizzazione siano molto limitate.


In definitiva si tratta di un prodotto interessante e molto utile, soprattutto considerando che è completamente free nelle sue funzionalità di base.

Leggi tutto...

Eliminare i tag da una stringa con javascript

Immagino che molti di voi usino spesso l'utilissima funzione strip_tags() di PHP.
Ma se oggi mettiamo il caso vi servisse una funzione simile per Javascript? Non esiste nulla di built-in, ma alcuni bravi programmatori hanno pensato bene di risolvere il problema.

Ecco la funzione che hanno ideato:

function strip_tags (input, allowed) {
    // Strips HTML and PHP tags from a string  
    // 
    // version: 1109.2015
    // discuss at: http://phpjs.org/functions/strip_tags    // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Luke Godfrey
    // +      input by: Pul
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   bugfixed by: Onno Marsman    // +      input by: Alex
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +      input by: Marc Palau
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +      input by: Brett Zamir (http://brett-zamir.me)    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   bugfixed by: Eric Nagel
    // +      input by: Bobby Drake
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   bugfixed by: Tomasz Wesolowski    // +      input by: Evertjan Garretsen
    // +    revised by: Rafał Kukawski (http://blog.kukawski.pl/)
    // *     example 1: strip_tags('<p>Kevin</p> <b>van</b> <i>Zonneveld</i>', '<i><b>');
    // *     returns 1: 'Kevin <b>van</b> <i>Zonneveld</i>'
    // *     example 2: strip_tags('<p>Kevin <img src="someimage.png" onmouseover="someFunction()">van <i>Zonneveld</i></p>', '<p>');    // *     returns 2: '<p>Kevin van Zonneveld</p>'
    // *     example 3: strip_tags("<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>", "<a>");
    // *     returns 3: '<a href='http://kevin.vanzonneveld.net'>Kevin van Zonneveld</a>'
    // *     example 4: strip_tags('1 < 5 5 > 1');
    // *     returns 4: '1 < 5 5 > 1'    // *     example 5: strip_tags('1 <br/> 1');
    // *     returns 5: '1  1'
    // *     example 6: strip_tags('1 <br/> 1', '<br>');
    // *     returns 6: '1  1'
    // *     example 7: strip_tags('1 <br/> 1', '<br><br/>');    // *     returns 7: '1 <br/> 1'
    allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
        commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
    return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {        return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
    });
}

Il link originale con esempi d'utilizzo:
http://phpjs.org/functions/strip_tags:535

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...