ওয়ার্ডপ্রেস পোস্ট এডিটরে কাস্টম স্টাইল অপশন যোগ করার পদ্ধতি

ওয়ার্ডপ্রেসে পোস্ট এডিটর, এর নামের মতো, পোস্ট এবং কন্টেন্ট এডিট করার জন্য তৈরি। ডিফল্টরূপে, এটি আপনাকে কাস্টম CSS ক্লাস যোগ করার অনুমতি দেয় না। আপনি যদি কাস্টম CSS স্টাইল বা ক্লাস যোগ করতে চান, তবে একমাত্র উপায় হলো "Text" মোডে স্যুইচ করে HTML কোডে যোগ করা।

যেহেতু ওয়ার্ডপ্রেস খুব কাস্টোমাইজেবল, তাই আপনার জীবন সহজ করার জন্য ওয়ার্ডপ্রেস পোস্ট এডিটরে কাস্টম স্টাইল অপশন যোগ করার উপায় রয়েছে। এই কাস্টম অপশন ব্যবহার করে, আপনি মাত্র কয়েক ক্লিকে CSS স্টাইল প্রয়োগ করতে পারবেন। আপনাকে আর টেক্সট মোডে স্যুইচ করতে হবে না বা আপনার পোস্টগুলোকে সুন্দর করতে যেসব CSS ক্লাস লাগে সেগুলো মনে রাখতে হবে না।

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

নোট: আগে যাওয়ার আগে, আমি অনুমান করছি আপনি বেসিক HTML এবং CSS জানেন এবং CSS ক্লাস, ব্লক লেভেল এলিমেন্ট, HTML এলিমেন্ট, অ্যাট্রিবিউট, ইত্যাদি বুঝতে পারেন।

১. প্লাগইন ব্যবহার করে

ওয়ার্ডপ্রেস পোস্ট এডিটরে কাস্টম স্টাইল অপশন যোগ করার সবচেয়ে সহজ উপায় হলো TinyMCE Custom Styles নামে একটি প্লাগইন ব্যবহার করা।

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

১. শুরুতে, TinyMCE Custom Styles যেকোনো অন্য ওয়ার্ডপ্রেস প্লাগইন처럼 ডাউনলোড, ইনস্টল এবং এক্টিভেট করুন। এক্টিভেট করার পর, প্লাগইন সেটিংস পেজে যান "Settings -> TinyMCE Custom Styles" নেভিগেট করে।

২. শুরুতেই, প্লাগইন একটি এরর মেসেজ দেখাবে যেটি জিজ্ঞাসা করবে আপনি কোথায় এডিটর স্টাইলশিট ফাইল রাখতে চান। আপনার থিমের উপর নির্ভর করে, আপনি তিনটি অপশনের মাঝে বেছে নিতে পারেন। সেই অপশনগুলো ভালোভাবে পড়ুন, এবং আপনার জন্য উপযুক্ত olanটি বেছে নিন। আমার কেসে আমি দ্বিতীয় অপশন বেছে নিয়েছিলাম কারণ আমি একটি কাস্টম Genesis চাইল্ড থিম ব্যবহার করছি। "Save all Settings" বাটনে ক্লিক করুন পরিবর্তনগুলো সেভ করার জন্য।

৩. নিচে স্ক্রোল করুন এবং "Add new style" বাটনে ক্লিক করুন। এখন, স্টাইলের নাম দিন, একটি টাইপ সিলেক্ট করুন (inline, block, বা selector), টাইপ ভ্যালু দিন, এবং তারপর CSS ক্লাস দিন।

৪. দাহिनी দিকের শেষে ভুলবেন না সিলেক্ট করতে যে এলিমেন্টটি "Wrapper" কিনা। আপনি এই অপশন সিলেক্ট করলে, স্টাইলটি পোস্ট এডিটরে সিলেক্ট করা ব্লক-লেভেল এলিমেন্টের চারদিকে একটি নতুন ব্লক-লেভেল এলিমেন্ট তৈরি করবে।

৫. আপনি চাইলে সরাসরি কাস্টম CSS স্টাইলও যোগ করতে পারেন "CSS Styles" ক্যাটেগরির নিচে "Add new style"-এ ক্লিক করে। যাইহোক, আমি রিকমেন্ড করছি সেই স্টাইলগুলো "editor-style.css" ফাইলে যোগ করতে যেটি আপনার থিম ডিরেক্টরিতে অবস্থিত (আপনি যদি দ্বিতীয় অপশন বেছে নেন আমার মত সেকেন্ড স্টেপে)। এতে ম্যানেজ করা সহজ হয়।

৬. একবার হলে, পেজের শেষে "Save all settings" বাটনে ক্লিক করুন।

৭. এটাই সব। এখন থেকে আপনি পোস্ট এডিটরে "Formats" নামে একটি নতুন ড্রপডাউন মেনু দেখবেন। সেটিতে আপনি নতুন যোগ করা কাস্টম স্টাইল অপশন পাবেন অন্যান্য প্রি-কনফিগারডদের পাশে। স্টাইলটি ব্যবহার করতে, শুধু সেটিতে ক্লিক করুন, এবং প্রয়োজনীয় CSS কোড অটোমেটিক্যালি পোস্ট এডিটরে যোগ হয়ে যাবে। আপনি টেক্সট মোডে সেটি দেখতে পারবেন।

