Creazione o Modifica Template

[fda]

Creazione o Modifica Template

Ciao Divano,
prima di lanciarti nella realizzazione di un template ti consiglio di iniziare a capire come funziona Joomla. Il modo più semplice di imparare a usare Joomla è iniziare a smanettare su un'installazione da zero, creando e usando dati di esempio.
Una volta che hai installato Joomla accedi al backend e inizia a "esplorare" per capire come vengono creati articoli, categorie e menu.
Quando incontri difficoltà apri qui sul Forum GT una discussione specifica scegliendo un titolo appropriato.

Joomla è fatto da un core e dalle estensioni.
Le estensioni sono di 4 tipi: plugin, moduli, componenti, template.

Alcune di queste estensioni sono già presenti nella distribuzione base di Joomla, che comprende tra le altre cose alcuni template.
Il componente più importante di Joomla si chiama com_content ed è quello che permette di organizzare i contenuti in categorie e articoli.

Per pubblicare un contenuto in Joomla non basta creare un articolo e assegnarlo a una categoria, ma bisogna anche fare in modo che quell'articolo sia collegato a una voce di menu, cosa che può essere fatta in diversi modi tra cui i seguenti:

• pubblicando una voce di menu per gli articoli in evidenza (featured) che include anche la categoria di cui fa parte l'articolo in questione;
• pubblicando una voce di menu per gli articoli della categoria di cui fa parte il suddetto articolo;
• pubblicando una voce di menu per il singolo articolo.

In Joomla tutte le pagine (URLs) vengono create mediante i menu, ma per comprendere a fondo questo meccanismo occorre un po' di pratica.

In maniera poco precisa ma intuitiva, le pagine esistono grazie ai componenti, ma vengono materialmente create in virtù dei menu. Grazie al com_content puoi creare articoli e categorie, poi però ti serve una voce di menu per vederli pubblicati; similmente, altri componenti permettono di creare contenuti diversi (es. form di contatto) che richiedono sempre una voce di menu per essere pubblicati.

I **moduli **sono box con funzionalità aggiuntive che vengono inseriti in specifiche posizioni di pagine già esistenti. Esempio: il modulo "articoli recenti" presenta una lista degli articoli ordinati per data di pubblicazione; questo elenco può essere visto come un box da inserire in pagine che già esistono (il modulo non crea nuove pagine).

I **plugin **realizzano funzionalità aggiuntive oppure anche funzionalità di base molto importanti. Esistono plugin di diverso tipo. Esempio: plugin che aggiungono nuovi pulsanti all'editor dei testi.

I **template **di Joomla hanno a che fare con la presentazione dei dati e con gli stili, in pratica con l'aspetto del sito. Costruire un template da zero non è facilissimo: meglio studiare prima gli altri template (già fatti). Il termine *template *può anche trarre in inganno, dal momento che viene usato anche per indicare ciascuna delle view di un componente o di un modulo.

Invece di creare un template da zero puoi modificarne uno già esistente. Ricorda che Joomla! 3 include già Bootstrap, jQuery, Less.

Spero di esserti stato utile.

[hub]

@Divano said:

non ho ancora ben capito se i CMS sono davvero più comodi per un sito, una piattaforma che non sia un forum o un e-commerce.

Ciao, il tuo dubbio è più che legittimo, la risposta ce l'hai nel momento in cui devi realizzare un sito. Per farti un esempio molto semplice, se il sito che vuoi realizzare avrà dei contenuti "statici" o che aggiornerai molto raramente, usare un CMS è decisamente inutile oltre che dispendioso in termini di manutenzione. Al contrario se devi realizzare un sito con contenuti costantemente aggiornati, magari anche un'area di gestione utenti, fino ad arrivare a una gestione ecommerce, etc, uno dei tanti CMS è certamente ideale.

@Divano said:

Quello che ancora mi confonde è il template, cioè parlo dell'aspetto blog....non lo so, ripeto, abituato a farne in HTML e CSS, strutturavo il sito graficamente, poi con gli stili creavo le pagine....adesso sono confuso
Uno dei vantaggi nell'uso di un CMS è proprio la gestione dei templates o temi. Detta in modo molto spartano, puoi cambiare completamente aspetto estetico di un sito semplicemente sostituendo il template e senza compromettere tutti i contenuti già inseriti.

