Случва се на всички.

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

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

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

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

Е, можете и аз ще ви покажа как.

Как можете да използвате тирета в навигационното си меню?

Нека започнем с един прост пример. Dashicons вече са включени в WordPress от версия 3.8, но все още трябва да ги включите, за да се показват правилно в предната част на сайта ви, т.е. в темата ви.

Стъпка 1: Подгответе темата си за Dashicons

За да подготвите темата си Dashicons, първо отворете файла functions.php (намира се в менюто Appearance>Editor - по подразбиране ще се отвори CSS файлът на текущата ви тема. Потърсете файла functions.php и кликнете върху него, за да го заредите в Editor.)

Стъпка 2: Изпращане на скрипта

Превъртете до дъното и поставете тези редове код в края:

 /Предоставяне на скрипта Dashicons add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 

Добре! Сега темата ви е готова да използва Dashicons.

Стъпка 3: Добавяне на тирета към елементи от менюто

Нека да добавим икона Dashicon за връзката Home. Отидете на уебсайта Dashicons и изберете иконата, която ви харесва.

Актуализация: Първоначално Dashicons бяха налични в GitHub.io, но оттогава те са достъпни в WordPress.org.

Стъпка 4:

Щракнете върху желаната икона (в този случай избрах иконата на дома) и след това щракнете върху Copy HTML (Копиране на HTML). Ще се появи изскачащ прозорец с необходимия код.

Стъпка 5:

Върнете се в таблото за управление на WordPress, кликнете върху Appearance> Menus и поставете кода точно там, където пише Navigation Label.

Ако все пак искате думата да се покаже, въведете я след затварящата скоба div.

Щракнете върху "Запази" и заредете началната си страница. Връзката за начална страница вече трябва да показва хубав, ясен Dashicon.

Можете да направите това за всички елементи на навигационното меню или само за Home (Начало). Просто повторете стъпките по-горе с подходящите икони. Това беше лесно, нали?

Как се използват тирета в мета публикациите?

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

Тъй като вече сте включили Dashicons в темата си, сега трябва само да отворите файла style.css (или да използвате Custom CSS editor, което винаги е по-добър вариант, за да не загубите промените след актуализиране на темата!), да намерите подходящия селектор и да добавите CSS кода.

Да речем, че искате да добавите икона пред името си или пред името на автора си.

Стъпка 1:

Първо ще изберем желаната икона.

Стъпка 2:

След това щракнете върху него и този път изберете Copy CSS (Копиране на CSS). Отново ще се появи изскачащ прозорец с кода, който трябва да поставите.

Стъпка 3:

Сега отворете своя style.css и намерете съответния селектор, в случая - .entry-author. Като добавите :before и след това вмъкнете CSS кода, който копирахте от уебсайта Dashicons, името на автора ще има хубава икона пред него. Трябва също така да посочите, че използвате шрифта Dashicons. Промененият код изглежда така:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; } 

Нека добавим и малко стилизиране и сега завършеният код изглежда така:

 .entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

Крайният резултат

И така, как ще изглежда това в крайна сметка?

Нещо като това:

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

Сглобяване на всичко това

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

Ето един основен пример за това, което можете да използвате за създаването им: