Добавяне на икони към заглавката на статия в joomla. Организиране на съдържание в Joomla - изтриване и създаване на статии в админ панела, както и настройка на параметри за всички материали

Този урок ще ви покаже как да използвате изображения вместо текст за елементи от менюто в Joomla.

Има няколко начина за добавяне на икони към менюто:

Добавяне на изображения към менюта чрез Мениджър на менюта

Стандартен Joomla модулза работа с менюто ще ви позволи да замените имената на елементите от менюто с изображения:

Добавяне на изображения чрез CSS код

Вторият начин се основава на добавяне на клас css изображениякъм файл (където ### е номерът на вашия шаблон). Някои модули на менюто за Joomla, като модула IceMegaMenu, няма да ви позволят да добавите изображение за елемент от менюто в административния панел. Можете да добавите изображение с помощта на css код:

Използване на фоново изображение в css кода:




1. Използване на икони на FontAwesome:

   1. Разгледайте сайта си с помощта на инструмента за разработчици, за да намерите персонализирания css клас.

      Направете промени във файла шаблони/тема###/css/templates.css(където ### е номерът на шаблона ви).

      CSS кодът, който трябва да се добави към файла, обикновено изглежда така:

      #iceMenu_101 .iceMenuTitle:before ( семейство шрифтове: FontAwesome !important; съдържание: "###" !important; font-size: 45px !important; top: 20px !important; позиция: относително !important; display: inline-block !important; line-height: 45px !important; height: 90px !important; ) #iceMenu_101 .iceMenuTitle ( font:0/0 a !important; )

      Където ### е класът на иконите FontAwesome. Списък с налични икони може да бъде намерен на уебсайта на FontAwesome.

      Проверете сайта си за промени.

Сега знаете как да използвате изображения вместо текст в елементите на менюто в Joomla.

Допълнителна идентификация на вашия Joomla сайт може да бъде уникална икона или favicon. Favicon на сайта на Joomla ще бъде отразен в браузърите в заглавието на раздели и отметки, направени заедно с всички страници на вашия сайт. По подразбиране всички сайтове, управлявани от CMS Joomla, имат еднакви стандартни икони. Само иконата за видимата част на сайта на Joomla и за административен панел. Иконата за частта от сайта, която посетителите виждат, може лесно да се промени.

Трябва ли да сменя иконата (favicon) на сайта на Joomla

Подмяната на иконата на вашия сайт засяга само субективния компонент на оптимизацията на сайта. Посетител, маркирайки страница от сайта, може лесно да я намери в списъка с всички свои отметки. Освен това иконата на сайта се отразява в инструментите за търсене и приложение. например в списъка със сайтове в Yandex Webmaster.

Освен това чрез замяна стандартна икона Joomla, ще спрете да рекламирате, че вашият сайт се управлява от Joomla и това е една от стъпките за повишаване на сигурността на сайта.

Изисквания за новата икона на Joomla

Думата Favicon е съкращение от две английски думи, любими и икона. Иконите на Joomla имат свой собствен стандарт. Техният размер трябва да бъде 16x16 или 32x32 пиксела. Направен фавикон, трябва да е в 256 цвята. И най-важното, форматът на иконата на Joomla трябва да бъде favicon .ico.

Стъпки за подмяна на favicon на Joomla сайт

Подмяната на иконата на сайта на Joomla става в няколко прости стъпки:

• Генерирайте уникална икона от всяка PNG или JPEG снимка. Или сами нарисувайте икона, като използвате онлайн услуги или програми за снимки;
• Направете favicon от изображението в ico формат, размер 16(32)×16(32) px;
• Качете нова икона в директорията на сайта, като същевременно изтриете всички стари фавикони;
• Поставете специален кодв шаблон начална страницавашия сайт.

Нека анализираме подробно всяка стъпка.

Стъпка 1. Създаване на икона за сайта на Joomla

В интернет има много онлайн инструменти за генериране на favicon .ico икона от всяка снимка. Тук трябва да обърнете внимание на следното.

Ако искате фавиконата ви да е без бял фон, тогава неговият източник трябва да е от прозрачен фонпо време на създаване и форматиране PNG при запазване. Използвайки фотоформати, различни от png, ще получите Favicon с бял или черен фон. Можете да намерите страхотни хранилища за икони в мрежата на горно менюна този сайт в точка: Инструменти за уеб администратори.

Можете също така сами да намерите генератори на favicon, като напишете в полето за търсене: генератор на favicon Тук ще дам адресите на генераторите на икони.

1. pr-cy.ru/favicon
2. 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 се генерира за секунди. След това остава само да го изтеглите на вашия компютър. За да направите това, има бутон "Изтегляне" Икона на компютъра, трябва да го качите в директорията.

Стъпка 2. Качете нова икона в директорията на уебсайта

С мястото в директорията на сайта, където трябва да качите нова икона (favicon) на сайта, ситуацията е следната.

Преди това задължителното място за поставяне на favicon .ico беше основната директория на сайта. Сега ситуацията малко се смекчи. Използването на динамични шаблони ви позволява да качите икона във всяка директория на вашия сайт, само в кода (по-долу) трябва ясно да посочите пътя до тази директория. Но в същото време трябва да запомните, че колкото по-далеч е иконата от корена на сайта, толкова повече време ще отнеме да се зареди в браузъра. И за скоростта на зареждане на сайта трябва да се борите, дори и в малки неща.

class="eliadunit">

Затова ви съветвам да качите основния фавикон в корена на сайта на Joomla. За изтегляне е необходим FTP клиент или оторизация в административния панел на хостинга. Преди да качите нова икона (favicon), проверете всички папки на сайта и премахнете или преименувайте старите favicons, които може да са били инсталирани в шаблоните, които сте качили. Отделно проверете папката с вашия шаблон. Премахнете файла favicon.ico от подпапките на шаблона. След като премахнете старите favicons, качете новата в корена на сайта. Favicon в директорията на сайта, остава да вмъкнете кода в шаблона на главната страница на сайта.

Забележка:На този етап иконата на сайта може вече да се е променила. В някои шаблони кодът за показване на иконата (за кода по-долу) вече е написан в шаблона на сайта и следователно, когато заменяте иконата в каталога, тя може да се промени и в раздела на браузъра. Само за да видите това, трябва да изчистите кеша на сайта и може би да рестартирате браузъра.

Стъпка 3. Поставете кода в шаблона на сайта, за да се покаже иконата на favicon

Забележка:Този метод е остарял, в основните браузъри новата икона се показва без поставяне на този код. Достатъчно е да премахнете всички стари favicons от корена на сайта и от шаблона. и също така изчистете кеша на браузъра и сайта.

Кодът (по-долу) се вмъква в шаблона за начална страница на Joomla между таговете (пример по-долу). В интернет можете да намерите няколко опции за кодове (favicon) за Joomla сайтове. Ще дам пример само за онези кодове, които работят на всичките ми сайтове на Joomla.

Код едно. Иконата се появява почти моментално, след изчистване на кеша на сайта.

Код две. Поради липсата на показване на браузъра на типа на елемента на формуляра (типа), тази икона се появява в браузъра след 1-2 дни.

Код три. За икона (favicon), разположена извън главната директория (patch-to е пътят към папката с favicon).

• Кодовете работят с тази икона за пряк път и с тази икона за пряк път
• Ако кодът на вашия сайт е HTML, а не XHTML, тогава трябва да завършите кода с ">", а не с "/>"

Ако трябва да покажете иконата в браузъра IE, опитайте да добавите този код:

След като поставите кода в шаблона, не забравяйте да запазите, също така изчистете кеша на сайта.

• Административен панел >>>Сайт>>>Поддръжка>>>Изчистване на целия кеш (за Joomla версии 1.7-2.5-3.x)
• Административен панел >>>Инструменти >>>Изчистване на целия кеш (за версия 1.5)

Пример за поставен код за показване на иконата на сайта:

Този урок ще ви покаже как да добавите липсващите икони FontAwesomeкъм шаблон на Joomla 3.x.

На вашия сайт може да липсват някои икони. Това е вероятно, ако е бил пуснат нова версияШрифт FontAwesome или ако дизайнерът е добавил само тези икони, които се използват в демо версията на шаблона.

Свържете се със сървъра с помощта на FTP клиент или отворете файловия мениджър на контролния панел на хостинга (cPanel файлов мениджър) и намерете файла шаблони/темаXXX/css/template.css.

Намерете последния от кодовете на иконите на FontAwesome в template.css. След това трябва да добавите нови икони, например иконата fa-comments:



Сега отворете файла templates/themeXXX/less /font-awesome/font-awesome.css, намерете последния елемент от списъка с икони от файла template.css във файла, който сте отворили. Копирайте целия код под тази икона (fa-коментари в нашия случай) и поставете този код в края на файла template.css.

Запазете промените си. Сега можете да видите, че иконите се показват на вашия сайт:



В случай, че по някаква причина файлът font-awesome.css липсва във вашия шаблон, отворете файла на официалния уебсайт на FontAwesome и копирайте кода от файла maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.cssдо края на template.css.

/ 2008-09 Joomla! Обществено списание

В тази статия ще ви покажа лесен начин за добавяне на нов параметър към типа на менюто, който ще ви позволи да добавите персонализирано изображение към заглавието на статия във вашия Joomla! сайт. Този методподобно на използването на „Суфикс на клас на страница“ и „Суфикс на клас на модул“ за персонализиране на съдържанието, свързано с конкретно меню или модул. Избрах метода, описан по-долу, вместо „Суфикс на клас страница“, тъй като суфиксът не засяга един конкретен параметър, а свързаните елементи на страницата. В това прост примерПросто искам да добавя един параметър към един елемент на страницата - Заглавие на статията.

1. Първо, нека създадем данните за примера.

Нека създадем примерни данни за използване в процеса:

Създайте "Секция", наречена "Статии". След това създайте три категории. За тези категории ще подобрим използваемостта, като добавим подходящо изображение към всяка статия в категорията.

След това създайте четири текстови статии с примерно съдържание във всяка категория. Препоръчвам да използвате разширението Mass Content за това.

2. Добавете нов параметър към XML „Тип меню“

Отидете до основната директория на вашия Joomla! и следвайте папката "tmpl" по този път - components/com_content/views/category/tmpl.

Отворете blog.xml и добавете параметъра по-долу точно след маркирания ред . Направете същото за файла default.xml.

description="Добавя суфикс на клас за стил на заглавие на статия за отделна категория"/>

Важна забележка:В този пример параметърът "description" започва на нов ред. Когато въвеждате код в xml файл, уверете се, че целият код е на един ред без прекъсвания на редовете.

3. Създайте персонализиран шаблон (Замени на шаблона)

В Joomla! 1.5 имаме прекрасната възможност да създаваме наши собствени шаблони, които да заменят шаблоните за извеждане на съдържание по подразбиране, предоставени в ядрото по подразбиране. Персонализираните шаблони (Template Overrides) са много удобни и лесни за използване. Първо копираме файловете за маркиране от основните компоненти в папката "html" в нашата папка с шаблони. След това правим промени. Когато Joomla! намира персонализирани файлове за маркиране във вашата папка templates/yourtemplate/html/, използва вашите файлове и "игнорира" файловете за маркиране в ядрото.

За да направите това, отидете на /templates/yourtemplate/package. Създайте нов пакет и го наименувайте „html“. В папката html създайте нова директория и я наименувайте „com_content“. Ако вашият шаблон вече има директории "html" или "com_content", имате късмет и не е необходимо да ги създавате.

В папката "com_content" създайте две папки; именувайте едната "статия", а другата име "категория".

Например:

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

Сега копирайте (не премествайте!!!) файловете за маркиране в основния файл - components/com_content/views/category/tmpl/blog_item.php в /templates/your_template/html/com_content/category

Забележка:ако този файл вече съществува, най-добре е да не го презаписвате. Можете да продължите със стъпките в примера, като използвате съществуващия файл.

Отново копирайте (не премествайте!!!) components/com_content/views/article/tmpl/default.php в /templates/your_template/html/com_content/article

Добавяне на дизайнерски елементи за показване на икони във файла за маркиране

Отворете файла /templates/your_template/html/com_content/category/blog_item.php за редактиране.

item->params->get("pageclass_sfx"); ?>" width="100%">

item->params->get('link_titles') && $this->item->readmore_link != "") : ?>