Comunque non fare troppo riferimento a quello che fanno gli altri, scegli la tipologia in base a quello che ti serve realmente. Installare, configurare e popolare di contenuti un CMS per esempio come Wordpress è la parte più "divertente", mantenerlo costantemente aggiornato, compreso temi ed estensioni è un impegno e un lavoro

[hub]

@Divano said:

credevo che html e css dessero un vantaggio non da poco nel gestire e customizzare un sito, mentre non mi sembra affatto che sia così
Un sito HTML + CSS offre moltissimi vantaggi ma se vuoi che gli utenti interagiscano devi come minimo passare a linguaggi per esempio come PHP e creare una struttura con o senza database, o usare un CMS già fatto come Joomla o WordPress e moltissimi altri.

[fda]

Indipendentemente dalla piattaforma usata e dai linguaggi, un webmaster deve conoscere html e css. Conoscere html e css è indispensabile per personalizzare l'aspetto del sito e quindi hai segnato un punto a tuo favore.

I due progetti web a cui hai accennato possono essere realizzati con un cms, sta a te scegliere quale. A mio parere vanno bene sia Joomla! sia WordPress.

...mi sento come un cittadino tirato giù da un aereo in pieno deserto, senza l'ombra di un cartello stradale e tantomeno di un vigile beduino!!...:D

Questa sensazione potrebbe derivare dal desiderio di avere una conoscenza approfondita del cms che ti permetta di avere da subito una visione ampia del progetto. Se posso permettermi, rinuncia a capire tutto subito e parti da zero usando il backend per pubblicare un contenuto (crea categorie e articoli/post), poi prosegui esplorando dal backend e dal frontend le varie funzionalità già incluse, fino a installare nuove estensioni, compresi template già pronti.

Questa fase, che comunque ti darà soddisfazioni, richiederà settimane o mesi, ma è essenziale e il modo migliore per affrontarla è creare un tuo sito web sul quale testare senza paura (metti in conto che possa esplodere e che vada ricostruito :D).

Quello che ancora mi confonde è il template, cioè parlo dell'aspetto blog....non lo so, ripeto, abituato a farne in HTML e CSS, strutturavo il sito graficamente, poi con gli stili creavo le pagine....adesso sono confuso

In molti casi, chi usa html e css per fare siti web statici senza un linguaggio lato server come php è abituato a inserire in un unico luogo le informazioni su dati, layout, funzionamento delle pagine, lasciando ai css le info sugli stili. Questo modus operandi nei siti dinamici non è permesso, in particolare su Joomla! che usa un pattern diffusissimo in informatica che si chiama MVC (Model View Controller).

In MVC l'interfaccia utente è definita essenzialmente nelle view e i template grafici di Joomla hanno molto a che fare con le view. Tuttavia il "motore" di Joomla! si trova al di fuori del template. Un file di template include in pratica il php che serve a stampare l'html, ma tutto il codice che fa funzionare il sito (ad es. che legge i dati nel database) si trova da un'altra parte.

