WYSIWYG

WYSIWYG ক্ষেত্রটি ওয়ার্ডপ্রেসের সমৃদ্ধ পাঠ্য সম্পাদককে একটি কাস্টম উইজেটে রাখে যা আপনি মাস্টার অ্যাডঅনগুলির সাথে তৈরি করেন উইজেট নির্মাতা। সম্পাদকরা বোল্ড, তির্যক, লিঙ্ক, তালিকা এবং মিডিয়া যোগ করুন বোতাম পান, একই টুলবার যা তারা একটি পোস্ট লেখার সময় ব্যবহার করে। আপনার উইজেট ফরম্যাট করা HTML পায় এবং এটি একটি টোকেন দিয়ে প্রিন্ট করে। এটি যেকোন পাঠ্য অঞ্চলের ক্ষেত্র যেখানে একটি প্লেইন টেক্সটেরিয়া বিন্যাসকে সমতল করবে।

WYSIWYG হল একটি ক্ষেত্র যা আপনি বিনামূল্যে সংস্করণের উইজেট বিল্ডারে ব্যবহার করতে পারেন। বিনামূল্যের প্লাগইনটিতে একটি সীমিত উইজেট বিল্ডার রয়েছে এবং ক্ষেত্রগুলির সম্পূর্ণ সেট সহ আসে মাস্টার অ্যাডনস প্রো.

WYSIWYG ক্ষেত্র যা করে #

• ভিজ্যুয়াল এবং কোড ট্যাব এবং একটি অ্যাড মিডিয়া বোতাম সহ এলিমেন্টরে আপনার উইজেটের প্যানেলে সমৃদ্ধ পাঠ্য সম্পাদক যোগ করে।
• সম্পাদকরা HTML হিসাবে যা লেখেন তা সংরক্ষণ করে।
• যেমন একটি টোকেন মাধ্যমে এটি মুদ্রণ {{ member_bio }}, ওয়ার্ডপ্রেস যেভাবে ফিল্টার করে বিষয়বস্তু পোস্ট করে।
• বিন্যাস রাখে: অনুচ্ছেদ, বোল্ড, তির্যক, লিঙ্ক, তালিকা এবং শিরোনাম সব রেন্ডার করে।
• একটি ডিফল্ট মান নেয়, যা মার্কআপ অন্তর্ভুক্ত করতে পারে, তাই একটি নতুন উইজেট একটি কাজের উদাহরণ দেখায়।

নির্মাতার কাছে নতুন? পড়ুন উইজেট নির্মাতা ওভারভিউ প্রথমে, তারপর একটি উইজেট খোলা নিয়ে ফিরে আসুন।

আপনি শুরু করার আগে #

• এলিমেন্টর ইনস্টল এবং সক্রিয় সহ ওয়ার্ডপ্রেস।
• এলিমেন্টর ইনস্টল এবং সক্রিয় জন্য মাস্টার অ্যাডঅন। দ্য ইনস্টলেশন গাইড সেটআপ কভার করে।
• উইজেট বিল্ডারে একটি উইজেট খোলা। এই গাইডের উদাহরণ হল একটি “Team Member” উইজেট: নাম এবং ভূমিকার জন্য পাঠ্য ক্ষেত্র এবং একটি WYSIWYG ক্ষেত্র member_bio জীবনী জন্য।

কিভাবে একটি WYSIWYG ক্ষেত্র যোগ করবেন #

1. যাও মাস্টার অ্যাডঅন > উইজেট নির্মাতা এবং আপনার উইজেট খুলুন।
2. একটি বিভাগ যোগ করুন বিষয়বস্তু ট্যাব, উদাহরণস্বরূপ “Member”।
3. টাইপ করা wysi বাম দিকে ফিল্ড সার্চ বক্সে।
4. টেনে আনুন WYSIWYG বিভাগে। সেটিংস খুলতে মাঠের পেন্সিলটিতে ক্লিক করুন।

WYSIWYG ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #

• লেবেল: এলিমেন্টরে সম্পাদকের উপরের পাঠ্য, উদাহরণস্বরূপ “Bio”। ক্ষেত্রটি "কন্টেন্ট" লেবেলযুক্ত শুরু হয়।
• নাম: ক্ষেত্রের অনন্য আইডি এবং এর টোকেনের নাম। উদাহরণস্বরূপ, শুধুমাত্র অক্ষর, সংখ্যা এবং আন্ডারস্কোর ব্যবহার করুন member_bio.
• বর্ণনা: এলিমেন্টরে সম্পাদকের অধীনে দেখানো একটি ইঙ্গিত। প্রত্যাশা সেট করতে এটি ব্যবহার করুন, যেমন "দুই বা তিনটি বাক্য। বোল্ড, লিঙ্ক এবং তালিকা ঠিক আছে।”
• ডিফল্ট মান: শুরুর বিষয়বস্তু। এটি একটি প্লেইন টেক্সট বক্স, তাই নিজেই HTML টাইপ করুন, উদাহরণস্বরূপ একটি অনুচ্ছেদ সহ strong ট্যাগ এবং একটি লিঙ্ক।

লেবেল ব্লক এখানে ডিফল্টরূপে চালু আছে, যা আপনি চান: সম্পাদকের প্যানেলের সম্পূর্ণ প্রস্থ প্রয়োজন। ছেড়ে দিন নির্বাচক খালি, যেহেতু পাঠ্যের একটি ব্লক একটি CSS মান নয়।

বাকি সাধারণ সেটিংস অন্যান্য ক্ষেত্রের মতো আচরণ করে, সহ শর্তাবলী যদি অঞ্চলটি শুধুমাত্র তখনই উপস্থিত হওয়া উচিত যখন অন্য ক্ষেত্র সেট করা হয়।

আমাদের পরীক্ষায় বিল্ডারের ভিতরের ফিল্ড কার্ডটি তার সামান্য প্রিভিউ এডিটরে কাঁচা HTML হিসাবে ডিফল্ট মান দেখিয়েছে। এটি শুধুমাত্র নির্মাতার নিজস্ব পূর্বরূপ। Elementor ফরম্যাট করা পাঠ্যের মতো একই ডিফল্ট রেন্ডার করে।

আপনার টেমপ্লেটে বিষয়বস্তু প্রিন্ট করুন #

একটি টোকেন পুরো অঞ্চল রাখে। এটিকে একটি পাত্রে মুড়ে রাখুন যাতে আপনি স্টাইল করতে পারেন এবং এটিকে পাহারা দিন যাতে একটি খালি ক্ষেত্র কোনও বিপথগামী মোড়ক না রাখে:

<article class="tm">
  <p class="tm-name">{{ member_name }}</p>
  <p class="tm-role">{{ member_role }}</p>
  {% if member_bio %}
  <div class="tm-bio">{{ member_bio }}</div>
  {% endif %}
</article>

সম্পাদক যে ট্যাগগুলি লিখেছেন তা লক্ষ্য করে CSS প্যানেল থেকে অঞ্চলটিকে স্টাইল করুন:

