La gestione dei link, aggiornata al 2015

Nei commenti è venuta fuori l’esigenza di chiarire ancora come gestire un insieme di link all’interno della pagina web del nostro spazio su WordPress.com.

Per una corretta gestione dei link, mantenendo una coerenza temporale, anche in vista di un cambiamento di template, lo strumento a nostra disposizione è il widget LINK.

WordPress.com oggi non usa più la dicitura Blogroll (menzionata nel nostro post del 2007), ma una esplicita voce Link nella  Bacheca del nostro sito. [Ricordo che nei miei screenshot le diciture sono in inglese per la mia specifica scelta di come visualizzare l’interfaccia di gestione]

condivisione link (blogroll) 01

Cliccando sulla voce di menù Link veniamo portati in una sezione dove poter modificare la nostra collezione di link (precedentemente inseriti) o aggiungerne di nuovi. Per la spiegazione delle varie voci, nel momento in cui si voglia aggiungerne di nuovi, fate riferimento al nostro vecchio post sopra menzionato.

condivisione link (blogroll) 02

Anche i link hanno una Categoria, e ricordiamoci anche un voto ed un id-numerico per un eventuale ordinamento. Una volta che abbiamo inserito tutti i link che desideriamo andiamo a vedere come inserirli nel nostro sito.

Andiamo quindi nella sezione Aspetto e quindi Widget della nostra Bacheca. Qui andiamo selezionare il widget Link nell’area di quelli disponibili e trasciniamolo nell’area messa a disposizione dal tema in uso; una colonna laterale (Sidebar) o in un’Area del Footer.

condivisione link (blogroll) 03
aggiunta widget LINK – clicca per ingrandire

Adesso potremo scegliere quali link visualizzare nel tema, se tutti o specifiche categorie. Così come potremo gestire l’ordinamento della loro visualizzazione (per titolo, ID, voto) e ancora se visualizzare o meno per ciascuno di essi alcuni parametri. Infine potremo decidere quanti link visualizzare nel widget.

Concludo facendo notare che possiamo avere visualizzati nel tema più copie dello stesso widget. Ad esempio posizionando diversamente link di siti amici, e link dei nostri sponsor o altro.

Bueno: un esempio di personalizzazione

Ciao a tutti,

il tempo è tiranno e non si riesce a star dietro alle cose cui si tengono, specie se non sono essenziali nella vita quotidiana (leggasi salute e lavoro). Per fortuna la voglia di scrivere e parlare delle cose che ci piacciono non manca ed eccomi qui a tradurre un (lungo) articolo d’esempio pubblicato un mese fa dai tipi di WordPress.com in merito alla personalizzazione del proprio blog, fornendo un caso d’uso reale …

Penso sia un’esigenza comune quella di voler personalizzare il template del proprio sito/blog in modo che ci calzi a pennello, come un abito su misura, e che rispecchi in un certo qual modo il nostro gusto estetico e la nostra personalità. Oggi vedremo come è possibile personalizzare quello che oggi è il terzo tema più popolare su WordPress.com e, nonostante ciò, costruire qualcosa di completamente personale.

Diciamo ciao al blog Mi Piace Kate:

Mi Piace Kate

Kate è una graphic designer, come si intuisce un’amante dei gatti e del fai da te che ha scelto di pubblicare le proprie cose utilizzado il tema gratuito Bueno. Abbiamo scelto di parlare del suo blog perchè costituisce un fantastico esemoio di come l’utilizzo di alcune immagini personali e l’utilizzo del Custom Design upgrade (per un costo di 30$) possono cambiare un tema gratuito in uno dal look super-professionale e unico.

Ma bando alle ciance e guardiamo l’immagine seguente che compara la pagina standard dell’home page del tema Bueno con quella realizzata da Kate. Impressionante, vero ?

Bueno Theme

Solo prestando attenzione al cerchio contenente la data di pubblicazione del tema (rosa nella versione originale, chartreuse nella versione di Kate) si capisce quale sia il tema alla base, il fatto che ci sia Bueno a presentare i vari contenuti. Come ci è riuscita? Ecco le sue non-così-segrete tecniche….

Header personalizzato

Kate ha impostato il look & feel del suo sito direttamente nella testata della pagina, usando un’immagine per il custom header da lei realizzata che riesce ad impostare il tono emozionale del sito, e quindi del suo estensore, mediante un attento uso di forme e colori …

custom header

L’utilizzo di un’immagine personale per l’header del tema non rende necessario l’acquisto di un upgrade, ma è una opzione standard per Bueno (e moltissimi altri temi sulla piattaforma WordPress.com … 152, per essere precisi).

