Blog su Wordpress, Web Design, Web Development e Seo

Dopo mesi torno a scrivere finalmente, oggi mi è capitato di aver bisogno proprio di questo, un plugin che mi permettesse di inserire html e php in un widget. Quando vogliamo infatti inserire del codice nella nostra sidebar, spesso modifichiamo direttamente il file sidebar.php del nostro tema. Ma questa volta per semplicità, comodità e anche per cambiare la posizione del mio widget quando voglio senza editare i file del mio tema, ho cercato e trovato un ottimo plugin che ci permette di inserire sia testo, che html e php.

Il fantastico plugin in questione si chiama Advanced Text Widget, perfettamente compatibile con l’ ultima versione di WordPress, estensione del widget di testo che troviamo già in WordPress.

Permette inoltre di specificare su quali pagine vogliamo che compaia il widget, pagine, post, categorie, ecc.

Ovviamente installarlo è semplicissimo, scaricate, uploadate, attivate e trascinate il widget nella vostra sidebar!

Buon divertimento!

WordPress 3.0 inserisce definitivamente la possibilità di creare una thumbnail per ogni post.

Questa funzionalità però presuppone che di volta in volta impostiate un’ apposita immagine, in pratica vengono sostituiti un pò di plugin e trucchetti che prima permettevano di associare ad ogni post una thumbnail.

Ogni volta che carichiamo un’ immagine WordPress crea una thumbnail, con le impostazioni settate in Impostazioni->Media.

Per recuperare automaticamente la prima thumbnail di ogni post, per utilizzarla magari in homepage, possiamo usare questa funzione:

<code>function get_post_thumbnail() {
 $files = get_children('post_parent='.get_the_ID().'&post_type=attachment&post_mime_type=image');
 if($files) :
 $keys = array_reverse(array_keys($files));
 $j=0;
 $num = $keys[$j];
 $image=wp_get_attachment_image($num, 'large', false);
 $imagepieces = explode('"', $image);
 $imagepath = $imagepieces[1];
 $thumb=wp_get_attachment_thumb_url($num);
 print $thumb;
 else:
 print "http://www.yourdomain.com/wp-content/uploads/2010/02/default-post-thumb.jpg";
 endif;
 }</code>

Questo è il codice che va inserito nel file functions.php del template utilizzato.

Il grosso è già fatto. Con

<?php get_post_thumbnail();?>

recuperiamo l’ url della nostra thumbnail e possiamo tranquillamente inserirlo nel loop in questo modo ad esempio:

<code><?php while (have_posts()) : the_post(); ?>
 <div>
 <img src="<?php get_post_thumbnail(); ?>" alt="<?php the_title(); ?>" />
 <div><a href="<?php the_permalink() ?>"  rel="bookmark"><?php the_title(); ?></a></div>
 </div>
 <?php endwhile; ?></code>

Infine create pure una thumbnail di default da utilizzare per i post che non hanno immagini, chiamatela default-post-thumb.jpg oppure sostituite nomi e percorso nel codice della funzione.

Oggi mi è passata sotto gli occhi una funzione di WordPress che non mi capitava di utilizzare da un pò.

Tutti conoscono il Loop di WordPress che utilizziamo per recuperare e visualizzare i nostri bei post. Tutti sanno come impostare dal pannello di controllo di WordPress il numero di post visualizzati in home ad esempio.

Ma cosa succede se vogliamo creare una pagina particolare, che visualizzi, ad esempio solo 3 o 4 post?

Non è poi così complicato proprio grazie a query_posts().

Questa funzione nasce unicamente con lo scopo di modificare il Loop.

Un esempio tratto direttamente da wordpress.org del suo utilizzo:

//The Query
query_posts('posts_per_page=5');
//The Loop
if ( have_posts() ) : while ( have_posts() ) : the_post();
 ..
endwhile; else:
 ..
endif;
//Reset Query
wp_reset_query();
?>

Quindi la funzione va chiamata appena prima dell’ inizio del Loop e la funzione genererà una nuova richiesta tenendo conto dei parametri inseriti.
In questo modo è possibile personalizzare il loop con una serie ben fornita di parametri:

• categoria
• tag
• autore
• recuperare un unico post o un’ unica pagina
• recuperare i post per status
• sticky post
• tempo

Bella funzione no?

Quando si sviluppa un sito web non si può più prescindere da javascript. Perciò spesso ci troviamo ad includere le varie librerie anche in progetti minori, ad esempio plugin o templates per WordPress.

Ma qual è il modo corretto per includere le librerie nel nostro tema? WordPress comprende da tempo tutte le maggiori librerie javascript, che si trovano esattamente in wp-includes/js.

