Секому му се случува.

Наоѓате тема што ви се допаѓа, ја инсталирате и поминувате неколку месеци уживајќи во изгледот на вашата страница. Но, потоа, по неколку месеци, темата почнува да се чувствува заостаната. Малку досадно.

Единствениот проблем е што не сакате да поминете неколку часа барајќи нешто ново. Ако само постоеше начин да додадете малку зачин на вашата тема, малку запаление за да се истакне.

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

Внесете Dashicons. Dashicons се икони за фонтови кои беа воведени во WordPress 3.8. Тие се оние прекрасни и кул икони што ги гледате кога ќе се најавите на вашата контролна табла. Зарем не би било убаво ако можете да ги додадете и во вашата тема?

Па, можете и ќе ви покажам како.

Како можете да ги користите Dashicons во вашата мени за навигација?

Да започнеме со едноставен пример. Дашиконите се веќе вклучени во WordPress од верзијата 3.8, но сепак треба да ги вклучите за да ги натерате правилно да се прикажат на предниот крај на вашата страница; односно вашата тема.

Чекор 1: Подгответе ја вашата тема Dashicons

За да ја подготвите вашата тема Dashicons, прво отворете ја датотеката functions.php (се наоѓа во Appearance> Уредник – стандардно ќе ја отвори CSS-датотеката на вашата тековна тема. Одете и побарајтеfunctions.php датотека и кликнете на неа за да ја вчитате во Уредувач.)

Чекор 2: Ставете ја скриптата во ред

Скролувајте докрај до дното и залепете ги овие редови на кодот на крајот:

//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

Во ред! Сега вашата тема е подготвена за користење Dashicons.

Чекор 3: Додавање Dashicons во ставки од менито

Ајде да додадеме Dashicon за врската Home. Одете на веб-локацијата на Dashicons и изберете ја иконата што ви се допаѓа.

Ажурирање: Dashicons првично беа достапни на GitHub.io, но оттогаш тие се достапни на WordPress.org.

Чекор 4:

Кликнете на саканата икона (во овој случај ја избрав почетната икона) и потоа кликнете на Копирај HTML. Ќе ви даде скокачки прозорец со кодот што ви треба.

Чекор 5:

Вратете се на контролната табла на WordPress, кликнете на Изглед > ; Менија и залепете го кодот токму таму каде што пишува Навигациска етикета.

Ако сè уште сакате зборот да се појави, напишете го по затворачката заграда.

Кликнете на зачувајте ја и вчитајте ја вашата почетна страница. Врската на вашиот дом сега треба да прикажува убав, остар Dashicon.

Можете да го направите ова за сите ставки од менито за навигација или само за дома. Само повторете ги чекорите погоре со соодветните икони. Беше лесно, нели?

Како ги користите Dashicons во пост мета?

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

Бидејќи веќе сте ставиле Dashicons во вашата тема, сè што треба да направите сега е да ја отворите вашата датотека style.css (или да користите приспособен CSS уредник што е секогаш подобра опција за да не губете ги промените откако ќе се ажурира вашата тема!), најдете го избирачот што одговара и додајте го CSS-кодот.

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

Чекор 1:

Прво ќе избереме икона што ја сакаме.

Чекор 2:

Потоа кликнете на него и овој пат изберете Copy CSS. Повторно, ќе ви даде скокачки прозорец со кодот што треба да го залепите.

Чекор 3:

Сега отворете го вашиот style.css и пронајдете го соодветниот избирач, во овој случај – .entry-author. Со додавање :пред и потоа вметнување на 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 во вашиот заднина за да наведете различниикони за различни типови објави или можете да ги користите во насловите на вашите објави, насловите на графичките контроли или ако креирате приспособена целна страница, можете да правите разлика помеѓу различни страници на вашата страница.

Еве основен пример за тоа што може да ги искористите за да креирате: