ໃນບົດຄວາມນີ້, ຂ້ອຍຈະສະແດງວິທີການເພີ່ມແຜນທີ່ Google Maps ທີ່ຕອບສະຫນອງກັບຫນ້າເວັບ WordPress (ເຊັ່ນສໍາລັບຫນ້າຕິດຕໍ່) ໂດຍບໍ່ຕ້ອງໃຊ້ plugin. ຂ້ອຍຈະໃຊ້ WordPress 6.0 ສໍາລັບການສອນນີ້, ເຊັ່ນດຽວກັນກັບຫົວຂໍ້ Twenty Twenty Two, ເຊິ່ງເປັນຫົວຂໍ້ເລີ່ມຕົ້ນສໍາລັບ WordPress ຮຸ່ນນີ້.
ຄຸນສົມບັດຂອງ Google Maps ຊ່ວຍໃຫ້ທ່ານສາມາດສະແດງສະຖານທີ່ຂອງທຸລະກິດຂອງທ່ານໃນແຜນທີ່ແບບໂຕ້ຕອບໄດ້, ຊ່ວຍໃຫ້ຜູ້ເຂົ້າຊົມເວັບໄຊທ໌ສາມາດເບິ່ງບ່ອນທີ່ທ່ານຢູ່ໄດ້ງ່າຍແລະພົວພັນກັບແຜນທີ່ເພື່ອເບິ່ງສິ່ງອື່ນທີ່ຢູ່ອ້ອມຮອບທ່ານ, ຂໍເສັ້ນທາງ, ແລະອື່ນໆ. ມັນສະແດງໃຫ້ເຫັນເຖິງຜູ້ເຂົ້າຊົມເວັບໄຊທ໌. ວ່າທ່ານເປັນທຸລະກິດທ້ອງຖິ່ນແລະມີສະຖານທີ່ທີ່ແທ້ຈິງ, ທາງດ້ານຮ່າງກາຍ. ມັນເປັນເລື່ອງທົ່ວໄປຫຼາຍສໍາລັບທຸລະກິດທີ່ຈະມີແຜນທີ່ຢູ່ໃນຫນ້າຕິດຕໍ່ຂອງພວກເຂົາ.
ມີ plugins ຂອງ Google Maps ຈໍານວນຫລາຍຢູ່ບ່ອນນັ້ນ, ແຕ່ຫຼາຍອັນຂອງພວກມັນແມ່ນ clunky ແລະຮຽກຮ້ອງໃຫ້ມີການຈ່າຍເງິນສໍາລັບຄຸນສົມບັດ plugin ເຕັມຫຼືບັນຊີ Google Developer ທີ່ມີຂັ້ນຕອນທີ່ສັບສົນທີ່ໃຫ້ຜົນໄດ້ຮັບຫນ້ອຍກວ່າຄວາມປາຖະຫນາ.
ທັງຫມົດນີ້ຖືກເວົ້າ, ມີວິທີທີ່ງ່າຍດາຍແທ້ໆທີ່ຈະເພີ່ມ Google Maps ໃນຫນ້າ WordPress 6.0 ຂອງທ່ານໂດຍບໍ່ມີ plugins ແລະບໍ່ມີຂັ້ນຕອນທີ່ສັບສົນຫຼາຍ. ໃຫ້ ເຊົາ ເຂົ້າ ໄປ ໃນ ມັນ.
ຂັ້ນຕອນທີ 1: ສ້າງ HTML Block
ສໍາລັບການເລີ່ມຕົ້ນ, ເຂົ້າສູ່ລະບົບ admin ຂອງເວັບໄຊທ໌ WordPress ຂອງທ່ານແລະໄປຫາພາກ "ຫນ້າ" (ລູກສອນສີແດງໃນຮູບຂ້າງເທິງ).
ຄລິກໃສ່ຫນ້າທີ່ທ່ານຕ້ອງການເພີ່ມຄຸນສົມບັດ Google Maps ຂອງທ່ານ (ທ່ານສາມາດຄລິກໃສ່ຊື່ຫນ້າ, ໃນກໍລະນີຂອງຂ້ອຍ "ຕິດຕໍ່" - ລູກສອນສີຟ້າໃນຮູບຂ້າງເທິງ - ຫຼືພຽງແຕ່ຄລິກ "ແກ້ໄຂ" ພາຍໃຕ້ຊື່ຫນ້າ).
ຖ້າທ່ານກໍາລັງໃຊ້ຫົວຂໍ້ບລັອກເຊັ່ນ Twenty Twenty Two, ໃນປັດຈຸບັນທ່ານຈະຢູ່ໃນຕົວແກ້ໄຂບລັອກສໍາລັບຫນ້າຂອງທ່ານ. ເລື່ອນລົງໄປບ່ອນທີ່ທ່ານຕ້ອງການໃສ່ແຜນທີ່ຂອງທ່ານ.
ຕໍ່ໄປ, ໃຫ້ຄລິກທີ່ໄອຄອນ “+” (“ Block Inserter” – ລູກສອນສີແດງໃນຮູບຂ້າງເທິງ) ເພື່ອໃສ່ບລັອກ.
ຄົ້ນຫາ "ກຸ່ມ" ໃນຊ່ອງຊອກຫາ (ລະບຸໄວ້ເປັນສີຂຽວໃນຮູບ) ແລະຄລິກເພື່ອເພີ່ມບລັອກກຸ່ມ (ລູກສອນສີແດງ). ນີ້ຈະຊ່ວຍໃຫ້ທ່ານສາມາດເພີ່ມບາງການຕັ້ງຄ່າ custom ກັບອົງປະກອບຂອງຕັນ.
ຕົວຢ່າງ, ໃຫ້ຄລິກໃສ່ຕົວເລືອກ "ປ່ຽນການຈັດຕໍາແຫນ່ງ" (ລູກສອນສີແດງ) ແລະເລືອກ "ຄວາມກວ້າງເຕັມ" (ລູກສອນສີຂຽວ). ນີ້ຈະເຮັດໃຫ້ຄວາມກວ້າງຂອງບລັອກທີ່ຈະປະກອບດ້ວຍແຜນທີ່ໂຕ້ຕອບ Google Maps ຂອງພວກເຮົາມີຄວາມກວ້າງເຕັມ.
ຕໍ່ໄປ, ໃຫ້ຄລິກໃສ່ປຸ່ມ "+" ຂະຫນາດໃຫຍ່ຢູ່ໃນກຸ່ມ (ລູກສອນສີແດງໃນຮູບຂ້າງເທິງ). ຄົ້ນຫາ "HTML" ໃນແຖບຄົ້ນຫາ (ຂຽນເປັນສີຂຽວ) ແລະຄລິກໃສ່ "Custom HTML" block (ລູກສອນສີຟ້າ).
ທ່ານຈະເຫັນມັນຕອນນີ້ເວົ້າວ່າ “ຂຽນ html…” (ລູກສອນສີແດງ). ນີ້ແມ່ນບ່ອນທີ່ພວກເຮົາຈະເພີ່ມແຜນທີ່ຂອງພວກເຮົາ.
ຂັ້ນຕອນທີ 2: ສ້າງ Google Maps Embed HTML
ຕອນນີ້ພວກເຮົາຈະຕ້ອງການສ້າງແຜນທີ່ຂອງພວກເຮົາດ້ວຍ Google Maps. ເພື່ອເຮັດສິ່ງນີ້, ເປີດແຖບຕົວທ່ອງເວັບໃຫມ່ແລະທ່ອງໄປຫາ Google.com ຖ້າມັນບໍ່ແມ່ນຕົວທ່ອງເວັບຄົ້ນຫາເລີ່ມຕົ້ນຂອງທ່ານ.
ຕໍ່ໄປ, ພິມທີ່ຢູ່ທີ່ທ່ານຕ້ອງການສະແດງຢູ່ໃນແຜນທີ່ຂອງທ່ານ. ຕົວຢ່າງນີ້, ຂ້ອຍຈະໃຊ້ Empire State Building (ລູກສອນສີແດງ). ທ່ານສາມາດນໍາໃຊ້ທີ່ຢູ່ແນ່ນອນຂອງທຸລະກິດຂອງທ່ານສໍາລັບພາກສ່ວນນີ້ (ເຊັ່ນ: ເລກຖະຫນົນ, ຖະຫນົນ, ເມືອງ, ລັດ, ແລະລະຫັດໄປສະນີ – ຫຼືອັນໃດກໍຕາມທີ່ທ່ານພິມສໍາລັບທີ່ຢູ່ສາກົນຖ້າຫາກວ່າທ່ານບໍ່ໄດ້ຢູ່ໃນສະຫະລັດ).
ໃຫ້ຄລິກໃສ່ຮູບແຜນທີ່ທີ່ປາກົດສໍາລັບທີ່ຢູ່ຂອງທ່ານໃນຫນ້າຜົນການຄົ້ນຫາເຄື່ອງຈັກຊອກຫາ (ລູກສອນສີແດງໃນຮູບ - ນີ້ຈະຢູ່ກາງຫນ້າຫຼືໄປທາງຂວາ, ຂຶ້ນກັບວ່າທ່ານພິມທີ່ຢູ່ຫຼືຊື່ຂອງ. ສະຖານທີ່, ຄືກັບຂ້ອຍ).
ທີ່ຢູ່ຂອງເຈົ້າຕອນນີ້ຈະປາກົດເປັນເຄື່ອງໝາຍໃນແຜນທີ່ເຕັມຈໍ (ລູກສອນສີແດງໃນຮູບຂ້າງເທິງ). ທ່ານຍັງຈະເຫັນໄອຄອນຫຼາຍອັນຢູ່ກ້ອງທີ່ຢູ່ ຫຼືຊື່ຂອງສະຖານທີ່ທີ່ທ່ານຊອກຫາ. ໄອຄອນເຫຼົ່ານີ້ລວມມີ “ເສັ້ນທາງ,” “ບັນທຶກ”, “ໃກ້ຄຽງ,” “ສົ່ງຫາໂທລະສັບ,” ແລະ “ແບ່ງປັນ.” ໃຫ້ຄລິກໃສ່ຮູບສັນຍາລັກ "ແບ່ງປັນ" (ລູກສອນສີຟ້າ).
ໃນແຖບ "ແບ່ງປັນ" ທີ່ປາກົດ, ໃຫ້ຄລິກໃສ່ແຖບ "ຝັງແຜນທີ່" (ລູກສອນສີຟ້າໃນຮູບຂ້າງເທິງ).
ໃນແຖບນີ້, ທ່ານຈະເຫັນຕົວຢ່າງຂອງ widget Google Maps ທີ່ຝັງໄວ້ຂອງທ່ານ. ມີການຫຼຸດລົງຂະຫນາດຢູ່ເບື້ອງຊ້າຍຂອງລະຫັດ (ລູກສອນສີຂຽວ) – ທ່ານສາມາດເລືອກເອົາຂະຫນາດ premade ຫຼືເລືອກ "Custom" ເພື່ອກໍານົດຂະຫນາດຂອງຕົນເອງ. ຂ້ອຍຈະເລືອກຕົວເລືອກ "Custom" (ລູກສອນສີແດງ).
ທີ່ນີ້, ທ່ານຈະເຫັນຂະຫນາດສໍາລັບແຜນທີ່ກໍານົດເອງຂອງຂ້ອຍ. ຂ້ອຍຈະຕັ້ງຄວາມສູງ, ຫຼືຂະຫນາດທໍາອິດ, ເປັນ 1200 (ລູກສອນສີແດງ). ຂ້ອຍຈະປ່ອຍໃຫ້ຄວາມກວ້າງທີ່ຕັ້ງໄວ້ເປັນ 600. ເຈົ້າສາມາດຄລິກ “ເບິ່ງຂະໜາດຕົວຈິງ” (ລູກສອນສີຂຽວ) ເພື່ອສະແດງແຜນທີ່ໃນໜ້າຕ່າງປັອບອັບໃໝ່ໃນຂະໜາດເຕັມ (ໃຫ້ແນ່ໃຈວ່າເຈົ້າປິດຕົວບລັອກປັອບອັບຕ່າງໆ ຖ້າເຈົ້າມີພວກມັນ. ເປີດເພື່ອຫຼີກເວັ້ນການສະກັດປ່ອງຢ້ຽມ). ອອກຈາກໜ້າຈໍສະແດງຕົວຢ່າງເມື່ອທ່ານເຮັດແລ້ວໆ.
ຕໍ່ໄປ, ໃຫ້ຄລິກໃສ່ການເຊື່ອມຕໍ່ "Copy HTML" (ລູກສອນສີຟ້າ). ນີ້ແມ່ນລະຫັດທີ່ພວກເຮົາຈະນໍາເອົາເຂົ້າໄປໃນຫນ້າ WordPress ຂອງພວກເຮົາ.
ຂັ້ນຕອນທີ 3: ວາງລະຫັດ HTML ໃສ່ໜ້າ WordPress
ກັບຄືນໄປຫາແຖບຕົວທ່ອງເວັບທີ່ມີເວັບໄຊທ໌ WordPress ຂອງທ່ານ. ໃຫ້ຄລິກໃສ່ແຖບ HTML ຫວ່າງເປົ່າທີ່ມັນບອກວ່າ "ຂຽນ HTML ທີ່ນີ້ ... " ແລະວາງລະຫັດ (ລູກສອນສີແດງ) ໂດຍການກົດແປ້ນພິມ ctrl+v ເທິງແປ້ນພິມຂອງທ່ານ (cmd+v ໃນ mac).
ຖ້າທ່ານຄລິກໃສ່ຕົວເລືອກ "ເບິ່ງຕົວຢ່າງ" ໃນແຖບເຄື່ອງມືບລັອກ (ລູກສອນສີແດງ), ທ່ານຈະເຫັນແຜນທີ່ຂອງທ່ານສະແດງຢູ່ໃນຫນ້າຂອງທ່ານ (ລູກສອນສີຂຽວ). ຄລິກກັບໄປທີ່ຕົວເລືອກ “HTML” ເພື່ອກັບຄືນຫາລະຫັດ HTML (ລູກສອນສີຟ້າ).
ພວກເຮົາມີແຜນທີ່ຂອງພວກເຮົາຝັງຢູ່ໃນຫນ້າຂອງພວກເຮົາ, ແຕ່ມັນບໍ່ຕອບສະຫນອງ - ຊຶ່ງຫມາຍຄວາມວ່າຖ້າພວກເຮົາເບິ່ງແຜນທີ່ໃນຫນ້າຈໍຂະຫນາດນ້ອຍກວ່າເຊັ່ນແທັບເລັດຫຼືໂທລະສັບ, ມັນຈະບໍ່ປັບຂະຫນາດໃຫ້ເຫມາະສົມກັບຫນ້າຈໍ. ເພື່ອແກ້ໄຂນີ້, ພວກເຮົາຈໍາເປັນຕ້ອງເພີ່ມຄໍເຕົ້າໄຂ່ທີ່ກໍາຫນົດເອງບາງຢ່າງໃສ່ລະຫັດ HTML.
ຂັ້ນຕອນທີ 4: ເຮັດໃຫ້ Google Maps ຕອບສະຫນອງ
ຂ້ອຍຈະເປັນ ໃຊ້ລະຫັດທີ່ຂ້ອຍໄດ້ຮັບຈາກເວັບໄຊທ໌ນີ້ ເພື່ອເຮັດໃຫ້ການຝັງ Google Maps ຕອບສະໜອງ. ເລື່ອນລົງໄປຫາພາກສ່ວນທີ່ມີຊື່ວ່າ “ວິທີການຝັງ Google Maps ຕອບສະໜອງ” (ລູກສອນສີແດງ). ຫຼັງຈາກນັ້ນ, ເລື່ອນລົງໄປຫາຊຸດລະຫັດທີສອງ (ລູກສອນສີຟ້າ).
ຄັດລອກທຸກຢ່າງຈາກ " ” to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).
ກັບຄືນໄປຫາ WordPress. ຄລິກຫນູຂອງທ່ານຢູ່ດ້ານຫນ້າຂອງລະຫັດ HTML ເພື່ອໃສ່ລະຫັດໃຫມ່ນີ້ໃນຕອນເລີ່ມຕົ້ນ (ລູກສອນສີແດງ). ກົດ ctrl+v ເພື່ອວາງລະຫັດຂອງທ່ານ.
ສຸດທ້າຍ, ໃຫ້ຄລິກໃສ່ທ້າຍສຸດຂອງລະຫັດ HTML (ລູກສອນສີແດງ) ແລະພິມ “ "ເພື່ອປິດທຸກສິ່ງທຸກຢ່າງ. ໂດຍພື້ນຖານແລ້ວສິ່ງທີ່ທ່ານພຽງແຕ່ເຮັດແມ່ນຫໍ່ລະຫັດ HTML ຂອງທ່ານໃນການຈັດຮູບແບບທີ່ກໍາຫນົດເອງ. ຮູບແບບນີ້ບອກຕົວທ່ອງເວັບຂອງຜູ້ເຂົ້າຊົມໃຫ້ປັບຂະຫນາດແຜນທີ່ໂດຍອີງໃສ່ຂະຫນາດຂອງປ່ອງຢ້ຽມທີ່ເຂົາເຈົ້າກໍາລັງເບິ່ງມັນຢູ່ໃນ.
ຂັ້ນຕອນທີ 5: ປັບອັດຕາສ່ວນຂອງແຜນທີ່ແບບໂຕ້ຕອບ
ມີສິ່ງສຸດທ້າຍຫນຶ່ງທີ່ພວກເຮົາຕ້ອງເຮັດ - ເລື່ອນກັບຄືນໄປບ່ອນເທິງສຸດຂອງລະຫັດຈົນກວ່າທ່ານຈະເຫັນ "padding-bottom: 75%;" (ລູກສອນສີແດງ). ຊິ້ນສ່ວນຂອງລະຫັດນີ້ແມ່ນການກໍານົດອັດຕາສ່ວນຂອງແຜນທີ່.
ເນື່ອງຈາກວ່າຂ້ອຍປັບຂະຫນາດແຜນທີ່ຂອງຂ້ອຍເປັນ 1200 x 600, ມັນມີອັດຕາສ່ວນ 2: 1. ສໍາລັບການນີ້, ຂ້ອຍຈໍາເປັນຕ້ອງປ່ຽນອັດຕາສ່ວນເປັນ "50%" (ລູກສອນສີແດງ).
ຖ້າທ່ານບໍ່ແນ່ໃຈວ່າທ່ານຄວນຈະໃຊ້ອັດຕາສ່ວນໃດສໍາລັບແຜນທີ່ຂອງທ່ານ, ພຽງແຕ່ເອົາອັດຕາສ່ວນ (ເຊັ່ນ: 16: 9) ແລະແບ່ງຕົວເລກທີສອງໂດຍທໍາອິດເພື່ອໃຫ້ໄດ້ອັດຕາສ່ວນຂອງທ່ານ (9 ຄູນ 16 ແມ່ນ 56.25%).
ຄລິກ “ອັບເດດ” ເພື່ອນຳໃຊ້ການປ່ຽນແປງຂອງທ່ານ (ລູກສອນສີຟ້າໃນຮູບຂ້າງເທິງ), ຈາກນັ້ນຄລິກ “ເບິ່ງໜ້າ” ຢູ່ມຸມຊ້າຍລຸ່ມເພື່ອເບິ່ງຜົນໄດ້ຮັບ.
ໃນປັດຈຸບັນທ່ານຄວນເຫັນ widget Google Maps ຂອງທ່ານສະແດງ (ລູກສອນສີແດງໃນຮູບຂ້າງເທິງ).
ທ່ານສາມາດທົດສອບການຕອບສະຫນອງໂດຍການຫຍໍ້ຂະຫນາດຂອງຕົວທ່ອງເວັບຂອງທ່ານລົງ, ຫຼັງຈາກນັ້ນເລື່ອນກັບຄືນໄປບ່ອນພື້ນທີ່ຂອງຫນ້າເວັບທີ່ມີແຜນທີ່.
ນັ້ນແມ່ນມັນສໍາລັບການສອນນີ້! ຖ້າທ່ານມັກມັນແລະຕ້ອງການຮຽນຮູ້ວິທີການສ້າງເວັບໄຊທ໌ WordPress ຂອງທ່ານເອງຈາກຈຸດເລີ່ມຕົ້ນ, ທ່ານສາມາດລົງທະບຽນໃນຂອງຂ້ອຍ WordPress 6.0 ສໍາລັບຫຼັກສູດທີ່ບໍ່ແມ່ນ Coders ໃນ Udemy, ຫຼືກວດເບິ່ງການສອນອື່ນໆຂອງຂ້ອຍ!
