এই নিবন্ধে, আমি আপনাকে দেখাব কিভাবে একটি প্লাগইন ব্যবহার না করে একটি ওয়ার্ডপ্রেস ওয়েবপেজে (যেমন একটি পরিচিতি পৃষ্ঠার জন্য) একটি প্রতিক্রিয়াশীল Google Maps মানচিত্র যোগ করতে হয়। আমি এই টিউটোরিয়ালের জন্য ওয়ার্ডপ্রেস 6.0 ব্যবহার করব, সেইসাথে টোয়েন্টি টুয়েন্টি টু থিম, যা ওয়ার্ডপ্রেসের এই সংস্করণের জন্য ডিফল্ট থিম।

 Google মানচিত্র বৈশিষ্ট্যটি আপনাকে একটি ইন্টারেক্টিভ মানচিত্রে আপনার ব্যবসার অবস্থান প্রদর্শন করার অনুমতি দেয়, সাইটের দর্শকদের আপনি কোথায় আছেন তা সহজেই দেখতে এবং আপনার আশেপাশে আর কী আছে তা দেখতে, দিকনির্দেশ পান, ইত্যাদি দেখার জন্য মানচিত্রের সাথে ইন্টারঅ্যাক্ট করতে দেয়৷ এটি সাইট দর্শকদের প্রদর্শন করে৷ আপনি একটি স্থানীয় ব্যবসা এবং একটি বাস্তব, শারীরিক অবস্থান আছে. ব্যবসার জন্য তাদের যোগাযোগের পৃষ্ঠায় একটি মানচিত্র থাকা খুবই সাধারণ।

সেখানে প্রচুর Google মানচিত্র প্লাগইন রয়েছে, কিন্তু তাদের মধ্যে অনেকগুলিই অস্বস্তিকর এবং সম্পূর্ণ প্লাগইন বৈশিষ্ট্যগুলির জন্য অর্থপ্রদানের প্রয়োজন হয় অথবা একটি Google ডেভেলপার অ্যাকাউন্টের জটিল পদক্ষেপগুলির সাথে যা কম-আকাঙ্ক্ষিত ফলাফল দেয়।

এই সব বলা হচ্ছে, প্লাগইন ছাড়া এবং জটিল পদক্ষেপের একটি গুচ্ছ ছাড়া আপনার ওয়ার্ডপ্রেস 6.0 পৃষ্ঠাগুলিতে Google মানচিত্র যুক্ত করার একটি সত্যিই সহজ উপায় রয়েছে। এর মধ্যে ডুব দেওয়া যাক.

ধাপ 1: একটি HTML ব্লক তৈরি করুন

শুরুর জন্য, আপনার ওয়ার্ডপ্রেস সাইটের অ্যাডমিন এলাকায় লগইন করুন এবং "পৃষ্ঠা" বিভাগে নেভিগেট করুন (উপরের ছবিতে লাল তীর)।

আপনি যে পৃষ্ঠায় আপনার Google মানচিত্র বৈশিষ্ট্য যুক্ত করতে চান সেটিতে ক্লিক করুন (আপনি পৃষ্ঠার নামের উপর ক্লিক করতে পারেন, আমার ক্ষেত্রে "যোগাযোগ" - উপরের ছবিতে নীল তীর - অথবা পৃষ্ঠার নামের নীচে "সম্পাদনা" ক্লিক করুন)।

আপনি যদি টোয়েন্টি টুয়েন্টি টু এর মত একটি ব্লক থিম ব্যবহার করেন, তাহলে আপনি এখন আপনার পৃষ্ঠার জন্য ব্লক এডিটরের ভিতরে থাকবেন। আপনি যে অবস্থানে আপনার মানচিত্র সন্নিবেশ করতে চান সেখানে নিচে স্ক্রোল করুন।

এরপরে, একটি ব্লক সন্নিবেশ করতে "+" আইকনে ক্লিক করুন ("ব্লক ইনসার্টার" - উপরের ছবিতে লাল তীর)।

অনুসন্ধান ক্ষেত্রে "গ্রুপ" অনুসন্ধান করুন (ফটোতে সবুজ রঙে রূপরেখা দেওয়া হয়েছে) এবং গ্রুপ ব্লক (লাল তীর) যোগ করতে ক্লিক করুন। এটি আপনাকে ব্লক উপাদানে কিছু কাস্টম সেটিংস যোগ করার অনুমতি দেবে।

উদাহরণস্বরূপ, "অ্যালাইনমেন্ট পরিবর্তন করুন" বিকল্পে ক্লিক করুন (লাল তীর) এবং "সম্পূর্ণ প্রস্থ" (সবুজ তীর) নির্বাচন করুন। এটি ব্লকের প্রস্থকে তৈরি করবে যাতে আমাদের Google Maps ইন্টারেক্টিভ ম্যাপ পূর্ণ প্রস্থ থাকবে।

এরপরে, গ্রুপের ভিতরে বড় "+" বোতামে ক্লিক করুন (উপরের ফটোতে লাল তীর)। অনুসন্ধান বারে "HTML" অনুসন্ধান করুন (সবুজ রঙে বর্ণিত) এবং "কাস্টম HTML" ব্লকে ক্লিক করুন (নীল তীর)।

