ওয়ার্ডপ্রেস একটি শক্তিশালী বিষয়বস্তু ব্যবস্থাপনা সিস্টেম যা ইন্টারনেটের সমস্ত ওয়েবসাইটের অর্ধেকের বেশি ক্ষমতা রাখে। বিল্ট-ইন সিআরএম একজনের জন্য ওয়েবসাইট তৈরি করা সহজ করে তোলে এমনকি যদি আপনি আগে কখনও কম্পিউটার প্রোগ্রাম না লেখেন। যদিও ওয়ার্ডপ্রেস ওয়েবসাইটে সাধারণ পাঠ্যের একটি ব্লক প্রদর্শন করা এত সহজ, কম্পিউটার কোডের ক্ষেত্রে একই কথা বলা যায় না। দর্শকদের বিশ্লেষণ এবং বোঝার জন্য কোডের একটি অংশ পর্যাপ্তভাবে প্রদর্শিত হতে হবে। এবং সেখানেই ওয়ার্ডপ্রেস কোড ব্লক আসে।
আপনি যদি ওয়ার্ডপ্রেসে কোড ব্লকগুলি কীভাবে ব্যবহার করবেন তা জানতে চান, আপনি সঠিক জায়গায় এসেছেন। এই নিবন্ধে, আমরা আপনাকে পুরো প্রক্রিয়ার মধ্য দিয়ে হেঁটে দেব যাতে আপনি আপনার পাঠকদের সাথে কোড স্নিপেট শেয়ার করা শুরু করতে পারেন। আরও জানতে পড়া চালিয়ে যান।
কিভাবে ওয়ার্ডপ্রেসে কোড ব্লক ব্যবহার করবেন
একটি সাধারণ ওয়েবপেজ পাঠ্য হিসাবে একটি কম্পিউটার প্রোগ্রাম প্রদর্শন করা বিপর্যয়কর হতে পারে। অনেক ব্যবহারকারীর জন্য এটি কল্পনা করা এবং বোঝা কঠিন হবে। সৌভাগ্যবশত, অনেক ওয়ার্ডপ্রেস সম্পাদকের একটি কোড ব্লক বৈশিষ্ট্য রয়েছে যা আপনাকে একটি কোড বিন্যাসে একটি কম্পিউটার প্রোগ্রাম প্রদর্শন করতে দেয়।
সৌভাগ্যবশত, কম্পিউটার কোড প্রদর্শনের জন্য কোড ব্লক ব্যবহার করা তুলনামূলকভাবে সহজ। শুরু করার জন্য, আপনাকে নেটিভ ওয়ার্ডপ্রেস এডিটরে স্যুইচ করতে হবে কারণ কিছু টেক্সট প্লাগইনগুলিতে বৈশিষ্ট্যটি নাও থাকতে পারে। একবার আপনি এটি সম্পন্ন করার পরে, একটি ওয়েবসাইট পৃষ্ঠায় কোডের একটি ব্লক যুক্ত করতে এই পদক্ষেপগুলি অনুসরণ করুন:
- 'নতুন' বোতামে ক্লিক করে আপনি যে ওয়েবপৃষ্ঠাটিতে একটি কোড ব্লক যোগ করতে চান সেটি খুলুন।
- '/কোড' টাইপ করুন এবং 'এন্টার' টিপুন।
- আপনি যে কোডটি প্রদর্শন করতে চান সেটি টাইপ বা পেস্ট করুন এবং 'এন্টার' কী টিপুন।
- আপনি এইমাত্র যে কোডটি লিখেছেন তার চেহারা কাস্টমাইজ করতে আপনি কোড ব্লক টুলবারটি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি একটি লাইন বোল্ড করতে 'B' বোতাম ব্যবহার করতে পারেন বা এটিকে তির্যক করতে 'i' বোতামটি ব্যবহার করতে পারেন।
- একবার আপনি আপনার ওয়েবপৃষ্ঠাটি লেখার কাজ শেষ করলে, একটি লাইভ সংস্করণে কোড ব্লকটি কেমন হবে তা দেখতে 'প্রিভিউ' বোতামে ক্লিক করুন।
- চূড়ান্ত ফলাফলের সাথে সন্তুষ্ট হলে, কোড ব্লকটি দেখতে অন্যদের জন্য 'আপডেট' বোতামটি চাপুন।
আপনার কোড ব্লকের টাইপোগ্রাফি কীভাবে পরিবর্তন করবেন
টাইপোগ্রাফি প্রচুর পরিমাণে কথা বলে এবং এটি শুধুমাত্র আপনার কোড ব্লক নয় বরং সমগ্র ওয়েব পৃষ্ঠার নান্দনিকতা তৈরি বা ভাঙতে পারে। আপনার কোড ব্লকের টাইপোগ্রাফি পরিবর্তন করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- কোড ব্লক হাইলাইট করুন যার টাইপোগ্রাফি আপনি পরিবর্তন করতে চান।
- স্ক্রিনের উপরের ডানদিকে কোণায় 'সেটিংস' আইকনে ক্লিক করুন।
- 'টাইপোগ্রাফি' বিভাগের অধীনে, আপনার পছন্দের টাইপোগ্রাফি নির্দিষ্ট করুন।
- পরিবর্তনগুলি সংরক্ষণ করতে 'আপডেট' বোতামে ক্লিক করুন।
আপনি লাইনের ব্যবধানে রঙ, পটভূমি, অক্ষর ব্যবধান পরিবর্তন করে ব্লকের নান্দনিকতা আরও কাস্টমাইজ করতে পারেন।
উদাহরণস্বরূপ, আপনার যদি একটি অন্ধকার-থিমযুক্ত ওয়েবসাইট থাকে তবে আপনি আপনার কোড ব্লকের একটি ভিন্ন পটভূমিতেও চাইতে পারেন।
কিভাবে ওয়ার্ডপ্রেসে একটি কোড ব্লক মুছে ফেলবেন
কোড ব্লকগুলি স্থায়ী নয় এবং একটি ওয়ার্ডপ্রেস ওয়েবপৃষ্ঠার অন্যান্য উপাদানগুলির মতো, আপনি সেগুলি মুছতে পারেন। প্রক্রিয়াটি সম্পর্কে কীভাবে যেতে হবে তা এখানে:
- আপনি যে কোড ব্লকটি মুছতে চান সেটি ওয়েবপেজ বা পোস্ট খুলুন।
- আপনি যে কোড ব্লকটি হাইলাইট করতে মুছতে চান সেটিতে ক্লিক করুন।
- কোড ব্লকের উপরে ডানদিকে পপ আপ হওয়া উইজেটে, তিনটি বিন্দুতে ক্লিক করুন।
- বিকল্পগুলি থেকে, 'কোড সরান' নির্বাচন করুন।
উপরের কর্মটি ওয়েব পৃষ্ঠা থেকে সম্পূর্ণ কোড ব্লক মুছে ফেলা উচিত। বিকল্পভাবে, আপনি কেবল ব্লকটি নির্বাচন করতে পারেন এবং 'মুছুন' কী টিপুন। আপনি একই সময়ে 'Ctrl' + 'Shift' + 'Z' কী টিপতে পারেন এবং এটি একই ফলাফল অর্জন করবে।
ইতিমধ্যে প্রকাশিত কোড ব্লক কিভাবে সম্পাদনা করবেন
কিছুক্ষণের মধ্যে, আপনি ভুল করতে বাধ্য। আপনি কোডের মাধ্যমে ধারণাটি কার্যকর করার আরও ভাল উপায়ে হোঁচট খেতে পারেন। ওয়ার্ডপ্রেস আপনাকে নীচের নির্দেশাবলী অনুসরণ করে ইতিমধ্যে বিদ্যমান কোড ব্লকগুলি সম্পাদনা করতে দেয়:
- আপনি সম্পাদনা করতে চান এমন কোড ব্লক রয়েছে এমন পৃষ্ঠাটি খুলুন।
- 'সম্পাদনা করুন' এ ক্লিক করুন।
- কোড এডিটিং সক্ষম করতে কোড ব্লকে ক্লিক করুন।
- একবার আপনি পরিবর্তনগুলি করা হয়ে গেলে, 'আপডেট' বোতামে ক্লিক করুন।
একটি প্লাগইন ব্যবহার করে কিভাবে আপনার ওয়ার্ডপ্রেস ওয়েবসাইটে একটি কোড ব্লক যোগ করবেন
আপনি যদি প্রায়ই আপনার ওয়েবসাইটে কোড স্নিপেট যোগ করেন, তাহলে আপনাকে সাহায্য করার জন্য আরও শক্তিশালী প্লাগইন পাওয়া ভাল হতে পারে। একটি জনপ্রিয় শক্তিশালী এবং চমৎকার কোড ব্লক হল সিনট্যাক্স হাইলাইটার বিকশিত হয়েছে প্লাগ লাগানো.
এই প্লাগইনটির নেটিভ ওয়ার্ডপ্রেস এডিটরের উপর একটি সুবিধা রয়েছে কারণ:
- এটি একটি কোড স্নিপেটে লাইনের সংখ্যা হাইলাইট করে
- এটি একাধিক প্রোগ্রামিং ভাষা সমর্থন করে
- এটি আপনার দর্শকদের প্রদর্শিত কোড কপি এবং পেস্ট করার অনুমতি দেয়
আপনার ওয়েবসাইটে কোড স্নিপেটগুলি আরও ভালভাবে পরিচালনা করতে প্লাগইনটি কীভাবে ব্যবহার করবেন তা এখানে রয়েছে:
- ইনস্টল করুন এবং সক্রিয় করুন সিনট্যাক্স হাইলাইটার বিকশিত হয়েছে প্লাগ লাগানো.
- আপনি একটি কোড ব্লক যোগ করতে চান তাহলে পৃষ্ঠা বা পোস্ট খুলুন.
- সম্পাদনা সক্ষম করুন এবং প্লাস বোতামে ক্লিক করুন।
- 'SyntaxHighLighter Evolved' অনুসন্ধান করুন এবং প্রথম যে ফলাফলটি আসবে সেটি খুলুন।
- উপলব্ধ কোড ব্লকে কোডটি পেস্ট করুন বা লিখুন।
- স্ক্রিনের উপরের-ডান কোণে সেটিংস আইকনে ক্লিক করুন এবং 'ব্লক' ট্যাবে নেভিগেট করুন।
- আপনি কীভাবে আপনার নম্বর প্রকাশ করতে চান এবং কোডের কোন লাইনগুলি হাইলাইট করতে চান তা নির্দিষ্ট করুন।
- আপনি যদি আপনার কোড ক্লিকযোগ্য করতে চান তবে আপনি 'URL গুলিকে ক্লিকযোগ্য করুন' চালু করতে পারেন৷
আপনার কোড ব্লকের রঙ এবং ফর্ম্যাটিং স্কিম পরিবর্তন করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- 'সেটিংস' এ যান এবং 'সিনট্যাক্স হাইলাইটার' বিভাগে নেভিগেট করুন।
- আপনার ব্লকের থিম পরিবর্তন করুন।
- লাইভ মোডে পরিবর্তনগুলি কীভাবে দেখাবে তার পূর্বরূপ দেখতে 'প্রিভিউ' 'সংরক্ষণ করুন' টিপুন।
অতিরিক্ত প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
আপনি কিভাবে একটি কোড ব্লক একটি ক্লিকযোগ্য লিঙ্ক করবেন?
ওয়ার্ডপ্রেস সম্পাদক ব্যবহার করে একটি কোড ব্লক একটি লিঙ্ক করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
1. আপনি একটি লিঙ্ক হিসাবে কাজ করতে চান কোড লাইন নির্বাচন করুন.
2. পপ-আপ উইজেট থেকে, লিঙ্ক আইকন নির্বাচন করুন। বিকল্পভাবে, আপনি আপনার কীবোর্ডে 'Ctrl' + 'K' কী টিপুন।
3. যে URLটিতে আপনি কোডটি লিঙ্ক করতে চান সেটি লিখুন এবং 'Enter' কী টিপুন৷
আমি কি কোড ব্লক এডিটর ব্যবহার করে কোড হাইলাইট করতে পারি যা ওয়ার্ডপ্রেস এডিটর প্রদান করে?
না, নেটিভ ওয়ার্ডপ্রেস এডিটর দ্বারা প্রদত্ত কোড ব্লক ব্যবহারকারীদের কোড কপি এবং পেস্ট করার অনুমতি দেয় না। এটি করার জন্য, আপনাকে 'সিনট্যাক্স হাইলাইগার ইভলভড' প্লাগইনের মতো একটি উন্নত কোড ব্লক এডিটিং প্লাগইনের সাহায্যের প্রয়োজন হবে।
Elementor একটি কোড ব্লক বৈশিষ্ট্য আছে?
এলিমেন্টর একটি জনপ্রিয় ড্র্যাগ-এন্ড-ড্রপ প্লাগইন যা ওয়ার্ডপ্রেস ওয়েবসাইট তৈরির জন্য ব্যবহৃত হয়। দুর্ভাগ্যবশত, আপনি ওয়েবসাইট তৈরি করতে প্লাগইন ব্যবহার করলে, আপনি এমন একটি ব্লক খুঁজে পাবেন না যা আপনাকে আপনার ওয়েবসাইটে কম্পিউটার প্রোগ্রাম ফর্ম্যাট করতে দেয়। অতএব, কাজটি শেষ করতে আপনাকে প্রচলিত ওয়ার্ডপ্রেস সম্পাদকে যেতে হবে।
আপনার ওয়েবসাইট আপ এবং চলমান পান
আপনি একটি প্রোগ্রামিং ব্লগ চালান বা আপনার ওয়েবসাইটে কোড স্নিপেট শেয়ার করতে চান না কেন, ওয়ার্ডপ্রেসে কোড ব্লকগুলি কীভাবে ব্যবহার করবেন তা জানা অত্যন্ত গুরুত্বপূর্ণ। কোড ব্লকগুলি আপনার পাঠকদের একটি সহজ সময় দেবে এবং সামগ্রিকভাবে আপনার ওয়েবসাইটের ব্যবহারকারীর অভিজ্ঞতা বৃদ্ধি করবে। এবং আপনি দেখতে পাচ্ছেন, কোড ব্লকগুলি সন্নিবেশ করা একটি অপেক্ষাকৃত সহজ প্রক্রিয়া, বিশেষ করে নেটিভ ওয়ার্ডপ্রেস এডিটরের সাথে।
ইনস্টাগ্রামে কেউ কী পছন্দ করে তা দেখতে পাচ্ছেন?
আপনি কি ওয়ার্ডপ্রেস প্রদানকারী কোড ব্লক ব্যবহার করার চেষ্টা করেছেন? SyntaxHighlighter Evolved প্লাগইন সম্পর্কে কি? নীচের মন্তব্য বিভাগে আমাদের সাথে আপনার অভিজ্ঞতা শেয়ার করুন.
