elisacucco

venerdì 16 dicembre 2011

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

Thumbnails dei nostri articoli con Wordpress

0 commenti

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/

Menu personalizzati in Wordpress

1 commenti

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

lunedì 12 dicembre 2011

Freedcamp, valida alternativa gratuita a Basecamp

0 commenti

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.

venerdì 9 dicembre 2011

Eliminare i tag da una stringa con javascript

0 commenti

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

Includere jQuery in un tema di Wordpress

0 commenti

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>

lunedì 24 ottobre 2011

40 sfondi per halloween, ispirazione e divertimento

0 commenti

Capita sempre più spesso che i clienti ci chiedano un intervento grafico sul sito in funzione di particolari periodi dell'anno: Natale, Pasqua, e perchè no ormai anche Halloween.
Che dobbiate farlo per lavoro, o che semplicemente siate anche voi (come me) degli appassionati di questa festa importata (forse?), vi segnalo questa raccolta di wallpaper a tema, che ripropongono tutta la simbologia tipica di questa festa: scheletri, Jack O'Lantern, zucche, maschere, ecc...

Buon Halloween a tutti!

giovedì 13 ottobre 2011

Il mondo IT perde due grandi pionieri dell'informatica

0 commenti

Nel giro di una settimana, due importanti figure nel mondo dell'informatica ci lasciano per sempre. Sto parlando di Steve Jobs (San Francisco, 24 febbraio 1955 – Palo Alto, 5 ottobre 2011), fondatore di Apple, e di Dennis Ritchie (Bronxville, 9 settembre 1941 – Murray Hill, 12 ottobre 2011), padre di Unix e del linguaggio C.

Steve Jobs è noto per essere stato il fondatore della società Apple Inc., proprietario della Pixar (prima dell'acquisizione da parte della Disney), e per aver introdotto al grande pubblico il primo personal computer e prodotti di successo come iPod, iPhone e iPad.

Dennis Ritchie è stato un programmatore ed un hacker. Dopo la laurea ad Harvard, sviluppò assieme a Ken Thompson una prima versione del sistema operativo Unix presso i laboratori Bell. Il suo libro "Programmare in C" (titolo originale: The C Programming Language), scritto con Brian Kernighan, è oggi reputato un testo fondamentale per i programmatori.
Robert Pike, suo ex collaboratore presso Bell, ha dichiarato: “Il mondo ha perso una mente davvero grandiosa”. C, infatti, è ancora oggi il linguaggio di programmazione più usato di tutti i tempi e senza UNIX, molto probabilmente, non avremmo Linux, Mac OS X, BSD solo per citare i più famosi e usati tra i sistemi operativi basati sulla creazione di Ritchie e Thompson.

martedì 27 settembre 2011

Buon compleanno Google!

0 commenti

Google compie 13 anni... tanti auguri!

Da Il Corriere della Sera:

Il motore di ricerca maggiore al mondo e' stato registrato come sito Internet il 27 settembre 1998, anche se i fondatori, Larry Page e Sergey Brin, all'epoca studenti dell'universita' di Stanford, avevano messo a punto la prima versione del sito gia' nel 1996. Da allora molte cose sono cambiate: Google catalizza l'83% circa delle ricerche su Internet, e' una societa' quotata in Borsa (il titolo e' scambiato a oltre 539 dollari per azione), con una capitalizzazione di mercato di oltre 174 miliardi di dollari, e gioca un ruolo importante nel settore tecnologico. Basti pensare che solo nel 2011 ha acquistato per 900 milioni di dollari 6.000 brevetti di Nortel Networks e ha rilevato Motorola Mobility per 12,5 miliardi di dollari. Google ha recentemente lanciato il proprio social network, Google+, nel tentativo di contrastare la popolarita' di Facebook. E si e' lanciata anche in attivita' di lobby, facendo sentire il proprio peso anche a livello politico: dopo avere sostenuto per lungo tempo i candidati democratici, ora guarda anche ai repubblicani, con donazioni, tra le altre, ad associazioni conservatrici come la Heritage Foundation, l'American Enterprise Institute e la Republican Governor Association. Google ha festeggiato con un nuovo "doodle" (le animazioni in home page sul sito, dedicate quotidianamente alle ricorrenze piu' disparate): una festa di compleanno con palloncini colorati, pacchetti regalo e una torta con tredici candeline. Il nome deriva dalla parola "googol", un termine matematico per indicare un 1 seguito da 100 zero e che rappresenta "l'enorme volume delle informazioni esistenti e la portata della missione di Google: organizzare le informazioni presenti nel mondo e renderle accessibili a tutti".

Alcuni eccellenti tooltip / nuvolette con jQuery

0 commenti

Può capitare in diverse occasioni di voler dare una grafica più importante ai nostri tristi "title", oppure semplicemente vogliamo mostrare in modo carino delle informazioni su un termine o su una immagine o su un pulsante. Ad esempio in un form potremmo volere la classica "nuvoletta" o tooltip apparire quando passiamo con il mouse sopra un input o sopra una label.
jQuery (e il folto gruppo dei suoi ammiratori) ci viene in aiuto con una serie di plugin veramente stupendi! Tutti da provare!

Simple tooltip

qTip

The Tooltip

Dynamic Tooltip

Awesomeness

Prototip 2

Coda Popup Bubbles

Popup Bubble

jTip

Tipsy

jQuery Ajax Tooltip (tutorial)

jQuery Horizontal Tooltip (tutorial)

Simple Tooltip with jQuery and CSS (tutorial)

Fresh Tooltip

TipTip

(mb)Tooltip

vTip

jGrowl

Generic Popus

Digg-style post sharing tool

Floating Hint Box

Easiest jQuery Tooltip Ever

BsTip

Shiny Tooltips

I migliori plugin jQuery per gallerie immagini e slider

2 commenti

Mi sono accorta, nonostante i miei numerosi interventi sull'argomento, di aver sempre ignorato l'esistenza di alcune bellissime gallery e slideshow spettacolari realizzati con jQuery.
Ecco quindi un elenco che spero possa ritenersi quasi completo.

Supersized