কিভাবে ওয়ার্ডপ্রেস ভিজ্যুয়াল সম্পাদক একটি শৈলী যোগ করুন

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

দ্রষ্টব্য: এই টিউটোরিয়ালটির জন্য সিএসএসের প্রাথমিক জ্ঞান প্রয়োজন।

যখন আপনি হবে ওয়ার্ডপ্রেস ভিজ্যুয়াল এডিটরটিতে একটি কাস্টম স্টাইল যুক্ত করতে হবে?

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

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

এটি আপনার প্রচুর সময় সাশ্রয় করবে এবং আপনার ওয়েবসাইট জুড়ে সর্বদা একই স্টাইল ব্যবহার করার সুযোগ দেবে।

আরও গুরুত্বপূর্ণ, আপনি নিজের সাইটে নিবন্ধগুলি সম্পাদনা না করে সহজেই শৈলীগুলি সম্পাদনা বা আপডেট করতে পারেন।

আমরা এখন ওয়ার্ডপ্রেসে এটি কীভাবে করব তা আবিষ্কার করব।

এক্সএনএমএক্স পদ্ধতি: একটি প্লাগইন সহ একটি কাস্টম শৈলী যুক্ত করুন

আপনার প্রথমে যা করতে হবে তা হ'ল প্লাগইন ইনস্টল এবং সক্রিয় করা " টিনিএমসিই কাস্টম স্টাইলস "। আরও বিস্তারিত জানার জন্য, ওয়ার্ডপ্রেস প্লাগইন কীভাবে ইনস্টল করবেন সে সম্পর্কে আমাদের ধাপে ধাপে নির্দেশিকাটি দেখুন।

সক্রিয়করণের পরে, আপনাকে অবশ্যই " সেটিংস> সেটিংস »TinyMCE কাস্টম স্টাইল প্লাগইন সেটিংস কনফিগার করতে।

প্লাগইনটি আপনাকে স্টাইলশিট ফাইলগুলির অবস্থান নির্বাচন করতে দেয়। এটি আপনার থিম বা চাইল্ড থিমের স্টাইল ব্যবহার করতে পারে, অথবা আপনি একটি কাস্টম অবস্থান চয়ন করতে পারেন।

এর পরে, আপনাকে বোতামটি ক্লিক করতে হবে " সমস্ত সেটিংস সংরক্ষণ করুন আপনার সেটিংস সঞ্চয় করতে।

এখন আপনি আপনার কাস্টম শৈলী যুক্ত করতে পারেন। আপনাকে স্টাইল বিভাগে স্ক্রোল করতে হবে এবং বোতামটিতে ক্লিক করতে হবে নতুন স্টাইল যুক্ত করুন ».

শৈলীর জন্য আপনাকে প্রথমে একটি শিরোনাম প্রবেশ করতে হবে। এই শিরোনামটি ড্রপ-ডাউন মেনুতে প্রদর্শিত হবে। তারপরে আপনাকে সংজ্ঞা দেওয়া দরকার। এটি একটি সারি, একটি ব্লক বা একটি নির্বাচন উপাদান is

এর পরে একটি সিএসএস ক্লাস যুক্ত করুন এবং তারপরে নীচের স্ক্রিনশটে প্রদর্শিত আপনার সিএসএস বিধি যুক্ত করুন।

আপনি একবার সিএসএস স্টাইল যুক্ত করলে, আপনার পরিবর্তনগুলি সংরক্ষণ করতে "সমস্ত সেটিংস সংরক্ষণ করুন" বোতামটি ক্লিক করুন।

আপনি এখন একটি বিদ্যমান নিবন্ধ সম্পাদনা করতে পারেন বা একটি নতুন নিবন্ধ তৈরি করতে পারেন। ওয়ার্ডপ্রেস ভিজ্যুয়াল এডিটরের দ্বিতীয় সারিতে আপনি ড্রপ-ডাউন মেনুতে একটি বিন্যাস লক্ষ্য করবেন।

সম্পাদকে কেবল একটি পাঠ্য নির্বাচন করুন, তারপরে এটি প্রয়োগ করতে ড্রপ-ডাউন মেনু থেকে আপনার কাস্টম স্টাইলটি চয়ন করুন।

