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. Замечательная компьютерная диагностика автомобилей.
karlo4
Спасибо за пост, скачал, дома буду юзать
Удар
Спасбо что поделился интересной информацией, многим будет полезно.
Юля
О нужно попробовать.
Олег_президент
аписано доступно. Спасбо еще раз.
zeits
Не работает.
Андрей
И не будет работать
Андрей
Пост надо было назвать «Добавление новых параметров оформления для заголовков статей одной категории в Joomla 1.5», а не вводить людей в заблуждение. Развели тут говнище
Hiway
Андрей -
Говнище, друг мой, — это ты. Вот такие недалекие и тупые люди — настоящее говно. Если твоего мозга не хватает для того, чтобы внимательно все почитать, чтобы на предложенном примере сделать выводы, чтобы применить единичный пример в общих случаях, то не ходи на этот блог, он не для тупых людей.Mr.Vain
Все статьи в ОДНОЙ категории будут иметь один и тот же рисунок.
Коп
Хе-хе,материал скопирован отсюдаhttp://webcomme.ru/articles/programming/96-joomla-headers-styling.html
Hiway
Hiway
Объясняю для всех, кто не понял. Читаем вступление внимательно —
«В этой статье я покажу вам простой способ добавления нового параметра к Типу Меню (Menu Type), который позволит Вам добавлять кастомное изображение к названию статьи на вашем Joomla! сайте.»
А теперь подумайте мозгом, по поводу фразы «ОДНОЙ» категории! В статье просто приведен пример на уровне категории. Вы можете это сделать для раздела, статьи, как угодно. Был бы мозг.
SHTINer
не работает 🙁
SHTINer
не поделитесь рабочим патчиком? 😉
Hiway
Внимательно читайте. Если сделали все как написано и уверены на сто процентов, то посмотрите оригинал по ссылке в статье. По поводу патча — его нельзя так называть. И универсального быть не может. Если вы разбираетесь в 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».
Где я косячу?
Спасибо.
hiway
Валерий, все просто… Обратите внимание на то, что параметр который вы добавили это просто текстовое поле. По умолчанию оно у вас должно выдавать «custom_suffix», но в шаблоне не используется параметр так ка не задано значение по умолчанию. Напишите название класса в текстовом поле и проследите за тем, что у вас есть в шаблоне файл params.ini и в нем записался указанный вами класс.
Валерий
описание класса со вставками PHP такое же как в примере, просто не уследил за всеми символами, поэтому не воспринимайте ка мою синтаксическую ошибку.
joniks
Крута! Похоже в joomla Framework есть поддержка функционала на подобии CCK(конструктор контента). Правда для добавления доп. полей для материала нужно редактировать файл administrator/components/com_content/models/article.xml и вставлять доп. параметр либо в группу advanced либо metadata.
Хотя есть еще вариант добавить в тот файл свою группу (тогда в редакторе материалов она будет отображаться в отдельной вкладке), но для этого нужно будет редактировать еще один файл компонента.
Igor (GoldPromo)
Доброго времени!http://joomlaforum.ru/index.php/topic,200996.new.html
Может есть примерчик как это выглядит?
Вот мне просто нужно сделать иконки совместимости компонентов с версиями Joomla на своем блоге… но решения нигде нет.
Очень извиняюсь за ссылку… вот тут я писал о своей проблеме подробно:
Может у Вас есть варианты решения? Я готов выразить благодарность материально… та и огромное спасибо если ответите вообще 🙂
С ув. Игорь
Hiway
Игорь, все очень просто. Используйте какой-либо CCK, например тот же K2 и все будет так как вам надо. о есть вы просто добавите поля в виде чекбоксов, которые нужно будет отмечать при создании материала, а с помощью CSS оформите картинки.
joniks
Ну зачем все так усложнять для такой простой задачи — пользуйтесь встроенными возможностями Joomla:http://wedal.ru/uroki-joomla/joomla-magic-additional-fields-without-core-hack.html