Добавление новых параметров оформления для заголовков статей в Joomla 1.5

Joomla! Community Magazine / 2008-09 Joomla! Community Magazine

Автор Casey Lee, перевод Hiway

В этой статье я покажу вам простой способ добавления нового параметра к Типу Меню (Menu Type), который позволит Вам добавлять кастомное изображение к названию статьи на вашем Joomla! сайте. Данный метод похож на использование «Суффикса Класса Страницы» и «Суффикса Класса Модуля» для индивидуального оформления контента связанного с определенным меню или модулем. Я же выбрал метод, описываемый ниже, вместо «Суффикса Класса Страницы», потому что суффикс оказывает влияние не на один определенный параметр, а на связанные элементы страницы. В этом простом примере я просто хочу добавить один параметр к одному элементу на странице — Названиe Статьи.

1. Для начала создадим данные для примера.

Давайте создадим типовые данные, для использования в процессе работы:

Создайте «Раздел» под названием «Статьи». Далее, создайте три Категории. Для этих категорий мы расширим юзабилити, добавляя соответствующее изображение к каждой статье в категории.

FAQ: категория с листингом часто задаваемых вопросов;

Медиа: категория с листингом основных загружаемых файлов, таких как кинофильмы;

Книги: категория с листингом различных названий книг и обзоров.

Далее создайте четыре текстовых статьи с контентом для примера в каждой категории. Я рекомендую использовать для этого расширение Mass Content.

2. Добавим новый параметр к XML «Тип Меню»

Перейдите в корневую директорию вашего сайта на Joomla! и следуйте к папке «tmpl» согласно этого пути — components/com_content/views/category/tmpl.

Откройте blog.xml и добавьте параметр, приведенный ниже, сразу после строки обозначенной тегом <advanced>. Сделайте то же самое для default.xml файла.

<param name="icon_suffix" type="text" default="" label="Article Icon Class"

description=»Adds a class suffix for individual category article title styling»/>

Важное примечание: В данном примере параметр «description» начинается с новой строки. При введении кода в xml-файл обязательно проследите, чтобы весь код был в одной строке без каких-либо переносов строк.

3. Создаем кастомный шаблон (Template Overrides)

В Joomla! 1.5, мы имеем замечательную возможность создавать собственные шаблоны для замены стандартных шаблонов вывода контента представленных в ядре по умолчанию. Кастомные шаблоны (Template Overrides) очень удобны и просты в использовании. Сначала, мы копируем файлы разметки из основных компонентов в папку «html» в папке нашего шаблона. Далее, мы делаем изменения. Когда Joomla! находит файлы пользовательской разметки в вашей папке templates/ваш_шаблон/html/, она использует ваши файлы, и «игнорирует» файлы разметки в ядре.

Чтобы это сделать войдите в /templates/ваш_шаблон/ паку. Создайте новую паку и назовите ее «html». В папке html, создайте новую директорию и назовите ее «com_content». Если в вашем шаблоне уже есть директории «html» или «com_content», то вам повезло и создавать их не надо.

В папке «com_content», создайте две папки; одну назовите «article», а другую назовите «category».

Например:

/templates/rhuk_milkyway/html/com_content/category /templates/rhuk_milkyway/html/com_content/article

Теперь скопируйте (не перемещать!!!) файлы разметки в ядре — components/com_content/views/category/tmpl/blog_item.php файл в /templates/ваш_шаблон/html/com_content/category

Примечание: если этот файл уже существует, лучше не переписывать это. Вы можете продолжить выполнять действия, приведенные в примере, используя имеющийся файл.

Опять скопируйте (не перемещать!!!) components/com_content/views/article/tmpl/default.php в /templates/ваш_шаблон/html/com_content/article

Добавляем элементы оформления для вывода иконок в файле разметки

Откройте /templates/ваш_шаблон/html/com_content/category/blog_item.php файл для редактирования.

Вы увидите код, приведенный ниже, кроме тех строк, которые выделены красным, они и являются теми элементами, которые мы добавим и затем сохраним этот файл.