আপনি এখন দেখতে পাবেন "এইচটিএমএল লিখুন..." (লাল তীর)। এখানে আমরা আমাদের মানচিত্র যোগ করব।

ধাপ 2: Google Maps এম্বেড HTML তৈরি করুন

আমাদের এখন Google Maps দিয়ে আমাদের মানচিত্র তৈরি করতে হবে। এটি করার জন্য, একটি নতুন ব্রাউজার ট্যাব খুলুন এবং Google.com-এ নেভিগেট করুন যদি এটি আপনার ডিফল্ট সার্চ ব্রাউজার না হয়।

এরপরে, আপনি আপনার মানচিত্রে যে ঠিকানাটি প্রদর্শন করতে চান তা টাইপ করুন। এই উদাহরণের জন্য, আমি এম্পায়ার স্টেট বিল্ডিং (লাল তীর) ব্যবহার করব। আপনি এই অংশের জন্য আপনার ব্যবসার সঠিক ঠিকানা ব্যবহার করতে পারেন (যেমন রাস্তার নম্বর, রাস্তা, শহর, রাজ্য, এবং জিপকোড – অথবা আপনি যদি মার্কিন যুক্তরাষ্ট্রে না থাকেন তবে আন্তর্জাতিক ঠিকানার জন্য আপনি যা টাইপ করেন)।

সার্চ ইঞ্জিন ফলাফল পৃষ্ঠায় আপনার ঠিকানার জন্য প্রদর্শিত মানচিত্রের চিত্রটিতে ক্লিক করুন (চিত্রে লাল তীর - এটি হয় পৃষ্ঠার মাঝখানে বা ডানদিকে থাকবে, আপনি একটি ঠিকানা বা নাম টাইপ করেছেন কিনা তার উপর নির্ভর করে একটি জায়গা, যেমন আমি করেছি)।

আপনার ঠিকানা এখন পূর্ণ-স্ক্রীন মানচিত্রে একটি মার্কার হিসাবে প্রদর্শিত হবে (উপরের ছবিতে লাল তীর)। আপনি যে জায়গাটি অনুসন্ধান করেছেন তার ঠিকানা বা শিরোনামের নীচে বেশ কয়েকটি আইকনও দেখতে পাবেন। এই আইকনগুলির মধ্যে রয়েছে "দিকনির্দেশ", "সংরক্ষণ", "আশেপাশে," "ফোনে পাঠান" এবং "শেয়ার করুন।" "শেয়ার" আইকনে ক্লিক করুন (নীল তীর)।

প্রদর্শিত "শেয়ার" ট্যাবে, "এম্বেড একটি মানচিত্র" ট্যাবে ক্লিক করুন (উপরের ফটোতে নীল তীর)।  

এই ট্যাবে, আপনি আপনার এম্বেড করা Google Maps উইজেটের একটি পূর্বরূপ দেখতে পাবেন। কোডের বাম দিকে একটি আকারের ড্রপডাউন রয়েছে (সবুজ তীর) - আপনি একটি পূর্বনির্ধারিত আকার নির্বাচন করতে পারেন বা আপনার নিজের আকার সেট করতে "কাস্টম" চয়ন করতে পারেন। আমি "কাস্টম" বিকল্প (লাল তীর) নির্বাচন করব।

এখানে, আপনি আমার কাস্টম মানচিত্রের মাত্রা দেখতে পাবেন। আমি উচ্চতা বা প্রথম মাত্রা নির্ধারণ করব 1200 (লাল তীর)। আমি প্রস্থকে 600 এ সেট করব। একটি নতুন পপ-আপ উইন্ডোতে পূর্ণ আকারে মানচিত্র দেখাতে আপনি "প্রিভিউ অ্যাকচুয়াল সাইজ" (সবুজ তীর) এ ক্লিক করতে পারেন (নিশ্চিত করুন যে আপনার কাছে পপ-আপ ব্লকার থাকলে সেগুলি অক্ষম করুন) উইন্ডো ব্লক করা এড়াতে চালু করা হয়েছে)। আপনার কাজ শেষ হলে পূর্বরূপ উইন্ডো থেকে প্রস্থান করুন।

এরপর, "এইচটিএমএল অনুলিপি করুন" লিঙ্কে ক্লিক করুন (নীল তীর)। এই কোডটি আমরা আমাদের ওয়ার্ডপ্রেস পৃষ্ঠায় আনব।

ধাপ 3: ওয়ার্ডপ্রেস পৃষ্ঠায় HTML কোড পেস্ট করুন

আপনার ওয়ার্ডপ্রেস ওয়েবসাইট রয়েছে এমন ব্রাউজার ট্যাবে ফিরে যান। খালি HTML ব্লকে ক্লিক করুন যেখানে লেখা আছে "এখানে HTML লিখুন..." এবং আপনার কীবোর্ডে ctrl+v টিপে কোডটি (লাল তীর) পেস্ট করুন (একটি ম্যাকে cmd+v)।

