দ্য WYSIWYG ক্ষেত্র সম্পূর্ণ TinyMCE সম্পাদক ড্রপ করে, একই রিচ-টেক্সট এডিটর ওয়ার্ডপ্রেস বছরের পর বছর ধরে একটি কাস্টম উইজেটের প্যানেলে পাঠানো হয়েছে। সম্পাদকরা বোল্ড, তির্যক, তালিকা, লিঙ্ক, শিরোনাম এবং ভিজ্যুয়াল/টেক্সট ট্যাব সুইচ পান যা তারা ইতিমধ্যেই জানেন। আপনার উইজেট মুদ্রণের জন্য প্রস্তুত ফরম্যাট করা HTML গ্রহণ করে। মাস্টার অ্যাডঅন ভিতরে উইজেট নির্মাতা, এটি বিষয়বস্তু অঞ্চলের জন্য ক্ষেত্র যেখানে একটি সমতল টেক্সটেরিয়া টেক্সট আউট বিন্যাস সমতল হবে।
WYSIWYG ক্ষেত্র সমর্থন করে শর্তাবলী অন্যান্য নিয়ন্ত্রণের মত, এবং এর বিষয়বস্তু এর মাধ্যমে রেন্ডার করে টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন। WYSIWYG মানগুলি তাদের নিরাপদ HTML স্বয়ংক্রিয়ভাবে রাখে, তাই আপনার খুব কমই প্রয়োজন |raw ফিল্টার। উভয় গাইড বিস্তারিত এবং সীমাবদ্ধতা ব্যাখ্যা করে।
সংযোগ একটি টোকেন। প্রিন্ট {{ your_field_name }} এইচটিএমএল প্যানেলে এবং সেখানে সঞ্চিত মার্কআপ রেন্ডার, ফিল্টার করা হয় wp_kses_post, তাই অনিরাপদ ট্যাগ ছিনিয়ে নেওয়ার সময় বিন্যাস টিকে থাকে। কোন অতিরিক্ত ফিল্টার, কোন পালানো জিমন্যাস্টিকস।
WYSIWYG ক্ষেত্র যা করে #
- ভিজ্যুয়াল এবং টেক্সট ট্যাব সহ উইজেটের এলিমেন্টর প্যানেলে TinyMCE সমৃদ্ধ পাঠ্য সম্পাদক রেন্ডার করে।
- একটি HTML স্ট্রিং হিসাবে সম্পাদকের আউটপুট সংরক্ষণ করে।
- যে HTML মাধ্যমে প্রিন্ট
{{ your_field_name }}, মাধ্যমে পাসwp_kses_postআউটপুটে। - বিন্যাস অক্ষত রাখে: অনুচ্ছেদ, বোল্ড, তির্যক, তালিকা, লিঙ্ক এবং শিরোনাম সব রেন্ডার করে।
- গতিশীল মান সমর্থন করে, তাই বিষয়বস্তু গতিশীল ট্যাগ থেকে আসতে পারে যেখানে সেটআপ তাদের প্রদান করে।
প্রথম উইজেট? দ্য উইজেট নির্মাতা ওভারভিউ এই পৃষ্ঠাটি তৈরি করা সম্পাদকের মৌলিক বিষয়গুলি কভার করে৷।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি WYSIWYG ফিল্ড সহ একটি টিম মেম্বার কার্ড উইজেট
member_bioপ্রতিটি ব্যক্তির ফরম্যাট করা জীবনী ধারণ করা।
কিভাবে একটি WYSIWYG ক্ষেত্র যোগ করবেন #
টেনে আনুন WYSIWYG ক্ষেত্র প্যানেল থেকে ক্ষেত্র অধীনে একটি বিভাগে বিষয়বস্তু ট্যাব, দীর্ঘ-ফর্ম সামগ্রীর জন্য প্রাকৃতিক বাড়ি। এটি অবতরণ করার পরে এটির বিকল্পগুলি বাম দিকে খোলে।
WYSIWYG ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #
বিকল্প তালিকাটি ছোট থাকে কারণ সম্পাদক নিজেই জটিলতা বহন করে:
- লেবেল: এলিমেন্টরে সম্পাদকের উপরে দেখানো পাঠ্য, উদাহরণস্বরূপ “Member Bio”।
- নাম: আপনার টেমপ্লেটগুলি যে অনন্য শনাক্তকারীকে উল্লেখ করে। অক্ষর, সংখ্যা, এবং আন্ডারস্কোর শুধুমাত্র, উদাহরণস্বরূপ
member_bio. - ডিফল্ট: প্রারম্ভিক বিষয়বস্তু, এবং এটি মার্কআপ অন্তর্ভুক্ত করতে পারে। একটি সংক্ষিপ্ত বিন্যাসিত অনুচ্ছেদ সম্পাদকদের দেখায় যে অঞ্চলটি কিসের জন্য এবং ফর্ম্যাটিং কাজ করে তা প্রমাণ করে।
- গতিশীল: ক্ষেত্রটি গতিশীল মান গ্রহণ করে, তাই বিষয়বস্তু হাত দ্বারা টাইপ করার পরিবর্তে গতিশীল ট্যাগের সাথে সংযুক্ত করা যেতে পারে।
WYSIWYG ক্ষেত্রটিকে এর টোকেন দিয়ে সংযুক্ত করুন #
WYSIWYG ক্ষেত্রটি একটি টোকেন ক্ষেত্র। HTML প্যানেলে একটি টোকেন পুরো বিষয়বস্তু অঞ্চলকে রাখে:
<article class="tm-card">
<h3 class="tm-name">{{ member_name }}</h3>
<div class="tm-bio">
{{ member_bio }}
</div>
</article>আউটপুট উপর, মান মাধ্যমে পাস wp_kses_post, ফিল্টার ওয়ার্ডপ্রেস পোস্ট সামগ্রীতে প্রযোজ্য। TinyMCE ট্যাগগুলি তৈরি করে, অনুচ্ছেদ, শক্তিশালী এবং em, তালিকা, লিঙ্ক, শিরোনাম, চিত্রগুলি সবই অনুমোদিত তালিকায় রয়েছে, তাই সম্পাদকদের বিন্যাসটি কী রেন্ডার করে। টেক্সট ট্যাবের মাধ্যমে লুকিয়ে থাকা অনিরাপদ কিছু, যেমন একটি <script>, ছিনতাই করা হয়।
সতর্ক থেকো: যোগ করবেন না |raw অভ্যাসের বাইরে একটি WYSIWYG টোকেনকে। প্লেইন টোকেন ইতিমধ্যে বিন্যাস রেন্ডার করে, কারণ wp_kses_post মার্কআপ TinyMCE লেখার অনুমতি দেয়; |raw একটি সাধারণ বায়ো দেখতে কেমন তা পরিবর্তন না করেই শুধুমাত্র নিরাপত্তা ফিল্টারটি সরিয়ে দেয়। যদি আউটপুট রেন্ডার করার পরিবর্তে পালিয়ে যায়, তাহলে কারণটি অন্য কোথাও, একটি অনুপস্থিত ফিল্টার নয়।
উদাহরণের মতো একটি ক্লাস সহ একটি পাত্রে টোকেনটি মোড়ানো এবং CSS প্যানেল থেকে অঞ্চলটি স্টাইল করুন:
.tm-bio p { margin: 0 0 0.75em; }
.tm-bio a { color: inherit; text-decoration: underline; }Elementor এ WYSIWYG নিয়ন্ত্রণ ব্যবহার করুন #
Elementor-এর একটি পৃষ্ঠায় আপনার কাস্টম উইজেট যোগ করুন, অথবা পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। ক্ষেত্রটি প্যানেলে একটি সম্পূর্ণ TinyMCE সম্পাদক হিসাবে রেন্ডার করে: উপরে টুলবার, কোণে ভিজ্যুয়াল এবং টেক্সট ট্যাব, মিডিয়া যোগ করুন যেখানে সেটআপ এটির অনুমতি দেয়।
সম্পাদকরা একটি পোস্টে ঠিক যেমনটি লিখেন এবং বিন্যাস করেন: পাঠ্য নির্বাচন করুন, এটি বোল্ড করুন, একটি লিঙ্ক যোগ করুন, একটি তালিকা শুরু করুন। টাইপ করার সাথে সাথে প্রিভিউ আপডেট হয়, উইজেটের CSS দ্বারা স্টাইল করা বিষয়বস্তু দেখায়।
যখন একটি বায়ো অদ্ভুতভাবে রেন্ডার হয়, আপনি উইজেটকে দোষ দেওয়ার আগে পাঠ্য ট্যাবটি পরীক্ষা করুন৷ Word বা Google ডক্স থেকে আটকানো বিষয়বস্তু প্রায়ই বিপথগামী স্প্যান এবং ইনলাইন শৈলী বহন করে এবং সেগুলি সবই সেখানে দৃশ্যমান। টেক্সট ট্যাবে মার্কআপ পরিষ্কার করা সাধারণত ঘটনাস্থলেই লেআউট ঠিক করে।
সাধারণ ব্যবহারের ক্ষেত্রে #
- বায়োস এবং প্রোফাইল দল, লেখক এবং স্পিকার উইজেটে।
- দীর্ঘ বর্ণনা পরিষেবা, পণ্য এবং বৈশিষ্ট্য কার্ডগুলিতে যেখানে একটি শিরোনাম বা তালিকা পাঠ্যের ভিতরে থাকে।
- প্রশংসামূলক সংস্থা যে জোর এবং লাইন বিরতি সংরক্ষিত প্রয়োজন।
- পাদটীকা এবং দাবিত্যাগ নীতির ইনলাইন লিঙ্ক সহ।
- যেকোনো ক্লায়েন্ট-সম্পাদিত পাঠ্য অঞ্চল যেখানে ফরম্যাটিং গুরুত্বপূর্ণ এবং ক্লায়েন্ট কখনই HTML দেখতে পাবে না।
WYSIWYG ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- প্লেইন টোকেন প্রিন্ট করুন।
{{ member_bio }}বিন্যাসকে যেমন আছে তেমন রেন্ডার করে;|rawএখানে ক্ষমতা যোগ না করে ঝুঁকি যোগ করে। - একটি মোড়ক ক্লাস মাধ্যমে শৈলী। লক্ষ্য
.tm-bio p,.tm-bio ul, এবং CSS প্যানেলে বন্ধুরা আশা না করে এডিটর আউটপুট প্রি-স্টাইল করা হবে। - একটি ফরম্যাট করা ডিফল্ট সেট করুন। ক্ষেত্রটি কী সমর্থন করে তার একটি লাইভ উদাহরণ হিসাবে একটি গাঢ় নাম এবং একটি লিঙ্ক সহ একটি বায়ো দ্বিগুণ হয়৷।
- প্রতি বিষয়বস্তু অঞ্চলে একটি WYSIWYG। সম্পাদকদের একটি সম্পাদকের ভিতরে উভয়ই পরিচালনা করতে বলার পরিবর্তে ভূমিকা এবং সূক্ষ্ম মুদ্রণ পৃথক ক্ষেত্র দিন।
- আপনি যখন পারেন হালকা ক্ষেত্র চয়ন করুন। একটি একক আনফরম্যাট করা লাইন একটি পাঠ্য ক্ষেত্রের অন্তর্গত; যখন অনুচ্ছেদ, তালিকা বা লিঙ্কগুলি প্রকৃতপক্ষে বিষয়বস্তুর অংশ হয় তখন WYSIWYG-এর জন্য পৌঁছান।
- আউটপুটে kses আশা করুন। পোস্ট-কন্টেন্ট অনুমোদিত তালিকার বাইরে কাস্টম ট্যাগগুলি ডিজাইন অনুসারে টিকে থাকবে না। পেস্টযোগ্য কাঁচা স্নিপেট হয় কোড ক্ষেত্রএর কাজ।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে WYSIWYG ক্ষেত্র কী?
WYSIWYG ক্ষেত্রটি একটি কাস্টম এলিমেন্টর উইজেটের প্যানেলে TinyMCE সমৃদ্ধ পাঠ্য সম্পাদক যোগ করে। সম্পাদকরা বিষয়বস্তুকে দৃশ্যত বিন্যাস করে, এবং টেমপ্লেটটি ফলস্বরূপ HTML প্রিন্ট করে {{ field_name }}, মাধ্যমে ফিল্টার wp_kses_post তাই ফরম্যাটিং রেন্ডার এবং অনিরাপদ ট্যাগ মুছে ফেলা হয়।
ফরম্যাটিং রেন্ডার করার জন্য আমার কি |কাঁচা ফিল্টার দরকার?
না। প্লেইন টোকেন ইতিমধ্যেই মার্কআপ রেন্ডার করে, কারণ wp_kses_post tinymce তৈরি করা ট্যাগগুলিকে অনুমতি দেয়। |raw শুধুমাত্র স্যানিটাইজেশন ফিল্টারকে বাইপাস করে এবং স্বাভাবিক ব্যবহারে WYSIWYG আউটপুট থেকে দূরে থাকা উচিত।
কোন HTML ট্যাগ আউটপুটে টিকে থাকে?
সেট ওয়ার্ডপ্রেস পোস্ট বিষয়বস্তুতে অনুমতি দেয়: অনুচ্ছেদ, শিরোনাম, বোল্ড এবং তির্যক, তালিকা, লিঙ্ক, ছবি, ব্লককোট এবং অনুরূপ। স্ক্রিপ্ট ট্যাগ এবং ইভেন্ট-হ্যান্ডলার বৈশিষ্ট্যগুলি আউটপুটে ছিনতাই করা হয়।
কিভাবে WYSIWYG Textarea ক্ষেত্র থেকে আলাদা?
Textarea কোনো টুলবার এবং কোনো সঞ্চিত মার্কআপ ছাড়াই প্লেইন মাল্টি-লাইন টেক্সট সংগ্রহ করে। WYSIWYG একটি ভিজ্যুয়াল এডিটর থেকে ফরম্যাট করা HTML সঞ্চয় করে। যদি বিষয়বস্তুর বোল্ড টেক্সট, তালিকা বা লিঙ্কের প্রয়োজন হয়, WYSIWYG হল সঠিক ক্ষেত্র।
সম্পাদক যে বিষয়বস্তু তৈরি করেন তা আমি কীভাবে স্টাইল করব?
HTML প্যানেলে একটি ক্লাস সহ একটি পাত্রে টোকেনটি মোড়ানো, তারপর CSS প্যানেল থেকে বংশধরদের লক্ষ্য করুন, উদাহরণস্বরূপ .tm-bio p এবং .tm-bio a। সম্পাদক সরবরাহ কাঠামো; উইজেট চেহারা সরবরাহ করে।
বিষয়বস্তু একটি গতিশীল উৎস থেকে আসতে পারে?
ক্ষেত্রটি গতিশীল মানগুলিকে সমর্থন করে, তাই যেখানে গতিশীল ট্যাগগুলি উপলব্ধ থাকে সেখানে বিষয়বস্তু অঞ্চলটি হাতে-টাইপ করা পাঠ্যের পরিবর্তে সেগুলি থেকে টানতে পারে৷।
মোড়ানো #
উইজেট বিল্ডার WYSIWYG ফিল্ড সম্পাদকদের লেখার অভিজ্ঞতা দেয় যা তারা ইতিমধ্যেই জানে এবং মার্কআপে রাখার জন্য আপনাকে একটি একক স্যানিটাইজড টোকেন দেয়। বিষয়বস্তু মানুষ দৃশ্যত বায়োস এবং বর্ণনা বিন্যাস; উইজেট তাদের নিরাপদে রেন্ডার করে এবং তাদের নিজস্ব CSS এর মাধ্যমে স্টাইল করে। পেস্টযোগ্য কাঁচা স্নিপেটগুলির জন্য ব্যবহার করুন কোড ক্ষেত্র, এবং ফরম্যাট করা ব্লকের পুনরাবৃত্তির জন্য WYSIWYG এর সাথে একত্রিত করুন রিপিটার ক্ষেত্র. বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