Possiamo quindi utilizzare queste librerie richiamandole attraverso la funzione:

 wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); 

$handle è l’unico parametro obbligatorio ed è il nome dello script già incluso in WordPress che vogliamo richiamare

$src è utilizzato nel caso vogliamo includere uno script non conosciuto da WordPress

$deps è un array di valori da passare all’ eventuale script non conosciuto da WordPress

$ver è semplicemente la versione dello script

Infine utilizziamo $in_footer per specificare che lo script venga incluso solo alla fine del body.

Così se abbiamo bisogno di jQuery una classica chiamata è:

 wp_enqueue_script(jquery); 

Attenzione però…il codice va inserito tra i tag e e prima della funzione

wp_head();

Nell’ estate dell’ ormai lontano 1995 veniva rilasciato Windows 95. Ve lo ricordate? A pensarci è una delle cose che mi fa quasi sentire vecchia .

Internet Explorer 1.0
E con Windows 95 veniva rilasciato anche Internet Explorer 1.0 dando così inizio alla “guerra dei browser”.

In questa immagine dell’ epoca, possiamo vedere msn.com com’ era 15 anni fa visto da IE….Wow!

Erano quelli i tempi delle connessioni dial-up e dei modem a 16 bit!

Strano a credersi ma allora Internet Explorer rappresentò l’ apertura del Web, la liberalizzazione dal monopolio e dai limiti imposti da AOL. IE nacque quando Microsoft si decise ad acquistare la licenza per il codice di Mosaico, il primo browser ad interfaccia grafica. Nell’ agosto del 1995 IE1 fu incluso nel Windows Plus! Pack, venduto per “soli” $49.

Con Internet Explorer si poteva navigare in rete, visualizzare i newsgroup e accedere a contenuti multimediali.

Internet Explorer 2.0
La vita della prima versione durò solo qualche mese. Nel novembre dello stesso anno Microsoft rilascia infatti Internet Explorer 2.0 e l’ anno successivo il browser viene rilasciato anche nelle versioni per Windows NT, Windows 3.1 e Mac.

Internet Explorer 3.0
Con Internet Explorer 3.0 viene lanciato il logo che ancora oggi, seppur di volta in volta rivisitato, contraddistingue IE. Venne incluso un client di posta, ibrido del futuro Outlook Express e fu per la prima volta introdotto il supporto ai Css. Internet Explorer divenne capace di visualizzare gifs e jpegs e soprattutto di riprodurre i midi che diverranno presto la colonna sonora di ogni sito web che si rispetti.

Intanto IE inizia a guadagnare terreno nella lotta contro Netscape, nonostante detenga solo il 10 % del mercato.

Internet Explorer 4.0
Arriviamo così al Settembre del 1997, quando viene rilasciato Internet Explorer 4.0, che accompagnerà poi il nuovo Windows 98, strategia vincente che porterà IE a detenere il 60 % del mercato dopo soli due anni. Con IE 4.0 viene introdotto un nuovo motore di rendering, il Trident.

La guerra dei browser inizia anche sul piano legale. Il Dipartimento di Giustizia degli Stati Uniti d’ America cita la Microsoft per abuso del potere di monopolio a discapito dei concorrenti, principalmente Netscape e Opera.

Internet Explorer 5.0
Intanto viene rilasciato Internet Explorer 5.0 che con il supporto al testo bidirezionale sancisce un altro passo importante. La comunità internazionale approva e ringrazia.

Internet Explorer 6.0
Arriviamo quindi alla nota dolente: Internet Explorer 6.0, disgrazia di portata unica per gli sviluppatori di tutto il mondo. Rilasciato nel 91 con Windows Xp, resterà per quasi 6 anni l’ unica scelta possibile dei fan di Microsoft in campo browser.

Solo nel 2009 infatti colossi del Web, come Google e Digg annunciano il termine prossimo del supporto all’ ormai obsoleto browser.

Internet Explorer 7.0
La svolta fu infatti segnata dal rilascio di Internet Explorer 7.0, che includeva la visualizzazione a schede, il supporto per gli Rss e la protezione contro il pishing. Purtroppo però la nuova versione passa quasi inosservata e la maggior parte degli utenti continuò ad utilizzare il “disastro” IE 6.

Prende quindi piede Firefox. Open source, con la visualizzazione a schede e il supporto per gli addon. Internet Explorer ha un nuovo, forte concorrente….ma non solo.

Anche Google ci mette il suo e nel settembre del 2008 inizia a promuovere la beta di Chrome.

Internet Explorer 8.0
In questo clima incandescente arriva Internet Explorer 8.0, che introduce per la prima volta la navigazione anonima.

