Гэта здараецца з кожным.

Вы знаходзіце тэму, якая вам падабаецца, усталёўваеце яе і праводзіце некалькі месяцаў, атрымліваючы асалоду ад выгляду вашага сайта. Але потым, праз некалькі месяцаў, тэма пачынае здавацца нясвежай. Трохі сумна.

Адзіная праблема ў тым, што вы не хочаце марнаваць пару гадзін на пошукі чагосьці новага. Калі б толькі быў спосаб дадаць трохі пікантнасці вашай тэме, трохі яркасці, каб вылучыць яе.

Перш чым вы адчайна падняце рукі, дазвольце мне паказаць вам просты спосаб ажывіць вашу тэму без лішніх намаганняў і без дадання непатрэбных малюнкаў, якія могуць запаволіць ваш сайт.

Увядзіце Dashicons. Dashicons - гэта значкі шрыфтоў, якія былі прадстаўлены ў WordPress 3.8. Гэта тыя дзіўныя і класныя значкі, якія вы бачыце, калі ўваходзіце на прыборную панэль. Ці не было б выдатна, калі б вы таксама маглі дадаць іх у сваю тэму?

Ну, вы можаце, і я пакажу вам, як.

Як вы можаце выкарыстоўваць Dashicons у сваім меню навігацыі?

Пачнем з простага прыкладу. Дашыконы ўжо ўключаны ў WordPress з версіі 3.8, але вам усё роўна трэба ўключыць іх, каб яны правільна адлюстроўваліся на пярэдняй частцы вашага сайта; гэта значыць ваша тэма.

Крок 1: падрыхтуйце сваю тэму да шыконаў

Каб падрыхтаваць тэму да шыконаў, спачатку адкрыйце файл 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, націсніце Знешні выгляд > ; Меню і ўстаўце код там, дзе напісана Навігацыйная этыкетка.

Калі вы ўсё яшчэ хочаце, каб слова адлюстроўвалася, увядзіце яго пасля закрывальнай дужкі div.

Націсніце на захаваць і загрузіць хатнюю старонку. Ваша хатняя спасылка цяпер павінна адлюстроўваць прыгожы выразны Dashicon.

Вы можаце зрабіць гэта для ўсіх пунктаў навігацыйнага меню або толькі для дома. Проста паўтарыце крокі вышэй з адпаведнымі значкамі. Гэта было лёгка, ці не так?

Як вы выкарыстоўваеце Dashicons ў мета паведамлення?

Вы можаце пайсці далей і дадаць Dashicons да вашага паведамлення або іншымі словамі дадаць Dashicons перад аўтарам імя, дата, катэгорыя або тэг; у залежнасці адвашу тэму і інфармацыю, якую яна адлюстроўвае.

Паколькі вы ўжо паставілі Dashicons у сваю тэму, усё, што вам цяпер трэба зрабіць, гэта адкрыць файл style.css (або скарыстацца карыстальніцкім рэдактарам CSS, які заўсёды з'яўляецца лепшым варыянтам, каб вы не губляйце змены пасля абнаўлення тэмы!), знайдзіце адпаведны селектар і дадайце код CSS.

Дапусцім, вы хочаце дадаць значок перад сваім імем або імем аўтара.

Крок 1:

Спачатку мы абярэм значок, які нам спадабаецца.

Крок 2:

Затым пстрыкніце па ім і на гэты раз абярыце "Капіяваць 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 у вашым бэкэнде, каб вызначыць розныязначкі для розных тыпаў паведамленняў, або вы можаце выкарыстоўваць іх у назвах паведамленняў, назвах віджэтаў, або, калі вы ствараеце карыстальніцкую мэтавую старонку, вы можаце адрозніваць розныя старонкі вашага сайта.

Вось асноўны прыклад таго, што вы можаце выкарыстоўваць іх для стварэння: