Добавление новых параметров оформления для заголовков статей в 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. Замечательная компьютерная диагностика автомобилей.
Loading ...
Спасибо за пост, скачал, дома буду юзать
Спасбо что поделился интересной информацией, многим будет полезно.
О нужно попробовать.
аписано доступно. Спасбо еще раз.
Не работает.
И не будет работать
Пост надо было назвать «Добавление новых параметров оформления для заголовков статей одной категории в Joomla 1.5», а не вводить людей в заблуждение. Развели тут говнище
<a href="comment-#645" rel="nofollow">Андрей</a> -Говнище, друг мой, — это ты. Вот такие недалекие и тупые люди — настоящее говно. Если твоего мозга не хватает для того, чтобы внимательно все почитать, чтобы на предложенном примере сделать выводы, чтобы применить единичный пример в общих случаях, то не ходи на этот блог, он не для тупых людей.Все статьи в ОДНОЙ категории будут иметь один и тот же рисунок.
Хе-хе,материал скопирован отсюда
Смотри внимательно, на ту статью, на которую ты указал. В конце статьи сказано кто автор и кто перевел. Достали тупые люди.
Объясняю для всех, кто не понял. Читаем вступление внимательно —
«В этой статье я покажу вам простой способ добавления нового параметра к Типу Меню (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 на своем блоге... но решения нигде нет.
Очень извиняюсь за ссылку... вот тут я писал о своей проблеме подробно:
Может у Вас есть варианты решения? Я готов выразить благодарность материально... та и огромное спасибо если ответите вообще
С ув. Игорь
Игорь, все очень просто. Используйте какой-либо CCK, например тот же K2 и все будет так как вам надо. о есть вы просто добавите поля в виде чекбоксов, которые нужно будет отмечать при создании материала, а с помощью CSS оформите картинки.
Ну зачем все так усложнять для такой простой задачи — пользуйтесь встроенными возможностями Joomla: