Archive for the ‘WordPress’ Category

Immagine in headerimg con link

Saturday, October 24th, 2009

Con il theme Default di WordPress nella container headerimg del documento html si trovano 2 link testuali. Qui viene il testo che è stato introdotto nella sezione Settings -> General nella pagina di amministrazione.

Il testo che viene scritto nel campo "Blog Title" viene introdotto nella variabile "home" ed il testo che viene scritto nel campo "Tagline" viene introdotto nella variabile "description".

Di seguito spiego come introdurre un’immagine quale il logo del sito al posto del titolo e della descrizione e come fare in modo che l’immagine e lo spazio intero di headerimg abbiano un link verso la pagina principale del sito (homepage) da qualsiasi pagina secondaria.

Aprire il template header.php e modificare le seguenti righe:

Originale:

<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
</div>

Modificato:

<div id="header">
<div id="headerimg" onclick="location.href='http://www.domainname.com/'" title="Return to Homepage!" style="cursor: pointer;"></div>
</div>

L’immagine va copiata nella sottodirectory /images della directory dove si trova il template che si sta modificando.

Nel foglio di stile style.css nella sezione headerimg si impostano le proprietà dell’immagine di sfondo con il suo percorso, la sua larghezza ed altezza. In questo caso l’immagine è larga e alta 100 pixel.

#headerimg 	{
background: url('images/logo.gif') no-repeat left;
margin: 7px 9px 0;
width: 100px;
height: 100px;
border-bottom: 3px double #E7E7E7;
}

Nel foglio di stile style.css si trova una seconda istruzione con la quale si indica l’altezza di headerimg

#headerimg {
margin: 0;
height: 102px;
width: 100%;
}

In questo caso la sezione headerimg è alta 102 pixel (1 pixel sopra ed un pixel sotto l’immagine) e prende tutta la grandezza del container.

Migrare sito statico in dinamico

Friday, October 23rd, 2009

Come migrare un sito web sviluppato con pagine html statiche in un sito web con pagine dinamiche con il software WordPress.

Nel 2009 il sito liconet.com è migrato da sito internet sviluppato con pagine statiche con nomi file con estensione .html ad un sito con pagine dinamiche pubblicate con il software WordPress 2.8.x.

Il problema principale che mi sono posto prima della conversione è stato di vedere che il nome dei file rimanesse uguale al precedente e che la struttura dele cartelle (directory) rimanesse uguale o perlomeno simile. Il tutto senza dovere impostare un redirect 301 nel file .htaccess, con il quale si può ridirigere la pagina con il nome vecchio verso la pagina con il nuovo nome.

La soluzione è stata, direi, molto semplice. Ho installato il Plugin All in One SEO Plugin Options allo scopo, semplice per quanto riguarda sia l’installazione che la configurazione.

La situazione del sito

Il sito è composto dal file index.html e da poche altre pagine nella directory principale (root_dir) e da alcune subdirectory che a loro volta contengono un file index.html ed altri files con estensione .html

Installazione dei files del programma WordPress

Nome dominio: domainname.com
Mappatura dominio: domainname.com è mappato sulla directory /root_dir/
Dopo aver trasferito i file del programma WordPress sul server nella directory /root_dir/blog/ , lo ho installato e configurato.

Quindi sono entrato nella configurazione di WordPress: -> Settings -> Permalinks ed ho impostato:

WordPress address (URL) http://www.domainname.com/blog
Blog address (URL) http://www.domainname.com

Per fare in modo che i nomi file delle pagine prendano l’estensione html sono entrato nella configurazione di WordPress: -> Settings -> General ed ho impostato:

Custom Structure: /%category%/%postname%.html

Il nome delle subdirectory viene impostato in WordPress nelle categorie. WordPress: -> Posts -> Categories.

Quando si aggiunge una nuova categoria vengono richiesti il nome e lo slug della stessa. Come nome si possono introdurre delle parole con spazi (questo sarà poi il nome della categoria che viene visualizzato nella Sidebar) e come slug il nome della subdirectory. Introducendo nel campo slug il nome della sottodirectory che avevo nel sito statico sono riuscito a mantenere la stessa struttura con gli stessi nomi.

Poi con un editor html ho aperto i vecchi files ed ho copiato il contenuto del title, del tag meta description ed il testo dell’articolo e li ho incollati di volta in volta in un nuovo post di WordPress: -> Posts -> Add New

Nel primo campo in alto ho introdotto il titolo dell’articolo. Il testo che si scrive in questo campo diventa il nome file dell’articolo nel campo permalink e diventa il titolo dell’articolo che verrà poi presentato nella Sidebar. In questo campo ho introdotto un testo corto così poi nella Sidebar ha avuto spazio in una riga. Ho poi modificato il permalink con il nome del file statico del sito precedente.

Ci sono dei Plugin per WordPress con i quali è possibile introdurre meglio i contenuti della pagina nei nuovi articoli. Ho installato un Plugin SEO il quale ha aggiunto dei campi in fondo alla pagina: title, description e keywords.

In questi tre campi ho copiato i testi che precedentemente si trovavano nei documenti delle pagine statiche.

Alla fine ho pubblicato l’articolo.

Sono riuscito a mantenere quasi la stessa struttura nei due siti: con la pagina principale e le pagine nelle sottodirectory non ci sono problemi, hanno gli stessi nomi e vengono raggiunte con lo stesso percorso (path) precedente. Le pagine di indice delle sottodirectory che avevo prima vengono anche raggiunte, anche se ora il path viene fatto vedere così: www.domainname.com/category/sottodirectory, ma sono raggiungibile anche come prima: www.domainname.com/sottodirectory.

In questo caso ci sono dei contenuti duplicati ed risolto con lo stesso Plugin, con il quale viene usato il tag canonical nelle pagine giuste ed introduce la proprietà noindex,follow nel tag meta robots quando vengono caricate p.es. la pagine delle categorie.

Con le Pages ho preparato le pagine di contatto, privacy, ecc. A queste, che precedentemente si trovavano nella directory principale ed avevano un’estensione .html, sono riuscito ad aggiungere l’estensione .html come con i post con il Plugin .html WordPress permalink on PAGES plugin.

La prova e la configurazione sono stati abbastanza semplici e non ho incontrato problemi particolari. Le pagine memorizzate nei motori di ricerca hanno mantenuto lo stesso nome e gli eventuali collegamenti dai siti esterni non devono venire modificati.