কিভাবে ওয়ার্ডপ্রেসে একটি স্টিকি ফুটার তৈরি করবেন — গভীরতার নির্দেশিকা

ওয়ার্ডপ্রেসের মধ্যে স্টিকি উপাদান তৈরি করার জন্য অনেক পদ্ধতি রয়েছে। বেশিরভাগই কাস্টম সিএসএসের সাথে জগাখিচুড়ি বা জটিল তৃতীয় পক্ষের পৃষ্ঠা নির্মাতা বা সম্পূর্ণ ওয়েবসাইট নির্মাতাদের ব্যবহার করে।

এবং তাদের বেশিরভাগই এই উন্নত বৈশিষ্ট্যগুলিকে প্রিমিয়াম অ্যাড-অন হিসাবে লেবেল করে একটি ফি চার্জ করবে৷

কিছু জটিল বলে মনে হচ্ছে, এর মানে এই নয় যে এটি হওয়া দরকার।



কিভাবে ওয়ার্ডপ্রেসে একটি স্টিকি ফুটার তৈরি করবেন

WP-তে একটি স্টিকি ফুটার বার যুক্ত করা দুটি প্লাগইন হল ফিক্সড বটম মেনু এবং WPFront নোটিফিকেশন বার। আপনি কাজটি সম্পন্ন করতে কাস্টম CSS ব্যবহার করতে পারেন। প্রিমিয়াম থিমগুলিতে 'এলিমেন্ট হুক' থাকতে পারে যা একটি স্টিকি ফুটার তৈরি করতে ব্যবহার করা যেতে পারে। অসীম স্ক্রলের কাছাকাছি যেতে, ফুটার উইজেট বিষয়বস্তু সাইডবারে স্থানান্তর করুন।

কিভাবে ওয়ার্ডপ্রেসের জন্য একটি স্টিকি মোবাইল বটম মেনু তৈরি করবেন

KISS নীতি প্রয়োগ করুন। কিপ ইট সিম্পল, স্টুপিড।

ফিক্সড বটম মেনু প্লাগইন ইনস্টল এবং সক্রিয় করুন

সব পরে, একটি নির্দিষ্ট ফুটার কি? এটি একটি নির্দিষ্ট নীচের মেনু।

ফিক্সড বটম মেনু প্লাগইন দিয়ে শুরু করুন।

এই প্লাগইনটি আপনাকে আপনার পৃষ্ঠাগুলির নীচে তিন থেকে পাঁচটি লিঙ্ক যুক্ত করতে দেয়৷ যেভাবেই হোক ছোট পর্দার ডিভাইসগুলির জন্য এটি সর্বাধিক ব্যবহার করা উচিত।

আর কোন কিছু নেভিগেশন কঠিন করে তুলবে.

একবার সক্রিয় হয়ে গেলে, ফিক্সড বটম মেনু লেবেলটি বাম সাইডবারে আপনার 'সেটিংস' মেনুতে যোগ করা হয়।

আপনার নীচের মেনু কনফিগার করতে সেটিংস পৃষ্ঠায় যেতে মেনু আইটেমটিতে ক্লিক করুন।

যেহেতু এটি ছোট পর্দার জন্য হবে, আপনার আইকনগুলির প্রয়োজন হবে৷ কয়েকটি অপশন আছে।

আপনি একটি আইকন-সংযোজন প্লাগইনে আপগ্রেড করতে পারেন, বা বিনামূল্যের উত্সগুলিতে যেতে লিঙ্কগুলিতে ক্লিক করতে পারেন৷ Google Fonts এবং Font Awesome লিঙ্ক করা আছে। সমস্ত Google ফন্ট বিনামূল্যে এবং ওপেন সোর্স।

বিকল্পভাবে, ওয়ার্ডপ্রেসের জন্য ইতিমধ্যেই কোড করা Dashicons-এর সাথে লেগে থাকুন।

