এটি প্রত্যেকের ক্ষেত্রেই ঘটে৷

আপনি আপনার পছন্দের একটি থিম খুঁজে পান, আপনি এটি ইনস্টল করেন এবং আপনার সাইটের চেহারা উপভোগ করতে কয়েক মাস ব্যয় করেন৷ কিন্তু তারপর, কয়েক মাস পরে, থিমটি বাসি মনে হতে শুরু করে। কিছুটা বিরক্তিকর৷

একমাত্র সমস্যা হল, আপনি নতুন কিছু খুঁজতে কয়েক ঘন্টা ব্যয় করতে চান না৷ যদি আপনার থিমে একটু মশলা যোগ করার উপায় থাকে, তবে এটিকে আলাদা করে তোলার জন্য একটু ফ্লেয়ার করুন৷

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

ড্যাশিকন এ প্রবেশ করুন। Dashicons হল ফন্ট আইকন যা ওয়ার্ডপ্রেস 3.8 এ চালু করা হয়েছিল। আপনি যখন আপনার ড্যাশবোর্ডে লগ ইন করেন তখন আপনি দেখতে পান সেই দুর্দান্ত এবং দুর্দান্ত আইকনগুলি। আপনি যদি সেগুলিকে আপনার থিমেও যুক্ত করতে পারেন তাহলে কি ভালো হবে না?

আচ্ছা, আপনি করতে পারেন এবং আমি আপনাকে দেখাতে যাচ্ছি কিভাবে।

আপনি কীভাবে আপনার থিমে Dashicons ব্যবহার করতে পারেন নেভিগেশন মেনু?

একটি সাধারণ উদাহরণ দিয়ে শুরু করা যাক। Dashicons ইতিমধ্যেই 3.8 সংস্করণ থেকে ওয়ার্ডপ্রেসে অন্তর্ভুক্ত করা হয়েছে কিন্তু আপনার সাইটের সামনের প্রান্তে সঠিকভাবে প্রদর্শন করার জন্য আপনাকে এখনও সেগুলি অন্তর্ভুক্ত করতে হবে; অর্থাৎ, আপনার থিম।

ধাপ 1: আপনার থিম Dashicons প্রস্তুত করুন

আপনার থিম Dashicons প্রস্তুত করতে প্রথমে আপনার functions.php ফাইলটি খুলুন (আদর্শ> এ পাওয়া যায়) ;সম্পাদক - ডিফল্টরূপে এটি আপনার বর্তমান থিমের CSS ফাইল খুলবে৷ এগিয়ে যান এবং সন্ধান করুনfunctions.php ফাইলে ক্লিক করুন এবং এটিকে এডিটরে লোড করতে ক্লিক করুন।)

ধাপ 2: স্ক্রিপ্টটি সারিবদ্ধ করুন

সমস্তভাবে নীচে স্ক্রোল করুন এবং এই লাইনগুলি পেস্ট করুন শেষে কোডের:

//Enqueue the Dashicons script add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); }

ঠিক আছে! এখন আপনার থিম Dashicons ব্যবহার করার জন্য প্রস্তুত।

ধাপ 3: মেনু আইটেমগুলিতে Dashicons যোগ করা

আসুন আপনার হোম লিঙ্কের জন্য একটি Dashicon যোগ করা যাক। Dashicons ওয়েবসাইটে যান এবং আপনার পছন্দের আইকনটি নির্বাচন করুন৷

আপডেট: Dashicons মূলত GitHub.io-তে উপলব্ধ ছিল, কিন্তু সেগুলি WordPress.org-এ উপলব্ধ করা হয়েছে৷

ধাপ 4:

কাঙ্খিত আইকনে ক্লিক করুন (এই ক্ষেত্রে আমি হোম আইকন নির্বাচন করেছি) এবং তারপরে কপি এইচটিএমএল এ ক্লিক করুন। এটি আপনাকে আপনার প্রয়োজনীয় কোড সহ একটি পপ-আপ উইন্ডো দেবে।

ধাপ 5:

আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে ফিরে যান, উপস্থিতিতে ক্লিক করুন > ; মেনু এবং কোডটি ঠিক যেখানে নেভিগেশন লেবেল বলে সেখানে পেস্ট করুন।