item->readmore_link; ?>"

статия->прочетете повече_връзка; ?>"

бягство ($ това->статия->заглавие); ?>

params->get('icon_suffix'); ?>»>

бягство ($ това->статия->заглавие); ?>

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

Добре, подготвихме основните елементи на шаблона на Joomla и сега нека преминем към дизайнерската част на този урок.

Първото нещо, което трябва да направим, е да изберем икони за гореспоменатите категории (FAQ, Media, Books). За да направите това, можете да използвате икони от комплекта копринени икони, те вече имат желания размер (16px), файлове в PNG-32 с прозрачност и, разбира се, са безплатни.

Избрах трите по-долу. Можете просто да копирате тези снимки и да ги поставите в /templates/your_template/images.

Сега отворете основния CSS файл на шаблона (обикновено template.css) /templates/yourtemplate/css/template.css и добавете следния CSS код:

фон: url(../images/info.png) без повторение 0px 5px;

фон: url(../images/photo.png) без повторение 0px 5px;

фон: url(../images/book_open.png) без повторение 0px 5px;

Присвояване на стилове към елемента от менюто (Елемент от менюто)

В кода по-горе можем да видим имената на необходимите класове (т.е. често задавани въпроси, медии, книги). Това са опциите, които сега ще можете да използвате, за да влезете в мениджъра на менюто.