একবার আপনি আপনার লিঙ্কগুলি সেট করলে, আরও নীচে স্ক্রোল করুন এবং সর্বাধিক স্ক্রীন প্রস্থ 760px এ কমিয়ে দিন। আপনি ছোট যেতে পারেন.

এই স্ক্রিনের আকার সামঞ্জস্য করার কারণ হল যাতে নির্দিষ্ট মেনু শুধুমাত্র মোবাইল এবং ট্যাবলেটগুলিতে দেখায়৷

ডেস্কটপে (আপনার থিমে সাইডবার থাকলে) নেভিগেশন লিঙ্কগুলি দৃশ্যমান হবে। স্ক্রিনে ফুটার বার ঠিক করার সুবিধা হল স্থায়ী নেভিগেশন বোতাম সক্রিয় করা।


কীভাবে একটি স্টিকি ফুটার নোটিফিকেশন বার তৈরি করবেন

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

WPFront নোটিফিকেশন বার প্লাগইন ব্যবহার করুন

ব্যবহার করার জন্য এই প্লাগইনের অংশটি হল পজিশন ফিক্সিং।

ভাসমান ফুটার বার সক্ষম করতে, নীচের অবস্থানে বারটি ঠিক করার বিকল্পটি নির্বাচন করুন৷

  1. সক্রিয় ক্লিক করুন
  2. 'শীর্ষ' থেকে 'নীচে' অবস্থান পরিবর্তন করুন।
  3. 'স্থির অবস্থানে' সক্ষম করতে বাক্সটি চেক করুন যা এটিকে স্ক্রিনের নীচে ঠিক করে।
  4. ডিভাইসগুলিতে প্রদর্শন করুন: আপনি যদি বারটি শুধুমাত্র ফোন এবং ট্যাবলেটগুলিতে প্রদর্শন করতে চান তবে 'ছোট ডিভাইসগুলি' নির্বাচন করুন৷ সমস্ত ডিভাইসের জন্য এটি সক্ষম করা হলে তা ডেস্কটপেও স্টিকি ফুটার দেখাবে।
  5. টেক্সট এলাকায় আপনার বার্তা টাইপ করুন যা আপনি ফুটার বারে প্রদর্শন করতে চান।

উদাহরণ স্বরূপ,

ম্যানেজার স্পেশাল: হাতে-নির্বাচিত পণ্যে 25% ছাড়। ডিল দেখুন.

'ডিল দেখুন' পাঠ্যটি একটি বোতামের মধ্যে স্থাপন করা যেতে পারে যা আপনার সাইটে বিক্রয় পৃষ্ঠা বা ডিল বিভাগের সাথে লিঙ্ক করে।

সিএসএস দিয়ে ওয়ার্ডপ্রেস পৃষ্ঠাগুলির নীচে WP ফুটারটি কীভাবে ঠিক করবেন

আপনার ফুটার টেক্সট প্রদর্শনের জন্য বেশিরভাগ ওয়ার্ডপ্রেস থিমে ইতিমধ্যেই ফুটার মেনু বা উইজেট এলাকা রয়েছে।

তাদের জন্য, আপনি প্রতিটি পৃষ্ঠার নীচে ফুটার ঠিক করতে আপনার থিম কাস্টমাইজারে CSS-এর একটি ব্লক যোগ করতে পারেন।

এটি করার জন্য কোড হল:

.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}

রং, মাপ, এবং টেক্সট প্রান্তিককরণ প্রতিটি আপনার পছন্দ অনুসারে পরিবর্তন করা যেতে পারে।

কিভাবে WooCommerce ইন্টিগ্রেশনের মাধ্যমে মোবাইলের জন্য একটি স্টিকি ফ্লোটিং বার তৈরি করবেন

এটির জন্য আপনার ওয়ার্ডপ্রেস থিমকে ওয়ার্ডপ্রেস হুক ব্যবহার করার জন্য কোড করা প্রয়োজন।

