Простой способ оформления заголовков статей

В этой статье я покажу простой способ добавления нового параметра к пункту меню компонента «com_content» шаблона «Категория / Блог» и «Материал», что позволить очень легко добавлять собственные иконки к заголовкам статей.



1) Добавим новый параметр в настройки пункта меню. Откроем файл "/components/com_content/views/category/tmpl/blog.xml" и после 30 строки добавим:

<!-- START PATCH -->
		<param name="icon_suffix" type="text" default="" label="Article Icon Class" description="Adds a class suffix for individual category article title styling" />
<!-- END PATCH -->

2) Тоже самое проделаем с файлом "/components/com_content/views/category/tmpl/default.xml"

3) Скопируем файл "/components/com_content/views/category/tmpl/blog_item.php" в "/templates/название_шаблона/html/com_content/category"

4) Скопируем файл "/components/com_content/views/article/tmpl/default.php" в "/templates/название_шаблона/html/com_content/article"

5) Немного изменим вёрстку скопированных файлов. В файле "/templates/название_шаблона/html/com_content/category/blog_item.php" заменим:

<a href="<?php echo $this->item->readmore_link; ?>" class="contentpagetitle<?php echo $this->escape($this->item->params->get( 'pageclass_sfx' )); ?>">
	<?php echo $this->escape($this->item->title); ?></a>
<?php else : ?>
	<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>

на:

<a href="<?php echo $this->item->readmore_link; ?>" class="contentpagetitle<?php echo $this->escape($this->item->params->get( 'pageclass_sfx' )); ?>">
	<span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span>
	<?php echo $this->escape($this->item->title); ?></a>
<?php else : ?>
	<span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span>
	<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>

6) В файле "/templates/название_шаблона/html/com_content/article/default.php" заменим:

<a href="<?php echo $this->article->readmore_link; ?>" class="contentpagetitle<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
	<?php echo $this->escape($this->article->title); ?></a>
<?php else : ?>
	<?php echo $this->escape($this->article->title); ?>
<?php endif; ?>

на:

<a href="<?php echo $this->article->readmore_link; ?>" class="contentpagetitle<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>">
	<span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span>
	<?php echo $this->escape($this->article->title); ?></a>
<?php else : ?>
	<span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span>
	<?php echo $this->escape($this->article->title); ?>
<?php endif; ?>

7) Скачаем иконки и положим в каталог «images» вашего шаблона

8) Добавим стили в css-файл вашего шаблона:

span.faq {
 background: url(../images/info.png) no-repeat 0px 5px;
 width: 18px;
 height: 20px;
 display: block;
 float: left;
 }
span.media {
 background: url(../images/photo.png) no-repeat 0px 5px;
 width: 18px;
 height: 20px;
 display: block;
 float: left;
 }
span.book {
 background: url(../images/book_open.png) no-repeat 0px 5px;
 width: 18px;
 height: 20px;
 display: block;
 float: left;
 }

9) Теперь зайдём в менеджер меню и создадим пункт меню типа «Категория / Блог», и в расширенный параметрах в поле «Article Icon Class» укажем суффикс, который и выступит в роли названия класса для элемента SPAN

Вот и всё, конечно же дополнительные параметры можно использовать и для других более полезных действий.