ເນື້ອຫາ
- ຄວາມຮູ້ທີ່ ຈຳ ເປັນ: ພື້ນຖານ PHP ແລະ CSS
- ຕ້ອງການ: ຕິດຕັ້ງ WordPress, ຕົວແກ້ໄຂຂໍ້ຄວາມຂອງຕົວເລືອກ
- ເວລາຂອງໂຄງການ: 10 ນາທີ
ຖ້າທ່ານສະ ໝັກ ສະບັບພິມຂອງວາລະສານ .net (ຖ້າບໍ່, ເປັນຫຍັງບໍ່!?), ທ່ານຈະເຫັນວ່າສະບັບເດືອນນີ້ມີບົດຂຽນທີ່ດີເລີດໃນຫົວຂໍ້“ Design Design with WordPress”.
ໃນບົດຂຽນ, ນັກຂຽນ Jesse Friedman ໄດ້ຍົກອອກບັນດາເຕັກນິກທີ່ມີປະໂຫຍດແທ້ໆ ສຳ ລັບເຮັດໃຫ້ມີຄຸນສົມບັດ WordPress ທີ່ມີປະສິດຕິພາບສູງສຸດແລະເອົາຊະນະໄດ້ເພື່ອຜະລິດເວບໄຊທ໌ຕອບສະ ໜອງ ຢ່າງມີປະສິດຕິຜົນ. ຖ້າທ່ານ ກຳ ລັງຄິດທີ່ຈະຜະລິດເວບໄຊທ໌ຕອບສະ ໜອງ ກັບ WordPress ທ່ານຄວນຈະເອົາ ສຳ ເນົາຂອງບົດຄວາມຂອງລາວແນ່ນອນ. ມັນຕ້ອງອ່ານ.
ເມື່ອບໍ່ດົນມານີ້ໄດ້ສ້າງ blog ສ່ວນຕົວຂອງຂ້ອຍໃນ WordPress ໂດຍໃຊ້ວິທີການຕອບສະ ໜອງ, ມືຖື - ທຳ ອິດຂ້ອຍໄດ້ຄຸ້ນເຄີຍກັບເຕັກນິກບາງຢ່າງທີ່ຂຽນໄວ້ໃນບົດຄວາມ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ລາຍການ ໜຶ່ງ ທີ່ແນ່ນອນ ສຳ ລັບຂ້ອຍແມ່ນວິທີການຂອງ Jesse ໃນການເຮັດໃຫ້ຮູບພາບຂອງແຫຼວຜ່ານ jQuery.
ປັນຫາກັບ WordPress ແລະ“ ຮູບພາບທີ່ມີນໍ້າ”
ດັ່ງທີ່ຂ້ອຍແນ່ໃຈວ່າເຈົ້າໄດ້ຮັບຮູ້ທຸກຮູບພາບຂອງນ້ ຳ - ເຊິ່ງໃຊ້ຄວາມກວ້າງສູງສຸດ: 100% - ຮຽກຮ້ອງໃຫ້ຮູບພາບບໍ່ມີຄວາມກວ້າງຫລືຄວາມສູງທີ່ແນ່ນອນເພື່ອໃຫ້ພວກເຂົາສາມາດປັບຂະ ໜາດ ຂອງພາຊະນະຂອງມັນໄດ້. ແຕ່ໂຊກບໍ່ດີ, WordPress ອັດຕະໂນມັດຄິດໄລ່ຂະ ໜາດ ຂອງຮູບພາບທີ່ຜະລິດຈາກຫໍສະ ໝຸດ ສື່ແລະເພີ່ມຄຸນລັກສະນະຄວາມກວ້າງແລະຄວາມສູງໃຫ້ກັບແທັກ img> ໃດໆ.
ນີ້ແມ່ນສິ່ງທີ່ດີ ສຳ ລັບຄວາມໄວໃນການສະແດງ ໜ້າ ເວັບແຕ່ວ່າມັນກໍ່ກ ຂະຫນາດໃຫຍ່ spanner ໃນວຽກງານເມື່ອເວົ້າເຖິງການສ້າງຮູບແບບທີ່ຕອບສະ ໜອງ ເນື່ອງຈາກວ່າຂະ ໜາດ ຮູບພາບບໍ່ ຈຳ ກັດຕໍ່ຂະ ໜາດ ຂອງພາຊະນະຂອງມັນ.
ນັ້ນແມ່ນປັນຫາ.
ການແກ້ໄຂທີ່ບໍ່ແມ່ນ jQuery
ໃນບົດຂຽນຂອງ Jesse ໄດ້ແນະ ນຳ ໃຫ້ໃຊ້ jQuery ເພື່ອ ກຳ ຈັດຄຸນລັກສະນະຄວາມກວ້າງແລະຄວາມສູງຈາກທຸກໆ img> tags ໃນ ໜ້າ ດຽວເມື່ອມັນໄດ້ໂຫລດ. ນີ້ແນ່ນອນວ່າມັນເຮັດວຽກໄດ້ດີແຕ່ເມື່ອສ້າງເວັບໄຊທ໌້ຂ້ອຍຂ້ອຍບໍ່ມັກຄວາມຄິດທີ່ຈະເພິ່ງພາ JavaScript ເພື່ອບັນລຸສິ່ງນີ້, ໂດຍສະເພາະຖ້າມີຫລາຍໆຮູບພາບໃນ ໜ້າ ທີ່ເປັນ ຄຳ ຖາມ.
ນີ້ແມ່ນບ່ອນທີ່ຕົວກອງ WordPress ມາຊ່ວຍເຫຼືອ.
WordPress codex ກຳ ນົດຕົວກອງຄື:
“ …ຕິດກັບວ່າ WordPress ເປີດໃຊ້ເພື່ອດັດແປງຂໍ້ຄວາມຂອງຫລາຍປະເພດກ່ອນທີ່ຈະຕື່ມໃສ່ຖານຂໍ້ມູນຫລືສົ່ງໄປທີ່ ໜ້າ ຈໍຂອງ browser.”
ຍ້ອນວ່າມັນຫັນອອກນີ້ແມ່ນສິ່ງທີ່ພວກເຮົາຕ້ອງການແທ້ໆ. ໂດຍການຕັ້ງຄ່າຕົວກອງເພື່ອ ດຳ ເນີນການກັບທຸກຮູບພາບເປັນການກະ ທຳ ສຸດທ້າຍກ່ອນທີ່ມັນຈະຖືກສະແດງໃນ ໜ້າ ເວັບ, ພວກເຮົາສາມາດໃຊ້ PHP ເພື່ອ ກຳ ຈັດຄຸນລັກສະນະຄວາມກວ້າງແລະຄວາມສູງດັ່ງນັ້ນຫລີກລ້ຽງຄວາມຕ້ອງການຂອງການ ໝູນ ໃຊ້ DOM ທີ່ມີລາຄາແພງຜ່ານ JavaScript.
ລະຫັດ
- /**
- * ບັນດາຮູບພາບທີ່ຮັບຜິດຊອບ
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- ຟັງຊັນ remove_thumbnail_dimensions ($ html)
- $ html = preg_replace ('/ (ຄວາມກວ້າງ
ໃນລະຫັດຂ້າງເທິງນີ້ພວກເຮົາ ກຳ ລັງເພີ່ມສອງຕົວກອງໂດຍໃຊ້ຟັງຊັນ add_filter. ການໂຕ້ຖຽງຄັ້ງທໍາອິດແມ່ນຕົວກອງທີ່ພວກເຮົາຕ້ອງການທີ່ຈະເຊື່ອມເຂົ້າແລະທີສອງລະບຸເຖິງຫນ້າທີ່ພວກເຮົາຕ້ອງການທີ່ຈະດໍາເນີນການເມື່ອມີການກັ່ນຕອງທີ່ຖືກເອີ້ນ.
ໃນລະຫັດຂອງພວກເຮົາພວກເຮົາຕິດຢູ່ໃນສອງ ໜ້າ ທີ່ທີ່ບໍ່ ໜ້າ ສົນໃຈ:
- post_thumbnail_html - ຮູບພາບທີ່ເກັບມາພ້ອມກັບ post_thumbnail ()
- image_send_to_editor - ຮູບພາບທີ່ເພີ່ມເຂົ້າໃນບັນນາທິການ
ພວກເຮົາໃຊ້ການສະແດງອອກເປັນປະ ຈຳ ເພື່ອເອົາທັງຄຸນລັກສະນະຂອງຄວາມກວ້າງແລະຄວາມສູງອອກຈາກແທັກຮູບພາບ. ຕອນນີ້ເມື່ອຮູບພາບຂອງພວກເຮົາຖືກສົ່ງໄປທີ່ໂປແກຼມທ່ອງເວັບພວກມັນສາມາດເປັນນ້ ຳ ໄດ້ຢ່າງເຕັມທີ່ຄືກັບທີ່ທ່ານ Marcotte ບອກພວກເຮົາວ່າພວກເຂົາຄວນ.
ການສາລະພາບ
ຂ້ອຍຕ້ອງຍອມຮັບສາລະພາບວ່າມີແນວຄິດທີ່ຈະໃຊ້ add_filter ເພື່ອ ກຳ ຈັດຄຸນລັກສະນະຕ່າງໆທີ່ຂ້ອຍບໍ່ສາມາດໃຊ້ໄດ້ ສຳ ລັບຊີວິດຂ້ອຍຊອກຫາຕົວກອງ WordPress ທີ່ຖືກຕ້ອງເພື່ອຕິດ.
ຫຼັງຈາກການຄົ້ນຫາຫລາຍໆເທື່ອສຸດທ້າຍຂ້າພະເຈົ້າໄດ້ພົບເຫັນບົດຄວາມທີ່ມີປະໂຫຍດສູງສຸດນີ້ໃນ Wordpress Stack Exchange ໂດຍ Nathaniel Taintor ເຊິ່ງສະ ໜອງ ຂໍ້ມູນກ່ຽວກັບສອງຕົວກອງທີ່ຂ້ອຍຕ້ອງການ.
ຖ້ ຳ ພະ
ເທົ່າທີ່ຂ້າພະເຈົ້າຮູ້ພຽງແຕ່ການດຶງດູດທີ່ ສຳ ຄັນຕໍ່ວິທີການນີ້ແມ່ນມັນບໍ່ໄດ້ ກຳ ຈັດຄຸນລັກສະນະຄວາມກວ້າງແລະຄວາມສູງຈາກຮູບພາບທັງ ໝົດ ໃນເວັບໄຊທ໌້ຂອງທ່ານ. ຂ້ອຍພົບວ່ານີ້ເປັນບັນຫາ, ໂດຍສະເພາະກັບຮູບພາບ Gravatar ທີ່ WordPress ໃຊ້ໃນ ຄຳ ເຫັນ.
ຖ້າຜູ້ໃດມີວິທີແກ້ໄຂບັນຫານີ້ກະລຸນາຂຽນ ຄຳ ເຫັນດັ່ງນັ້ນພວກເຮົາທຸກຄົນສາມາດໄດ້ຮັບຜົນປະໂຫຍດ.
ຂ້າພະເຈົ້າຫວັງວ່າສິ່ງນີ້ຈະເປັນປະໂຫຍດແລະສະແດງທາງເລືອກໃນການເພິ່ງພາ JavaScript ເພື່ອປະຕິບັດ“ ຮູບພາບຕ່າງໆ” ໃນເວັບໄຊທ໌ WordPress.
ຄຳ ເວົ້າ: David Smith
Dave Smith ແມ່ນຜູ້ອອກແບບດ້ານ ໜ້າ ດ້ານ ໜ້າ ເຊິ່ງຕັ້ງຢູ່ໃກ້ກັບເມືອງທີ່ສວຍງາມຂອງເມືອງ Bath, ອັງກິດ. ໃນເວລາທີ່ລາວບໍ່ໄດ້ເຮັດວຽກກ່ຽວກັບໂຄງການ ໃໝ່ໆ ແລະ ໜ້າ ຕື່ນເຕັ້ນ, ລາວສາມາດພົບເຫັນການຫຼີ້ນກະດິງໃນທຸກສິ່ງທຸກຢ່າງຈາກກຸ່ມ jazz Big ເຖິງວົງດົນຕີ Symphony. ທ່ານສາມາດຕິດຕາມກັບ Dave ໃນ Twitter ເປັນ @get_dave.