বেশির ভাগ থিম যেগুলি চাইল্ড থিমের একাধিক পছন্দের সাথে একটি ফ্রেমওয়ার্ক প্রদান করে সেগুলি সাধারণত বেশি হুকযুক্ত হয়৷

আপনি যে থিমটি ব্যবহার করছেন না কেন, তাদের ওয়েবসাইটে 'ভিজ্যুয়াল হুকের নির্দেশিকা' বা অনুরূপ কিছুর জন্য থিম ডকুমেন্টেশন দেখুন।

আপনার থিমকে সমর্থন করার জন্য যে ওয়ার্ডপ্রেস হুক প্রয়োজন তা হল 'ফুটার-আফটার' বা 'আফটার-ফুটার'।

আপনি যা চান তা হল ফুটারটি লোড হওয়ার পরে, কিন্তু HTML শেষ হওয়ার আগে একটি উপাদানের জন্য থিমটি কোড করা হোক।

কিছু থিম এই ফাংশন সমর্থন করে না.

  • জেনেসিস ফ্রেমওয়ার্ক করে, যা আশ্চর্যজনক নয় কারণ তাদের কাঠামোতে 50 টিরও বেশি হুক রয়েছে।
  • অ্যাস্ট্রা থিমে 'অস্ট্রা_ফুটার_আফটার' ফাংশনও রয়েছে।
  • Divi থিম এটি সমর্থন করে না।
  • Kadence থিম করে, কিন্তু শুধুমাত্র প্রো সংস্করণে।

প্রথমে আপনার থিমটি পরীক্ষা করুন কারণ এটি শুধুমাত্র হুকগুলির জন্য ইতিমধ্যে কোড করা থিমের ক্ষেত্রে প্রযোজ্য।

বিভিন্ন ওয়ার্ডপ্রেস থিমগুলিতে হুকগুলি কোথায় নিবন্ধন করতে হবে তা জানা কঠিন তাই আপনার যদি উপাদান হুকগুলি সমর্থন করে এমন একটি থিম না থাকে তবে এটি করার চেষ্টা করুন৷

আইকন সহ কাস্টম URL-এর সেটআপ একই সেটআপ যা আপনি ফিক্সড বটম মেনু প্লাগইনের জন্য ব্যবহার করবেন৷

  • একটি 3-কলাম লেআউট সন্নিবেশ করান
  • প্রতিটি কলামের জন্য একটি আইকন যোগ করুন
  • আপনি যে পৃষ্ঠাগুলিতে যেতে চান সেগুলিতে আইকনগুলিকে লিঙ্ক করুন৷

যদি আপনার থিম হুকগুলিকে সমর্থন করে, তাহলে আপনি মোবাইল স্টিকি ফুটারে যোগ করতে যে কোড স্নিপেট ব্যবহার করতে পারেন তা হল...

add_action( '[insert_theme-name]_after_footer', '[insert_theme-name]_sticky_mobile_bottom_bar', 20 );
function [insert_theme-name]_sticky_mobile_bottom_bar() {
echo do_shortcode( "[reblex id='####']" );
}

যেখানে উপরের কোডের মধ্যে 'ইনসার্ট থিমের নাম' আছে, সেখানে আপনার থিমের জন্য আফটার ফুটার কোড স্নিপেট দিয়ে প্রতিস্থাপন করুন।

Kadence থিমের জন্য, এটি হবে kadence_after-footer, Astra থিমের জন্য, এটি astra_after-footer এবং জেনেসিস ফ্রেমওয়ার্কের জন্য, কোডটি genesis_after_footer।

কিভাবে অসীম স্ক্রোল ব্যবহার করে একটি WP থিমে একটি স্টিকি ফুটার তৈরি করবেন

অসীম স্ক্রোল ব্যবহার করে এমন থিমগুলির জন্য, লোড করার জন্য আর কোন বিষয়বস্তু না হওয়া পর্যন্ত ফুটারটি কখনই লোড হবে না৷