Starei pensando, “Ma io non sono un graphic designer!”? Beh, la notizia è che tu non devi necessariamente esserlo! Basta essere creativi e utilizzare, ad esempio, il tuo word processor preferito e utilizzarle le proprietà di elaborazione del testo con effetti e forme e poi salvare il tutto come un’immagine. Oppure semplicemente utilizzare un’immagine dal significato speciale … Voilà! Personalità al volo…

Colori personalizzati

Kate ha quindi preso i colori scelti per l’immagine dell’header e li ha (sapientemente) distribuiti all’interno delle varie componenti del sito, dai cerchi contenenti le date dei post alle linee di separazione sui titoli dei widget usati. Questo le è stato possibile acquistando il Custom Design upgrade, che le ha permesso di usare esattamente i colori che voleva ed applicare le modifiche al file CSS secondo il suo gradimento.

Se il tema generale di Bueno, sul rosa, non è di tuo gradimento non c’è problema … Bueno viene offerto con sette schemi di colore differenti, che possono essere scelti ed applicati con un paio di click andando nell’apposita sezione della Bacheca, quindi Aspetto e dunque selezionando le Opzioni del Tema. Altrimet puoi utilizzare il Custom Design upgrade to change the colors of fonts and backgrounds even more, senza utilizzare i CSS. (Ma se vuoi affondare i tuoi denti nel vasto menù dei CSS qui troverai un’antipasto).

Font personalizzate

Non sono i colori possono essere modificati acquistando il Custom Design upgrade. Potrai modificare anche le font del tema sceltom andando così a modificare drasticamente l’effeto del tema di partenza. Sul suo “Mi Piace Kate”, Kate ha scelto di utilizzare la classica font serif Ambroise per l’header ed i titoli dei post, e l’altamente leggebile Museo Sans per il contenuto dei post. A questi ha affiancato, infine, l’elegante Raleway per i titoli ed i menù opzione. Se l’argomento dell’uso di font perosnalizzate ti interessa, puoi sempre consultare l’articolo (in inglese) su come altri blogger li utilizzano ed imparare come ottenerne un’anteprima per il tuo sito.

Mi Piace Kate - Blogroll example

Divertirsi con le widget di testo

Kate non ha avuto paura di andare a guardare ‘sotto il cofano’ e manipolare i vari widget a disposizione in modo che apparissero esattamente come voleva. Guarda con attenzione come ha stilizzato il tuo blogroll. Lo ha cambiato dal semplice elenco puntuale una riga per sito ad un blocco compatto ma allo stesso tempo elegante e ben leggibile.

Come ci è riuscita? Semplicemente utilizzato un Text widget piuttosto che il Links widget comunemente utilizzato da tutti per il proprio blogroll. Poiché è possibile inserire codice HTML standard in una widget testuale, è riucita ad inserire l’elenco dei siti da lei seguiti separandoli elegantemente cone una doppia backslash. L’uso di font personalizzate, così come i colori, ha fatto il resto.

mi piace kate widget

Kate ha poi dato un’altra forte personalizzazione alla sidebar del suo blog utilizzado una delle widget preferite dai ragazzi di Automattic ma poco utilizzate tra gli utenti. Una comune widget di testo con un po’ di testo per la parte “about” dell’autrice. Anche qui l’utilizzo di font, colori e testo riesce a dare al visitatore informazioni e contesto rinforzando l’esperienza di navigazione del “brand” Mi Piace Kate brand.

Si è anche preoccupata di personalizzare i titoli delle widget utilizzate, quindi “Links” divente “I Like to Look,” e “About” diventa “Oh Hello.” Non perdete quindi occasione di personalizzare ogni più piccolo dettaglio del tuo blog!

Come si vede, alla fine, a Kate è bastato un po’ di buon gusto, pazienza ed attenzione nell’esaminare le possibilità offerte da Bueno e dai vari upgrade della piattaforma WordPress.com per esprimere la propria personalità e gusto estetico.

Nei prossimi giorni spero di riuscire a tradurvi un’altro paio di interessanti articoli sulla personalizzazione dei template WordPress!

 

il Blogroll è morto. Lunga vita al Blogroll.

Emergo dal silenzio cui avevo lasciato questo blog per rendervi partecipo di una ‘scoperta‘ fatta qualche tempo fa leggendo il blog di Lorelle VanFossen, probabilmente la principale divulgatrice non tecnica nel mondo di WordPress, circa la morte dei Blogroll in WordPress.

Il post di Lorelle parte con questa semplice citazione:

The Links section was removed from the core WordPress.org software, which means that it will probably be removed from WordPress.com soon.
In preparation for that, new blogs no longer display the Links section.
MacManx, Automattic Happiness Engineer