Intanto però Internet Explorer continua a perdere quote significative di mercato in favore del sempre più diffuso Firefox e dei concorrenti minori, Chrome, Opera e Safari.

Come se non bastasse ancora guai sul piano legale. Stavolta è la Commissione Europea ad accusare la Microsoft di abusare del proprio potere per introdurre Internet Explorer in Windows. La questione si risolve solo alla fine dello scorso anno quando Microsoft accetta di inserire un sondaggio per chiedere all’ utente di Windows 7 quale browser preferisce venga installato.

Internet Explorer 9.0
E il futuro? Tutto il mondo del Web sembra ormai guardare al nuovo e rivoluzionario HTML5, in grado di soppiantare Flash. Internet Explorer 9.0 è atteso per il nuovo anno, e una beta sembra quasi essere pronta al rilascio il prossimo 15 settembre.

E il futuro remoto? Beh in un mondo fatto di concorrenza spietata, dove niente è scontato anche sul piano dei browser e degli OS è guerra aperta più che mai. Io guarderei a Google, all’ open source e ai servizi on line come il prossimo futuro.

Il lavoro del web designer freelancer è un lavoro che per quanto affascini diventa difficile da intraprendere per la mancanza di un percorso predefinito e sicuro.

Io penso che ci si debba prima di tutto informare, studiare, cercare di capire cosa è necessario apprendere.

E da questo punto di vista, chi vuole diventare web designer, è fortunato. Si hanno infatti a disposizione molte risorse, molte anche gratuite e senza uscire di casa. In rete si possono infatti reperire numerosi guide e tutorial, con cui far pratica per far proprie tecniche e tendenze.

Ci sono anche tanti ebook gratuiti. E Put the Wow in your website è uno di questi.

E’ un ebook che in una quindicina di pagine si rivolge a chi ha bisogno di creare un sito o a chi vuole crearlo. Si legge in fretta anche se in inglese. I punti che tocca sono i più ovvi ma anche i più discussi:

• Quali sono le sezioni indispenzabili di un sito?
• Come fidelizzare i propri visitatori?
• Come promuovere il proprio sito?

E poi ancora tocca un argomento interessante: quanto dura il design di un sito? per quanto tempo resta attuale?

E infine cose fondamentali come:

• A chi si rivolge il sito?
• Obiettivi principali?
• Cosa vogliamo ottenere?
• Come vogliamo essere contattati?

Per concludere con l’ analisi finale:

• E’ chiaro il messaggio che volevamo inviare?
• Il nuovo design è chiaro? E’ semplice?

Insomma se siete agli inizi o se anche avete intenzione di creare il vostro primo sito web, anche una lettura veloce potrebbe far bene.

Qualche anno fa si chiamava foxmarks, un plugin per Firefox che archiviava on line i segnalibri permettendo quindi di averli sempre a disposizione. Ora è diventato Xmarks e sono state sviluppate versioni anche per Internet Explorer, Safari e Chrome.

Io lo trovo fantastico. E’ vero, infatti, che oggi i nostri link preferiti sono sui social network e sugli infiniti servizi di bookmarks management, ma averli a disposizione nel menù del nostro browser preferito resta pur sempre una grossa comodità.

Inoltre una delle più ghiotte novità introdotta con il passaggio alla nuova versione (nuovo nome) consente di creare dei profili, in modo da utilizzare un gruppo di link per il lavoro, uno per casa ecc, basta crearli e scegliere di volta in volta a quale gruppo assegnare i link.

Alcune voci lo davano già per disperso. I ritardi di Microsoft hanno posticipato il rilascio di un bel pò di mesi, ma finalmente il tanto atteso nuovo Hotmail è arrivato. Oggi la maggior parte degli utenti di UK, USA e Canada possono provare Hotmail Wave 4. Questo è il nome in codice del rinnovato servizio Hotmail.

Ma quali sono le novità? E come vannno i primi test?

I primi commenti in rete parlano di un servizio più lento, di crash su IE e alcuni SO Microsoft(indovinate esattamente quale…) e addirittura di problemi di connessione con Msn. Non mi lascio spaventare e corro subito a vedere se sono tra i (s)fortunati che hanno già avuto l’ update.

Ebbene si una ventata di aria fresca ha già travolto i miei account su Hotmail.

• Innanzitutto non noto la tanto lamentata lentezza, forse un pochino ma si gira tra una cosa e l’ altra abbastanza velocemente.

• Microsoft ci avverte subito che se non ci piace la disposizione degli elementi (menù, messaggi e cartelle) possiamo cambiarla sullo stile di Outlook: viene aggiunta infatti la possibilità di visualizzare l’ elenco dei messaggi insieme al contenuto del messaggio aperto. Buono direi! E soprattutto comoda e veloce la ricerca e il controllo delle mail. E’ diventato molto più semplice eliminare quello che non ci interessa e considerando che un buon 50% di quello che riceviamo è spam o junk mail….