За да направите това, първо влезте в Joomla! и създайте нов елемент от менюто, като използвате "Блог - Съдържание на категория" като изходно съдържание.

В опциите на елемента от менюто вдясно ще видите раздела „Разширени“, където ще видите нов параметър, наречен „Клас на икона на статия“. Можете да въведете една от трите стойности в това поле: често задавани въпроси, медии или книга. След като запазите новия си елемент от менюто, прегледайте блога на категориите на предния край на вашия Joomla! сайт и изберете нов елемент от менюто. Веднага след като "стигнете" до статията, ще видите нова опция за показване на заглавието с икона.

Ако искате да промените съществуващи опцииили добавете още, всичко, което трябва да направите, е да добавите нов клас CSS, както е показано в примера по-горе. Надявам се, че ще използвате този метод във вашите шаблони. Насладете се на Joomla!

В тази статия ще разгледаме как да вмъкнете икони в елементите от менюто на сайта на Joomla, така че да се показва не само заглавието, но и икона до него, символизираща този елемент от менюто. Да напомня, че работя с шаблона Protostar. И материалът на тази статия засяга стиловете на този конкретен шаблон. Но ако се използва различен шаблон, тогава не е факт, че рецептата по-долу ще бъде безполезна. ;)

Формулиране на проблема