.tm-bio p { margin: 0 0 .75em; line-height: 1.6; }
.tm-bio p:last-child { margin-bottom: 0; }
.tm-bio a { color: #4338ca; }
.tm-bio ul { margin: 0 0 .75em 1.1em; }

যোগ করবেন না raw একটি WYSIWYG টোকেনে। প্লেইন টোকেন ইতিমধ্যেই ফরম্যাটিং রেন্ডার করে, এবং raw শুধুমাত্র নিরাপত্তা ফিল্টার সরিয়ে দেয়।

ফিল্টার কি রাখে এবং ড্রপ #

মান একই ফিল্টার মাধ্যমে যায় ওয়ার্ডপ্রেস পোস্ট বিষয়বস্তুর জন্য ব্যবহার করে। আমাদের পরীক্ষা, শিরোনাম, অনুচ্ছেদ, strong, em, তালিকা, লিঙ্ক এবং এমনকি ইনলাইন style গুণাবলী অপরিবর্তিত মাধ্যমে এসেছে। একটি iframe সরানো হয়েছে, এবং একটি স্ক্রিপ্ট ট্যাগ চলমান ছাড়াই সরানো হয়েছে৷।

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

Elementor এ WYSIWYG নিয়ন্ত্রণ ব্যবহার করুন #

একটি পৃষ্ঠায় উইজেট যোগ করুন, অথবা পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। ক্ষেত্রটি আপনার লেবেলের অধীনে সম্পূর্ণ সম্পাদক দেখায়: মিডিয়া, ভিজ্যুয়াল এবং কোড ট্যাব, একটি অনুচ্ছেদ বিন্যাস ড্রপডাউন, বোল্ড, তির্যক, আন্ডারলাইন, তালিকা, একটি লিঙ্ক বোতাম এবং ফুলস্ক্রিন যোগ করুন।

সম্পাদকরা একটি পোস্টে যেভাবে লেখেন। ফোকাস সম্পাদক ছেড়ে যাওয়ার সাথে সাথে পূর্বরূপ আপডেট হয়। দ্য কোড ট্যাব অন্তর্নিহিত HTML দেখায়, যা পেস্ট করা বিন্যাস পরিষ্কার করার জন্য সুবিধাজনক।

এখানে সামনের প্রান্তে সমাপ্ত কার্ড, গাঢ় বাক্যাংশ সহ, লিঙ্ক এবং তালিকা সবই ক্ষেত্র থেকে আসছে:

সাধারণ ব্যবহারের ক্ষেত্রে #

• দলের সদস্যদের জীবনী এবং লেখক বাক্স।
• বৈশিষ্ট্য বা পরিষেবার বিবরণ যার জন্য একটি তালিকা বা একটি সাহসী বাক্যাংশ প্রয়োজন৷।
• একটি উদ্ধৃতি এবং অ্যাট্রিবিউশনের একটি লাইন সহ প্রশংসামূলক সংস্থা।
• একটি কার্ড, বাক্স বা প্যানেল উইজেটে যেকোনো দীর্ঘ-ফর্মের পাঠ্য অঞ্চল।

WYSIWYG ক্ষেত্রের সাথে কাজ করার জন্য টিপস #

• বাস্তব মার্কআপ সহ এটিকে একটি ডিফল্ট মান দিন। সম্পাদকরা তখন অঞ্চলটি যে ধরনের বিষয়বস্তু আশা করে তা দেখেন এবং আপনি ফর্ম্যাটিং রেন্ডারগুলি জানেন৷।
• বর্ণনায় দৈর্ঘ্য সেট করুন। "দুই বা তিনটি বাক্য" পরে অনেক লেআউট ফিক্স সংরক্ষণ করে।
• ট্যাগ স্টাইল করুন, পাঠ্য নয়। জন্য নিয়ম p, a এবং ul আপনার র্যাপার ক্লাসের ভিতরে সম্পাদকরা যাই লিখুন না কেন অঞ্চলটিকে সামঞ্জস্যপূর্ণ রাখুন।
• সঙ্গে টোকেন গার্ড {% if %} তাই একটি খালি ক্ষেত্র পৃষ্ঠায় একটি খালি মোড়ক ছেড়ে যায় না।
• শুধু প্লেইন টেক্সট? দ্য টেক্সটেরিয়া ক্ষেত্র হালকা হয়। পেস্ট করা মার্কআপ বা এম্বেড স্নিপেটের জন্য, ব্যবহার করুন কোড ক্ষেত্র.

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

একটি বিষয়বস্তু বিভাগে একটি WYSIWYG ক্ষেত্র ড্রপ করুন, এটিকে একটি পরিষ্কার লেবেল, একটি সহায়ক বিবরণ এবং বাস্তব মার্কআপ সহ একটি ডিফল্ট মান দিন, তারপর একটি ভিতরে টোকেনটি মুদ্রণ করুন৷ {% if %} CSS প্যানেল থেকে ট্যাগগুলিকে গার্ড এবং স্টাইল করুন। সম্পাদকরা ইতিমধ্যেই জানেন এমন টুলবার পান এবং আপনার উইজেট পরিষ্কার ফরম্যাট করা HTML পায়। প্লেইন টেক্সটের জন্য ব্যবহার করুন টেক্সটেরিয়া ক্ষেত্র, পেস্ট করা স্নিপেটগুলির জন্য কোড ক্ষেত্র, এবং চেক মূল্য প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।