របៀបប្រើ Dashicons នៅក្នុង WordPress - ការណែនាំជាជំហាន ៗ

 របៀបប្រើ Dashicons នៅក្នុង WordPress - ការណែនាំជាជំហាន ៗ

Patrick Harvey

វាកើតឡើងចំពោះមនុស្សគ្រប់គ្នា។

អ្នករកឃើញរូបរាងដែលអ្នកចូលចិត្ត អ្នកដំឡើងវា ហើយចំណាយពេលពីរបីខែដើម្បីរីករាយនឹងរូបរាងគេហទំព័ររបស់អ្នក។ ប៉ុន្តែបន្ទាប់មក ពីរបីខែក្រោយមក ប្រធានបទនេះចាប់ផ្តើមមានសភាពទ្រុឌទ្រោម។ គួរឱ្យធុញបន្តិច។

បញ្ហាតែមួយគត់គឺ អ្នកមិនចង់ចំណាយពេលពីរបីម៉ោងដើម្បីស្វែងរកអ្វីដែលថ្មីនោះទេ។ ប្រសិនបើមានតែវិធីមួយដើម្បីបន្ថែមគ្រឿងទេសបន្តិចបន្តួចទៅក្នុងស្បែករបស់អ្នក ភ្លើងតូចមួយដើម្បីធ្វើឱ្យវាលេចធ្លោ។

មុនពេលអ្នកបោះដៃរបស់អ្នកដោយភាពអស់សង្ឃឹម ខ្ញុំសូមបង្ហាញអ្នកពីវិធីងាយៗក្នុងការបន្ថែមគ្រឿងទេសរបស់អ្នក។ ស្បែកដោយមិនចាំបាច់ប្រឹងប្រែងខ្លាំងពេក និងដោយមិនបន្ថែមរូបភាពដែលមិនចាំបាច់ដែលអាចធ្វើឲ្យគេហទំព័ររបស់អ្នកថយចុះ។

បញ្ចូល 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 សម្រាប់តំណដើមរបស់អ្នក។ ចូលទៅកាន់គេហទំព័រ Dashicons ហើយជ្រើសរើសរូបតំណាងដែលអ្នកចូលចិត្ត។

សូម​មើល​ផង​ដែរ: ប្រធានបទ WordPress ល្អបំផុតចំនួន 31 សម្រាប់អ្នកសរសេរប្លុក និងអ្នកនិពន្ធនៅឆ្នាំ 2023

អាប់ដេត៖ Dashicons ដើមឡើយមាននៅលើ GitHub.io ប៉ុន្តែពួកវាត្រូវបានដាក់ឱ្យប្រើប្រាស់នៅលើ WordPress.org។

ជំហានទី 4:

ចុចលើរូបតំណាងដែលចង់បាន (ក្នុងករណីនេះខ្ញុំបានជ្រើសរើសរូបតំណាងផ្ទះ) ហើយបន្ទាប់មកចុចលើ ចម្លង HTML ។ វានឹងផ្តល់ឱ្យអ្នកនូវបង្អួចលេចឡើងជាមួយនឹងលេខកូដដែលអ្នកត្រូវការ។

ជំហានទី 5:

ត្រលប់ទៅផ្ទាំងគ្រប់គ្រង WordPress របស់អ្នក ចុចលើរូបរាង > ; ម៉ឺនុយ ហើយ​បិទភ្ជាប់​កូដ​ត្រង់​កន្លែង​ដែល​វា​និយាយ​ថា Navigation Label។

ប្រសិន​បើ​អ្នក​នៅ​តែ​ចង់​ឱ្យ​ពាក្យ​បង្ហាញ​ឡើង សូម​វាយ​វា​បន្ទាប់​ពី​បិទ​តង្កៀប div ។

ចុច​លើ រក្សាទុក និងផ្ទុកទំព័រដើមរបស់អ្នក។ ឥឡូវនេះតំណផ្ទះរបស់អ្នកគួរតែបង្ហាញ 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 នៅក្នុងផ្នែកខាងក្រោយរបស់អ្នក ដើម្បីបញ្ជាក់ភាពខុសគ្នារូបតំណាងសម្រាប់ប្រភេទប្រកាសផ្សេងៗគ្នា ឬអ្នកអាចប្រើវានៅក្នុងចំណងជើងប្រកាសរបស់អ្នក ចំណងជើងធាតុក្រាហ្វិក ឬប្រសិនបើអ្នកកំពុងបង្កើតទំព័រចុះចតផ្ទាល់ខ្លួន អ្នកអាចបែងចែករវាងទំព័រផ្សេងៗគ្នានៃគេហទំព័ររបស់អ្នក។

សូម​មើល​ផង​ដែរ: 15 កម្មវិធីជំនួយ WordPress SEO ល្អបំផុត & ឧបករណ៍សម្រាប់ឆ្នាំ 2023

នេះគឺជាឧទាហរណ៍មូលដ្ឋាននៃអ្វីដែល អ្នកអាចប្រើពួកវាដើម្បីបង្កើត៖

Patrick Harvey

Patrick Harvey គឺជាអ្នកនិពន្ធ និងជាអ្នកទីផ្សារឌីជីថលដែលមានបទពិសោធន៍ជាង 10 ឆ្នាំនៅក្នុងឧស្សាហកម្មនេះ។ គាត់មានចំណេះដឹងច្រើនអំពីប្រធានបទផ្សេងៗដូចជា ការសរសេរប្លុក ប្រព័ន្ធផ្សព្វផ្សាយសង្គម ecommerce និង WordPress ។ ចំណង់ចំណូលចិត្តរបស់គាត់សម្រាប់ការសរសេរ និងការជួយមនុស្សឱ្យទទួលបានជោគជ័យតាមអ៊ីនធឺណិត បានជំរុញឱ្យគាត់បង្កើតការបង្ហោះដែលយល់ឃើញ និងទាក់ទាញដែលផ្តល់តម្លៃដល់ទស្សនិកជនរបស់គាត់។ ក្នុងនាមជាអ្នកប្រើប្រាស់ WordPress ដ៏ស្ទាត់ជំនាញ លោក Patrick ស្គាល់ពីខាងក្នុង និងក្រៅនៃការកសាងគេហទំព័រជោគជ័យ ហើយគាត់ប្រើចំណេះដឹងនេះ ដើម្បីជួយអាជីវកម្ម និងបុគ្គលម្នាក់ៗបង្កើតវត្តមានលើអ៊ីនធឺណិតរបស់ពួកគេ។ ដោយមានភ្នែកមុតស្រួចសម្រាប់ព័ត៌មានលម្អិត និងការប្តេជ្ញាចិត្តមិនផ្លាស់ប្តូរចំពោះឧត្តមភាព លោក Patrick ប្តេជ្ញាផ្តល់ជូនអ្នកអាននូវនិន្នាការ និងដំបូន្មានចុងក្រោយបំផុតនៅក្នុងឧស្សាហកម្មទីផ្សារឌីជីថល។ នៅពេលដែលគាត់មិនសរសេរប្លុក លោក Patrick អាចត្រូវបានគេរកឃើញថាកំពុងស្វែងរកកន្លែងថ្មី អានសៀវភៅ ឬលេងបាល់បោះ។