ວິທີການໃຊ້ Dashicons ໃນ WordPress - ຄູ່ມືຂັ້ນຕອນໂດຍຂັ້ນຕອນ

 ວິທີການໃຊ້ Dashicons ໃນ WordPress - ຄູ່ມືຂັ້ນຕອນໂດຍຂັ້ນຕອນ

Patrick Harvey

ມັນເກີດຂຶ້ນກັບທຸກຄົນ.

ທ່ານຊອກຫາຫົວຂໍ້ທີ່ທ່ານມັກ, ທ່ານຕິດຕັ້ງມັນ ແລະໃຊ້ເວລາສອງສາມເດືອນເພື່ອເພີດເພີນກັບຮູບລັກສະນະຂອງເວັບໄຊຂອງທ່ານ. ແຕ່ຫຼັງຈາກນັ້ນ, ຫຼັງຈາກສອງສາມເດືອນ, ຫົວຂໍ້ເລີ່ມຕົ້ນທີ່ຈະມີຄວາມຮູ້ສຶກ stale. ເບື່ອໜ້ອຍໜຶ່ງ.

ເບິ່ງ_ນຳ: Iconosquare Review 2023: ຫຼາຍກ່ວາເຄື່ອງມືການວິເຄາະສື່ສັງຄົມ

ບັນຫາດຽວແມ່ນ, ເຈົ້າບໍ່ຢາກໃຊ້ເວລາສອງສາມຊົ່ວໂມງຊອກຫາສິ່ງໃໝ່. ຖ້າມີພຽງວິທີທີ່ຈະເພີ່ມເຄື່ອງເທດເລັກນ້ອຍໃສ່ຮູບແບບສີສັນຂອງເຈົ້າ, ໄຟເລັກນ້ອຍເພື່ອເຮັດໃຫ້ມັນໂດດເດັ່ນ.

ກ່ອນທີ່ທ່ານຈະຖິ້ມມືຂອງເຈົ້າດ້ວຍຄວາມສິ້ນຫວັງ, ຂ້ອຍຂໍສະແດງວິທີທີ່ງ່າຍໃນການເພີ່ມເຄື່ອງເທດຂອງເຈົ້າ. ຫົວຂໍ້ໂດຍບໍ່ມີຄວາມພະຍາຍາມຫຼາຍເກີນໄປ, ແລະໂດຍບໍ່ມີການເພີ່ມຮູບພາບທີ່ບໍ່ຈໍາເປັນທີ່ສາມາດເຮັດໃຫ້ເວັບໄຊທ໌ຂອງທ່ານຊ້າລົງ.

ໃສ່ Dashicons. Dashicons ແມ່ນໄອຄອນຕົວອັກສອນທີ່ຖືກນໍາສະເຫນີໃນ WordPress 3.8. ພວກມັນເປັນໄອຄອນທີ່ໜ້າຫວາດສຽວ ແລະ ເຢັນໆທີ່ເຈົ້າເຫັນເມື່ອທ່ານເຂົ້າສູ່ລະບົບ dashboard ຂອງທ່ານ. ມັນບໍ່ເຢັນບໍຖ້າເຈົ້າສາມາດເພີ່ມພວກມັນໃສ່ຮູບແບບສີສັນຂອງເຈົ້າໄດ້ບໍ?

ດີ, ເຈົ້າສາມາດ ແລະຂ້ອຍຈະສະແດງວິທີໃຫ້ເຈົ້າເຫັນ.

ເຈົ້າສາມາດໃຊ້ Dashicons ໃນຂອງເຈົ້າໄດ້ແນວໃດ? ເມນູນໍາທາງບໍ?

ໃຫ້ເລີ່ມຕົ້ນດ້ວຍຕົວຢ່າງງ່າຍໆ. Dashicons ຖືກລວມຢູ່ໃນ WordPress ແລ້ວຕັ້ງແຕ່ຮຸ່ນ 3.8 ແຕ່ທ່ານຍັງຈໍາເປັນຕ້ອງໄດ້ລວມເອົາພວກມັນເພື່ອໃຫ້ພວກເຂົາສະແດງຢ່າງຖືກຕ້ອງຢູ່ທາງຫນ້າຂອງເວັບໄຊທ໌ຂອງທ່ານ; ນັ້ນແມ່ນ, ຮູບແບບສີສັນຂອງເຈົ້າ.

ຂັ້ນຕອນທີ 1: ເຮັດໃຫ້ຮູບແບບສີສັນ Dashicons ຂອງທ່ານກຽມພ້ອມ