И така, имаме основното меню на сайта, което вече имаме преместен в заглавката на сайтаи дори му даде хоризонтално разположение. Изглежда така:

Като цяло, стандартното меню. Но в него няма индивидуалност, но много го искам. =)

Следователно, след като надникнахме в други сайтове, че е възможно да вмъкнете икони в елементи от менюто до техните имена, ние ще направим това и на нашия сайт.

Мениджър на менюто. Елемент от менюто. Раздел Опции за връзка

За да се промени външен виднашия елемент от менюто, имаме нужда от администраторския панел на Joomla и по-специално от раздела " Опции за връзка“, който е наличен в „ Мениджър на менюто» при редактиране или създаване на елемент от менюто. Ще работим с полето "", както е показано на снимката:

1. Вмъкнете в полето името на иконата, която искаме да видим в елемента от менюто преди нейното име, например icon-users
2. Незабавно поставете интервал в полето " Заглавие на менюто» (така че иконата да не се слива с името на елемента от менюто)
3. Запазете промените и вижте какво ще се случи

Заглавието на елемента от менюто пълзи надолу (разположено е не хоризонтално, а вертикално)

При преглед на получения резултат всичко изглежда депресиращо. Въпреки че иконата се появи в елемента от менюто, името на елемента от менюто пропълзя надолу, разтягайки се във вертикална подредба буква по буква:

Оправяме ситуацията. Пренасяме елемента от менюто в хоризонтален изглед.

Все още не разбирам от какво са се ръководили създателите на шаблона Protostar и защо се появява такъв джам. Едно нещо е ясно: свойството display на елемента от менюто е настроено на block , така че той блокира и извежда всеки знак, подреждайки ги един под друг. И трябва да ги разтегнем в една линия, което означава, че стойността на свойството display трябва да е inline.

За да направите това, трябва да направите промени във файла template.css, който се намира в папката шаблон:

./templates/protostar/css/template.css