দ্য সংখ্যা ক্ষেত্র একটি কাস্টম উইজেটের প্যানেলে একটি সাধারণ সংখ্যাসূচক ইনপুট যোগ করে। কলাম গণনা, পিক্সেল প্রস্থ, প্রতি স্লাইড আইটেম, তারকা রেটিং: যেকোন সেটিং যা শুধুমাত্র একটি সংখ্যা হিসাবে বোঝা যায় এখানে রয়েছে। মাস্টার অ্যাডঅন ভিতরে উইজেট নির্মাতা, আপনি একবার অনুমোদিত পরিসর সেট করেন এবং সম্পাদক একটি ইনপুট পায় যা শুধুমাত্র এর মধ্যে সংখ্যা গ্রহণ করে।
সংখ্যা ক্ষেত্র সমর্থন করে শর্তাবলী অন্য ক্ষেত্রের উপর ভিত্তি করে নিয়ন্ত্রণ দেখানো বা লুকানোর জন্য, এবং এর টোকেন নির্মাতার মাধ্যমে রেন্ডার করে টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন, যেখানে সংখ্যাসূচক তুলনা পছন্দ করে {% if price > 0 %} বাক্সের বাইরে কাজ করুন। উভয় গাইড সেটআপ এবং সীমাবদ্ধতা কভার করে।
মানটি একটি টেমপ্লেট টোকেনের মাধ্যমে আপনার উইজেটের সাথে সংযোগ করে। লিখুন {{ your_field_name }} HTML, CSS, বা JS প্যানেলে এবং রেন্ডারের সময় সেখানে নম্বর প্রিন্ট হয়। একটি নিয়ন্ত্রণ একই সময়ে মার্কআপ, স্টাইলিং এবং স্ক্রিপ্ট আচরণ চালাতে পারে।
সংখ্যা ক্ষেত্র কি করে #
- ব্রাউজার স্পিনার তীর সহ উইজেটের এলিমেন্টর প্যানেলে একটি সংখ্যাসূচক ইনপুট রেন্ডার করে।
- মাধ্যমে একটি পরিসীমা প্রয়োগ করে মিন, সর্বোচ্চ, এবং ধাপ আপনি বিল্ডারে সংজ্ঞায়িত বিকল্পগুলি।
- আপনি যেখানেই এটি স্থাপন করেন সেখানে একটি প্লেইন নম্বর আউটপুট করে
{{ token }}HTML, CSS, বা JS প্যানেলে। - তুলনা করে কাজ করে, তাই টেমপ্লেটটি শাখা করতে পারে
{% if my_number > 3 %}. - বিকল্প ওয়্যারিং হিসাবে এলিমেন্টরের নির্বাচক প্রক্রিয়াকে সমর্থন করে, মানটিকে সরাসরি একটি CSS নিয়মে লিখে।
এর আগে নির্মাতার সাথে একটি উইজেট তৈরি করেননি? দ্য উইজেট নির্মাতা ওভারভিউ সম্পাদকের মাধ্যমে নিজেই চলে এবং আপনি পৃথক ক্ষেত্রে প্রবেশ করার আগে দশ মিনিটের মূল্য।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
- উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি ক্লায়েন্ট লোগো ক্যারোজেল যেখানে একটি নম্বর ক্ষেত্র নাম দেওয়া হয়েছে
logos_per_slideএকবারে কতগুলি লোগো দেখায় তা নিয়ন্ত্রণ করে।
কিভাবে একটি সংখ্যা ক্ষেত্র যোগ করতে হয় #
টেনে আনুন সংখ্যা ক্ষেত্র প্যানেল থেকে ক্ষেত্র অধীনে একটি বিভাগে বিষয়বস্তু বা শৈলী ট্যাব। এটি অবতরণ করার সাথে সাথে, ক্ষেত্রের বিকল্পগুলি নির্মাতার বাম দিকে খোলে।
সংখ্যা ক্ষেত্রের বিকল্প ব্যাখ্যা করা হয়েছে #
- লেবেল: এলিমেন্টরে ইনপুটের পাশে দেখানো পাঠ্য, উদাহরণস্বরূপ “ প্রতি স্লাইডে লোগো।
- নাম: আপনার টেমপ্লেটগুলি যে অনন্য শনাক্তকারীকে উল্লেখ করে। অক্ষর, সংখ্যা, এবং আন্ডারস্কোর শুধুমাত্র, উদাহরণস্বরূপ
logos_per_slide. - ডিফল্ট: উইজেটটি যে সংখ্যা দিয়ে শুরু হয় তা একটি নতুন ড্রপ দিয়ে।
- স্থানধারক: ইনপুট খালি থাকা অবস্থায় ইঙ্গিত পাঠ্য দেখানো হয়েছে।
- সর্বনিম্ন / সর্বোচ্চ: ইনপুট গ্রহণ করে সর্বনিম্ন এবং সর্বোচ্চ মান।
- ধাপ: স্পিনার তীরগুলি যে বৃদ্ধি পায়, উদাহরণস্বরূপ
1পূর্ণ সংখ্যার জন্য বা0.5অর্ধেক ধাপের জন্য। - বর্ণনা: নিয়ন্ত্রণে ঐচ্ছিক সহায়ক পাঠ্য।
- লেবেল, লেবেল ব্লক, বিভাজক দেখান: স্ট্যান্ডার্ড ডিসপ্লে টগল করে, প্লাস ফিল্ড দেখানোর শর্ত শুধুমাত্র যখন অন্য কন্ট্রোলের একটি নির্দিষ্ট মান থাকে।
নম্বর ক্ষেত্রটিকে এর টোকেনের সাথে সংযুক্ত করুন #
সংখ্যা ক্ষেত্রটি একটি টোকেন ক্ষেত্র। যেখানেই {{ logos_per_slide }} একটি প্যানেলে প্রদর্শিত হয়, বর্তমান মান তার জায়গায় প্রিন্ট করে। তিনটি প্যানেলই এটি গ্রহণ করে:
<!-- HTML panel -->
<div class="logo-track" data-count="{{ logos_per_slide }}">
/* CSS panel */
.logo-track { grid-template-columns: repeat({{ logos_per_slide }}, 1fr); }
.logo-item { min-width: {{ logo_min_width }}px; }
// JS panel
var perSlide = {{ logos_per_slide }};একটি জিনিস যা এখানে নীরবে ব্যর্থ হয়: একটি খালি ক্ষেত্র একটি খালি স্ট্রিং প্রিন্ট করে, এবং repeat(, 1fr) বৈধ CSS নয়, তাই ব্রাউজার অভিযোগ ছাড়াই পুরো নিয়মটি বাদ দেয়। যদি টোকেন একটি CSS বা JS এক্সপ্রেশন ফিড করে, একটি ডিফল্ট সেট করুন যাতে একটি নতুন উইজেট কখনই এটিতে একটি ছিদ্র দিয়ে রেন্ডার না করে।
কারণ মান একটি সংখ্যা, তুলনা টেমপ্লেট যুক্তিতে কাজ করে। একটি ক্যারোজেল তার নেভিগেশন তীরগুলি এড়িয়ে যেতে পারে যখন সবকিছু ইতিমধ্যে একটি স্লাইডে ফিট হয়ে যায়:
{% if logos_per_slide > 4 %}
<button class="logo-nav">→</button>
{% endif %}ক্ষেত্রটি এলিমেন্টরকে সমর্থন করে নির্বাচক একটি বিকল্প হিসাবে তারের। মনে রাখবেন যে নম্বরের জন্য, এলিমেন্টর একটি সম্পূর্ণ ঘোষণার পরিবর্তে বেয়ার মান ইনজেক্ট করে, তাই নির্বাচকদের এন্ট্রি অবশ্যই পুরো সম্পত্তির বানান করতে হবে, উদাহরণস্বরূপ width: {{VALUE}}px;.
সতর্ক থেকো: যখন টোকেন একটি CSS বা JS এক্সপ্রেশনের ভিতরে অবতরণ করে, তখন ইউনিটটিকে ধনুর্বন্ধনীর বাইরে রাখুন। width: {{ logo_min_width }}px কাজ করে; ক্ষেত্রটির নিজস্ব ইউনিট বহন করার আশা করা যায় না, কারণ মানটি একটি খালি সংখ্যা। ইউনিট বাছাই করার জন্য আপনার যদি সম্পাদকের প্রয়োজন হয়, স্লাইডার ক্ষেত্রটি আরও উপযুক্ত।
এলিমেন্টরে নম্বর নিয়ন্ত্রণ ব্যবহার করুন #
এলিমেন্টরের একটি পৃষ্ঠায় আপনার কাস্টম উইজেটটি ফেলে দিন (পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে প্রথমে সম্পাদকটি পুনরায় লোড করুন)। সংখ্যা ক্ষেত্রটি আপনার সেট করা লেবেলের অধীনে স্পিনার তীর সহ একটি ছোট ইনপুট হিসাবে উপস্থিত হয়। একটি মান টাইপ করুন বা তীরগুলিতে ক্লিক করুন। প্রিভিউ লাইভ আপডেট হয়, এবং মিন/ম্যাক্স রেঞ্জের বাইরের মানগুলি ইনপুট নিজেই প্রত্যাখ্যান করে।
সাধারণ ব্যবহারের ক্ষেত্রে #
- কলাম এবং আইটেম গণনা একটি CSS গ্রিড বা ফ্লেক্স নিয়মে মুদ্রিত।
- ক্যারোজেল সেটিংস যেমন প্রতি ভিউ স্লাইড বা অটোপ্লে বিলম্ব, JS প্যানেল দ্বারা পড়া।
- পিক্সেল এবং শতাংশের মান যেখানে একটি একক একক উইজেট দ্বারা স্থির করা হয়, যেমন একটি নির্দিষ্ট-ইউনিট প্রস্থ বা ফাঁক।
- রেটিং এবং স্কোর যে টেমপ্লেট থ্রেশহোল্ডের সাথে তুলনা করে।
- সীমা "অধিকাংশ N পোস্টে দেখান" এর মতো, উইজেটের স্ক্রিপ্টে পাস করা হয়েছে৷।
নম্বর ক্ষেত্রের সাথে কাজ করার জন্য টিপস #
- মিন এবং ম্যাক্স সেট করুন। 0 বা 40 এর একটি কলাম গণনা বেশিরভাগ লেআউট ভেঙে দেবে; বিল্ডারে ইনপুট আবদ্ধ করা টেমপ্লেটে এটি রক্ষা করার চেয়ে সস্তা।
- মান এর অর্থের সাথে ধাপ মিল করুন। পুরো আইটেম পান
1; অস্বচ্ছতা-শৈলী মান পেতে0.1. - একটি বুদ্ধিমান ডিফল্ট জাহাজ তাই উইজেটটি ড্রপ হওয়ার মুহুর্তে সঠিকভাবে রেন্ডার করে।
- সংখ্যার সাথে তুলনা করুন, লেবেল নয়।
{% if logos_per_slide > 4 %}বৈধ টেমপ্লেট যুক্তি; এখানে তুলনা করার জন্য কোন বিকল্প লেবেল নেই, একটি থেকে ভিন্ন ক্ষেত্র নির্বাচন করুন. - নির্বাচক এন্ট্রি সম্পূর্ণ ঘোষণা। আপনি যদি টোকেনের পরিবর্তে নির্বাচক বিকল্পের মাধ্যমে ক্ষেত্রটি ওয়্যার করেন, তাহলে সম্পূর্ণ সম্পত্তি লিখুন, যেহেতু এলিমেন্টর শুধুমাত্র সংখ্যার জন্য বেয়ার মান ইনজেক্ট করে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডনস উইজেট বিল্ডারে নম্বর ক্ষেত্রটি কী?
সংখ্যা ক্ষেত্রটি একটি কাস্টম এলিমেন্টর উইজেটের প্যানেলে একটি সংখ্যাসূচক ইনপুট যোগ করে, যেখানে মিন, ম্যাক্স, স্টেপ, ডিফল্ট এবং প্লেসহোল্ডার বিকল্প রয়েছে। এর মান a এর মাধ্যমে প্রিন্ট করে {{ token }} উইজেটের এইচটিএমএল, সিএসএস, বা জেএস প্যানেলে এবং টেমপ্লেট লজিক এটিকে অপারেটরের মতো তুলনা করতে পারে > এবং ==.
আমি কি CSS প্যানেলে নম্বর ক্ষেত্রের মান ব্যবহার করতে পারি?
হ্যাঁ। যে কোনো নিয়মের ভিতরে টোকেন রাখুন, উদাহরণস্বরূপ grid-template-columns: repeat({{ columns }}, 1fr); বা width: {{ box_width }}px;। ইউনিটটি নিজে লিখতে মনে রাখবেন, যেহেতু ক্ষেত্রটি শুধুমাত্র সংখ্যা সংরক্ষণ করে।
আমি কিভাবে জাভাস্ক্রিপ্টে মান পড়তে পারি?
JS প্যানেলে সরাসরি টোকেন প্রিন্ট করুন: var perSlide = {{ logos_per_slide }};। সংখ্যাটি চালানোর আগে স্ক্রিপ্টে রেন্ডার করা হয়, তাই কোনও DOM সন্ধানের প্রয়োজন নেই৷।
মান উপর টেমপ্লেট শাখা করতে পারেন?
হ্যাঁ। শর্তাবলী তুলনা গ্রহণ করে: {% if my_number > 3 %} ... {% endif %}, সহ <, >=, <=, ==, এবং !=। এটি একটি থ্রেশহোল্ডের নীচে নেভিগেশন, ব্যাজ বা অতিরিক্ত মার্কআপ লুকানোর জন্য দরকারী।
ব্যবহারকারী যদি Min এবং Max এর বাইরে একটি মান টাইপ করে তাহলে কি হবে?
ইনপুট পরিসীমা প্রয়োগ করে, তাই সীমার বাইরের মানগুলি টেমপ্লেটে পৌঁছায় না। উইজেটের লেআউট অক্ষত রাখে যাই হোক না কেন বিল্ডারে মিন এবং ম্যাক্স সেট করুন।
আমি কখন নম্বরের পরিবর্তে স্লাইডার ব্যবহার করব?
স্লাইডার ক্ষেত্রটি ব্যবহার করুন যখন সম্পাদকের ইউনিট (px, %, em) নির্বাচন করা উচিত বা একটি পরিসরের মধ্যে একটি হ্যান্ডেল টেনে আনা উচিত; এর মান একটি আকার এবং একটি ইউনিট উভয়ই বহন করে। যখন একটি বেয়ার নম্বর যথেষ্ট হয় এবং আপনি টেমপ্লেটে ইউনিট নিয়ন্ত্রণ করেন তখন নম্বর ব্যবহার করুন।
মোড়ানো #
উইজেট বিল্ডার নম্বর ক্ষেত্রটি সঠিক কাজ করে: একটি আবদ্ধ সংখ্যাসূচক ইনপুট, একটি টোকেন এবং মানটি যেখানেই উইজেটের প্রয়োজন হয়, মার্কআপ, শৈলী বা স্ক্রিপ্টে। এর সাথে পেয়ার করুন সুইচার ক্ষেত্র চালু/বন্ধ আচরণের জন্য এবং রিপিটার ক্ষেত্র যখন গণনা একটি সেটিং এর পরিবর্তে বাস্তব আইটেম থেকে আসা উচিত। বাকি অন্বেষণ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন, এবং দেখুন মূল্য পৃষ্ঠা প্রতিটি পরিকল্পনা অন্তর্ভুক্ত কি জন্য।