ওয়ার্ডপ্রেসে কার্যকরভাবে কোড প্রদর্শন করার দক্ষতা অর্জন করা ব্লগার এবং বিষয়বস্তু নির্মাতাদের জন্য অত্যন্ত গুরুত্বপূর্ণ যারা তাদের দর্শকদের ব্যবহারের জন্য ধারাবাহিকভাবে অনলাইনে কোড প্রকাশ করে। কম্পিউটার কোড, উদ্দেশ্য অনুযায়ী, একটি ওয়েবসাইটের সামনের প্রান্তে একটি অভিনব ভিজ্যুয়াল আউটপুট তৈরি করে, যা প্রকৃত কোড স্নিপেটের মধ্যে উপস্থিত ট্যাগ, স্ল্যাশ এবং বন্ধনী থেকে আলাদা।
যাইহোক, এটি বিকাশ এবং নকশা সম্পর্কে লেখা ব্যক্তিদের জন্য একটি দুর্দশার জন্ম দেয়, কারণ তাদের উদ্দেশ্যমূলক কার্যকারিতা যেমন একটি বোতাম তৈরি করা বা একটি অনুচ্ছেদ ব্লকে শৈলী প্রয়োগ করা ছাড়াই কোডটিকে যথাযথভাবে উপস্থাপন করার একটি উপায় প্রয়োজন।
সহজ কথায়, উদাহরণ হিসেবে একটি কোড স্নিপেট অন্তর্ভুক্ত করে এমন একটি ব্লগ পোস্ট তৈরি করার সময়, কোডটিকে কার্যকর করা থেকে বিরত রাখা অপরিহার্য। এই পদ্ধতিটি পাঠকদের কোডটিকে তার আসল আকারে উপলব্ধি করতে, এটি একটি ভাল-ফরম্যাট করা ব্লকের মধ্যে দেখতে এবং এমনকি তাদের নিজস্ব উন্নয়ন প্রচেষ্টার জন্য এর বিষয়বস্তু অনুলিপি করতে দেয়।
নির্বাচিত ওয়ার্ডপ্রেস থিম নির্বিশেষে, ওয়ার্ডপ্রেসে কোড প্রদর্শনের জন্য বিভিন্ন পদ্ধতি প্রদর্শন করা এই গাইডের লক্ষ্য। উপরন্তু, এটি আপনাকে আপনার নির্দিষ্ট কর্মপ্রবাহের জন্য সবচেয়ে উপযুক্ত পদ্ধতি নির্ধারণে সহায়তা করবে।
আশ্চর্যজনক ওয়েবসাইট তৈরি করুন
সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে
এখুনি শুরু করুনআপনি WordPress? এ নিয়মিত কোড যোগ করলে কি হয়
আপনি যখন কোনো নির্দিষ্ট ব্যবস্থা না নিয়ে সরাসরি কোনো ওয়ার্ডপ্রেস পোস্ট বা পৃষ্ঠায় নিয়মিত কোড যোগ করেন, কোডটি অনিচ্ছাকৃত পরিণতির কারণ হতে পারে। ওয়ার্ডপ্রেসের অন্তর্নির্মিত ব্যবস্থা রয়েছে যা নিরাপত্তা এবং যথাযথ কার্যকারিতা নিশ্চিত করতে সামগ্রীকে স্বয়ংক্রিয়ভাবে প্রক্রিয়া এবং স্যানিটাইজ করে। ফলস্বরূপ, যখন নিয়মিত কোড যোগ করা হয়, তখন এটি ওয়ার্ডপ্রেস দ্বারা পরিবর্তিত বা সম্পূর্ণরূপে ছিনিয়ে যেতে পারে।
আপনি ওয়ার্ডপ্রেসে নিয়মিত কোড যোগ করলে এখানে কিছু জিনিস ঘটতে পারে:
- কোড পরিবর্তন: ওয়ার্ডপ্রেস সম্ভাব্য নিরাপত্তা ঝুঁকি বা প্ল্যাটফর্মের কার্যকারিতার সাথে দ্বন্দ্ব প্রতিরোধ করার জন্য কিছু উপাদান সরিয়ে বা সংশোধন করে কোড পরিবর্তন করতে পারে। এর ফলে কোডটি উদ্দেশ্য অনুযায়ী কার্যকর হচ্ছে না বা ত্রুটি তৈরি করতে পারে।
- কোড স্ট্রিপিং: ওয়ার্ডপ্রেসের ফিল্টার এবং নিরাপত্তা ব্যবস্থা রয়েছে যা কিছু নির্দিষ্ট ধরণের কোডকে অনিরাপদ বা অপ্রয়োজনীয় বলে মনে করে সরিয়ে ফেলতে পারে। এটি গুরুত্বপূর্ণ কোড স্নিপেট বা সম্পূর্ণ কোড ব্লক নিজেই অপসারণ হতে পারে।
- ভিজ্যুয়াল বিকৃতি: কোডে সাধারণত বিশেষ অক্ষর, চিহ্ন এবং বিন্যাস থাকে যা আপনার ওয়ার্ডপ্রেস বিষয়বস্তুর ভিজ্যুয়াল প্রেজেন্টেশনে হস্তক্ষেপ করতে পারে। এটি ফরম্যাটিং সমস্যা, মিসলাইনমেন্ট বা কোড হিসাবে রেন্ডার করার পরিবর্তে প্লেইন টেক্সট হিসাবে প্রদর্শিত হতে পারে।
- কোড কার্যকর করা: কিছু ক্ষেত্রে, যদি কোডটি সঠিকভাবে স্যানিটাইজ করা বা পরিচালনা করা না হয় তবে এটি কার্যকর করতে পারে এবং এর উদ্দেশ্যমূলক কার্যকারিতা সম্পাদন করতে পারে। এটির অপ্রত্যাশিত পরিণতি হতে পারে, যেমন বোতাম তৈরি করা, বিষয়বস্তুর চেহারা পরিবর্তন করা বা এমনকি আপনার ওয়েবসাইটের সামগ্রিক কার্যকারিতাকে প্রভাবিত করা।
এই সমস্যাগুলি কাটিয়ে উঠতে এবং ওয়ার্ডপ্রেসে নিরাপদে কোড প্রদর্শন করতে, কোড স্নিপেটগুলি প্রদর্শনের জন্য বিশেষভাবে ডিজাইন করা উপযুক্ত পদ্ধতি বা প্লাগইনগুলি ব্যবহার করার পরামর্শ দেওয়া হয়৷ এই পদ্ধতিগুলি নিশ্চিত করে যে কোডটি সঠিকভাবে ফরম্যাট করা, সংরক্ষিত এবং কোনো অবাঞ্ছিত পরিবর্তন বা সম্পাদন ছাড়াই প্রদর্শিত হয়েছে।
এখানে আমরা স্নিপেটে নিম্নলিখিত HTML কোড যোগ করতে যাচ্ছি:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>
এই নির্দিষ্ট কোডের উদ্ধৃতিটি এইচটিএমএল স্টাইলিং উপাদানগুলিকে নিযুক্ত করে সবুজ রঙে সজ্জিত তিনটি বিষয়বস্তু ব্লক তৈরি করতে, শিরোনাম এবং অনুচ্ছেদ সহ সম্পূর্ণ।
তবুও, আমাদের উদ্দেশ্য হল প্রদত্ত ব্লকগুলিতে রেন্ডার করার অনুমতি না দিয়ে একটি ব্লগ পোস্টের মধ্যে প্রক্রিয়া না করা কোডটি উপস্থাপন করা।
কোডটি সরাসরি ওয়ার্ডপ্রেস গুটেনবার্গ ব্লক এডিটরে পেস্ট করলে নিম্নলিখিত ফলাফলগুলি লক্ষ্য করা যায়:
উল্লিখিত বিষয়গুলির পরিপ্রেক্ষিতে, এটি স্পষ্ট যে ওয়ার্ডপ্রেস তার সামগ্রী তৈরির প্রাথমিক ফাংশনের জন্য কোডটি নিয়োগ করার চেষ্টা করে। যাইহোক, এটি কোড থেকে স্টাইলিং সরিয়ে দেয়, যার ফলে পাঠকদের কাছে পছন্দসই ফলাফল উপস্থাপন করতে ব্যর্থ হয়।
এই ধরনের পরিস্থিতি এড়াতে, আমরা দৃঢ়ভাবে কোড প্রদর্শনের উদ্দেশ্যে নীচে গণনা করা পদ্ধতিগুলির মধ্যে একটির ব্যবহারকে সমর্থন করি৷
ওয়ার্ডপ্রেসে কোড প্রদর্শনের ৪টি উপায়
নিম্নলিখিত কৌশলগুলি কঠিনতার ক্রমবর্ধমান ক্রম অনুসারে সাজানো হয়েছে, এবং আমরা ওয়ার্ডপ্রেস ব্যবহার করার বিপরীতে মার্কডাউন সম্পাদকের মধ্যে কোড এবং বিষয়বস্তু রচনা করে সন্তুষ্টি অর্জনকারী ব্যক্তিদের জন্য উপযোগী নির্দিষ্ট পদ্ধতির প্রস্তাব দিই।
পদ্ধতি 1: গুটেনবার্গ ব্লক এডিটর ব্যবহার করা
গুটেনবার্গ সম্পাদক একটি পূর্ব-বিদ্যমান কোড ব্লক অন্তর্ভুক্ত করে যা কোড স্নিপেটগুলিকে তাদের বিন্যাস সংরক্ষণ করার সময় এবং কোডটি কার্যকর না করে উপস্থাপনের সুবিধা দেয়।
শুরু করতে, ওয়ার্ডপ্রেসে একটি পোস্ট বা পৃষ্ঠা অ্যাক্সেস করুন এবং অ্যাড ব্লক বোতামগুলির মধ্যে একটি নির্বাচন করতে এগিয়ে যান।
এগিয়ে যেতে দয়া করে "অ্যাড ব্লক" বোতামগুলির একটি নির্বাচন করুন৷
এটি করার মাধ্যমে, উপলব্ধ ব্লকের ভাণ্ডার উন্মোচন করা হবে। আপনার কাছে "কোড" ব্লক অনুসন্ধান করার বা অনুসন্ধান বারে "কোড" এর মতো একটি কীওয়ার্ড ইনপুট করার বিকল্প রয়েছে।
কোড ব্লক সনাক্ত করার পরে, এটির বন্ধনী আইকন দ্বারা সনাক্ত করা যায়, পোস্টে কোডের একটি অংশ সন্নিবেশ করার জন্য এটিতে ক্লিক করতে এগিয়ে যান।
বর্তমানে, "কম্পোজ কোড…" কিউ সমন্বিত একটি এলাকা আপনার কাছে পর্যবেক্ষণযোগ্য হওয়া উচিত।
ওয়ার্ডপ্রেস গুটেনবার্গ এডিটর মার্কডাউন সমর্থন প্রদান করে, ফরওয়ার্ড স্ল্যাশ (/) এর পরে সম্পাদকের মধ্যে "C" বা "কোড" এর ইনপুট ব্যবহার করে কোড ব্লকের আবিষ্কার এবং সন্নিবেশ সক্ষম করে। ওয়ার্ডপ্রেস পরবর্তীতে সমস্ত প্রাসঙ্গিক ব্লক প্রদর্শন করবে, যা আরও সমীচীন সন্নিবেশ প্রক্রিয়াকে সহজতর করবে।
কোড ব্লক এবং কাস্টম HTML ব্লকের মধ্যে পার্থক্য লক্ষ্য করা গুরুত্বপূর্ণ। কাস্টম এইচটিএমএল ব্লকটি ফ্রন্টএন্ডে রেন্ডার করার জন্য কাস্টম এইচটিএমএল কোড অন্তর্ভুক্ত করার উদ্দেশ্যে তৈরি করা হয়েছে, কোড ব্লকটি বিশেষভাবে প্রদর্শনের উদ্দেশ্যে কাঁচা কোড যোগ করার জন্য ডিজাইন করা হয়েছে।
বর্তমানে, পছন্দসই কোডটি প্রতিলিপি করা এবং "কোড লিখুন..." হিসাবে লেবেলযুক্ত মনোনীত এলাকায় এটি সন্নিবেশ করার উপযুক্ত মুহূর্ত।
আপনার প্রদত্ত কোডটি এখন মনোনীত কোড ব্লকের মধ্যে আবদ্ধ।
কোড ব্লকের একটি সুবিধাজনক দিক হল মূল কোড স্নিপেটের মধ্যে স্পেস এবং ট্যাবগুলির বিন্যাসকে মেনে চলা। ফলস্বরূপ, প্রদর্শিত কোডটি যে উত্স থেকে এটি অনুলিপি করা হয়েছিল তার সাথে তার চাক্ষুষ সামঞ্জস্য বজায় রাখা উচিত।
আপনার ওয়ার্ডপ্রেস পোস্ট বা পৃষ্ঠার মধ্যে আপনার কোড প্রদর্শন করতে, "প্রকাশ করুন" বোতামে ক্লিক করে প্রক্রিয়াটি শেষ করুন। তদ্ব্যতীত, আপনার কাছে "প্রিভিউ" নির্বাচন করে প্রকাশনার আগে এর উপস্থিতির একটি ভিজ্যুয়াল উপস্থাপনা পাওয়ার বিকল্প রয়েছে।
"প্রকাশ করুন" বোতামে ক্লিক করার পরে, কোড স্নিপেটটি কাঁচা কোড হিসাবে প্রদর্শিত হচ্ছে তা যাচাই করতে পোস্টটির লাইভ সংস্করণ অ্যাক্সেস করতে এগিয়ে যান।
যেমন পর্যবেক্ষণ করা হয়েছে, কোড ব্লকটি তার সরলতার দ্বারা চিহ্নিত করা হয়েছে, তবুও এটি ব্লগ পোস্টের মধ্যে কোড উপস্থাপন করার সময় বিন্যাস সংরক্ষণের অপরিহার্য উদ্দেশ্যে কাজ করে।
নীচে দেওয়া স্ক্রিনশট পড়ুন. এই বিশেষ উদাহরণে, মূল কোড স্নিপেট অপরিবর্তিত থাকে; এটি শুধুমাত্র একটি ধূসর বাক্সের মধ্যে সামনের প্রান্তে উপস্থাপিত হয়।
কোড ব্লকের প্রাধান্য বাড়ানোর জন্য, এটির ডিফল্ট চেহারা পরিবর্তন করার কথা বিবেচনা করা যুক্তিযুক্ত।
ব্লকের জন্য উপলব্ধ স্টাইলিং পছন্দ অ্যাক্সেস করতে, অনুগ্রহ করে কোড ব্লক নির্বাচন করুন এবং সেটিংস (গিয়ার আইকন) বোতামে ক্লিক করতে এগিয়ে যান। এই ক্রিয়াটি ব্লক ট্যাব খুলবে, একচেটিয়াভাবে নির্বাচিত ব্লকের জন্য প্রযোজ্য ব্লক সেটিংস প্রদর্শন করবে, যথা, এই উদাহরণে কোড ব্লক।
একজনের ব্যক্তিগত পছন্দ অনুযায়ী কোড ব্লক কাস্টমাইজ করার ক্ষমতা রয়েছে, যার মধ্যে টেক্সট এবং ব্যাকগ্রাউন্ডের রঙের মতো দিক পরিবর্তন করার বিকল্প রয়েছে।
পদ্ধতি 2: একটি প্লাগইন ব্যবহার করা
আপনার ওয়ার্ডপ্রেস সাইটে Enlighter – কাস্টমাইজেবল সিনট্যাক্স হাইলাইটার প্লাগইন অন্তর্ভুক্ত করতে আপনার পছন্দের প্লাগইন ইনস্টলেশন পদ্ধতি ব্যবহার করুন।
একবার সক্রিয় হয়ে গেলে, প্লাগইনটি সম্পূর্ণরূপে কার্যকরী হবে এবং আপনাকে গুটেনবার্গ ব্লক বা ক্লাসিক এডিটর সন্নিবেশ বোতামের মাধ্যমে যেকোনো পোস্ট/পৃষ্ঠায় কোড সন্নিবেশ করার অনুমতি দেবে।
আপনি যদি ওয়ার্ডপ্রেস গুটেনবার্গ ব্লক এডিটর ব্যবহার করেন, তাহলে একটি পোস্ট অ্যাক্সেস করুন যেখানে আপনি কোড প্রদর্শন করতে চান। উপলভ্য ব্লকের ভাণ্ডার উন্মোচন করতে অ্যাড ব্লক বোতামগুলির মধ্যে একটি নির্বাচন করুন ("+" চিহ্ন দ্বারা চিহ্নিত)।
এনলাইটেন সোর্সকোড ব্লকের সাথে সম্পর্কিত একটি কীওয়ার্ড অনুধাবন করুন বা ইনপুট করুন। পোস্টের মধ্যে অন্তর্ভুক্ত করার জন্য সংশ্লিষ্ট ব্লকে ক্লিক করতে এগিয়ে যান।
এনলাইটার হাইলাইটার ব্লকটি পরবর্তীকালে ব্লক এডিটর ইন্টারফেসের মধ্যে প্রদর্শিত হয়, যেখানে "জেনারিক হাইলাইটিং" শিরোনামের একটি মনোনীত শিরোনাম এবং "সোর্সকোড সন্নিবেশ করুন..." লেবেলযুক্ত একটি টেক্সট ইনপুট ক্ষেত্র রয়েছে।
অনুগ্রহ করে ওয়ার্ডপ্রেসে প্রদর্শনের জন্য নির্ধারিত "সোর্সকোড সন্নিবেশ..." টেক্সট ফিল্ডে ইনপুট বা অনুলিপি করুন এবং পেস্ট করুন।
সিনট্যাক্স হাইলাইটার হিসাবে এর ক্ষমতায়, প্লাগইনটি সমস্ত ফর্ম্যাটিং পছন্দ এবং ট্যাবুলেশন ধরে রাখে। ফলাফলের সাথে সন্তুষ্টি অর্জন করার পরে, অনুগ্রহ করে "প্রকাশ করুন" বোতামটি নির্বাচন করতে এগিয়ে যান৷
এই কার্যকারিতা ব্যবহার করে, আপনি সাইটের দর্শকদের মতো একই বিষয়বস্তু পর্যবেক্ষণ করতে আপনার পোস্টের ব্যবহারকারী ইন্টারফেস অ্যাক্সেস করতে পারেন।
এনলাইটার প্লাগইন কোড প্রদর্শনের জন্য একটি সরলীকৃত ডিফল্ট থিম প্রদান করে, যার সাথে লাইন নম্বর থাকে যা গঠন এবং রেফারেন্সিং প্রক্রিয়ায় সহায়তা করে।
পূর্বে উল্লিখিত হিসাবে, ওয়ার্ডপ্রেস প্ল্যাটফর্মে কোড প্রদর্শনের জন্য একটি প্লাগইন ব্যবহার করা বিকল্প পদ্ধতির তুলনায় স্বতন্ত্র সুবিধা প্রদান করে। এই ধরনের সুবিধার একটি দৃষ্টান্তমূলক উদাহরণ হল এনলাইটার সিনট্যাক্স প্লাগইন দ্বারা প্রদত্ত ফ্রন্টএন্ড কার্যকারিতা, যেখানে ব্যবহারকারী বিষয়বস্তুর মাধ্যমে স্ক্রোল করার সাথে সাথে কোডের লাইনগুলি গতিশীলভাবে হাইলাইট করা হয়।
উপরন্তু, উপরের-ডান কোণায় অবস্থিত কোড বক্সের মধ্যে, বেশ কয়েকটি বোতাম রয়েছে যা ব্যবহারকারীর অভিজ্ঞতা বাড়ায়। উল্লেখযোগ্যভাবে, এই বোতামগুলির মধ্যে একটি লাইন নম্বর ছাড়াই প্লেইন টেক্সট বিন্যাসে কোডের উপস্থাপনা সক্ষম করে।
দ্বিতীয় বোতাম, "ক্লিপবোর্ডে অনুলিপি করুন" হিসাবে চিহ্নিত, কোড বক্সের মধ্যে সমস্ত বিষয়বস্তুর তাত্ক্ষণিক নকলের সুবিধা দেয়, ব্যবহারকারীদের সুবিধাজনকভাবে কোডটিকে যেকোনো পছন্দসই প্রোগ্রামে স্থানান্তর এবং পেস্ট করতে সক্ষম করে।
অবশেষে, তৃতীয় বোতামটি একটি নতুন উইন্ডোতে কোডটি খোলে, যার ফলে এটিকে প্লেইন টেক্সট হিসাবে ফর্ম্যাট করা একটি ব্রাউজার উইন্ডোতে উপস্থাপন করা হয়।
এনলাইটার প্লাগইন আপনার পছন্দ অনুযায়ী কোড বক্সের চেহারা সাজাতে বিভিন্ন থিম এবং শক্তিশালী কাস্টমাইজেশন টুল অফার করে। আপনি যদি ডিফল্ট থিমটি ব্যবহার না করতে পছন্দ করেন তবে আপনি ওয়ার্ডপ্রেসের মধ্যে আপনার পোস্টে ফিরে যেতে পারেন এবং বর্তমানে সক্রিয় এনলাইটার সোর্সকোড ব্লকটি নির্বাচন করতে পারেন।
এই ক্রিয়াটি ওয়ার্ডপ্রেসের মধ্যে ব্লক সাইডবার উন্মোচন করবে। যদি এটি অবিলম্বে প্রদর্শিত না হয়, দয়া করে নিশ্চিত করুন যে আপনি ওয়ার্ডপ্রেস উইন্ডোর উপরের-ডানদিকে অবস্থিত সেটিংস (গিয়ার আইকন) বোতামে ক্লিক করেছেন।
বিবেচনা করার জন্য প্রাথমিক কাস্টমাইজেশন বিকল্পটি হল ভাষা ক্ষেত্র, কারণ এটি প্লাগইনকে নির্দেশ দেয় কোন কোড ভাষা প্রদর্শন করতে হবে, উপযুক্ত বিন্যাস এবং বৈশিষ্ট্যগুলি হাইলাইট করতে সক্ষম করে।
বিবেচনা করার জন্য কোডিং ভাষার একটি উল্লেখযোগ্য নির্বাচন বিদ্যমান, তাই তালিকাটি অনুধাবন করুন এবং সবচেয়ে উপযুক্ত একটি নির্বাচন করুন।
স্পেশালাইন বৈশিষ্ট্য ব্যবহারকারীদের কমা দ্বারা পৃথক লাইন নম্বর ইনপুট করার অনুমতি দিয়ে মনোনীত লাইনের উপর জোর দেয়।
ফলস্বরূপ, আপনি যে মনোনীত লাইনগুলি নির্দিষ্ট করেছেন সেগুলি সাইটে প্রবেশকারী সমস্ত ব্যক্তির জন্য দৃশ্যত জোর দেওয়া হয়েছে।
লাইনঅফসেট প্যারামিটার একটি নির্দিষ্ট লাইন নম্বরে আপনার কোডিং স্নিপেট শুরু করার একটি উপায় প্রদান করে, একটি বড় সেট থেকে কোডের একটি উপসেট উপস্থাপন করার সময় সুবিধাজনক প্রমাণিত হয়।
স্পষ্টতই, লাইনঅফসেট ক্ষেত্রে "10" মান ইনপুট করার মাধ্যমে, কোড বক্সের সম্পূর্ণতা লাইন নম্বর 10 থেকে শুরু হয়।
পদ্ধতি 3: একটি এনকোডার টুল ব্যবহার করা
অনুগ্রহ করে W3Docs HTML এনকোডার ওয়েবসাইট দেখুন। পৃষ্ঠায়, আপনি দুটি সংলগ্ন বক্স ক্ষেত্র পাবেন। বামটি আপনার কোড পেস্ট করার জন্য মনোনীত করা হয়েছে, যখন ডানটি এনকোড করা সংস্করণটি প্রদর্শন করে যা আপনি কপি করে ওয়ার্ডপ্রেসে পেস্ট করতে পারেন।
এগিয়ে যাওয়ার আগে, পছন্দসই কোড সংরক্ষণের ধরনটি নির্দিষ্ট করা প্রয়োজন:
- আপনি যদি জাভাস্ক্রিপ্ট উপাদান ধারণকারী কোড পেস্ট করার পরিকল্পনা করেন তবে JavaScript ইউনিকোড নির্বাচন করুন।
- আপনি যদি এইচটিএমএল নিয়ে কাজ করেন তবে এইচটিএমএল চিহ্ন বেছে নিন।
অনুগ্রহ করে ওয়ার্ডপ্রেসে প্রদর্শিত হওয়ার জন্য পছন্দসই কোডটি বাম দিকে মনোনীত ক্ষেত্রে প্রবেশ করান৷ পরবর্তীকালে, ডানদিকে উপরে অবস্থিত এনকোড বোতামটি সনাক্ত করুন এবং নির্বাচন করুন।
চূড়ান্ত ফলাফল বিভ্রান্তিকর প্রদর্শিত হতে পারে; যাইহোক, এটি মূলত এইচটিএমএল উপাদানগুলির একটি সংমিশ্রণ যার লক্ষ্য সন্নিবেশিত কোডের সম্পূর্ণতা সংরক্ষণ করা, কোনো অনিচ্ছাকৃত সক্রিয়করণ বা ফ্রন্টএন্ডে বিকল্প সামগ্রী প্রদর্শন এড়ানোর সময়।
অনুগ্রহ করে "কপি" বোতামে ক্লিক করুন।
ওয়ার্ডপ্রেস এ ফিরে যান এবং অভিপ্রেত পোস্ট বা পৃষ্ঠা অ্যাক্সেস করুন। উপরের ডানদিকে কোণায় অবস্থিত বিকল্পগুলি (তিনটি উল্লম্ব বিন্দু দ্বারা উপস্থাপিত) মেনু নির্বাচন করতে এগিয়ে যান। পরবর্তীকালে, কোড এডিটর বৈশিষ্ট্যটি বেছে নিন।
বর্তমান ইন্টারফেস ভিজ্যুয়াল ব্লক এডিটরের পরিবর্তে কোড এডিটর উপস্থাপন করবে। কোড প্রদর্শনের জন্য পছন্দসই বিভাগটি সনাক্ত করুন এবং সম্পাদকে আপনার এনকোড করা HTML সন্নিবেশ করতে এগিয়ে যান।
আপনি ক্লাসিক ওয়ার্ডপ্রেস এডিটর ব্যবহার করার ক্ষেত্রে, টেক্সট ট্যাবে নেভিগেট করা অপরিহার্য, যেটি গুটেনবার্গ ব্লক এডিটরের কোড এডিটরের সাথে মিলে যায়।
পোস্টটি চূড়ান্ত করতে অনুগ্রহ করে "আপডেট" বা "প্রকাশ করুন" বিকল্পটি নির্বাচন করুন, এবং এর ভিজ্যুয়াল উপস্থাপনা পর্যবেক্ষণ করতে পোস্টের সামনের প্রান্তে যান৷
আপনি এইচটিএমএল এনকোডিং উপাদানগুলি অন্তর্ভুক্ত করার আগে এনকোডারে প্রাথমিকভাবে ঢোকানো অপরিবর্তিত কোডটি পর্যবেক্ষণ করতে সক্ষম হবেন। এটি লক্ষ্য করা গুরুত্বপূর্ণ যে এনকোডারগুলি কোনও স্টাইলিং ক্ষমতা প্রদান করে না, যা একটি পরিপাটি এবং ন্যূনতম নান্দনিকতা অর্জনের জন্য এই পদ্ধতিটিকে আদর্শ করে তোলে।
পদ্ধতি 4: একটি কাস্টম শর্টকোড ব্যবহার করা
একটি কাস্টম শর্টকোড তৈরি করা ম্যানুয়াল কপি এবং পেস্ট করার প্রয়োজন ছাড়াই কোডের পুনঃব্যবহারযোগ্য ব্লক সন্নিবেশ করার কাজটি পূরণ করে। এই কারণেই কাস্টম শর্টকোডগুলি ওয়ার্ডপ্রেস প্ল্যাটফর্মে কোড প্রদর্শনের জন্য একটি শক্তিশালী সুযোগ প্রদান করে।
কোড উপস্থাপনার জন্য কাস্টম শর্টকোড ব্যবহার করার সুবিধাগুলি নিম্নরূপ:
- কাস্টম শর্টকোডগুলি ভবিষ্যতের পুনঃব্যবহারের জন্য জটিল কোড বিভাগগুলি সংরক্ষণ করতে সক্ষম করে, বারবার দীর্ঘ কোড স্নিপেট টাইপ করার প্রয়োজনীয়তা দূর করে৷
- কোড হাইলাইটার এবং পাত্রের জন্য ব্যক্তিগতকৃত CSS শৈলী সংজ্ঞায়িত করা সম্ভব।
- শর্টকোডগুলি যে কোনও ব্যবহারকারীর দ্বারা নিযুক্ত করা যেতে পারে, অন্য অবদানকারীদেরকে একটি সাধারণ ক্লিকের মাধ্যমে আপনার কোড হাইলাইটার এবং ব্লকগুলিকে অনায়াসে লিভারেজ করতে সক্ষম করে৷
একটি কাস্টম শর্টকোড তৈরি করার জন্য ওয়ার্ডপ্রেস থিম ফাইলগুলি সংশোধন করতে, পিএইচপি কোডের সাথে কাজ করতে এবং সম্ভাব্যভাবে ওয়ার্ডপ্রেস প্লাগইনগুলি বিকাশে দক্ষতার প্রয়োজন হয়৷ ফলস্বরূপ, ওয়ার্ডপ্রেসের জন্য একটি কাস্টম শর্টকোড তৈরি করা পিএইচপি-তে নতুন ব্যক্তিদের জন্য অসুবিধা সৃষ্টি করতে পারে।
তবুও, শেষ ফলাফলটি ওয়ার্ডপ্রেস প্ল্যাটফর্মে কোড প্রদর্শনের জন্য যথেষ্ট সহজ পদ্ধতির প্রস্তাব দেয়।
কাস্টম শর্টকোডের জন্য যে কোনো পছন্দসই নাম বেছে নেওয়ার স্বাধীনতা আছে এবং বিভিন্ন ধরনের প্রোগ্রামিং ভাষাকে মিটমাট করার জন্য [html] [/html] এবং [css] [/css]-এর মতো বিভিন্ন বিকল্প স্থাপন করার স্বাধীনতা রয়েছে।
অনুগ্রহ করে পরামর্শ দিন যে সর্বোত্তম সিনট্যাক্স হাইলাইট করার জন্য, ওয়ার্ডপ্রেস গুটেনবার্গ ব্লক এডিটরের সাথে কাজ করার সময় টেক্সট এডিটর (ওয়ার্ডপ্রেস ক্লাসিকে) বা কাস্টম এইচটিএমএল বক্সের সাথে কাস্টম শর্টকোড ব্যবহার করার পরামর্শ দেওয়া হয়।
উদ্দেশ্য হল একটি বেসপোক শর্টকোড তৈরি করা যা ব্যবহারকারীদের শর্টকোডের খোলা এবং বন্ধ করার ট্যাগের সীমাবদ্ধ সীমার মধ্যে কোড ইনপুট বা সন্নিবেশ করতে সক্ষম করে।
উদ্দেশ্য হল একটি উপযোগী শর্টকোড তৈরি করা যা ব্যবহারকারীদের শর্টকোডের নির্ধারিত ওপেনিং এবং ক্লোজিং ট্যাগের মধ্যে কোড ইনপুট বা সন্নিবেশ করতে দেয়।
মোড়ক উম্মচন
ওয়ার্ডপ্রেসে কোড প্রদর্শন করা প্রোগ্রামিং ধারণা ভাগ করে নেওয়া, নির্ভুলতা নিশ্চিত করা, নান্দনিকতা উন্নত করা এবং সহযোগিতা বৃদ্ধির জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি ডেভেলপারদের তাদের শ্রোতাদের শিক্ষিত করতে, সুনির্দিষ্ট প্রমাণ প্রদান করতে, ব্যবহারকারীর অভিজ্ঞতা বাড়াতে এবং সম্প্রদায়ের অংশগ্রহণকে উত্সাহিত করতে দেয়৷ কোড স্নিপেট প্রদর্শন করা স্বচ্ছতা, বিশ্বাস এবং নির্ভরযোগ্য তথ্য প্রচার করে। কাস্টম শর্টকোড বা প্লাগইনগুলি দৃশ্যত আকর্ষণীয় এবং সুগঠিত কোড প্রদর্শন নিশ্চিত করতে পারে। শেয়ারিং কোড আলোচনা, প্রতিক্রিয়া এবং উদ্ভাবনের সুবিধা দেয়। সামগ্রিকভাবে, ওয়ার্ডপ্রেসে কার্যকরী কোড প্রদর্শন জ্ঞানের বিস্তার, গুণমানের নিশ্চয়তা এবং ওয়ার্ডপ্রেস ডেভেলপমেন্ট সম্প্রদায়ের বৃদ্ধির জন্য অপরিহার্য।
