Lunedì, 07 Aprile 2014

Guida a K2 per Joomla, come personalizzare e ottenere il massimo dai propri contenuti

Scritto da  Abc Telefonia in Sviluppo web
Guida a K2 per Joomla, come personalizzare e ottenere il massimo dai propri contenuti
Per ottenere un layout moderno ed efficace spesso non è sufficiente l'installazione base di K2, la popolare estensione per gestire i contenuti in Joomla, ma occorre personalizzare stili e parti di codice, vediamo come fare.
 
K2 è una delle più popolari estensioni per Joomla ed è stata realizzata per offrire una gestione dei contenuti migliore di quella nativa del popolare CMS, troppo spartana per chi vuole puntare decisamente sul testo in modo articolato e professionale.

K2 è stato pensato e realizzato come un componente che sostituisce totalmente il gestore articoli di Joomla, offrendo una serie di caratteristiche avanzate disponibili sia per i contenuti esistenti (che possono essere importati all'interno di K2) sia per i nuovi contenuti che verranno realizzati.

Per ottenere un layout professionale e accattivante ed integrare maggiormente i contenuti con il resto del sito anche K2 ha bisogno di piccole modifiche e personalizzazioni, ed è proprio per illustrare nel dettaglio quali elementi modificare per ottenere questi risultati che abbiamo realizzato questa guida a K2 per Joomla.

Procediamo quindi ad illustrare i principali elementi da modificare per ottenere i risultati desiderati.
 
Modificare il layout, i colori e la disposizione degli elementi utilizzando le tecniche di override e sub-template.
Il concetto di override in Joomla è stato introdotto a partire dalla versione 1.5 e consiste nella possibilità di personalizzare moduli e componenti standard attraverso il template.
La stessa tecnica è usata per modificare il comportamento di K2 rispetto ai valori standard predefiniti, in questo caso ovviamente si andrà a modificare solo il comportamento relativo all’estensione e non alle altre componenti di Joomla.

La prima operazione da effettuare è quella di copiare il contenuto della cartella /components/com_k2/templates/ all’interno della cartella /templates/"miotemplateusato"/html/com_k2/
I file che andranno modificati si trovano all’interno della cartella default e si occupano della visualizzazione degli elementi presenti nelle categorie (category.php e category_item.php ad esempio), della visualizzazione degli articoli, dei commenti, ecc..
Se abbiamo intenzione di creare sezioni diverse all’interno del nostro sito possiamo creare “viste” diverse duplicando i file contenuti nella cartella default e creare altre cartelle (ad esempio “blog”, “news”, ecc). Tali viste possono essere richiamate dal pannello di controllo di K2 sotto la voce Template e personalizzare così in modo diverso i contenuti a seconda della sezione desiderata.
 
Guida a K2 per Joomla, come personalizzare e ottenere il massimo dai propri contenuti  Guida a K2 per Joomla, come personalizzare e ottenere il massimo dai propri contenuti
 
Questa tecnica permette, oltre al fatto di duplicare le viste e ottenere quindi personalizzazioni diverse a seconda dei contenuti, anche di preservare le modifiche applicate in caso di aggiornamento del componente. Infatti, anche nel caso avessimo una sola vista dei contenuti, la modifica dei file all'interno della cartella originale di K2 (/components/com_k2/templates/) sarebbe soprascritta al primo aggiornamento di K2, perdendo quindi tutte le modifiche realizzate.
 
Modificare un modulo di tipo K2 Content
K2 Content è il modulo primario per “recuperare” il contenuto in K2 e creare anche layout complessi utilizzando impostazioni diverse per ogni modulo creato.
Se l’impostazione di default non è adatta al nostro sito o vogliamo comunque modificarne l’aspetto occorre modificare il file k2.css
Il file in questione si trova in /components/com_k2/css/ ma in virtù delle considerazioni sopra esposte andrà copiato all’interno della cartella /templates/"miotemplateusato"/css/ in modo da conservare le modifiche anche dopo futuri upgrade.

All’interno del file c’è una sezione intera che si occupa della gestione dell’elemento denominato k2ItemsBlock, ci sono anche numerosi commenti all’interno del file che aiutano a identificare le varie sezioni.
Se volessimo per esempio variare i margini ed eliminare l’elenco puntato presente di default dobbiamo cercare l’elemento div.k2ItemsBlock ul {} e modificarlo in div.k2ItemsBlock ul {margin: 10px 0; padding:0; list-style: none outside none;} oppure se volessimo modificare l’aspetto dell’immagine nel blocco occorre cercare l’elemento div.k2ItemsBlock ul li div.moduleItemIntrotext a.moduleItemImage img e modificarlo per esempio in div.k2ItemsBlock ul li div.moduleItemIntrotext a.moduleItemImage img {min-width: 100%; max-width: 100%; border: 0;}
 
Modificare la lista elementi per categoria
Uno degli elementi più utilizzati in K2 è quello che permette di elencare una serie di elementi appartenenti ad una categoria. Prendiamo come esempio il sito demo di K2 e di impostare anche per i nostri articoli la visualizzazione, sotto il titolo, del nome dell’autore seguito dalla categoria di appartenenza. Per ottenere questo risultato occorre modificare il file category_item.php che si trova in /templates/"miotemplateusato"/html/com_k2/default (oppure nella cartella che avete creato se utilizzate più viste) in questo modo:

identificare il blocco che riporta il nome della categoria
<?php if($this->item->params->get('catItemCategory')): ?>
         <!-- Item category name -->
         <div class="catItemCategory">
                     <span><?php echo JText::_('K2_PUBLISHED_IN'); ?></span>
                   <a href="/<?php echo $this->item->category->link; ?>"><?php echo $this->item->category->name; ?></a>
         </div>
              <?php endif; ?>
e spostarlo sotto al blocco che riporta il nome dell’autore
<?php if($this->item->params->get('catItemAuthor')): ?>
           <!-- Item Author -->
                <span class="catItemAuthor">
                      <?php echo K2HelperUtilities::writtenBy($this->item->author->profile->gender); ?>
                   <?php if(isset($this->item->author->link) && $this->item->author->link): ?>
                 <a rel="author" href="/<?php echo $this->item->author->link; ?>"><?php echo $this->item->author->name; ?></a>
                      <?php else: ?>
                    <?php echo $this->item->author->name; ?>
                      <?php endif; ?>
           </span>
             <?php endif; ?>
Occorre inoltre identificare il codice $this->item->params->get('catItemCategory') || dal blocco sotto e rimuoverlo
<?php if(
  $this->item->params->get('catItemHits')||
  $this->item->params->get('catItemCategory')||
  $this->item->params->get('catItemTags')||
  $this->item->params->get('catItemAttachments')
  ): ?>
 
Modificare la data di creazione degli articoli
Questa opzione riguarda più in generale Joomla ma in questo caso vediamo come lasciare inalterata l’opzione di default e crearne una personalizzata solo per K2.
Dal pannello di amministrazione andare in Gestione lingua e selezionare il tab Override lingua. Creare una nuova costante chiamata K2_DATE_FORMAT_LC2 e attribuirgli per esempio il valore l, d F Y che mostra una data del tipo Lunedì, 01 Gennaio 2014
Se vogliamo modificare tale visualizzazione possiamo fare riferimento alla documentazione ufficiale per Php sulla funzione date
 
Eliminare o modificare il link dal nome dell’autore
Normalmente il link associato all’autore dell’articolo indirizza al profilo dell’autore o ad un elenco di altri articoli scritti dallo stesso autore.
Potrebbe essere necessario modificare il link od eliminarlo del tutto. Il file da modificare è il category_item.php che si trova in /templates/"miotemplateusato"/html/com_k2/default (oppure nella cartella che avete creato se utilizzate più viste)
La parte di codice da modificare è quella evidenziata nel seguente blocco:
<?php if($this->item->params->get('catItemAuthor')): ?>
          <!-- Item Author -->
          <span class="catItemAuthor">
               <?php echo K2HelperUtilities::writtenBy($this->item->author->profile->gender); ?>
               <?php if(isset($this->item->author->link) && $this->item->author->link): ?>
               <a rel="author" href="/<?php echo $this->item->author->link; ?>"><?php echo $this->item->author->name; ?></a>
               <?php else: ?>
               <?php echo $this->item->author->name; ?>
               <?php endif; ?>
          </span>
          <?php endif; ?>
Si può quindi eliminare il link sostituendo il codice
<a rel="author" href="#"><?php echo $this->item->author->name; ?></a>
 oppure modificando il link a piacimento
 
Eliminare la barra e il link “Torna in alto”
Un altro elemento che potremmo scegliere di eliminare dalla visualizzazione standard è la barra e il link “Torna in alto” che si presentano alla fine degli articoli, sia perché molti template lo prevedono già sià perché potrebbe non essere in linea con lo stile del nostro sito.
Il metodo più semplice è quello di nasconderlo modificando il file k2.css presente in /templates/"miotemplateusato"/css/, basta cercare la sezione commentata dalla voce /* Back to top link */ ed aggiungere il codice div.itemBackToTop {display:none;}, eventualmente eliminando o commentando le rimanenti linee di codice del blocco.
 
Personalizzare il layout per il pop-up della stampa
Uno dei pulsanti standard che si trovano all'interno degli articoli è quello per la stampa, che apre un pop-up dal layout semplificato per una stampa ottimale del documento. Non sempre però le impostazioni di default sono adatte al resto del sito e quindi si rende necessario personalizzare anche questo elemento.
Per impostare colori, dimensione del font e abilitare o disabilitare elementi della pagina occorre modificare il file k2.css che si trova in /templates/"miotemplateusato"/css/
L’elemento da modificare è il body.contentpane e un esempio di personalizzazione è rappresentata dal blocco di codice sotto riportato:
/* --- Global K2 container --- */
#k2Container {padding:0 0 0px 0;}
body.contentpane #k2Container {padding:16px;} /* used in popups */
body.contentpane div.itemHeader h2.itemTitle {font-family:"Open Sans";}
body.contentpane .itemIntroText {font-family:"Open Sans";color:#000000;}
body.contentpane .itemFullText {font-family:"Open Sans";color:#000000;}
body.contentpane div.itemHeader span.itemDateCreated {font-family:"Open Sans";color:#000000;}
body.contentpane .itemAuthor {font-family:"Open Sans";color:#000000;}
body.contentpane .itemCategory {font-family:"Open Sans";color:#000000;}
body.contentpane .itemSocialSharing {display:none;}
body.contentpane .itemHits {display:none;}
 
Ottimizzare gli url di K2 in ottica SEO
Uno degli aspetti più importanti nella realizzazione di un sito web è quello relativo al SEO (Search Engine Optimization), ossia l’insieme delle tecniche di costruzione e ottimizzazione delle pagine che permettono ai motori di ricerca una lettura e una catalogazione ottimale (visita la nostra sezione dedicata alla creazione siti web per capire l’importanza del SEO)
Le impostazioni di default di K2 introducono dei fastidiosi elementi negli url relativi ad articoli e categorie, aggiungendo prima del titolo vero e proprio una parte di testo del tipo "/item/xxx-“ che rende certamente meno leggibile l’url e lo appesantisce inutilmente.
Per risolvere il problema occorre attivare e configurare le opzioni avanzate del SEF di K2, occorre quindi andare nel pannello di amministrazione, scegliere K2 dal menù Componenti e cliccare la voce Parametri K2.
Selezionare il tab “Avanzato”, scorrere fino a trovare la Configurazione SEF avanzata e modificare i due parametri indicati dalle frecce nell’immagine sotto riportata
 
 
In questa guida a k2 per Joomla abbiamo cercato di evidenziare alcune delle principali sezioni da modificare per ottenere un layout personalizzato e adattarlo allo stile del template scelto per il proprio sito, per ulteriori informazioni o chiarimenti potete contattarci tramite i riferimenti che trovate nella nostra area dedicata alla creazione siti web o tramite i nostri canali social.
Letto 10828 volte
Assistenza telefonia a Livorno. Riparazione cellulari. Tempi rapidi e costi contenuti

ASSISTENZA TELEFONIA

  • Riparazione cellulari fuori garanzia in 48 ore
  • Aggiornamento firmware per iOS, Android e Windows Phone
  • Configurazioni software e personalizzazioni
  • Backup e ripristino dati
  • Aggiornamenti software per navigatori TomTom e Garmin
Assistenza computer a Livorno. Riparazione pc, notebook e mac. Tempi rapidi e costi contenuti.

ASSISTENZA COMPUTER

  • Riparazioni pc, notebook e mac
  • Backup, formattazione e reinstallazione sistema operativo
  • Aggiornamenti e configurazioni per sistemi Microsoft, Apple e Linux
  • Installazione e configurazione dispositivi mobili e wireless
  • Eliminazione virus, malware e spyware
Creazione siti web, progettiamo il tuo sito in modo professionale ed efficace

CREAZIONE SITI WEB

Costruiamo siti web professionali ed efficaci, semplici da aggiornare e in grado di aumentare subito la tua visibilità sul web.

Formazione e sei mesi di assistenza gratuita compresi nel prezzo.

Contattaci per avere ulteriori informazioni o chiedi un preventivo gratuito.
Tieniti in contatto

Seguici sui nostri canali social per non perderti novità e aggiornamenti, nuove uscite e offerte speciali

Segui Abc Telefonia su FacebookSegui Abc Telefonia su TwitterSegui Abc Telefonia su Google+Segui Abc Telefonia via RSS