របៀបប្រើ Dashicons នៅក្នុង WordPress - ការណែនាំជាជំហាន ៗ
តារាងមាតិកា
វាកើតឡើងចំពោះមនុស្សគ្រប់គ្នា។
អ្នករកឃើញរូបរាងដែលអ្នកចូលចិត្ត អ្នកដំឡើងវា ហើយចំណាយពេលពីរបីខែដើម្បីរីករាយនឹងរូបរាងគេហទំព័ររបស់អ្នក។ ប៉ុន្តែបន្ទាប់មក ពីរបីខែក្រោយមក ប្រធានបទនេះចាប់ផ្តើមមានសភាពទ្រុឌទ្រោម។ គួរឱ្យធុញបន្តិច។
បញ្ហាតែមួយគត់គឺ អ្នកមិនចង់ចំណាយពេលពីរបីម៉ោងដើម្បីស្វែងរកអ្វីដែលថ្មីនោះទេ។ ប្រសិនបើមានតែវិធីមួយដើម្បីបន្ថែមគ្រឿងទេសបន្តិចបន្តួចទៅក្នុងស្បែករបស់អ្នក ភ្លើងតូចមួយដើម្បីធ្វើឱ្យវាលេចធ្លោ។
មុនពេលអ្នកបោះដៃរបស់អ្នកដោយភាពអស់សង្ឃឹម ខ្ញុំសូមបង្ហាញអ្នកពីវិធីងាយៗក្នុងការបន្ថែមគ្រឿងទេសរបស់អ្នក។ ស្បែកដោយមិនចាំបាច់ប្រឹងប្រែងខ្លាំងពេក និងដោយមិនបន្ថែមរូបភាពដែលមិនចាំបាច់ដែលអាចធ្វើឲ្យគេហទំព័ររបស់អ្នកថយចុះ។
បញ្ចូល 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នេះគឺជាឧទាហរណ៍មូលដ្ឋាននៃអ្វីដែល អ្នកអាចប្រើពួកវាដើម្បីបង្កើត៖