ເພື່ອເຮັດໃຫ້ຮູບແບບສີສັນ Dashicons ຂອງທ່ານກຽມພ້ອມກ່ອນທໍາອິດເປີດໄຟລ໌ functions.php ຂອງທ່ານ (ພົບໃນ Appearance&gt. ;ບັນນາທິການ – ໂດຍຄ່າເລີ່ມຕົ້ນມັນຈະເປີດໄຟລ໌ CSS ຂອງຫົວຂໍ້ປັດຈຸບັນຂອງທ່ານ. ສືບຕໍ່ເດີນຫນ້າແລະຊອກຫາໄຟລ໌ functions.php ແລະຄລິກໃສ່ມັນເພື່ອໂຫລດມັນຢູ່ໃນບັນນາທິການ. ຂອງລະຫັດຢູ່ທ້າຍ:

//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 ແລະເລືອກໄອຄອນທີ່ທ່ານຕ້ອງການ.

ອັບເດດ: Dashicons ໃນເບື້ອງຕົ້ນມີຢູ່ໃນ GitHub.io, ແຕ່ພວກມັນໄດ້ຖືກເຮັດໃຫ້ສາມາດໃຊ້ໄດ້ໃນ WordPress.org.

ຂັ້ນ​ຕອນ​ທີ 4:

ໃຫ້​ຄລິກ​ໃສ່​ໄອ​ຄອນ​ທີ່​ຕ້ອງ​ການ (ໃນ​ກໍ​ລະ​ນີ​ນີ້​ຂ້າ​ພະ​ເຈົ້າ​ເລືອກ​ເອົາ​ໄອ​ຄອນ​ເຮືອນ​) ແລະ​ຫຼັງ​ຈາກ​ນັ້ນ​ໃຫ້​ຄລິກ​ໃສ່ Copy HTML​. ມັນຈະໃຫ້ທ່ານມີໜ້າຕ່າງປັອບອັບພ້ອມກັບລະຫັດທີ່ທ່ານຕ້ອງການ.

ຂັ້ນຕອນ 5:

ກັບໄປທີ່ແຜງໜ້າປັດ WordPress ຂອງທ່ານ, ຄລິກທີ່ Appearance > ; ເມນູ ແລະວາງລະຫັດໃສ່ໃນບ່ອນທີ່ມັນບອກວ່າ Navigation Label.

ເບິ່ງ_ນຳ: ວິ​ທີ​ການ​ສໍາ​ຫຼວດ​ຜູ້​ຊົມ​ຂອງ​ທ່ານ &​; ສ້າງແບບສໍາຫຼວດທີ່ມີສ່ວນຮ່ວມ

ຫາກເຈົ້າຍັງຕ້ອງການໃຫ້ຄຳສັບປາກົດຂຶ້ນ, ໃຫ້ພິມມັນໃສ່ຫຼັງປິດວົງເລັບ div.

ຄລິກທີ່ ບັນທຶກແລະໂຫລດຫນ້າທໍາອິດຂອງທ່ານ. ຕອນນີ້ລິ້ງເຮືອນຂອງທ່ານຄວນສະແດງ Dashicon ທີ່ສວຍງາມ, ຄົມຊັດ.

ທ່ານສາມາດເຮັດອັນນີ້ສໍາລັບລາຍການເມນູນໍາທາງທັງໝົດ ຫຼືສໍາລັບເຮືອນເທົ່ານັ້ນ. ພຽງແຕ່ເຮັດຊ້ໍາຂັ້ນຕອນຂ້າງເທິງດ້ວຍໄອຄອນທີ່ກົງກັນ. ມັນງ່າຍຖືກຕ້ອງບໍ?

ເຈົ້າໃຊ້ Dashicons ໃນ post meta ແນວໃດ?

ເຈົ້າສາມາດໄປອີກບາດກ້າວໜຶ່ງ ແລະເພີ່ມ Dashicons ໃສ່ post meta ຂອງທ່ານ, ຫຼືເວົ້າອີກຢ່າງໜຶ່ງຈະເພີ່ມ Dashicons ຢູ່ຕໍ່ໜ້າຜູ້ຂຽນ. ຊື່, ວັນທີ, ໝວດໝູ່ ຫຼືແທັກ; ຂຶ້ນກັບຫົວຂໍ້ຂອງທ່ານແລະຂໍ້ມູນທີ່ມັນສະແດງ.

ນັບຕັ້ງແຕ່ທ່ານໄດ້ຈັດລໍາດັບ Dashicons ໃນຫົວຂໍ້ຂອງທ່ານແລ້ວ, ສິ່ງທີ່ທ່ານຕ້ອງເຮັດໃນປັດຈຸບັນແມ່ນເປີດໄຟລ໌ style.css ຂອງທ່ານ (ຫຼືໃຊ້ Custom CSS editor ເຊິ່ງສະເຫມີເປັນທາງເລືອກທີ່ດີກວ່າດັ່ງນັ້ນທ່ານ. ຢ່າສູນເສຍການປ່ຽນແປງເມື່ອຮູບແບບສີສັນຂອງເຈົ້າອັບເດດ!), ຊອກຫາຕົວເລືອກທີ່ກົງກັນ ແລະເພີ່ມລະຫັດ 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 ໃນ backend ຂອງທ່ານເພື່ອກໍານົດທີ່ແຕກຕ່າງກັນ.ໄອຄອນສຳລັບປະເພດໂພສຕ່າງໆ, ຫຼືທ່ານສາມາດໃຊ້ພວກມັນໃນຫົວຂໍ້ໂພສຂອງທ່ານ, ຫົວຂໍ້ widget, ຫຼື ຖ້າເຈົ້າກຳລັງສ້າງໜ້າທຳອິດທີ່ກຳນົດເອງ ທ່ານສາມາດແຍກຄວາມແຕກຕ່າງລະຫວ່າງໜ້າຕ່າງຂອງເວັບໄຊຂອງເຈົ້າໄດ້.

ນີ້ແມ່ນຕົວຢ່າງພື້ນຖານຂອງສິ່ງທີ່ ເຈົ້າສາມາດໃຊ້ພວກມັນເພື່ອສ້າງ:

Patrick Harvey

Patrick Harvey ເປັນນັກຂຽນທີ່ມີລະດູການແລະນັກກາລະຕະຫຼາດດິຈິຕອນທີ່ມີປະສົບການຫຼາຍກວ່າ 10 ປີໃນອຸດສາຫະກໍາ. ລາວມີຄວາມຮູ້ອັນກວ້າງຂວາງກ່ຽວກັບຫົວຂໍ້ຕ່າງໆເຊັ່ນ: ການຂຽນບລັອກ, ສື່ສັງຄົມ, ອີຄອມເມີຊ, ແລະ WordPress. ຄວາມກະຕືລືລົ້ນຂອງລາວໃນການຂຽນແລະການຊ່ວຍເຫຼືອຄົນປະສົບຜົນສໍາເລັດທາງອິນເຕີເນັດໄດ້ກະຕຸ້ນໃຫ້ລາວສ້າງຂໍ້ຄວາມທີ່ມີຄວາມເຂົ້າໃຈແລະມີສ່ວນຮ່ວມທີ່ໃຫ້ຄຸນຄ່າແກ່ຜູ້ຊົມຂອງລາວ. ໃນຖານະເປັນຜູ້ໃຊ້ WordPress ທີ່ມີຄວາມຊໍານິຊໍານານ, Patrick ມີຄວາມຄຸ້ນເຄີຍກັບພາຍໃນແລະພາຍນອກຂອງການສ້າງເວັບໄຊທ໌ທີ່ປະສົບຜົນສໍາເລັດ, ແລະລາວໃຊ້ຄວາມຮູ້ນີ້ເພື່ອຊ່ວຍໃຫ້ທຸລະກິດແລະບຸກຄົນດຽວກັນສ້າງຕັ້ງການປະກົດຕົວອອນໄລນ໌ຂອງພວກເຂົາ. ດ້ວຍສາຍຕາກະຕືລືລົ້ນສໍາລັບລາຍລະອຽດແລະຄວາມມຸ່ງຫມັ້ນທີ່ບໍ່ປ່ຽນແປງເພື່ອຄວາມເປັນເລີດ, Patrick ໄດ້ອຸທິດຕົນເພື່ອໃຫ້ຜູ້ອ່ານຂອງລາວມີແນວໂນ້ມແລະຄໍາແນະນໍາຫລ້າສຸດໃນອຸດສາຫະກໍາການຕະຫຼາດດິຈິຕອນ. ໃນເວລາທີ່ລາວບໍ່ໄດ້ຂຽນບລັອກ, Patrick ສາມາດຊອກຫາສະຖານທີ່ໃຫມ່, ອ່ານປຶ້ມ, ຫຼືຫຼີ້ນບ້ວງ.