Добавление иконок к заголовку статьи joomla. Организация контента в Joomla — удаление и создание статей в админке, а так же настройка параметров для всех материалов
Читайте также
Из этого туториала Вы узнаете, как использовать изображения вместо текста для элементов меню в Joomla.
Существует несколько способов добавления значков в меню:
Добавление изображений в меню, используя Менеджер Меню
Стандартный модуль Joomla для работы с меню позволит Вам заменить названия пунктов меню на изображения:
Добавление изображений, используя код CSS
Второй способ основывается на добавлении класса css изображения в файл (где ### — это номер вашего шаблона). Некоторые модули меню для Joomla, такие как модуль IceMegaMenu, не позволят Вам добавить изображение для элемента меню в админ панели. Вы можете добавить изображение, используя код css:
Используя значки FontAwesome :
Исследуйте ваш сайт, используя Инструмент разработчика, для того чтобы найти пользовательский класс css.
Внесите изменения в файл templates/theme###/css/templates.css (где ### — это номер вашего шаблона).
Код CSS, который нужно добавить в файл, как правило, выглядит следующим образом:
#iceMenu_101 .iceMenuTitle:before { font-family: FontAwesome !important; content: "###" !important; font-size: 45px !important; top: 20px !important; position: relative !important; display: inline-block !important; line-height: 45px !important; height: 90px !important; } #iceMenu_101 .iceMenuTitle { font:0/0 a !important; }
Где ### — это класс значка FontAwesome . Список доступных значков можно найти на сайте FontAwesome .
Проверьте ваш сайт для просмотра изменений.
Используя фоновое изображение в коде css:
Теперь Вы знаете, как использовать изображения вместо текста в элементах меню в Joomla.
Дополнительной идентификацией вашего сайта Joomla, может стать уникальная иконка или favicon. Favicon на сайте Joomla будет отражаться в браузерах в названии вкладок и сделанных закладках вместе со всеми страницами вашего сайта. По умолчанию все сайты управляемые CMS Joomla имеют одинаковые стандартные иконки. Отличаются только иконка для видимой части сайта Joomla и для административной панели. Иконку для части сайта, которую видят посетители, можно легко поменять.
Нужно ли менять иконку (favicon ) сайта Joomla
Замена иконки своего сайта влияет только на субъективную составляющую оптимизации сайта. Посетитель, сделав закладку страницы сайта, может потом легко ее найти в списке всех своих закладок. Кроме этого иконка сайта отражается в поиске и в прикладных инструментах. например, в списке сайтов в Яндекс веб-мастер.
Кроме этого, заменив стандартную иконку Joomla, вы прекратите афишировать, что ваш сайт управляется Joomla, а это один из шагов повышающих безопасность сайта .
Требования к новой иконке Joomla
Слово Favicon это сокращение от двух английских слов, favorites и icon . Для иконок Joomla есть свой стандарт. Их размер должен быть 16×16 или 32×32 пикселей. Сделан favicon , должен быть в 256 цветовой гамме. И главное, формат иконки Joomla должен быть favicon .ico .
Шаги по замене иконки (favicon ) сайта Joomla
Замена иконки сайта Joomla осуществляется в несколько простых шагов:
- Сгенерировать уникальную иконку из любого фото формата PNG или JPEG . Или нарисовать иконку самостоятельно, использую online сервисы или фото программы;
- Сделать из картинки favicon формат ico, размер 16(32)×16(32) px;
- Закачать новую иконку, в каталог сайта, удалив при этом все старые favicon ;
- Вставить специальный код в шаблон главной страницы своего сайта.
Разберем каждый шаг подробно.
Шаг 1. Создание иконки для сайта Joomla
В интернет есть много online инструментов, для генерации иконки в формате favicon .ico из любой фотографии. Здесь обратить внимание нужно на следующее.
Если вы хотите, чтобы ваш favicon был без белого фона, то его источником должно быть с прозрачным фоном при создании и в формате PNG при сохранении . Используя фото форматов отличных от png вы получите Favicon с белым или черным фоном. Отличные хранилища иконок в интернете вы найдете в верхнем меню этого сайта в пункте: Инструменты веб-мастера.
Генераторы favicon вы также можете найти самостоятельно, вписав в окне поиска: генератор favicon .Здесь приведу адреса генераторов иконок.
- pr-cy.ru/favicon
- tools.dynamicdrive.com/favicon
- iconfinder.com
- freepik.com/free-icons
- genericons.com
- flaticons.net
- iconbird.com
- iconizer.net
- webhostinghub.com
- iconspedia.com
- iconsearch.ru
- icons8.com
- glyphicons.com
- findicons.com
- icomoon.io
- iconarchive.com
- themify.me
- thenounproject.com
- flaticon.com
Делаются иконки Favicon следующим образом
- Заранее находите оригинальную картинку для своей будущей иконки;
- Открываете генератор;
- В окне загрузчика генератора выбираете свою иконку на компьютере. Выбираете размеры будущей иконки, для Joomla 16×16 пикселей;
- Нажимаете кнопку, типа «Сделать».
- Favicon генерируется за считанные секунды. Далее остается только скачать ее на свой компьютер. Для этого есть своя кнопка «Download ».Иконка на компьютере, нужно закачать ее в каталог.
Шаг 2. Закачать новую иконку в каталог сайта
С местом в каталоге сайта, куда нужно закачать новую иконку (favicon ) сайта ситуация следующая.
Раньше обязательным местом для размещения favicon .ico был корневой каталог сайта. Сейчас ситуация немного смягчилась. Использование динамических шаблонов позволяет закачивать иконку в любой каталог своего сайта, только в коде (ниже) нужно четко прописывать путь до этого каталога. Но при этом нужно помнить, чем дальше иконка от корня сайта, тем дольше она будет загружаться в браузере. А за скорость загрузки сайта нужно бороться, даже в мелочах.
class="eliadunit">
Поэтому советую загрузить основной favicon в корень сайта Joomla . Для загрузки понадобиться FTP клиент или авторизация в административной панели на хостинге. Перед загрузкой новой иконки (favicon ) проверьте все папки сайта и удалите или переименуйте старые favicon , которые возможно были установлены в загруженных вами шаблонах. Отдельно проверьте папку с вашим шаблоном . Из подпапок шаблона уберите файл favicon.ico. После того, как удалили старые favicon загружайте новый в корень сайта. Favicon в каталоге сайта, остается вставить код в шаблон главной страницы сайта.
Примечание: На этом этапе иконка сайта может уже поменяться. В некоторых шаблонах код для показа иконки (о коде ниже) уже прописан в шаблоне сайта и поэтому при замене иконки в каталоге она может поменяться и в закладке браузера. Только чтобы это увидеть нужно очистить кэш сайта и, может быть, перегрузить браузер.
Шаг 3. Вставляем код в шаблон сайта для отображения иконки favicon
Примечание: Этот способ устарел, в основных браузерах новая иконка отображается без вставки этого кода. Достаточно удалить все старые фавиконы из корня сайта и из шаблона. а также очистить кэш браузера и сайта.
Код (ниже) вставляется в шаблон главной страницы сайта Joomla между тегами
(пример ниже). В интернет вы можете найти несколько вариантов кодов (favicon ),для сайтов Joomla . Приведу пример только тех кодов, которые работают на всех моих сайтах Joomla .Код первый . Иконка появляется практически моментально, после очистки кеша сайта.
Код второй . Из-за отсутствия показа браузеру типа элеммента формы (type) эта иконка появляется в браузере через 1-2 суток.
Код третий. Для иконки(favicon) размещенного не в корневом каталоге (patch-to это путь до папки с favicon).
- Работают коды и с таким написанием SHORTCUT ICON , и с такимshortcut icon
- Если код вашего сайта HTML ,а не XHTML ,то заканчивать код нужно " >" ,а не "/>"
Если вам нужно отображение иконки в браузере IE ,попробуйте добавить такой код:
После вставки кода в шаблон не забывайте сохраниться, также очистите кэш сайта.
- Административная панель >>>Сайт>>>Обслуживание>>>Очистить весь кэш (для версий Joomla 1.7-2.5-3.х)
- Административная панель>>>Инструменты >>>Очистить весь кэш (для версии 1.5)
Пример вставленного кода для отображения иконки сайта:
Этот туториал покажет Вам, как добавить недостающие иконки FontAwesome в шаблон Joomla 3.x.
На вашем сайте может не хватать каких-то иконок. Это вероятно, если была выпущена новая версия шрифта FontAwesome , или если дизайнер добавил только те иконки, которые используются в демонстрационной версии шаблона.
Подключитесь к серверу используя клиент FTP или откройте Файловый менеджер панели управления хостингом (cPanel file manager ) и найдите файл templates/themeXXX/css/template.css .
Найдите последний из кодов для иконок FontAwesome в template.css. После него нужно добавить новые иконки, например иконку fa-comments:
Теперь откройте файл templates/themeXXX/less /font-awesome/font-awesome.css , найдите последний элемент списка иконок из файла template.css в файле, который Вы открыли. Скопируйте весь код под этой иконкой (в нашем случае это fa-comments) и вставьте этот код в конец файла template.css.
Сохраните внесённые изменения. Теперь Вы можете видеть, что иконки отображаются на вашем сайте:
В случае, если по каким-то причинам файл font-awesome.css отсутствует в вашем шаблоне, откройте файл на Официальном сайте FontAwesome и скопируйте код из файла maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css в конец template.css.
/ 2008-09 Joomla! Community Magazine
В этой статье я покажу вам простой способ добавления нового параметра к Типу Меню (Menu Type), который позволит Вам добавлять кастомное изображение к названию статьи на вашем Joomla! сайте. Данный метод похож на использование «Суффикса Класса Страницы» и «Суффикса Класса Модуля» для индивидуального оформления контента связанного с определенным меню или модулем. Я же выбрал метод, описываемый ниже, вместо «Суффикса Класса Страницы», потому что суффикс оказывает влияние не на один определенный параметр, а на связанные элементы страницы. В этом простом примере я просто хочу добавить один параметр к одному элементу на странице — Названиe Статьи.
1. Для начала создадим данные для примера.
Давайте создадим типовые данные, для использования в процессе работы:
Создайте «Раздел» под названием «Статьи». Далее, создайте три Категории. Для этих категорий мы расширим юзабилити, добавляя соответствующее изображение к каждой статье в категории.
Далее создайте четыре текстовых статьи с контентом для примера в каждой категории. Я рекомендую использовать для этого расширение Mass Content .
2. Добавим новый параметр к XML «Тип Меню»
Перейдите в корневую директорию вашего сайта на Joomla! и следуйте к папке «tmpl» согласно этого пути — components/com_content/views/category/tmpl.
Откройте blog.xml и добавьте параметр, приведенный ниже, сразу после строки обозначенной тегом
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 файл для редактирования.
item->params->get("pageclass_sfx"); ?>" width="100%">
item->params->get(‘link_titles’) && $this->item->readmore_link != ») : ?>
class=»contentpagetitleitem->params->get(‘pageclass_sfx’); ?>»>
params->get(‘icon_suffix’); ?>»>
escape($this->item->title); ?>
params->get(‘icon_suffix’); ?>»>
escape($this->item->title); ?>
Теперь откройте недавно скопированный /templates/ваш_шаблон/html/com_content/article/default.php файл.
Вы увидите код, приведенный ниже, кроме тех строк, которые выделены красным, они и являются теми элементами, которые мы добавим и затем сохраним этот файл.
params->get("pageclass_sfx"); ?>" width="100%">
params->get(‘link_titles’) && $this->article->readmore_link != ») : ?>
class=»contentpagetitleparams->get(‘pageclass_sfx’); ?>»>
params->get(‘icon_suffix’); ?>»>
escape($this->article->title); ?>
params->get(‘icon_suffix’); ?>»>
escape($this->article->title); ?>
4. Добавляем стили CSS и картинки
Хорошо, мы подготовили базовые элементы шаблона Joomla, а теперь перейдем к дизайнерской части данного урока.
Первое, что нам нужно сделать — это подобрать иконки для вышеупомянутых категорий (FAQ, Медиа, Книги). Для этого можно использовать иконки из набора silk icon set , они уже имеют желаемый размер (16px), файлы в PNG-32 с прозрачностью и, конечно же, бесплатны.
Я выбрал три приведенные ниже. Вы можете просто скопировать эти картинки и поместить в /templates/ваш_шаблон/images.
Теперь открывайте ваш основной CSS-файл шаблона (обычно template.css) /templates/ваш_шаблон/css/template.css и добавляйте следующий CSS код:
background: url(../images/info.png) no-repeat 0px 5px;
background: url(../images/photo.png) no-repeat 0px 5px;
background: url(../images/book_open.png) no-repeat 0px 5px;
Назначаем стили для пункта меню (Menu Item)
В коде, приведенном выше, мы можем увидеть названия нужных классов (то есть, faq, media, book). Это и есть те параметры, которые вы теперь сможете использовать, для ввода в менеджере меню.
Для того чтобы это сделать, сначала войдите в панель администрирования Joomla! и создайте новый Пункт Меню, используя «Блог — содержимое категории» в качестве вывода содержимого.
В параметрах пункта меню справа, вы увидите вкладку «Расширенные», где Вы увидите новый параметр, названный «Article Icon Class». Вы можете ввести в это поле одно из трех значений: faq, media, или book. После того как вы сохраните свой новый пункт меню, просмотрите Блог Категории фронтенда вашего Joomla! сайта и выберите новый пункт меню. Как только вы «доберетесь» к статье, вы увидите новый вариант вывода названия с иконкой.
Если Вы хотите изменить существующие параметры или добавить больше, все, что Вы должны сделать, добавить новый класс CSS, как показано в примере выше. Надеюсь, вы будете применять этот способ в своих шаблонах. Наслаждайтесь Joomla!
В этой статье рассмотрим, как вставить иконки в пункты меню сайта Joomla, чтобы отображалось не только название, но и рядом с ним была иконка, символизирующая данный пункт меню. Напомню, что работаю я с шаблоном Protostar. А материал данной статьи затрагивает стили именно этого шаблона. Но, если используется другой шаблон, то не факт, что приведённый ниже рецепт окажется бесполезным. ;)
Постановка задачи
Итак, у нас есть Главное меню сайта, которое мы уже передвинули в шапку сайта и даже придали ему горизонтальное расположение . Выглядит оно так:
В общем, стандартное меню. Но нет в нём индивидуальности, а очень хочется. =)
Поэтому, подглядев на других сайтах, что можно вставлять иконки в пункты меню рядом с их названиями, сделаем это и на нашем сайте.
Менеджер меню. Пункт меню. Вкладка «Параметры ссылки»
Для того, чтобы поменять внешний вид нашего пункта меню нам потребуется админка Joomla, а конкретно Вкладка «Параметры ссылки », которая доступна в «Менеджере меню » при редактировании или создании пункта меню . Работать будем с полем «» так, как показано на картинке:
- Вставим в поле название иконки, которую нам хочется видеть в пункте меню перед его названием, например, icon-users
- Сразу поставим пробел в поле «Заголовок меню » (чтобы иконка не сливалась с названием пункта меню)
- Сохраним внесённые изменения и посмотрим что получилось
Заголовок пункта меню уползает вниз (располагается не горизонтально, а вертикально)
При просмотре получившегося результата всё выглядит удручающе. Хотя иконка и появилась в пункте меню, на название пункта меню уползло вниз, вытянувшись в вертикальном расположении по одной букве:
Исправляем ситуацию. Приводим пункт меню в горизонтальный вид.
Пока не понимаю, чем руководствовались создатели шаблона Protostar и почему всплывает такой косяк. Ясно одно: свойству display пункта меню задано значение block , поэтому он поблочно и выводит каждый символ, складывая их один под другим. А нам нужно их вытянуть в строчку, значит значение свойства display должно быть inline .
Для этого нужно внести изменения в файл template.css , который находится в папке шаблона:
./templates/protostar/css/template.css