আপনি যদি ব্লক টুলবারে "প্রিভিউ" বিকল্পে ক্লিক করেন (লাল তীর), আপনি এখন আপনার পৃষ্ঠায় প্রদর্শিত আপনার মানচিত্র দেখতে পাবেন (সবুজ তীর)। HTML কোডে (নীল তীর) ফিরে যেতে "HTML" বিকল্পে আবার ক্লিক করুন।

আমাদের পৃষ্ঠায় আমাদের মানচিত্র এমবেড করা আছে, কিন্তু এটি প্রতিক্রিয়াশীল নয় – যার অর্থ যদি আমরা একটি ছোট স্ক্রিনে মানচিত্রটি দেখি, যেমন একটি ট্যাবলেট বা একটি ফোন, তাহলে এটি স্ক্রিনের সাথে মানানসই এর আকার সামঞ্জস্য করবে না৷ এটি ঠিক করার জন্য, আমাদের HTML কোডে কিছু কাস্টম স্টাইলিং যোগ করতে হবে।

ধাপ 4: Google মানচিত্রকে প্রতিক্রিয়াশীল করুন

আমি থাকব কোড ব্যবহার করে আমি এই ওয়েবসাইট থেকে পেয়েছি Google Maps এম্বেড প্রতিক্রিয়াশীল করতে। নিচের দিকে স্ক্রোল করুন লেবেলযুক্ত বিভাগে "How to Embed Google Maps Responsively" (লাল তীর)। তারপর, কোডের দ্বিতীয় সেটে নিচে স্ক্রোল করুন (নীল তীর)।

থেকে সবকিছু কপি করুন " ”  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).

ওয়ার্ডপ্রেসে আবার নেভিগেট করুন। শুরুতে এই নতুন কোডটি সন্নিবেশ করতে HTML কোডের একেবারে সামনে আপনার মাউসে ক্লিক করুন (লাল তীর)। আপনার কোড পেস্ট করতে ctrl+v চাপুন।

অবশেষে, HTML কোডের একেবারে শেষে ক্লিক করুন (লাল তীর) এবং টাইপ করুন “ "সবকিছু বন্ধ করতে। মূলত আপনি যা করেছেন তা হল আপনার HTML কোড কাস্টম স্টাইলিংয়ে মোড়ানো। এই স্টাইলটি দর্শকের ব্রাউজারকে বলে যে তারা যে উইন্ডোটি দেখছে তার আকারের উপর ভিত্তি করে মানচিত্রের আকার পরিবর্তন করতে।

ধাপ 5: ইন্টারেক্টিভ মানচিত্রের আকৃতির অনুপাত সামঞ্জস্য করুন

আমাদের একটি শেষ জিনিস করতে হবে - কোডের উপরের দিকে স্ক্রোল করুন যতক্ষণ না আপনি "প্যাডিং-বটম: 75%;" দেখতে পান। (লাল তীর). কোডের এই অংশটি মানচিত্রের আকৃতির অনুপাত নির্ধারণ করছে।

কারণ আমি আমার মানচিত্রের আকার পরিবর্তন করে 1200 x 600 করেছি, এটির একটি 2:1 অনুপাত রয়েছে৷ এর জন্য, আমাকে শতাংশ পরিবর্তন করতে হবে "50%" (লাল তীর)।

আপনি যদি নিশ্চিত না হন যে আপনার মানচিত্রের জন্য আপনার কত শতাংশ ব্যবহার করা উচিত, কেবলমাত্র অনুপাত নিন (যেমন 16:9) এবং আপনার শতাংশ পেতে দ্বিতীয় সংখ্যাটিকে প্রথম দ্বারা ভাগ করুন (9 ভাগ 16 দ্বারা 56.25%)।

আপনার পরিবর্তনগুলি প্রয়োগ করতে "আপডেট" এ ক্লিক করুন (উপরের ছবিতে নীল তীর), তারপর ফলাফল দেখতে নীচের বাম কোণে "পৃষ্ঠা দেখুন" এ ক্লিক করুন।

আপনি এখন আপনার Google মানচিত্র উইজেট প্রদর্শিত দেখতে পাবেন (উপরের ছবিতে লাল তীর)।

আপনি আপনার ব্রাউজারের আকার সঙ্কুচিত করে প্রতিক্রিয়াশীলতা পরীক্ষা করতে পারেন, তারপরে মানচিত্রটি রয়েছে এমন ওয়েবপৃষ্ঠার এলাকায় স্ক্রোল করে।

এই টিউটোরিয়াল জন্য এটা! আপনি যদি এটি পছন্দ করেন এবং স্ক্র্যাচ থেকে কীভাবে আপনার নিজের পেশাদার ওয়ার্ডপ্রেস ওয়েবসাইট তৈরি করবেন তা শিখতে চান, আপনি আমার নিবন্ধন করতে পারেন Udemy-এ নন-কোডার কোর্সের জন্য ওয়ার্ডপ্রেস 6.0, অথবা আমার অন্যান্য টিউটোরিয়াল দেখুন!

Pinterest উপর এটা পিন করুন