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

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

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

ওয়ার্ডপ্রেস পোস্ট এডিটরে আপনি কাস্টম স্টাইল বিকল্প যোগ করতে পারেন এমন কয়েকটি উপায় রয়েছে। প্রথমটি একটি বিনামূল্যের প্লাগইন ব্যবহার করা, এবং দ্বিতীয়টি একটি কোড স্নিপেট যোগ করা। উভয় পদ্ধতিই একইভাবে কাজ করে, তাই আপনি যেটির সাথে স্বাচ্ছন্দ্য বোধ করেন সেটি অনুসরণ করুন৷

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

1. একটি প্লাগইন ব্যবহার করে

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

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

1. শুরু করার জন্য, অন্য যেকোনো ওয়ার্ডপ্রেস প্লাগইনের মতো TinyMCE কাস্টম স্টাইল ডাউনলোড, ইনস্টল এবং সক্রিয় করুন। সক্রিয় করার পরে, "সেটিংস -> TinyMCE কাস্টম স্টাইল" এ নেভিগেট করে প্লাগইন সেটিংস পৃষ্ঠাতে যান৷

2. ব্যাট থেকে ডানদিকে, প্লাগইনটি একটি ত্রুটি বার্তা প্রদর্শন করবে যেখানে আপনি সম্পাদক স্টাইলশীট ফাইলটি রাখতে চান তা চয়ন করতে জিজ্ঞাসা করবে৷ আপনার থিমের উপর নির্ভর করে, আপনি তিনটি বিকল্পের মধ্যে বেছে নিতে পারেন। এই বিকল্পগুলি সাবধানে পড়ুন এবং আপনার জন্য উপযুক্ত একটি বেছে নিন। আমার ক্ষেত্রে আমি দ্বিতীয় বিকল্পটি বেছে নিয়েছি কারণ আমি একটি কাস্টম জেনেসিস চাইল্ড থিম ব্যবহার করছি। পরিবর্তনগুলি সংরক্ষণ করতে "সমস্ত সেটিংস সংরক্ষণ করুন" বোতামে ক্লিক করুন৷

3. নীচে স্ক্রোল করুন এবং "নতুন শৈলী যোগ করুন" বোতামে ক্লিক করুন৷ এখন, শৈলীর নাম লিখুন, একটি প্রকার নির্বাচন করুন (যেমন, ইনলাইন, ব্লক বা নির্বাচক), টাইপ মান লিখুন এবং তারপরে CSS ক্লাস।

4. ডানদিকের উপাদানটি "র্যাপার" বা না হলে নির্বাচন করতে ভুলবেন না৷ আপনি যদি এই বিকল্পটি নির্বাচন করেন, তাহলে স্টাইলটি পোস্ট সম্পাদকে নির্বাচিত ব্লক-স্তরের উপাদানের চারপাশে একটি নতুন ব্লক-লেভেল উপাদান তৈরি করবে।

5. আপনি চাইলে "CSS শৈলী" বিভাগের অধীনে প্রদর্শিত "অ্যাড নিউ স্টাইল" এ ক্লিক করে সরাসরি কাস্টম CSS শৈলী যোগ করতে পারেন। যাইহোক, আমি আপনাকে আপনার থিম ডিরেক্টরিতে অবস্থিত "editor-style.css" ফাইলে সেই শৈলীগুলি যোগ করার পরামর্শ দিই (যদি আপনি দ্বিতীয় ধাপে আমার মতো দ্বিতীয় বিকল্পটি নির্বাচন করেন)। এটি পরিচালনা করা সহজ করে তোলে৷

6. আপনার হয়ে গেলে, পৃষ্ঠার শেষে প্রদর্শিত "সব সেটিংস সংরক্ষণ করুন" বোতামে ক্লিক করুন৷

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

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

ভবিষ্যতে আপনি প্লাগইন নিষ্ক্রিয় বা মুছে ফেললে, সম্পাদক স্টাইলশীট মুছে ফেলা হবে না। যাইহোক, আপনি আর পোস্ট সম্পাদকে কাস্টম বিকল্পগুলি অ্যাক্সেস করতে পারবেন না৷

2. ম্যানুয়াল পদ্ধতি

আপনি যদি একটি প্লাগইন ব্যবহার করতে পছন্দ না করেন, তাহলে আপনি আপনার "functions.php" ফাইলে একটি সাধারণ কোড স্নিপেট যোগ করে একই জিনিস অর্জন করতে পারেন। এর দুটি অংশ রয়েছে:একটি হল সিএসএস কোড সন্নিবেশ করার জন্য টুলবারে বোতাম যোগ করার জন্য এবং দ্বিতীয়টি হল পোস্ট এডিটরে 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' );

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

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

আপনার কাস্টমাইজেশন শেষ হয়ে গেলে, আপনার সার্ভারে সংশোধিত "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" ফাইল উভয়ই আপলোড করুন৷ এটিই করার আছে। এখন থেকে আপনি ওয়ার্ডপ্রেস পোস্ট এডিটর থেকে কাস্টম স্টাইল বিকল্পগুলি ব্যবহার করতে পারেন৷

আপনি বাস্তব সময়ে প্রয়োগ করা শৈলী দেখতে পারেন৷

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