আপনার কাস্টম শৈলীগুলি সঠিকভাবে প্রয়োগ হয় কিনা তা দেখতে আপনি এখন আপনার নিবন্ধের প্রাকদর্শন করতে পারেন।

এক্সএনএমএক্স পদ্ধতি: ভিজ্যুয়াল এডিটরটিতে ম্যানুয়ালি স্টাইল যুক্ত করুন

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

পদক্ষেপ 1: ওয়ার্ডপ্রেস ভিজ্যুয়াল এডিটরের ড্রপ-ডাউন মেনু থেকে একটি কাস্টম শৈলী যুক্ত করুন।

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

আপনাকে অবশ্যই আপনার ফাংশন.এফপি ফাইল বা আপনার প্লাগইনে নিম্নলিখিত কোডটি যুক্ত করতে হবে।

ফাংশন wpb_mce_buttons_2 ($ বোতাম) {অ্যারে_উন্সফট ($ বোতাম, 'স্টাইল নির্বাচন)'; রিটার্ন $ বোতাম; } add_filter ('mce_buttons_2', 'wpb_mce_buttons_2');

পদক্ষেপ 2: কীভাবে ড্রপ-ডাউন মেনুতে বিকল্প যুক্ত করা যায়

আপনার সদ্য নির্মিত ড্রপ ডাউন মেনুতে এখন আপনাকে কয়েকটি বিকল্প যুক্ত করতে হবে। তারপরে আপনি ড্রপ-ডাউন মেনুতে ফর্ম্যাটগুলি থেকে এই বিকল্পগুলি চয়ন করতে এবং প্রয়োগ করতে সক্ষম হবেন।

এই টিউটোরিয়ালের জন্য, আমরা ব্লক সামগ্রী এবং বোতামগুলি তৈরি করতে তিনটি কাস্টম স্টাইল যুক্ত করব।

আপনার ফাংশন.এফপি বা একটি নির্দিষ্ট প্লাগইন এর "ফাংশন.এফপি" ফাইলটিতে আপনাকে নীচের কোডটি যুক্ত করতে হবে।

/ * * কলব্যাক ফাংশন এমসিই সেটিংস ফিল্টার করতে * / ফাংশন my_mce_before_init_insert_formats ($ init_array) {// স্টাইল_ফর্ম্যাট অ্যারে সংজ্ঞায়িত করুন $ স্টাইল_ফর্ম্যাটস = অ্যারে (/ * * প্রতিটি অ্যারে শিশু তার নিজস্ব সেটিংস সহ একটি ফর্ম্যাট * লক্ষ্য করুন যে প্রতিটি অ্যারের শিরোনাম রয়েছে , ব্লক, ক্লাস এবং মোড়ক যুক্তি * শিরোনাম হ'ল লেবেল যা ফর্ম্যাট মেনুতে দৃশ্যমান হবে * ব্লক নির্ধারণ করে যে এটি স্প্যান, ডিভ, নির্বাচক বা ইনলাইন শৈলী কিনা * শ্রেণি আপনাকে সিএসএস শ্রেণি সংজ্ঞায়িত করতে দেয় * আবরণী কিনা যে কোনও নির্বাচিত উপাদানগুলির চারপাশে একটি নতুন ব্লক-স্তর উপাদান যুক্ত করুন * / অ্যারে ('শিরোনাম' => 'সামগ্রী ব্লক', 'ব্লক' => 'স্প্যান', 'শ্রেণি' => 'সামগ্রী-ব্লক', 'মোড়ক' => সত্য,), অ্যারে ('শিরোনাম' => 'নীল বোতাম', 'ব্লক' => 'স্প্যান', 'শ্রেণি' => 'নীল-বোতাম', 'মোড়ক' => সত্য,), অ্যারে ('শিরোনাম') => 'রেড বাটন', 'ব্লক' => 'স্প্যান', 'শ্রেণি' => 'লাল-বোতাম', 'মোড়ক' => সত্য,),); // অ্যারে, JSON এনকোড করা, 'স্টাইল_ ফর্ম্যাটস' $ init_array ['স্টাইল_ফর্ম্যাটস]] = json_encode ($ স্টাইল_ ফর্ম্যাটস) sertোকান; প্রত্যাবর্তন $ init_array; } // কলিংব্যাকটি 'ক্ষুদ্র_মাস_পূর্বক_ইনিত' অ্যাড_ফিল্টার সংযুক্ত করুন ('ক্ষুদ্র_সামনা_পূর্বক_ইনিত', 'আমার_ম্যাস_বরেফর_ইনিট_ইনটার_ফর্ম্যাটস');

আপনি এখন ওয়ার্ডপ্রেসে একটি নতুন পোস্ট যুক্ত করতে পারেন এবং ভিজ্যুয়াল এডিটর ড্রপ ডাউন মেনু থেকে ফর্ম্যাটগুলিতে ক্লিক করতে পারেন। আপনি লক্ষ্য করবেন যে আপনার কাস্টম শৈলীগুলি এখন দৃশ্যমান।

তবে তাদের নির্বাচনটি ওয়ার্ডপ্রেসের ভিজ্যুয়াল সম্পাদককে কোনও তাত্পর্য দেবে না।

এক্সএনএমএক্স পদক্ষেপ: একটি সিএসএস স্টাইল যুক্ত করুন

এখন শেষ পদক্ষেপটি আপনার কাস্টম শৈলীর জন্য সিএসএস শৈলীর বিধি যুক্ত করা।

আপনার থিমের চাইল্ড থিম বা চাইল্ড থিমের স্টাইল.এসএস ফাইলে আপনাকে এই সিএসএস যুক্ত করতে হবে।

। কনটেন্ট-ব্লক {সীমানা: 1 পিএক্স সলিড # আইই; প্যাডিং: 3 পিএক্স; পটভূমি: # সিসি; সর্বাধিক প্রস্থ: 250px; ভাসা: ডান; পাঠ্য-সারিবদ্ধ: কেন্দ্র; con কনটেন্ট-ব্লক: পরে {সাফ: উভয়; b ব্লু-বাটন {পটভূমি রঙ: # 33 বিডিএফ; -মুজ-বর্ডার-ব্যাসার্ধ: 6px; -ওয়েবকিট-বর্ডার-ব্যাসার্ধ: 6px; সীমানা ব্যাসার্ধ: 6px; সীমানা: 1px কঠিন # 057fd0; প্রদর্শন: ইনলাইন-ব্লক; কার্সার: point; রঙ: # fffff; প্যাডিং: 6px 24px; পাঠ্য-সজ্জা: কিছুই নয়; red .রেড-বোতাম {পটভূমি রঙ: # বিসি 3315; -মুজ-বর্ডার-ব্যাসার্ধ: 6px; -ওয়েবকিট-বর্ডার-ব্যাসার্ধ: 6px; সীমানা ব্যাসার্ধ: 6px; সীমানা: 1px কঠিন # 942911; প্রদর্শন: ইনলাইন-ব্লক; কার্সার: point; রঙ: # fffff; প্যাডিং: 6px 24px; পাঠ্য-সজ্জা: কিছুই নয়; }

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

আপনার থিমের স্টাইলশিট ফাইল না থাকলে আপনি সর্বদা একটি তৈরি করতে পারেন। কেবল একটি নতুন সিএসএস ফাইল তৈরি করুন এবং নাম দিন " প্রথা-editor-style.css ».

আপনার থিমের মূল ডিরেক্টরিতে এই ফাইলটি আপলোড করতে হবে, তারপরে আপনার থিমের "ফাংশন.এফপি" ফাইলটিতে এই কোডটি যুক্ত করুন।

ফাংশন my_theme_add_editor_styles () {add_editor_style ('কাস্টম-সম্পাদক-স্টাইল। CSS'); } add_action ('init', 'my_theme_add_editor_styles');

এখানেই শেষ. আপনি স্রেফ ওয়ার্ডপ্রেস ভিজ্যুয়াল এডিটরটিতে আপনার কাস্টম শৈলী যুক্ত করেছেন। আপনি যে অনুকূলিতকরণটি সঠিক বলে মনে করেন এখন তা করতে পারেন।

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