Un utente, infatti, lamentava il fatto di non visualizzare più la pagina del Link all’interno della propria Bacheca e gli veniva risposto che, data la rimozione della funzionalità nel codice prodotto dalla versione Open Source della piattaforma, questa fosse stata rimossa anche dalla piattaforma WordPress.com per i nuovi blog.
Questo fatto, ancora, non è un buon segnale sul futuro della funzionalità per tutti gli utenti, visto che Automattic non ha alcun interesse (o guadagno) nel supportare feature dismesse ed oggi è quasi certo che WordPress 3.5 non avrà più il componente Link Manager al suo interno.

Se masticate l’inglese consiglio la lettura del paragrafo “The History of Blogrolls, Links, and Link Management in WordPress” all’interno dell’articolo di Lorelle citato in apertura di articolo.

Passiamo quindi ora ad esaminare una possibile strategia per il backup dei nostri link, preparandoci alle modifiche a venire.

Per tutti quelli che hanno il sito ospitato su WordPress.com potremo procedere in due modi:

  • Banalmente copiamo ed incolliamo il contenuto della nostra sezione con l’elenco dei link/blogroll in un editor di testi che ne mantenga la formattazione HTML, dopo di che potremo ricopiarli altrove, in una nuova pagina del nostro sito o all’interno di un widget di testo, ad esempio;
  • Se si possiede una minima familiarità con la manipolazione dei file XML, potremo ottenere automaticamente un’elenco dei nostri link in tale formato inserendo nella barra degli indirizzi del browser un indirizzo web formato dal nome del nostro dominio seguito da wp-links-opml.php dunque, ad esempio http://example.com/wp-links-opml.php . Con un semplice File > Salva con nome otterremo una copia di questo file sul nostro hard disk, pronta a successive modifiche. [*]

In caso utilizziamo una versione self-hosted del CMS WordPress abbiamo a disposizione altre scelte, ad esempio quelle d’uso di alcuni plugin che rimpiazzano sin d’oggi le funzionalità del morente Link Manager, ad esempio:

Volendo si possono usare i link anche all’interno dei Menu Personalizzati, ma tale uso mi pare abbastanza di nicchia e francamente inutile allorquando il nostro blogroll fosse corposo.


[*] ==> leggete attentamente il consiglio lasciato da Igor nei commenti!

arriva l’inclusione delle immagini da Instagram

Credo che tutti noi conosciamo, se non siamo addirittura utenti, del popolare Social Network di condivisione fotografica Instagram:

è un modo velocemeraviglioso e divertente di condividere la tua vita con gli amici, attraverso una serie di immagini. Scatta una foto con il tuo iPhone, scegli un filtro per trasformarne l’aspetto e inviala a Facebook, Twitter o Tumblr – è un gioco da ragazzi. È photo sharing, reinventato. Ah giusto, abbiamo già detto che è gratis?

Il social è diventato in pochissimo tempo talmente popolare che ha addirittura spinto Facebook alla sua acquisizione per un miliardo di dollari (!!!) all’inizio di quest’anno.

Diventa quindi evidente come i ragazzi di WordPress.com non potessero ulteriormente ignorare la possibilità di includere in maniera facile e veloce i contenuti provenienti da questa piattaforma, assieme a quelli provenienti dalle altre piattaforme. Ecco quindi che finalmente l’inclusiona nativa di immagini provenienti da Instagram sul nostro blog è divenuta realtà.

Come per tutti gli altri tipi di “embed“, l’operazione è facile e veloce. Come prima opzioni possiamo semplicemente copiare l’URL dell’immagine visualizzata nel browser quando stiamo visitandone la pagina Instagram:

… a questo punto la inseriamo nell’editor del post, impostato in modalità Testo, direttamente come la vediamo, dunque.
http://instagram.com/p/QI9cbtAdvW/
come unico elemento della riga. Osia, nel nostro caso d’esempio, vedremo una cosa come questa:

che nel nostro blog verrà mostrata come segue:

Questa procedura farà si che l’operazione di embedding fornirà l’immagine alla risoluzione massima possibile date le dimensioni dell’area destitnata alla larghezza del post, definita a priori per ciascun tema.

Alternativamente potremo controllare le dimensioni dell’immagine inserita nel nostro articolo mediante l’uso degli shortcode. Ad esempio il codice:

A few days to catch my breath. Finally.

A post shared by cheri lucas rowlands (@cherilucasrowlands) on

farà si che l’immagine venga ridimensionata come segue:

Un’immagine così pubblicata verrà automaticamente linkata alla sua pagina Instagram originaria, quindi se un lettore ci cliccherà sopra verrà immediatamente reindirizzato li, avendo la possibilità di ammirarla a piena risoluzione.

Happy Instagramming!


Articolo di riferimento: Embedding Images from Instagram