একটি সমাধান হল টুইটার যে পদ্ধতিটি করেছে তা গ্রহণ করা, যা ফুটার উইজেটটিকে সাইডবারে সরানো।

আপনার সাইডবারে আপনি ফুটারে যে বিষয়বস্তুটিকে শেষ উইজেট হতে চান তা সরানোর মাধ্যমে এবং এটিকে 'স্টিকি' করার মাধ্যমে এটি দৃশ্যমান থাকে তা নিশ্চিত করে৷

ওয়ার্ডপ্রেসের জন্য Q2W3 ফিক্সড উইজেট ব্যবহার করুন

এটি আপনাকে সাইডবারে যেকোনো কিছু সরাতে এবং এটি দৃশ্যমান রাখতে দেয়।

প্লাগইনগুলিতে যান > নতুন যোগ করুন > ওয়ার্ডপ্রেসের জন্য Q2W3 ফিক্সড উইজেট অনুসন্ধান করুন।

থমাস মায়ার, ম্যাক্স বন্ড দ্বারা ইনস্টল এবং সক্রিয় করার জন্য একটি।

একবার ইনস্টল হয়ে গেলে, আপনি যখন আপনার উইজেট বিভাগে যান, একটি নতুন চেক বক্স প্রদর্শিত হবে যা আপনি একটি 'স্থির উইজেট' তৈরি করতে নির্বাচন করতে পারেন।

যেকোনো উইজেট ঠিক করা যায়। যাইহোক, উইজেটগুলিকে ওভারল্যাপ করা থেকে আটকাতে যে কোনও বিভাগে শুধুমাত্র শেষ উইজেটটি ঠিক করুন।

পৃষ্ঠাগুলির একটি নির্বাচিত সংখ্যা অন্তর্ভুক্ত করতে, পৃষ্ঠাগুলির উইজেটটি ব্যবহার করুন এবং তারপরে 'বাদ' পৃষ্ঠা আইডি ফাংশনটি ব্যবহার করুন যাতে শুধুমাত্র প্রয়োজনীয় পৃষ্ঠাগুলির সংখ্যা দেখানো হয়৷

মনে রাখবেন, দর্শকরা যখন আপনার ফুটারে পৌঁছাবে, তখন তাদের প্রয়োজন হতে পারে এমন কিছু দেখানোর শেষ সুযোগ। আপনার ফুটারে প্রাসঙ্গিক তথ্য অন্তর্ভুক্ত করুন।

… আপনার যোগাযোগের পৃষ্ঠার লিঙ্ক, খোলার সময়, একটি FAQ পৃষ্ঠা, যোগাযোগের তথ্য, ইত্যাদি।

সাইডবারে ফুটার মেনু রাখার কাজটি নিশ্চিত করে যে এটি দেখানোর জন্য শেষ উইজেট এবং একটি নির্দিষ্ট অবস্থানে দৃশ্যমান থাকে।

একটি স্থানীয় ব্যবসায়িক ওয়েবসাইটের জন্য, ফুটারটি SEO এর জন্য আপনার ব্যবসার NAP ডেটা অন্তর্ভুক্ত করার বিভাগও। এটি আপনার ব্যবসার 'নাম, ঠিকানা এবং ফোন নম্বর'।

আপনি যদি আপনার লিঙ্কগুলিকে লিঙ্কগুলির তালিকার পরিবর্তে পাশাপাশি প্রদর্শন করতে চান তবে 'কাস্টম এইচটিএমএল' উইজেট ব্যবহার করুন, তারপর আপনার লিঙ্কগুলিকে ক্লিকযোগ্য করতে এইচটিএমএল ব্যবহার করে ম্যানুয়ালি লিঙ্কগুলি তৈরি করুন৷ এখানে ক্লিকযোগ্য পাঠ্য৷