Nangyayari ito sa lahat.

Nakahanap ka ng tema na gusto mo, na-install mo ito at gumugugol ng ilang buwan sa pag-enjoy sa hitsura ng iyong site. Ngunit pagkatapos, pagkatapos ng ilang buwan, ang tema ay nagsimulang makaramdam ng lipas. Medyo boring.

Ang problema lang, ayaw mong gumugol ng ilang oras sa paghahanap ng bago. Kung may paraan lang para magdagdag ng kaunting pampalasa sa iyong tema, kaunting flare para maging kakaiba ito.

Bago mo itaas ang iyong mga kamay sa kawalan ng pag-asa, hayaan mong ipakita ko sa iyo ang isang madaling paraan upang pagandahin ang iyong tema nang walang labis na pagsisikap, at nang walang pagdaragdag ng mga hindi kinakailangang larawan na maaaring makapagpabagal sa iyong site.

Ipasok ang Mga Dashicon. Ang mga Dashicon ay mga icon ng font na ipinakilala sa WordPress 3.8. Ang mga ito ay ang mga kahanga-hanga at cool na icon na makikita mo kapag nag-log in ka sa iyong dashboard. Hindi ba maganda kung maidaragdag mo rin sila sa iyong tema?

Buweno, magagawa mo at ipapakita ko sa iyo kung paano.

Paano mo magagamit ang mga Dashicon sa iyong navigation menu?

Magsimula tayo sa isang simpleng halimbawa. Ang mga Dashicon ay kasama na sa WordPress mula noong bersyon 3.8 ngunit kailangan mo pa ring isama ang mga ito upang maipakita ang mga ito nang maayos sa harap na dulo ng iyong site; ibig sabihin, ang iyong tema.

Hakbang 1: Ihanda ang iyong tema na Mga Dashicon

Upang ihanda ang iyong tema na Mga Dashicon buksan muna ang iyong functions.php file (matatagpuan sa Appearance> ;Editor – bilang default, bubuksan nito ang CSS file ng iyong kasalukuyang tema. Sige at hanapinfunctions.php file at i-click ito upang i-load ito sa Editor.)

Hakbang 2: I-enqueue ang script

Mag-scroll hanggang sa ibaba at i-paste ang mga linyang ito ng code sa dulo:

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

Sige! Ngayon ang iyong tema ay handa nang gumamit ng Mga Dashicon.

Hakbang 3: Pagdaragdag ng mga Dashicon sa mga item sa menu

Magdagdag tayo ng Dashicon para sa iyong Home link. Pumunta sa website ng Dashicons at piliin ang icon na gusto mo.

I-update: Ang mga Dashicon ay orihinal na available sa GitHub.io, ngunit ginawang available ang mga ito sa WordPress.org.

Hakbang 4:

Mag-click sa gustong icon (sa kasong ito pinili ko ang home icon) at pagkatapos ay mag-click sa Copy HTML. Bibigyan ka nito ng pop-up window na may code na kailangan mo.

Hakbang 5:

Bumalik sa iyong WordPress dashboard, mag-click sa Hitsura > ; Mga menu at i-paste ang code sa mismong lugar kung saan nakasulat ang Label ng Navigation.

Kung gusto mo pa ring lumabas ang salita, i-type ito pagkatapos ng pagsasara ng div bracket.

Mag-click sa i-save at i-load ang iyong home page. Ang iyong home link ay dapat na ngayong magpakita ng maganda, malulutong na Dashicon.

Magagawa mo ito para sa lahat ng item sa menu ng nabigasyon o para lang sa bahay. Ulitin lang ang mga hakbang sa itaas gamit ang mga katugmang icon. Madali lang iyon di ba?

Paano mo ginagamit ang mga Dashicon sa post meta?

Maaari kang pumunta nang higit pa at magdagdag ng mga Dashicon sa iyong post meta, o sa madaling salita magdagdag ng mga Dashicon sa harap ng may-akda pangalan, petsa, kategorya o tag; depende saang iyong tema at ang impormasyong ipinapakita nito.

Dahil nai-enqueue mo na ang Mga Dashicon sa iyong tema, ang kailangan mo lang gawin ngayon ay buksan ang iyong style.css file (o gumamit ng Custom CSS editor na palaging isang mas mahusay na opsyon para ikaw ay huwag mawala ang mga pagbabago kapag na-update ang iyong tema!), hanapin ang katugmang tagapili at idagdag ang CSS code.

Ipagpalagay nating gusto mong magdagdag ng icon sa harap ng iyong pangalan o pangalan ng iyong may-akda.

Hakbang 1:

Pumili muna tayo ng icon na gusto natin.

Hakbang 2:

Pagkatapos ay i-click ito, at sa pagkakataong ito piliin ang Copy CSS. Muli, bibigyan ka nito ng pop-up window na may code na kailangan mong i-paste.

Hakbang 3:

Buksan ngayon ang iyong istilo.css at hanapin ang kaukulang selector, sa kasong ito – .entry-author. Sa pamamagitan ng pagdaragdag ng :before at pagkatapos ay pag-paste ng CSS code na iyong kinopya mula sa website ng Dashicons, ang pangalan ng may-akda ay magkakaroon ng magandang icon sa harap nito. Kailangan mo ring tukuyin na ginagamit mo ang font ng Dashicons. Ganito ang hitsura ng binagong code:

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

Magdagdag din tayo ng kaunting istilo, at ngayon ganito ang hitsura ng nakumpletong code:

.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; } 

Ang huling resulta

So ano magiging ganito ba ito sa huli?

Isang ganito:

Napakaraming paraan na magagamit mo ang mga Dashicon – hayaan ang iyong pagkamalikhain na manatili at makita kung ano ang magagawa mo.

Pagsasama-sama ng lahat ng ito

Bukod sa mga halimbawa sa itaas, maaari mong gamitin ang Mga Dashicon sa iyong backend upang tumukoy ng iba't ibangmga icon para sa iba't ibang uri ng post, o maaari mong gamitin ang mga ito sa iyong mga pamagat ng post, mga pamagat ng widget, o kung gumagawa ka ng custom na landing page maaari kang mag-iba sa pagitan ng iba't ibang pahina ng iyong site.

Narito ang isang pangunahing halimbawa ng kung ano maaari mong gamitin ang mga ito upang lumikha ng: