Рубрики
Joomla

Добавление новых параметров оформления для заголовков статей в 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. Замечательная компьютерная диагностика автомобилей.

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

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

Андрей - Говнище, друг мой, — это ты. Вот такие недалекие и тупые люди — настоящее говно. Если твоего мозга не хватает для того, чтобы внимательно все почитать, чтобы на предложенном примере сделать выводы, чтобы применить единичный пример в общих случаях, то не ходи на этот блог, он не для тупых людей.

Коп Смотри внимательно, на ту статью, на которую ты указал. В конце статьи сказано кто автор и кто перевел. Достали тупые люди.

Объясняю для всех, кто не понял. Читаем вступление внимательно —
«В этой статье я покажу вам простой способ добавления нового параметра к Типу Меню (Menu Type), который позволит Вам добавлять кастомное изображение к названию статьи на вашем Joomla! сайте.»
А теперь подумайте мозгом, по поводу фразы «ОДНОЙ» категории! В статье просто приведен пример на уровне категории. Вы можете это сделать для раздела, статьи, как угодно. Был бы мозг.

Внимательно читайте. Если сделали все как написано и уверены на сто процентов, то посмотрите оригинал по ссылке в статье. По поводу патча — его нельзя так называть. И универсального быть не может. Если вы разбираетесь в Joomla!, то вы это поймете, внимательно прочитав материал.

Добрый день.
Очень полезная статья.
но в связи с этим возник вопрос. Я хочу проделать аналогичную операцию, но для отдельной статьи.
Вот мои действия:
1. Зашел в components/com_content/views/article/tmpl
2. Добавил в файл default.xml
3. Дописал в /templates/мой_шаблон/html/com_content/default.php, следующее:

<div class="params->get(‘article_suffix’);?>»>
…Код слоя статьи…

Результат:
1. Появился пункт меню «Custom Article Class» в разделе «Параметры — Основные» при выборе отображения меню как Шаблона статьи.
2. В коде появился но в нем нет названия класса, который я вводил в «Custom Article Class».
Где я косячу?

Спасибо.

чорт подери, движок зарезал куски кода 🙂 немного подправлю
Вот мои действия:
1. Зашел в components/com_content/views/article/tmpl
2. Добавил в файл default.xml <param name=»article_suffix» type=»text» default=»custom_suffix» label=»Custom Article Class» description=»Adds a class suffix for individual article styling»/>
3. Дописал в /templates/мой_шаблон/html/com_content/default.php, следующее:
<?php defined(‘_JEXEC’) or die(‘Restricted access’);?>
<div id=»page»>
<div class=»params->get(‘article_suffix’);?>»>
…Код слоя статьи…
</div>
</div>
Результат:
1. Появился пункт меню «Custom Article Class» в разделе «Параметры — Основные» при выборе отображения меню как Шаблона статьи.
2. В коде появился но в нем нет названия класса, который я вводил в «Custom Article Class».
Где я косячу?

Спасибо.

Валерий, все просто… Обратите внимание на то, что параметр который вы добавили это просто текстовое поле. По умолчанию оно у вас должно выдавать «custom_suffix», но в шаблоне не используется параметр так ка не задано значение по умолчанию. Напишите название класса в текстовом поле и проследите за тем, что у вас есть в шаблоне файл params.ini и в нем записался указанный вами класс.

описание класса со вставками PHP такое же как в примере, просто не уследил за всеми символами, поэтому не воспринимайте ка мою синтаксическую ошибку.

Крута! Похоже в joomla Framework есть поддержка функционала на подобии CCK(конструктор контента). Правда для добавления доп. полей для материала нужно редактировать файл administrator/components/com_content/models/article.xml и вставлять доп. параметр либо в группу advanced либо metadata.
Хотя есть еще вариант добавить в тот файл свою группу (тогда в редакторе материалов она будет отображаться в отдельной вкладке), но для этого нужно будет редактировать еще один файл компонента.

Доброго времени!
Может есть примерчик как это выглядит?
Вот мне просто нужно сделать иконки совместимости компонентов с версиями Joomla на своем блоге… но решения нигде нет.
Очень извиняюсь за ссылку… вот тут я писал о своей проблеме подробно: http://joomlaforum.ru/index.php/topic,200996.new.html

Может у Вас есть варианты решения? Я готов выразить благодарность материально… та и огромное спасибо если ответите вообще 🙂

С ув. Игорь

Игорь, все очень просто. Используйте какой-либо CCK, например тот же K2 и все будет так как вам надо. о есть вы просто добавите поля в виде чекбоксов, которые нужно будет отмечать при создании материала, а с помощью CSS оформите картинки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *