দ্য কোড ক্ষেত্র একটি কাস্টম উইজেটের প্যানেলে একটি বাস্তব কোড সম্পাদক রাখে। সিনট্যাক্স হাইলাইটিং, মনোস্পেসড টেক্সট, লাইন নম্বর, সমস্ত Ace সম্পাদকের সৌজন্যে। এটি এমন ক্ষেত্রে বিদ্যমান যেখানে একজন সম্পাদককে গদ্য লেখার পরিবর্তে মার্কআপ পেস্ট করতে হবে: এম্বেড স্নিপেট, স্কিমা ব্লক, তৃতীয় পক্ষ থেকে এইচটিএমএল ব্যাজ। মাস্টার অ্যাডঅন ভিতরে উইজেট নির্মাতা, আপনি হাইলাইটিং ভাষা চয়ন করুন এবং সম্পাদক প্যানেলে কত লম্বা বসে।
প্রতিটি উইজেট বিল্ডার ক্ষেত্রের মতো, কোড ক্ষেত্র সমর্থন করে শর্তাবলী প্যানেল দৃশ্যমানতার জন্য, এবং এর মাধ্যমে এর টোকেন প্রিন্ট টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন স্বয়ংক্রিয়ভাবে অনুমোদিত নিরাপদ HTML সহ। সেটআপ এবং সীমাবদ্ধতার জন্য উভয় গাইড দেখুন।
আউটপুট ওয়ার্ডপ্রেস স্যানিটাইজেশনের মাধ্যমে যায়। মান একটি সাধারণ টোকেন দিয়ে প্রিন্ট করে এবং রানটাইম এটির মধ্য দিয়ে যায় wp_kses_post, একই ফিল্টার ওয়ার্ডপ্রেস পোস্ট কন্টেন্ট প্রযোজ্য। নিরাপদ HTML ট্যাগ বেঁচে থাকে; <script> ট্যাগ ছিনতাই করা হয়। এই ডিফল্টটি ক্ষেত্রটিতে যা কিছু আটকানো হয় তা থেকে সাইটটিকে রক্ষা করে।
কোড ক্ষেত্র কি করে #
- উইজেটের এলিমেন্টর প্যানেলে একটি Ace কোড এডিটর রেন্ডার করে, আপনার বাছাই করা ভাষার জন্য সিনট্যাক্স হাইলাইট করে।
- একটি স্ট্রিং হিসাবে আটকানো কোড সংরক্ষণ করে।
- মাধ্যমে যে স্ট্রিং মুদ্রণ
{{ your_field_name }}, সঙ্গে স্যানিটাইজডwp_kses_postতাই অনুমোদিত HTML রেন্ডার এবং স্ক্রিপ্ট মুছে ফেলা হয়। - অফার ক
|rawফিল্টার এস্কেপ হ্যাচ যা বিশ্বস্ত-প্রশাসক পরিস্থিতির জন্য স্যানিটাইজেশনকে বাইপাস করে। - একটি সারি বিকল্পের মাধ্যমে এর দৃশ্যমান উচ্চতা সেট করে, তাই দীর্ঘ স্নিপেট প্যানেলে জায়গা পায়।
আপনি যদি নির্মাতার সাথে একটি উইজেট তৈরি না করে থাকেন তবে পড়ুন উইজেট নির্মাতা ওভারভিউ প্রথম; ক্ষেত্র পৃষ্ঠাগুলি সেই ভিত্তি কাজ অনুমান করে।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি ট্রাস্ট ব্যাজ উইজেট যেখানে একটি কোড ক্ষেত্র নামকরণ করা হয়েছে
badge_markupএইচটিএমএল ব্যাজ গ্রহণ করে যা অর্থপ্রদান এবং পর্যালোচনা প্রদানকারীরা হস্তান্তর করে।
কিভাবে একটি কোড ক্ষেত্র যোগ করতে হয় #
টেনে আনুন কোড ক্ষেত্র প্যানেল থেকে ক্ষেত্র অধীনে একটি বিভাগে বিষয়বস্তু ট্যাব। মাঠের বিকল্পগুলি অবতরণ করার সাথে সাথে বাম দিকে খোলে।
কোড ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #
- লেবেল: এলিমেন্টরে সম্পাদকের উপরে দেখানো পাঠ্য, উদাহরণস্বরূপ “Badge Markup”।
- নাম: আপনার টেমপ্লেটগুলি যে অনন্য শনাক্তকারীকে উল্লেখ করে। অক্ষর, সংখ্যা, এবং আন্ডারস্কোর শুধুমাত্র, উদাহরণস্বরূপ
badge_markup. - ডিফল্ট: স্টার্টিং কোড উইজেটটি দিয়ে পাঠানো হয়, ক্ষেত্রটি কী প্রত্যাশা করে তার একটি ভরাট উদাহরণ হিসাবে দরকারী।
- ভাষা: সিনট্যাক্স হাইলাইটিং মোড, HTML, CSS, JavaScript এবং অন্যান্য সাধারণ মোড। এটি শুধুমাত্র হাইলাইটিংকে প্রভাবিত করে, যা টাইপ করা যায় তা নয়।
- সারি: প্যানেলে সম্পাদকের দৃশ্যমান উচ্চতা।
কোড ক্ষেত্রটিকে এর টোকেন দিয়ে সংযুক্ত করুন #
কোড ক্ষেত্র একটি টোকেন ক্ষেত্র। এইচটিএমএল প্যানেলে পেস্ট করা মার্কআপ যেখানে অবতরণ করা উচিত সেখানে এটি প্রিন্ট করুন:
<div class="tb-badges">
{{ badge_markup }}
</div>আউটপুট উপর, মান মাধ্যমে সঞ্চালিত হয় wp_kses_post। অনুশীলনে এর অর্থ হল ট্যাগ ওয়ার্ডপ্রেস পোস্টের বিষয়বস্তুতে অনুমতি দেয়, <div>, <a>, <img>, <span>, এবং বাকি, পেস্ট হিসাবে রেন্ডার, যখন <script> ট্যাগ এবং ইভেন্ট-হ্যান্ডলার বৈশিষ্ট্য ছিনতাই করা হয়। প্লেইন মার্কআপ থেকে তৈরি একটি ব্যাজ বা স্কিমা স্নিপেটের জন্য, ডিফল্ট আচরণটি আপনি যা চান ঠিক তাই।
মনে রাখবেন যে kses নীরবে ট্যাগ স্ট্রিপ করে। যদি একটি পেস্ট করা স্নিপেট পৃষ্ঠায় অর্ধেক খালি রেন্ডার করে, কিছুই ত্রুটিযুক্ত হয়নি; ফিল্টার একটি অননুমোদিত ট্যাগ মুছে ফেলে এবং বাকি রাখে। ক্লায়েন্টের কাছে উইজেট হস্তান্তর করার আগে একবার স্টেজিং পৃষ্ঠায় পরীক্ষা প্রদানকারী স্নিপেট করে, যাতে আপনি জানেন কোন অংশগুলি বেঁচে থাকে।
যখন একটি স্নিপেট সত্যিকার অর্থে অস্পৃশ্যভাবে বেঁচে থাকার প্রয়োজন হয়, |raw ফিল্টার স্যানিটাইজেশন বাইপাস করে:
{{ badge_markup|raw }}সতর্ক থেকো: |raw যা কিছু আটকানো হয়েছে তা আউটপুট করে, স্ক্রিপ্ট অন্তর্ভুক্ত। শুধুমাত্র তখনই এটির জন্য পৌঁছান যখন উইজেট সম্পাদনা করতে পারে এমন প্রত্যেকে ইতিমধ্যেই ফিল্টার না করা HTML, কার্যকরভাবে অ্যাডমিন-লেভেল ব্যবহারকারীদের সাথে বিশ্বস্ত, এবং নিম্ন-সুবিধাপ্রাপ্ত সম্পাদক বা ক্লায়েন্টরা স্পর্শ করতে পারে এমন উইজেটগুলিতে কখনই নয়। ডিফল্ট স্যানিটাইজড টোকেন আপনার পাঠানো প্রায় প্রতিটি উইজেটের জন্য সঠিক পছন্দ।
আপনার মত একটি খালি ক্ষেত্রের বিরুদ্ধে গার্ড করুন যে কোন ঐচ্ছিক মান, তাই একটি অব্যবহৃত কোড ক্ষেত্র পিছনে কোন বিপথগামী মোড়ক ছেড়ে যায় না:
{% if badge_markup %}
<div class="tb-badges">{{ badge_markup }}</div>
{% endif %}Elementor এ কোড নিয়ন্ত্রণ ব্যবহার করুন #
Elementor-এর একটি পৃষ্ঠায় আপনার কাস্টম উইজেট যোগ করুন, অথবা পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। কোড ক্ষেত্রটি আপনার লেবেলের অধীনে একটি অন্ধকার সম্পাদক ব্লক হিসাবে প্রদর্শিত হবে, আপনার সেট করা সারিগুলির আকারের।
স্নিপেট আটকান বা টাইপ করুন। হাইলাইটিং বিল্ডারে আপনার বেছে নেওয়া ভাষা অনুসরণ করে, যা পৃষ্ঠায় আঘাত করার আগে বিকৃত মার্কআপকে চিহ্নিত করা সহজ করে তোলে এবং ক্ষেত্র পরিবর্তনের সাথে সাথে পূর্বরূপ আপডেট হয়।
সাধারণ ব্যবহারের ক্ষেত্রে #
- ব্যাজ এবং সার্টিফিকেশন মার্কআপ অর্থপ্রদান, নিরাপত্তা, এবং পর্যালোচনা প্রদানকারীদের থেকে।
- স্কিমা এবং স্ট্রাকচার্ড-ডেটা স্নিপেট একটি এসইও প্লাগইন কভার করে না।
- এম্বেড কোড খেলোয়াড় এবং ফর্মের জন্য, যেখানে স্যানিটাইজড উপসেট যথেষ্ট।
- কাস্টম টেবিল বা তালিকা মার্কআপ এটি পৃথক ক্ষেত্রগুলির সাথে পুনর্নির্মাণ করা বেদনাদায়ক হবে।
- বিজ্ঞাপন বা প্রচার ব্লক যার HTML উইজেট পুনঃপ্রকাশ না করেই প্রতি প্রচারাভিযানে পরিবর্তিত হয়।
কোড ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- ডিফল্ট স্যানিটাইজেশন বিশ্বাস করুন।
wp_kses_postস্বাভাবিক মার্কআপ অক্ষত রাখে এবং শান্তভাবে বিপজ্জনক অংশগুলি সরিয়ে দেয়। বেশিরভাগ "আমার স্নিপেট ভেঙে গেছে" রিপোর্টগুলি ছিনতাই করা হয়েছে<script>ট্যাগ তার কাজ করছে। - রিজার্ভ
|rawশুধুমাত্র অ্যাডমিন উইজেটের জন্য। এটি সেই টোকেনের নিরাপত্তা জাল সম্পূর্ণরূপে নিষ্ক্রিয় করে। - বিষয়বস্তুর সাথে মেলে ভাষা সেট করুন। হাইলাইট একটি প্রুফরিডিং সাহায্য; HTML মোড একটি অনুপস্থিত ক্লোজিং ট্যাগকে এক নজরে দৃশ্যমান করে তোলে।
- একটি ডিফল্ট স্নিপেট পাঠান। একটি মন্তব্য করা উদাহরণ সম্পাদকদের দেখায় যে কোডের আকৃতিটি ক্ষেত্রের অন্তর্গত।
- টোকেনটি মুড়ে দিন
{% if %}যখন স্নিপেট ঐচ্ছিক হয়, তাই একটি খালি ক্ষেত্র কোন খালি ধারক রেন্ডার করে না। - গদ্যের জন্য WYSIWYG ব্যবহার করুন। যদি সম্পাদকরা মার্কআপ পেস্ট করার পরিবর্তে পাঠ্য লিখবেন, তাহলে WYSIWYG ক্ষেত্র বন্ধুত্বপূর্ণ নিয়ন্ত্রণ হয়।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে কোড ক্ষেত্র কী?
কোড ক্ষেত্রটি একটি কাস্টম এলিমেন্টর উইজেটের প্যানেলে একটি সিনট্যাক্স-হাইলাইট করা Ace সম্পাদক যোগ করে। সম্পাদকরা এতে মার্কআপ বা স্নিপেট পেস্ট করে এবং টেমপ্লেটটি মানটি প্রিন্ট করে {{ field_name }}, মাধ্যমে স্যানিটাইজ করা wp_kses_post তাই অনুমোদিত HTML রেন্ডার এবং স্ক্রিপ্ট ট্যাগ ছিনতাই করা হয়।
কেন আমার পেস্ট করা <script> ট্যাগ চলছে না?
স্যানিটাইজেশন এটি সরিয়ে দিয়েছে। আউটপুট মাধ্যমে পাস wp_kses_post, যা স্ক্রিপ্ট ট্যাগ অনুমোদন করে না। যদি উইজেট শুধুমাত্র বিশ্বস্ত অ্যাডমিনদের দ্বারা সম্পাদনা করা হয়, {{ field_name|raw }} ফিল্টার বাইপাস করে, ফিল্টার ছাড়া পেস্ট আউটপুট করার খরচে।
কোড ক্ষেত্র এবং WYSIWYG ক্ষেত্রের মধ্যে পার্থক্য কি?
কোড ক্ষেত্রটি সিনট্যাক্স হাইলাইটিং সহ কাঁচা উত্স দেখায় এবং এটি মার্কআপ এবং স্নিপেটগুলির জন্য বোঝানো হয়৷ WYSIWYG ক্ষেত্রটি একটি TinyMCE সমৃদ্ধ-পাঠ্য সম্পাদক দেখায় যা বিন্যাসিত গদ্য লেখার জন্য। উভয়ের সাথে আউটপুট স্যানিটাইজ করুন wp_kses_post.
ভাষা বিকল্পটি কি প্রবেশ করা যেতে পারে তা সীমাবদ্ধ করে?
না। এটি শুধুমাত্র সিনট্যাক্স হাইলাইটিং মোড, HTML, CSS, JavaScript ইত্যাদি নির্বাচন করে। মোড নির্বিশেষে যেকোনো পাঠ্য আটকানো যেতে পারে।
আমি কি HTML প্যানেল ছাড়া অন্য কোথাও কোডটি প্রিন্ট করতে পারি?
টোকেন তিনটি প্যানেলেই কাজ করে, কিন্তু এইচটিএমএল প্যানেল হল যেখানে স্নিপেটগুলি অনুশীলনের অন্তর্গত। স্টাইলশীট বা স্ক্রিপ্ট ব্লকের ভিতরে স্যানিটাইজড মার্কআপের সামান্য অর্থ নেই।
ক্লায়েন্টদের একটি কোড ক্ষেত্র সহ একটি উইজেট দেওয়া কি নিরাপদ?
ডিফল্ট টোকেন সহ, হ্যাঁ কারণের মধ্যে: wp_kses_post একই HTML উপসেট ওয়ার্ডপ্রেস প্রয়োগ করে পোস্ট সামগ্রীতে অনুমতি দেয়। এড়িয়ে চলুন |raw ক্লায়েন্ট-সম্পাদনাযোগ্য উইজেটগুলিতে, যেহেতু এটি সেই প্রয়োগকে সরিয়ে দেয়।
মোড়ানো #
উইজেট বিল্ডার কোড ক্ষেত্রটি "এখানে আপনার স্নিপেট পেস্ট করুন"কে একটি সঠিক কর্মপ্রবাহে পরিণত করে: প্যানেলে একটি হাইলাইট করা সম্পাদক, টেমপ্লেটে একটি টোকেন এবং পেস্ট এবং পৃষ্ঠার মধ্যে ওয়ার্ডপ্রেস-গ্রেড স্যানিটাইজেশন৷ মার্কআপের জন্য এটি ব্যবহার করুন, রাখুন |raw বিরল বিশ্বস্ত ক্ষেত্রে জন্য, এবং জন্য পৌঁছান WYSIWYG ক্ষেত্র যখন বিষয়বস্তু কোডের পরিবর্তে গদ্য হয়। বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।