Questi concetti all'inizio sembrano ostici, ma all'atto pratico puoi imparare a realizzare o modificare template di Joomla! iniziando a smanettare sui siti e in particolare proprio sui template. Le uniche cose richieste sono la conoscenza ultra base di php (proprio perché viene usato il php all'interno delle view) e l'uso di alcune istruzioni di Joomla.

Qui sotto metto un esempio di file di vista. Si tratta dell'articolo standard come viene mostrato dal template Beez3, puoi trovare il file in una qualunque installazione base di Joomla! 3 a questo indirizzo: [root]/templates/beez3/html/com_content/article/default.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.beez3
 *
 * @copyright   Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */


defined('_JEXEC') or die;


$app = JFactory::getApplication();
$templateparams = $app->getTemplate(true)->params;
$images = json_decode($this->item->images);
$urls = json_decode($this->item->urls);
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');
JHtml::_('behavior.caption');


// Create shortcut to parameters.
$params = $this->item->params;


?>
<article class="item-page<?php echo $this->pageclass_sfx?>">
<?php if ($this->params->get('show_page_heading')) : ?>


<?php if ($this->params->get('show_page_heading') and $params->get('show_title')) :?>
<hgroup>
<?php endif; ?>
<h1>
	<?php echo $this->escape($this->params->get('page_heading')); ?>
</h1>
<?php endif; ?>
<?php
if (!empty($this->item->pagination) && $this->item->pagination && !$this->item->paginationposition && $this->item->paginationrelative)
{
	echo $this->item->pagination;
}


if ($params->get('show_title')) : ?>
		<h2>
			<?php echo $this->escape($this->item->title); ?>
		</h2>
<?php endif; ?>
<?php if ($this->params->get('show_page_heading') and $params->get('show_title')) :?>
</hgroup>
<?php endif; ?>


<?php if ($params->get('access-edit') ||  $params->get('show_print_icon') || $params->get('show_email_icon')) : ?>
		<ul class="actions">
		<?php if (!$this->print) : ?>
				<?php if ($params->get('show_print_icon')) : ?>
				<li class="print-icon">
						<?php echo JHtml::_('icon.print_popup', $this->item, $params, array(), true); ?>
				</li>
				<?php endif; ?>


				<?php if ($params->get('show_email_icon')) : ?>
				<li class="email-icon">
						<?php echo JHtml::_('icon.email', $this->item, $params, array(), true); ?>
				</li>
				<?php endif; ?>
				<?php if ($this->user->authorise('core.edit', 'com_content.article.'.$this->item->id)) : ?>
						<li class="edit-icon">
							<?php echo JHtml::_('icon.edit', $this->item, $params, array(), true); ?>
						</li>
					<?php endif; ?>
		<?php else : ?>
				<li>
						<?php echo JHtml::_('icon.print_screen', $this->item, $params, array(), true); ?>
				</li>
		<?php endif; ?>
		</ul>
<?php endif; ?>


	<?php  if (!$params->get('show_intro')) :
		echo $this->item->event->afterDisplayTitle;
	endif; ?>


	<?php echo $this->item->event->beforeDisplayContent; ?>


<?php $useDefList = (($params->get('show_author')) or ($params->get('show_category')) or ($params->get('show_parent_category'))
	or ($params->get('show_create_date')) or ($params->get('show_modify_date')) or ($params->get('show_publish_date'))
	or ($params->get('show_hits'))); ?>


<?php if ($useDefList) : ?>
 <dl class="article-info">
 <dt class="article-info-term"><?php  echo JText::_('COM_CONTENT_ARTICLE_INFO'); ?></dt>
<?php endif; ?>
<?php if ($params->get('show_parent_category') && $this->item->parent_slug != '1:root') : ?>
		<dd class="parent-category-name">
			<?php 	$title = $this->escape($this->item->parent_title);
					$url = '<a href="'.JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->parent_slug)).'">'.$title.'</a>';?>
			<?php if ($params->get('link_parent_category') and $this->item->parent_slug) : ?>
				<?php echo JText::sprintf('COM_CONTENT_PARENT', $url); ?>
				<?php else : ?>
				<?php echo JText::sprintf('COM_CONTENT_PARENT', $title); ?>
			<?php endif; ?>
		</dd>
<?php endif; ?>
<?php if ($params->get('show_category')) : ?>
		<dd class="category-name">
			<?php 	$title = $this->escape($this->item->category_title);
					$url = '<a href="'.JRoute::_(ContentHelperRoute::getCategoryRoute($this->item->catslug)).'">'.$title.'</a>';?>
			<?php if ($params->get('link_category') and $this->item->catslug) : ?>
				<?php echo JText::sprintf('COM_CONTENT_CATEGORY', $url); ?>
				<?php else : ?>
				<?php echo JText::sprintf('COM_CONTENT_CATEGORY', $title); ?>
			<?php endif; ?>
		</dd>
<?php endif; ?>
<?php if ($params->get('show_create_date')) : ?>
		<dd class="create">
		<?php echo JText::sprintf('COM_CONTENT_CREATED_DATE_ON', JHtml::_('date', $this->item->created, JText::_('DATE_FORMAT_LC2'))); ?>
		</dd>
<?php endif; ?>
<?php if ($params->get('show_modify_date')) : ?>
		<dd class="modified">
		<?php echo JText::sprintf('COM_CONTENT_LAST_UPDATED', JHtml::_('date', $this->item->modified, JText::_('DATE_FORMAT_LC2'))); ?>
		</dd>
