Դա պատահում է բոլորի հետ:

Դուք գտնում եք ձեզ դուր եկած թեման, տեղադրում եք այն և մի քանի ամիս անցկացնում՝ վայելելով ձեր կայքի տեսքը: Բայց հետո, մի քանի ամիս անց, թեման սկսում է հնացած զգալ: Մի քիչ ձանձրալի:

Միակ խնդիրն այն է, որ դուք չեք ցանկանում մի քանի ժամ ծախսել նոր բան փնտրելու համար: Եթե ​​ձեր թեմային մի քիչ համեմունք ավելացնելու միջոց, մի փոքր շողոքորթություն՝ այն առանձնանալու համար:

Նախքան հուսահատության մեջ ձեր ձեռքերը վեր կհանեք, թույլ տվեք ցույց տալ ձեզ ձերը համեմելու հեշտ միջոց: թեման առանց ավելորդ ջանքերի և առանց ավելորդ պատկերներ ավելացնելու, որոնք կարող են դանդաղեցնել ձեր կայքը:

Մուտքագրեք Dashicons: Dashicon-ները տառատեսակի պատկերակներ են, որոնք ներդրվել են WordPress 3.8-ում: Դրանք այն հիանալի և հիանալի պատկերակներն են, որոնք դուք տեսնում եք, երբ մուտք եք գործում ձեր վահանակ: Հաճելի չէ՞ր լինի, եթե դրանք նույնպես ավելացնեիք ձեր թեմայում:

Դե, դուք կարող եք, և ես ձեզ ցույց կտամ, թե ինչպես:

Ինչպե՞ս կարող եք օգտագործել Dashicons-ը ձեր թեմայում: նավիգացիոն մենյու:

Սկսենք պարզ օրինակով: Dashicon-ներն արդեն ներառված են WordPress-ում 3.8 տարբերակից ի վեր, բայց դուք դեռ պետք է ներառեք դրանք, որպեսզի դրանք պատշաճ կերպով ցուցադրվեն ձեր կայքի ճակատային մասում. այսինքն՝ ձեր թեման:

Քայլ 1. Պատրաստեք ձեր թեման Dashicons-ը

Ձեր թեման Dashicons-ը պատրաստ դարձնելու համար նախ բացեք ձեր functions.php ֆայլը (գտնվում է Appearance&gt-ում: Խմբագիր – լռելյայնորեն այն կբացի ձեր ընթացիկ թեմայի 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 ձեր Գլխավոր հղման համար: Գնացեք Dashicons կայք և ընտրեք այն պատկերակը, որը ձեզ դուր է գալիս:

Թարմացում. Dashicon-ներն ի սկզբանե հասանելի էին GitHub.io-ում, բայց դրանից հետո դրանք հասանելի են եղել WordPress.org-ում:

Քայլ 4.

Սեղմեք ցանկալի պատկերակի վրա (այս դեպքում ես ընտրել եմ գլխավոր պատկերակը) և այնուհետև սեղմեք Պատճենել HTML-ը: Այն ձեզ կտրամադրի թռուցիկ պատուհան՝ ձեզ անհրաժեշտ կոդով:

Քայլ 5.

Վերադարձեք ձեր WordPress վահանակ, սեղմեք Արտաքին տեսք > ; Մենյու և տեղադրեք կոդը հենց այնտեղ, որտեղ գրված է Navigation Label:

Եթե դեռ ցանկանում եք, որ բառը հայտնվի, մուտքագրեք այն փակվող div փակագծից հետո:

Սեղմեք պահպանել և բեռնել ձեր գլխավոր էջը: Ձեր տան հղումն այժմ պետք է ցուցադրի գեղեցիկ, հստակ Dashicon:

Դուք կարող եք դա անել նավիգացիոն ընտրացանկի բոլոր տարրերի կամ պարզապես տան համար: Պարզապես կրկնեք վերը նշված քայլերը համապատասխան պատկերակներով: Դա հեշտ էր, ճիշտ է:

Ինչպե՞ս եք օգտագործում Dashicons-ը գրառման մետա-ում:

Դուք կարող եք մի քայլ առաջ գնալ և ավելացնել Dashicons ձեր գրառման մետա-ին, կամ այլ կերպ ասած ավելացնել Dashicons-ը հեղինակի դիմաց: անունը, ամսաթիվը, կատեգորիան կամ պիտակը; կախվածձեր թեման և այն ցուցադրվող տեղեկատվությունը:

Քանի որ դուք արդեն հերթագրել եք Dashicons ձեր թեմայում, այժմ ձեզ մնում է բացել ձեր style.css ֆայլը (կամ օգտագործել Custom CSS խմբագրիչը, որը միշտ ավելի լավ տարբերակ է, որպեսզի դուք մի կորցրեք փոփոխությունները ձեր թեմայի թարմացումից հետո), գտեք համապատասխան ընտրիչը և ավելացրեք CSS կոդը:

Ենթադրենք, ուզում եք պատկերակ ավելացնել ձեր անվան կամ ձեր հեղինակի անվան դիմաց:

Քայլ 1.

Սկզբում մենք կընտրենք մեր ուզած պատկերակը:

Քայլ 2.

Այնուհետև սեղմեք դրա վրա և այս անգամ ընտրեք Պատճենել CSS-ը: Կրկին, այն ձեզ կտրամադրի թռուցիկ պատուհան այն կոդով, որը դուք պետք է տեղադրեք:

Քայլ 3.

Այժմ բացեք ձեր style.css-ը: և գտնել համապատասխան ընտրիչը, այս դեպքում՝ .entry-author: Ավելացնելով : նախքան և ապա տեղադրելով Dashicons կայքից ձեր պատճենած CSS կոդը, հեղինակի անունը կունենա գեղեցիկ պատկերակ դրա դիմաց: Դուք նաև պետք է նշեք, որ օգտագործում եք 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; } 

Վերջնական արդյունքը

Ուրեմն ինչ Արդյո՞ք սա ի վերջո նման կլինի:

Այսպիսի մի բան.

Կան շատ եղանակներ, որոնցով կարող եք օգտագործել Dashicon-ները. թույլ տվեք, որ ձեր ստեղծագործությունը տիրի և տեսեք, թե ինչ կարող եք անել:

Այս ամենը միասին դնելով

Բացի վերը նշված օրինակներից, դուք կարող եք օգտագործել Dashicons ձեր հետնամասում` տարբեր նշելու համարպատկերակներ տարբեր գրառումների տեսակների համար, կամ կարող եք դրանք օգտագործել ձեր գրառումների վերնագրերում, վիդջեթների վերնագրերում, կամ եթե դուք ստեղծում եք հատուկ վայրէջք էջ, կարող եք տարբերակել ձեր կայքի տարբեր էջերը:

Ահա մի հիմնական օրինակ, թե ինչ Դուք կարող եք դրանք օգտագործել՝ ստեղծելու համար՝