• Dimensione massima allegati: 10GB. Si avete capito bene, finalmente mai più problemi di allegati.

• Integrazione dei documenti Office: quando riceviamo un documento Office, d’ ora in poi, non dobbiamo più preoccuparci se Office sia installato sul computer in uso, sarà possibile visualizzarlo in ogni caso.

• Msn Messenger: altra novità che ci consente di inviare un messaggio ai nostri contatti di Msn direttamente dalla casella di posta. Senza dover installare Msn.

• Outlook Connector: consente di sincronizzare Outlook direttamente con la casella di posta…Fantastico direi!

• SkyDrive: hard disk virtuale a nostra disposizione, utile anche per non intasare le caselle degli amici nel caso vogliate inviargli un video della vostra vacanza da 10 GB.

• Mobile: Exchange ActiveSync vi consente di sincronizzare contatti e email con il vostro cellulare!

Insomma novità interessanti, almeno secondo il mio parere. Mi sembra che la lunga attesa stavolta sia servita!

Nuovo template quasi pronto, una delle ultime cose che mi resta da fare è la personalizzazione del campo ricerca di WordPress.

Ma come si procede quando vogliamo modificare il form di ricerca in WordPress?

Prima di tutto occorre disegnarlo in Photoshop. Adattandolo alla grafica già esistente, a me è venuto fuori qualcosa del genere:

Disegnare un search form con Photoshop è davvero molto facile, basta tracciare un paio di rettangoli e scegliere una bella icona.

In questo caso è semplice ma efficace.

Quando è il momento di mostrare il campo ricerca WordPress, prima di ogni altro posto, va a cercarlo in un file del template che porta il nome di searchform.php.

Di conseguenza la prima cosa da fare è creare tale file.

Un tipico searchform.php potrebbe essere qualcosa del genere:

<div id="cerca">
<form id="searchform" action="<?php bloginfo('url'); ?>/" method="get">
<input id="searchbox" class="search_field" name="s" value="<?php the_search_query(); ?>" />
<input class="search_button" src="<?php bloginfo('template_url'); ?>/images/search.png" type="image" value="Cerca" />
</form></div>

Il div principale è il div cerca, attraverso il foglio di stile possiamo dare colori e forme al nostro campo ricerca.

Io ho scelto di inserirlo nella sidebar, ma non tramite widget, in quanto voglio dargli uno stile diverso. Pertanto vado ad inserirlo nel file sidebar.php con questa funzione:

 get_search_form();

Passiamo quindi al foglio di stile. Ovviamente in un tema WordPress tutto il css va inserito nel file style.css e anche quello relativo al searchform finisce insieme al resto.

Partendo dall’ immagine che vedete su, due sono le cose che vanno separate, lo sfondo o background e l’ icona di ricerca.

Abbiamo quindi queste due immagini:

e

dobbiamo solo dare una sistematina ai css, questo è quello di cui ho bisogno nel mio caso:

#cerca{  /* è questo il div principale */
 margin-bottom:10px; /*il margine per staccare l' elemento successivo*/
 width:331px;
 height:51px;
 background-image:url(images/cerca_bg.png);/* l' immagine di sfondo è la cosa fondamentale */
 background-repeat:no-repeat; /*nel mio caso non c'è bisogno di ripetere lo sfondo ma potrebbe anche non essere così*/
 background-position: top center; /* la posizione dello sfondo */
}
#searchform{  /* questo è il form */
 padding-left:30px; /* l 'importante è centrarlo nel div */
 padding-top:5px;
 width:300px;
 height:51px;
 text-align:left; /* definiamo l' allineamento del testo */
}
.search_field{ /*il campo di ricerca */
background-color:transparent; /* non abbiamo bisogno di uno sfondo */
border:0 none;
float:left; /* il float serve ad inserire l' icona sulla stessa riga */
height:20px;
margin-left:7px;
margin-top:10px;
padding-right:53px;
width:180px;
}
.search_button { /*infine centriamo l' icona*/
margin-right:7px;
margin-top:3px;
}

Come vedete il foglio di stile è tutto commentato, dovrebbe essere abbastanza chiaro.
Non ci vuole poi tanto, no?

Avrete notato la grafica più fresh and clean (fresca e pulita) rispetto all’ ultima. Anche se non tutte le sezioni sono completate volevo chiedervi un parere su questa nuova linea.

Insomma che ne dite? Dai rispondete al sondaggio e vediamo cosa ve ne pare! Commenti e pareri sono ovviamente i benvenuti. Grazie!

 Loading ...