<?php endif; ?>
<?php if ($params->get('show_publish_date')) : ?>
		<dd class="published">
		<?php echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', JHtml::_('date', $this->item->publish_up, JText::_('DATE_FORMAT_LC2'))); ?>
		</dd>
<?php endif; ?>
<?php if ($params->get('show_author') && !empty($this->item->author )) : ?>
	<dd class="createdby">
		<?php $author = $this->item->author; ?>
		<?php $author = ($this->item->created_by_alias ? $this->item->created_by_alias : $author);?>
		<?php if (!empty($this->item->contact_link ) &&  $params->get('link_author') == true) : ?>
			<?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', JHtml::_('link', $this->item->contact_link, $author)); ?>
		<?php else :?>
			<?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', $author); ?>
		<?php endif; ?>
	</dd>
<?php endif; ?>
<?php if ($params->get('show_hits')) : ?>
		<dd class="hits">
		<?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', $this->item->hits); ?>
		</dd>
<?php endif; ?>
<?php if ($useDefList) : ?>
 </dl>
<?php endif; ?>


	<?php if (isset ($this->item->toc)) : ?>
		<?php echo $this->item->toc; ?>
	<?php endif; ?>


<?php if (isset($urls) AND ((!empty($urls->urls_position) AND ($urls->urls_position == '0')) OR ($params->get('urls_position') == '0' AND empty($urls->urls_position)))
		OR (empty($urls->urls_position) AND (!$params->get('urls_position')))) : ?>


	<?php echo $this->loadTemplate('links'); ?>
<?php endif; ?>
	<?php  if (isset($images->image_fulltext) and !empty($images->image_fulltext)) : ?>
	<?php $imgfloat = (empty($images->float_fulltext)) ? $params->get('float_fulltext') : $images->float_fulltext; ?>


	<div class="img-fulltext-<?php echo htmlspecialchars($imgfloat); ?>">
	<img
		<?php if ($images->image_fulltext_caption):
			echo 'class="caption"'.' title="' .htmlspecialchars($images->image_fulltext_caption) .'"';
		endif; ?>
		src="<?php echo htmlspecialchars($images->image_fulltext); ?>" alt="<?php echo htmlspecialchars($images->image_fulltext_alt); ?>"/>
	</div>
	<?php endif; ?>
<?php
if (!empty($this->item->pagination) AND $this->item->pagination AND !$this->item->paginationposition AND !$this->item->paginationrelative):
	echo $this->item->pagination;
endif;
?>
	<?php echo $this->item->text; ?>


<?php // TAGS ?>
<?php if ($params->get('show_tags', 1) && !empty($this->item->tags)) : ?>
	<?php $this->item->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
	<?php echo $this->item->tagLayout->render($this->item->tags->itemTags); ?>
<?php endif; ?>


<?php
if (!empty($this->item->pagination) AND $this->item->pagination AND $this->item->paginationposition AND!$this->item->paginationrelative):
	echo $this->item->pagination;?>
<?php endif; ?>


	<?php if (isset($urls) AND ((!empty($urls->urls_position) AND ($urls->urls_position == '1')) OR ( $params->get('urls_position') == '1'))) : ?>


	<?php echo $this->loadTemplate('links'); ?>
	<?php endif; ?>
<?php
if (!empty($this->item->pagination) AND $this->item->pagination AND $this->item->paginationposition AND $this->item->paginationrelative):
	echo $this->item->pagination;?>
<?php endif; ?>
	<?php echo $this->item->event->afterDisplayContent; ?>
</article>

Consiglio pratico per imparare a personalizzare i template di Joomla!: in un'installazione di test prova a modificare questo file (più in avanti imparerai come fare un override). Non è difficile individuare i blocchi di codice responsabili delle immagini, del testo dell'articolo, dei tag, della paginazione, ... buon lavoro!

P.S. Una dritta: Joomla permette di modificare tutti i file direttamente dal backend, non serve un editor.

[fda]

Ciao Divano, non devi scusarti di nulla.
Lavorare in locale con MAMP è un'ottima scelta. Se incontri problemi con WordPress confrontati con gli utenti del Forum qui: http://www.giorgiotave.it/forum/wordpress/

Buon lavoro!