৮. আপনি যদি editor-style.css ফাইলে প্রয়োজনীয় স্টাইলগুলো যোগ করে থাকেন, তবে ড্রপডাউন মেনু থেকে স্টাইল অপশন ব্যবহার করলে সেগুলো পোস্ট এডিটরে রিয়েল-টাইমে রিফ্লেক্ট হবে।

ভবিষ্যতে আপনি যদি প্লাগইনটি ডিজেবল বা রিমুভ করেন, তবে এডিটর স্টাইলশিট ডিলিট হবে না। যাইহোক, আপনি পোস্ট এডিটরে কাস্টম অপশনগুলোর অ্যাক্সেস পাবেন না।

২. ম্যানুয়াল মেথড

আপনি যদি প্লাগইন ব্যবহার করতে চান না, তবে আপনি একই জিনিস অর্জন করতে পারেন আপনার "functions.php" ফাইলে একটি সিম্পল কোড স্নিপেট যোগ করে। এটোর দুটি পার্ট রয়েছে: একটি হলো টুলবারে CSS কোড ইন্সার্ট করার বাটন যোগ করা, এবং দ্বিতীয়টি হলো পোস্ট এডিটরে CSS স্টাইল লাইভ রাখা।

টুলবারে কাস্টম CSS স্টাইল বাটন যোগ করা

নিচের কোডটি আপনার "functions.php" ফাইলের শেষে যোগ করুন। এই কোডটি আসলে ওয়ার্ডপ্রেস নিজে প্রদান করে।

// Callback function to insert 'styleselect' into the $buttons array function my_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons; } // Register our callback to the appropriate filter add_filter( 'mce_buttons_2', 'my_mce_buttons_2' ); // Callback function to filter the MCE settings function my_mce_before_init_insert_formats( $init_array ) { // Define the style_formats array $style_formats=array( // Each array child is a format with it's own settings array( 'title' => '.translation', 'block' => 'blockquote', 'classes' => 'translation', 'wrapper' => true, ), array( 'title' => '⇠.rtl', 'block' => 'blockquote', 'classes' => 'rtl', 'wrapper' => true, ), array( 'title' => '.ltr⇢', 'block' => 'blockquote', 'classes' => 'ltr', 'wrapper' => true, ), ); // Insert the array, JSON ENCODED, into 'style_formats' $init_array['style_formats'] = json_encode( $style_formats ); return $init_array; } // Attach callback to 'tiny_mce_before_init' add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

আপনাকে কোডটি কাস্টোমাইজ করতে হবে আপনার স্টাইল অপশন রিফ্লেক্ট করার জন্য। উপরের কোডে প্রতিটি অ্যারে একটি আলাদা স্টাইল অপশন। আপনার স্টাইল টাইটেল দিন "title"-র পাশে, ব্লক টাইপ দিন "block"-এর পাশে, CSS ক্লাস দিন "classes"-এর পাশে, এবং যদি এলিমেন্টটি একটি র‍্যাপার হয়, "true" টাইপ করুন "wrapper"-এর পাশে। যদি না হয়, "false" টাইপ করুন।

আপনি যেকোনো সময় একটি নতুন স্টাইল অপশন যোগ করতে চান, শুধু অ্যারেটি ডুপ্লিকেট করুন এবং ফিল্ডগুলো মডিফাই করুন। আমার কেসে আমি প্রথম অ্যারেটি পপুলেট করেছি আমার "Blue Button" অপশন রিফ্লেক্ট করার জন্য।

কাস্টোমাইজেশন সম্পূর্ণ হলে, সংশোধিত "functions.php" ফাইলটি সেভ করুন এবং আপনার সার্ভারে আপলোড করুন।

এডিটর স্টাইলশিট তৈরি করা

"editor-style.css" নামে একটি ফাইল তৈরি করুন। এখন, আপনি পোস্ট এডিটরে দেখতে চান সেই প্রাসঙ্গিক CSS স্টাইলগুলো যোগ করুন। ভুলবেন না যে "editor-style.css" ফাইলে আপনি যে CSS ক্লাসগুলো তৈরি করছেন সেগুলো উপরের স্টাইল অপশন কোডের CSS ক্লাসের সাথে মেলে।

এখন, আপনার থিমের "functions.php" ফাইলটি খুলুন এবং নিচের কোডটি যোগ করুন।

//Add custom editor stylesheet function mte_add_editor_styles() { add_editor_style( 'editor-style.css' ); } add_action( 'init', 'mte_add_editor_styles' );

"editor-style.css" এবং "functions.php" উভয় ফাইল আপনার সার্ভারে আপলোড করুন। এটাই সব করতে আছে। এখন থেকে আপনি ওয়ার্ডপ্রেস পোস্ট এডিটর থেকে কাস্টম স্টাইল অপশন ব্যবহার করতে পারবেন।

আপনি রিয়েল-টাইমে স্টাইল প্রয়োগ হওয়া দেখতে পারেন।

উপরের মেথডগুলো ব্যবহার করে ওয়ার্ডপ্রেস পোস্ট এডিটরে কাস্টম স্টাইল অপশন যোগ করার বিষয়ে আপনার মতামত এবং অভিজ্ঞতা কমেন্টে শেয়ার করুন।