Как да го използваме и да се възползваме максимално?

Иконите са очарователни!

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

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

Освен това използването на една и съща тема на вашия сайт в продължение на няколко месеца може да бъде скучно. Това е често срещано.

И тогава ще търсите нещо по-интересно, използвайки това и отново ще се отегчите,

И цикълът продължава и продължава…

И така, как можете да пропуснете този цикъл на скука?

Дашиконите са отличен начин!

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

И така, нека проучим Dashicons и как можете да ги използвате ефективно на вашия уебсайт WordPress.

Какво е WordPress Dashicons?

Dashicons са официални шрифтове за икони на WordPress, представени преди години с неговата версия 3.8. Тези шрифтове са готини и страхотни за гледане, ако ги използвате на уебсайта си. Те са висококачествени SVG файлове, които можете лесно да мащабирате до всякакъв размер без пикселизация.

Тъй като притежават собствена поддръжка на WordPress, тъй като са създадени от самия им екип, можете да ги използвате директно, без да зареждате допълнителни скриптове. Включени са около 350 шрифта за икони, които можете да намерите в официалния Ресурси за разработчици на WordPress.

  Как да изключите тихата доставка в iMessage

Те са категоризирали тези икони въз основа на темата, плюс можете да видите динамично поле за търсене, което ви позволява да филтрирате наличните икони.

Можете да използвате тези икони на:

  • Табло за управление на WordPress
  • Навигационни менюта
  • Страници и публикации
  • Метаданни
  • Елементи на редактора
  • Персонализирани плъгини и теми
  • Административни панели
  • Преден дизайн

Забелязвате ли, че казвам „икони“ многократно?

Тук имам предвид само шрифтове на икони.

Не изображения под формата на икони.

Да, има разлика между двете.

Нека разгадаем това.

Разлика между иконите на изображения и шрифтовете на иконите?

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

Стана ли твърде техническо?

Нека изясня това.

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

Те ви осигуряват много предимства.

как?

Разберете в следващия раздел.

Защо трябва да ги използвате?

  • Мащабируеми като текстове, използвани на вашия уебсайт, тъй като те са шрифтове
  • Леко, което не влияе на скоростта на зареждане на страницата ви в сравнение с изображенията
  • Възможност за задаване на цвета на иконата чрез CSS и добавяне на допълнителни свойства като градиентен цвят, сянка и др.
  • Страхотен за спестяване на твърде много HTTP заявки, като ви позволява да зареждате шрифтове всички наведнъж, които можете да използвате във вашите страници. Ако използвате много изображения на сайта, ще трябва да направите много заявки, за да ги извлечете, което увеличава времето за зареждане на страницата.
  • Лесен за използване и настройка от изображенията. Можете да добавяте разпознаваеми и креативни символи, без да е необходимо да ги пресъздавате всеки път, когато имате нужда от икона за видео плейър, имейл, музика или друго нещо.
  • По-голяма достъпност, защото са вградени направо в WordPress
  Как да настроите постоянен Ubuntu USB

Как да ги използваме?

Използването на Dashicons не е ракетно инженерство.

Вярвай ми; Запознат съм и с двете :0

Просто следвайте някои стъпки, споменати по-долу, за да започнете с WordPress Dashicons.

Стъпка 1: Активирайте Dashicons на вашия WordPress сайт

Преди да започнете, активирайте Dashicons там, където трябва, например тема. За целта трябва да добавите няколко кода към файла function.php.

Да го направя:

  • Първо отидете до редактора на тема/облик от таблото за управление на WordPress.
  • Отворете файла function.php.
  • Превъртете до края на файла и добавете няколко реда код, за да поставите скриптове в опашка
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Горният пример е за активиране на Dashicons в интерфейса.

Уверете се, че сте създали дъщерна тема, преди да редактирате файла functions.php. Това е така, защото ако директно редактирате файла с темата и след това дойде актуализация за тази тема, тогава тя ще замени всички промени, които правите във файла.

Стъпка 2: Намерете HTML и CSS кодове на Dashicon

WordPress.org предлага библиотека от Dashicons, която ви помага да намерите CSS и HTML кодове, принадлежащи на всяка икона. Тук отидете на Ресурси за разработчици, за да намерите Dashicons, които искате да използвате, и след това:

  • Кликнете върху иконата на вашето желание.
  • Изберете между „Копиране на CSS“ или „Копиране на HTML“, като щракнете върху него.
  • Сега ще видите изскачащ прозорец. Просто копирайте кода в клипборда.
  • Решете къде искате да използвате иконата, като теми, метаданни, меню за навигация и т.н.
  • Поставете копирания код в Text Widget или Text Editor на избраното място.
  • Променете външния вид на иконата с помощта на персонализиран CSS
  Как да поправите грешката ERR_NAME_NOT_RESOLVED в Chrome

Това е.

Освен това по подразбиране всички икони са с размер 20 пиксела. Можете да го промените с помощта на CSS елементи от опции като Inspect Element на Google Chrome или FireBug на Firefox.

Как да се възползвате максимално от WordPress Dashicons?

Видяхте как можете да използвате Dashicons на вашия сайт, а сега ще видим използването му за конкретни цели.

1. Използване на навигационното меню

За да добавите икони към менюто, следвайте стъпките по-долу:

  • Отидете на менюта/облик от таблото за управление
  • Копирайте HTML кодовете, предназначени за иконата на менюто от WordPress.org
  • Поставете го върху „Навигационен етикет“ на таблото
  • Щракнете върху бутона „запазване“ и след това заредете началната страница. Трябва да показва иконата за хладно и свежо.

2. Използване на мета в публикацията

Ще можете да използвате Dashicons точно пред дата, име на автор, етикет или категория въз основа на темата плюс данните, които показва.

Тъй като вече сте поставили Dashicons в опашка, отворете файла style.css. В противен случай можете също да изберете персонализиран CSS редактор, който не ви позволява да загубите промените си след актуализации на темата. След това добавете вашия CSS код, след като намерите съответстващ селектор.

3. В бекенда на WordPress

Ако искате различни икони да бъдат включени за различни персонализирани заглавия на публикации, типове публикации или приспособления, това е лесно да направите.

Бърз съвет: Създайте кратък код

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

Заключение

Надявам се нещата да са доста ясни от ваша страна относно WordPress Dashicons. Те не само покриват естетиката на вашия уебсайт, но също така са лесни за използване и подобряват скоростта на зареждане на страницата.

И знаете ли, „красота и ум“ е рядка комбинация.

Така че, побързайте, използвайте тези хващащи окото Dashicons на вашия WordPress сайт!

x