<td class="contentheading<?php echo $this->item->params->get( 'pageclass_sfx' ); ?>" width="100%">

<?php if ($this->item->params->get(‘link_titles’) && $this->item->readmore_link != ») : ?>

<a href=»<?php echo $this->item->readmore_link; ?>»

class=»contentpagetitle<?php echo $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; ?>

</td>

Теперь откройте недавно скопированный /templates/ваш_шаблон/html/com_content/article/default.php файл.

Вы увидите код, приведенный ниже, кроме тех строк, которые выделены красным, они и являются теми элементами, которые мы добавим и затем сохраним этот файл.

<td class="contentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>" width="100%">

<?php if ($this->params->get(‘link_titles’) && $this->article->readmore_link != ») : ?>

<a href=»<?php echo $this->article->readmore_link; ?>»

class=»contentpagetitle<?php echo $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; ?>

</td>

4. Добавляем стили CSS и картинки

Хорошо, мы подготовили базовые элементы шаблона Joomla, а теперь перейдем к дизайнерской части данного урока.

Первое, что нам нужно сделать — это подобрать иконки для вышеупомянутых категорий (FAQ, Медиа, Книги). Для этого можно использовать иконки из набора silk icon set, они уже имеют желаемый размер (16px), файлы в PNG-32 с прозрачностью и, конечно же, бесплатны.

Я выбрал три приведенные ниже. Вы можете просто скопировать эти картинки и поместить в /templates/ваш_шаблон/images.

Теперь открывайте ваш основной CSS-файл шаблона (обычно template.css) /templates/ваш_шаблон/css/template.css и добавляйте следующий 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;

}

Назначаем стили для пункта меню (Menu Item)

В коде, приведенном выше, мы можем увидеть названия нужных классов (то есть, faq, media, book). Это и есть те параметры, которые вы теперь сможете использовать, для ввода в менеджере меню.

Для того чтобы это сделать, сначала войдите в панель администрирования Joomla! и создайте новый Пункт Меню, используя «Блог — содержимое категории» в качестве вывода содержимого.

В параметрах пункта меню справа, вы увидите вкладку «Расширенные», где Вы увидите новый параметр, названный «Article Icon Class». Вы можете ввести в это поле одно из трех значений: faq, media, или book. После того как вы сохраните свой новый пункт меню, просмотрите Блог Категории фронтенда вашего Joomla! сайта и выберите новый пункт меню. Как только вы «доберетесь» к статье, вы увидите новый вариант вывода названия с иконкой.

Если Вы хотите изменить существующие параметры или добавить больше, все, что Вы должны сделать, добавить новый класс CSS, как показано в примере выше. Надеюсь, вы будете применять этот способ в своих шаблонах. Наслаждайтесь Joomla!

Комментарий Редактора Joomla! Community Magazine

Когда я пригласил Кейси раскрыть некоторые приемы создания шаблонов в журнале, он спросил, можно ли написать урок о том, как создавать параметры в XML для типов меню (Menu Types). Я высоко оценил его предложение, так как много профессионалов используют этот подход, чтобы получить новые креативные решения в шаблонах Joomla.

Вот несколько подсказок для модернизации XML, если Вы решаете применить этот метод своих шаблонах.

Прежде, чем вы будете изменять XML:

1. Скопируйте изменяемые файлы XML в свою рабочую директорию и сделайте запись оригинального местоположения каждого файла.

2.Сделайте бэкап сайта.

3. Посмотрите на оригинальное местоположение каждого файла XML, чтобы проконтролировать нахождение вашего XML в нужном месте. Далее применяйте редактирование к файлу.

4.Потом проверяем, работает ли сайт с внедренными изменениями.

Если вам нужно вернуться к начальному виду сайта, просто верните назад резервные копии XML.

Постовой: Имиджевая рекламаКомпьютерная диагностика автомобиля Fiat. Замечательная компьютерная диагностика автомобилей.