আপনি যদি এখনও শব্দটি দেখাতে চান, তাহলে ক্লোজিং ডিভ ব্র্যাকেটের পরে এটি টাইপ করুন।

এ ক্লিক করুন আপনার হোম পেজ সংরক্ষণ করুন এবং লোড করুন। আপনার হোম লিঙ্কটি এখন একটি সুন্দর, খাস্তা ড্যাশিকন প্রদর্শন করবে৷

আপনি সমস্ত নেভিগেশন মেনু আইটেম বা শুধুমাত্র বাড়ির জন্য এটি করতে পারেন৷ শুধু মিলে যাওয়া আইকনগুলির সাথে উপরের পদক্ষেপগুলি পুনরাবৃত্তি করুন৷ এটা কি সহজ ছিল?

আপনি কিভাবে পোস্ট মেটাতে Dashicons ব্যবহার করবেন?

আপনি আরও এক ধাপ এগিয়ে আপনার পোস্ট মেটাতে Dashicons যোগ করতে পারেন, অথবা অন্য কথায় লেখকের সামনে Dashicons যোগ করতে পারেন নাম, তারিখ, বিভাগ বা ট্যাগ; উপর নির্ভর করেআপনার থিম এবং এটি যে তথ্য প্রদর্শন করে।

যেহেতু আপনি ইতিমধ্যেই আপনার থিমে Dashicons সারিবদ্ধ করেছেন, তাই এখন আপনাকে যা করতে হবে তা হল আপনার style.css ফাইলটি খুলুন (অথবা কাস্টম CSS সম্পাদক ব্যবহার করুন যা সর্বদা একটি ভাল বিকল্প। আপনার থিম আপডেট হয়ে গেলে পরিবর্তনগুলি হারাবেন না!), ম্যাচিং সিলেক্টর খুঁজুন এবং CSS কোড যোগ করুন।

ধরুন আপনি আপনার নামের বা আপনার লেখকের নামের সামনে একটি আইকন যোগ করতে চান।

ধাপ 1:

তারপর এটিতে ক্লিক করুন, এবং এবার কপি সিএসএস নির্বাচন করুন। আবার, এটি আপনাকে একটি পপ-আপ উইন্ডো দেবে যে কোডটি আপনাকে পেস্ট করতে হবে।

ধাপ 3:

এখন আপনার style.css খুলুন। এবং সংশ্লিষ্ট নির্বাচক খুঁজুন, এই ক্ষেত্রে – .entry-author. Dashicons ওয়েবসাইট থেকে কপি করা CSS কোডের আগে এবং তারপর পেস্ট করার মাধ্যমে, লেখকের নামের সামনে একটি সুন্দর আইকন থাকবে। আপনি যে Dashicons ফন্ট ব্যবহার করছেন তাও উল্লেখ করতে হবে। পরিবর্তিত কোডটি এইরকম দেখাচ্ছে:

.entry-author:before { font-family: "dashicons"; content: "\f110"; }

এছাড়াও একটু স্টাইলিং যোগ করা যাক, এবং এখন সম্পূর্ণ কোডটি এইরকম দেখাচ্ছে:

.entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 

শেষ ফলাফল

তাহলে কি এটা কি শেষ পর্যন্ত দেখাবে?

কিছুটা এরকম:

আপনি Dashicons ব্যবহার করতে পারেন এমন অনেক উপায় আছে – আপনার সৃজনশীলতাকে ধরে রাখতে দিন এবং দেখুন আপনি কী করতে পারেন।

এটি সব একসাথে রাখা

উপরের উদাহরণগুলি বাদ দিয়ে, আপনি বিভিন্ন নির্দিষ্ট করতে আপনার ব্যাকএন্ডে Dashicons ব্যবহার করতে পারেনবিভিন্ন ধরনের পোস্টের জন্য আইকন, অথবা আপনি আপনার পোস্টের শিরোনাম, উইজেট শিরোনামে সেগুলি ব্যবহার করতে পারেন, অথবা আপনি যদি একটি কাস্টম ল্যান্ডিং পৃষ্ঠা তৈরি করেন তবে আপনি আপনার সাইটের বিভিন্ন পৃষ্ঠাগুলির মধ্যে পার্থক্য করতে পারেন৷

এখানে কিসের একটি প্রাথমিক উদাহরণ দেওয়া হল আপনি তাদের তৈরি করতে ব্যবহার করতে পারেন: