হালনাগাদ: জুন ৪, ২০১৬: ওয়ার্ডপ্রেস ৪.৩ সংস্করণ থেকে কাস্টোমাইযার ব্যবহার করে লগো আপলোডের সুবিধা যোগ করা হয়েছে এবং এই লগোই সাইটের জন্য ফেভিকনের কাজ করে। সুতরাং এই টিউটোরিয়ালটি অনুসরণের আগে নিশ্চিত হয়ে নিন, আপনার সাইটে লগো-সুবিধাটি থাকাসত্ত্বেয় আপনি এটি ব্যবহার করতে চান। ধন্যবাদ।
Grab the Original English version here on WordPress StackExchange
জ্ঞানস্তর: প্রাথমিক/মাধ্যমিক স্তর
সময়: ৫ মিনিট
ফেভিকন (favicon) হলো ওয়েবসাইটের একটা সংক্ষিপ্ততম পরিচিতি বা ব্র্যান্ডিং, যা, আপনি ওয়েবসাইট খুললে ব্রাউযারের ট্যাবে কিংবা টাইটেল বারে, ওয়েবসাইটের নামের পাশে দেখা যায়। সাধারণত ওয়েবসাইটের লগো’র ছোট্ট রূপটাই ফেভিকন হিসেবে ব্যবহার করতে দেখা যায়, তবে এক্ষেত্রে ফেভিকনটা সম্পূর্ণই আপনার ব্যক্তিগত পছন্দ – যা ইচ্ছা তা হতে পারে। কোনো ওয়েবসাইটে ফেভিকন যুক্ত করার জন্য HTML <head> ট্যাগের ভিতর নিচের লাইনটি লিখতে হয়, আর যথাস্থানে .ico (Icon) এক্সটেনশানের একটা ইমেজ ফাইল রাখতে হয়:
<link rel="shortcut icon" href="images/favicon.ico" />
ওয়ার্ডপ্রেস ওয়েবসাইটেও একইভাবে ফেভিকন যুক্ত করা যায়, তবে ওয়ার্ডপ্রেসে ফাইলের পাথ (মানে কোথায় ফাইলটি আছে) বোঝানো একটু অন্যরকম, তাছাড়া সর্বত্র ফেভিকনকে দেখানোর বিষয়টিও আমরা এখানে আলোচনা করতে যাচ্ছি।
প্রথমত জেনে নেয়া দরকার, আপনি এই কাজটি থিম কিংবা প্লাগইন উভয় পদ্ধতিতেই করতে পারেন – আমরা উভয় পদ্ধতিই আলোচনা করছি:
প্রস্তুতি
যে ছবিটিকে ফেভিকন হিসেবে দেখাতে চান, তা নির্বাচন করুন, এবং যেকোনো ছবি এডিট করার টুল (যেমন: পেইন্ট, ফটোশপ, গিম্প ইত্যাদি) দিয়ে ছবিটিকে 16px × 16px কিংবা 32px × 32px-এ সংরক্ষণ করুন। ছবির ফাইলটি .jpg (JPEG), .png (PNG), .gif (GIF) ইত্যাদি যেকোনো ফর্মেটেরই হতে পারে। তবে ব্যাকগ্রাউন্ডহীন ছবি হলে .png-তে সংরক্ষণ করতে হবে।
ফাইলটিকে রিনেম করুন, এবং এক্সটেনশানটা বদলে .ico করে ফেলুন। ধরা যাক আপনার ছবিটি ছিল favicon.png, এবারে তা হয়ে গেল favicon.ico।
ব্যস, প্রস্তুতি শেষ। এবারে কাজে নামার পালা।
থিম-এর মাধ্যমে ফেভিকন যোগ
স্ট্যাটিক বা স্থির কোড
থিম তৈরি করার সময় থিমের images ফোল্ডারের ভিতর ফেভিকন আইকন ফাইলটি রেখে, থিমের হেডারে <head> ট্যাগের ভিতর উপরের কোডটি বসিয়ে দিলেই কাজটা হয়ে যাবে। তবে কোডটিতে একটু পরিবর্তন করে নিতে হবে:
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" />
লক্ষ করুন এখানে get_template_directory_uri()ব্যবহার করা হয়েছে। ওয়ার্ডপ্রেসে থিমের ফোল্ডারটির পাথ সনাক্ত করাবার জন্য এটি ব্যবহার করা হয়ে থাকে। আপনি যদি চাইল্ড থিম নিয়ে কাজ করেন, তাহলে এক্ষেত্রে get_stylesheet_directory_uri()-এর ব্যবহার করুন।
আপনার ফেভিকনটি সাইটের ফ্রন্টএন্ডে দেখা যাবে, কিন্তু অ্যাডমিন প্যানেলে দেখা যাবে না। তাই আমরা একটি ডায়নামিক কোড লিখতে যাচ্ছি, যা দিয়ে আমরা, উপরের কোডটি ব্যবহার না করেই, সাইটের ফ্রন্টএন্ড এবং ব্যাকএন্ডে ফেভিকন লোড করতে পারবো।
ডায়নামিক কোড
ওয়ার্ডপ্রেস থিমের হেডারের <head> সেকশনে wp_head()-এর ব্যবহার উত্তম, এবং একটি আধুনিক পদ্ধতি – অনেক প্লাগইনই এর হুকটা ব্যবহার করে প্রয়োজনীয় কোড লোড করে। আপনার থিমে এই হুকটা যদি হেড সেকশনে বসানো থাকে, তাহলে থিমের functions.php ফাইলে নিচের কোডটি বসাতে হবে:
এখানে আমরা একটা ফাংশনের ভিতরে আমাদের আগের স্ট্যাটিক কোডটাই লিখেছি। তারপর add_action() দিয়ে দুটো আলাদা জায়গায় হুক করেছি, পাশের কমেন্ট দেখে আপনারা বুঝতে পারছেন, কোন হুকটা দিয়ে আমাদের ফেভিকনটা কোথায় চলে যাচ্ছে – তবু বলে দিচ্ছি, প্রথম অ্যাকশন দিয়ে wp_head() হুকের মাধ্যমে সাইটের ফ্রন্টএন্ডে ফেভিকনটা দেখা যাবে, আর দ্বিতীয়টার ব্যবহারে সাইটের ব্যাকএন্ডেও ফেভিকনটা দেখা যাবে।
রেফারেন্স লিংক:
get_template_directory_uri()– ওয়ার্ডপ্রেস কোডেক্স^get_stylesheet_directory_uri()– ওয়ার্ডপ্রেস কোডেক্স^
প্লাগইন-এর মাধ্যমে ফেভিকন যোগ
কখনও কখনও এমনও তো হতে পারে, আপনার সাইটের থিম পরিবর্তন করা লাগতে পারে। এক্ষেত্রে ধরা যাক আপনার ফেভিকনটা পরিবর্তন হচ্ছে না, তখন কিন্তু আগের থিমের সাথে আপনার ফেভিকনের কোডটাও চলে যাচ্ছে, অর্থাৎ সাইটে ফেভিকন নিষ্ক্রীয় হয়ে যাচ্ছে। এই সমস্যা দূর করতে আমরা আমাদের সাইটে ফেভিকন, একটা প্লাগইন ব্যবহার করেও দেখাতে পারি।
এজন্য শুরুতেই একটা নিজস্ব প্লাগইন^ বানিয়ে নিতে পারি। কোড এডিটর খুলে নিচের কোডগুলো লিখুন:
লক্ষ করুন, এখানে আমরা আগের ফাংশনটার বদলে plugins_url() ফাংশনটা ব্যবহার করেছি, কারণ আমরা প্লাগইনের ভিতরে আমাদের আইকন ফাইলটি রাখতে যাচ্ছি। এবারে ফাইলটি ধরা যাক my-favicon.php লিখে সংরক্ষণ করলাম। ফাইলটা একটা my-favicon নামক একটা ফোল্ডারে রেখে আমাদের favicon.ico ফাইলটি ঐ ফোল্ডারে রাখি। এবারে এই পুরো ফোল্ডারটি wp-content/plugins ফোল্ডারের ভিতর পেস্ট করি। তাহলে ব্যাপারটা যা দাঁড়ালো:
wp-content/ plugins/ my-favicon/ -my-favicon.php -favicon.ico
এখন আপনার ওয়ার্ডপ্রেস অ্যাডমিন প্যানেলের প্লাগইন্স পাতায় (সাধারণত /wp-admin/plugins.php) গিয়ে My Favicon নামক প্লাগইনটি অ্যাক্টিভেট বা সক্রীয় করুন।
ব্যস, এবার আপনার সাইটের ফ্রন্টএন্ড এবং ব্যাকএন্ডে উপভোগ করুন ফেভিকন!
রেফারেন্স লিংক:
বোনাস – অ্যাপল টাচ আইকন যোগ!
অ্যাপলের মোবাইল (আইফোন) কিংবা আইপ্যাডে অ্যাপল টাচ আইকন দেখা যায়, যা আপনার সাইটের প্রতিনিধিত্ব করবে অনেকটা ফেভিকনের মতো। যদিও ফেভিকন এবং অ্যাপল টাচ আইকন ভিন্ন বিষয়, তবু এদের পদ্ধতিটা যেহেতু এক, তাই বিষয়টা এখানেই আলোচনা করা হলো:
ফেভিকন যেখানে ১৬-১৬ কিংবা ৩২-৩২ ডাইমেনশনে তৈরি করা হয়েছিল, অ্যাপল টাচ আইকনটা সেখানে তৈরি করতে হবে 129px × 129px ডাইমেনশনে, তবে ফাইলটা .png হলেও সমস্যা নেই। এবারে আগের কোডের মতোই হবে এবারের কোডটিও, লিখতে হবে:
বাকিটা এবারে আপনিও পারবেন ইনশাল্লাহ। 🙂
এই অংশটির জন্য helgatheviking^-কে ধন্যবাদ (মূল উৎস^)।
-মঈনুল ইসলাম
🔗 mayeenulislam.github.io
______________________________
পুরো টিউটোরিয়ালটা আগে, ইংরেজিতে প্রকাশ করেছিলাম StackExchange-এর WordPress Development প্রশ্নোত্তর সাইটে ১৬ মার্চ ২০১৪ তারিখে। (মূল লিংক^)
