কোনও ওয়েব পৃষ্ঠা নির্দিষ্ট রঙ, ফন্ট, স্টাইলের সাথে কীভাবে দেখাবে তা দেখার জন্য আপনি কি কখনও সাময়িকভাবে সম্পাদনা করতে চেয়েছিলেন? আপনার ব্রাউজারে ইতিমধ্যে বিদ্যমান একটি সরঞ্জামের মাধ্যমে এটি সম্ভব " উপাদানটি পরীক্ষা করুন "। এটি এমন সমস্ত ব্যবহারকারীদের ক্ষেত্রে সত্য হয়ে উঠেছে যারা সিএসএস ব্যবহার করতে পছন্দ করে।
এই টিউটোরিয়ালে, আমরা আপনাকে আইটেমটি পরিদর্শন করার মৌলিক বিষয়গুলি এবং আপনার ওয়ার্ডপ্রেস সাইটের সাহায্যে এটি ব্যবহার করব through
একটি আইটেম পরিদর্শন সরঞ্জাম কি?
গুগল ক্রোম এবং মজিলা ফায়ারফক্সের মতো আধুনিক ব্রাউজারগুলি এমন সরঞ্জাম তৈরি করেছে যা ওয়েব বিকাশকারীদের ত্রুটিগুলি ডিবাগ করার অনুমতি দেয়। এই সরঞ্জামগুলি কোনও পৃষ্ঠার জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট প্রদর্শন করে এবং কোডটি কীভাবে চালিত হয় তা দেখায়।
সরঞ্জামটির ব্যবহার " এলিমেন্ট পরিদর্শন করুন আপনি যে কোনও ওয়েব পৃষ্ঠার জন্য এইচটিএমএল, সিএসএস বা জাভাস্ক্রিপ্ট কোড সম্পাদনা করতে পারেন এবং আপনার পরিবর্তনগুলি সরাসরি দেখতে পারেন (শুধুমাত্র আপনার কম্পিউটারে).
একজন ওয়েবসাইটের মালিকের জন্য, এই টুলগুলি আপনাকে একটি নির্দিষ্ট স্টাইল কেমন দেখাবে তা পূর্বরূপ দেখতে সাহায্য করতে পারে, আসলে সকলের জন্য পরিবর্তনগুলি প্রয়োগ না করেই।
লেখকদের জন্য, এই সরঞ্জামগুলি দুর্দান্ত because কারণ আপনার স্ক্রিনশটগুলি গ্রহণ করার সময় আপনি সহজেই ব্যক্তিগত শনাক্তকরণ তথ্য পরিবর্তন করতে পারেন কারণ উপাদানগুলি ঝাপসা করার প্রয়োজনীয়তা অপসারণ করে।
সমর্থন এজেন্টদের জন্য, আপনার গ্যালারীগুলি লোড না করা বা তাদের সঠিকভাবে কাজ করা থেকে বিরত করতে পারে এমন ত্রুটি চিহ্নিত করার এটি দুর্দান্ত উপায়।
আমরা কেবল ব্যবহারের কেসগুলির পৃষ্ঠকে স্ক্র্যাচিং করছি, কারণ সরঞ্জাম " উপাদানটি পরীক্ষা করুন সত্যিই শক্তিশালী।
এই নিবন্ধে, আমরা সরঞ্জামটির উপর ফোকাস করব " উপাদানটি পরীক্ষা করুন গুগল ক্রোম থেকে, কারণ এটি আমাদের পছন্দের ব্রাউজার। ফায়ারফক্সের নিজস্ব বিকাশ সরঞ্জাম রয়েছে যা মেনু নির্বাচন করেও আহ্বান করা যেতে পারে " উপাদান পরিদর্শন করুন ».
সরঞ্জামটি চালু করুন "উপাদানটি পরীক্ষা করুন" এবং কোডটির স্থানীয়করণ
আপনি কীগুলি টিপে এই টুলটি চালু করতে পারেন CTRL + Shift + I আপনার কীবোর্ডে বিকল্পভাবে, আপনি কোনও ওয়েব পৃষ্ঠার যে কোনও জায়গায় ক্লিক করতে পারেন এবং তারপরে ব্রাউজার মেনু আইটেমটি পরীক্ষা করতে পারেন।
আপনার ব্রাউজার উইন্ডোটি দুটি ভাগে বিভক্ত হবে এবং নীচের উইন্ডোটি ওয়েব পৃষ্ঠার উত্স কোডটি প্রদর্শন করবে।
বিকাশকারী সরঞ্জাম উইন্ডোটি আরও দুটি উইন্ডোতে বিভক্ত। আপনার বাম দিকে, আপনি পৃষ্ঠার জন্য এইচটিএমএল কোড দেখতে পাবেন। ডান ফলকে, আপনি সিএসএস বিধিগুলি দেখতে পাবেন।
আপনি যখন এইচটিএমএল কোডের উত্সের উপরে আপনার মাউসটি সরান, আপনি ওয়েব পৃষ্ঠায় হাইলাইট করা অঞ্চলটি দেখতে পাবেন। আপনি প্রশ্নে এই উপাদানটির জন্য সিএসএসের বিধিগুলিও লক্ষ্য করবেন।
আপনি ওয়েবপৃষ্ঠায় কোনও আইটেমের উপরে মাউস পয়েন্টার নিতে পারেন, ডান ক্লিক করুন এবং নির্বাচন করুন " উপাদান পরিদর্শন "। আপনার ক্লিক করা আইটেমটি উত্স কোডে হাইলাইট করা হবে।
কোড বিকাশকারী এবং বিকাশকারী ডিবাগার
উপাদান পরিদর্শন উইন্ডোতে এইচটিএমএল এবং সিএসএস সম্পাদনাযোগ্য। আপনি এইচটিএমএল উত্স কোডে ডাবল ক্লিক করতে পারেন এবং আপনার পছন্দ মতো কোডটি সম্পাদনা করতে পারেন।
আপনি সিএসএস ফলকে শৈলীর বৈশিষ্ট্যগুলিতে ডাবল-ক্লিক ও সম্পাদনা করতে পারেন। একটি নিয়ম যুক্ত করতে, শীর্ষে শৈলী ফলকে প্লাস আইকনটি ক্লিক করুন।
আপনি যখন সিএসএস বা এইচটিএমএল কোডে পরিবর্তন করেন তখন আপনার ব্রাউজারে এই পরিবর্তনগুলি প্রতিফলিত হবে।
নোট করুন যে এখানে করা সমস্ত পরিবর্তনগুলি কোথাও সংরক্ষণ করা হয় না। হাতিয়ার উপাদানটি পরীক্ষা করুন একটি ডিবাগিং সরঞ্জাম, এবং এটি আপনার সার্ভারের কোনও ফাইলে আপনার পরিবর্তনগুলি সংরক্ষণ করে না। এর অর্থ হ'ল আপনি পৃষ্ঠাটি রিফ্রেশ করলে আপনার সমস্ত পরিবর্তন নষ্ট হয়ে যায়।
পরিবর্তনগুলি আসলে করার জন্য, আপনার ওয়ার্ডপ্রেস থিম বা টেমপ্লেটের স্টাইল সম্পাদনা করতে হবে এবং আপনি যে পরিবর্তনগুলি সংরক্ষণ করতে চান তা যোগ করতে হবে।
"ব্যবহার করে আপনার বিদ্যমান ওয়ার্ডপ্রেস থিম সম্পাদনা শুরু করার আগে উপাদানটি পরীক্ষা করুন চাইল্ড থিম তৈরি করে আপনার সমস্ত পরিবর্তনগুলি সংরক্ষণ করার বিষয়টি নিশ্চিত করুন।
কিভাবে সহজে ওয়ার্ডপ্রেস উপর ত্রুটি খুঁজে পেতে
হাতিয়ার উপাদানটি পরীক্ষা করুন "নামে একটি অঞ্চল আছে কনসোল যা আপনার সাইটে বিদ্যমান সমস্ত ত্রুটিগুলি দেখায়। কোনও ত্রুটি ডিবাগ করার চেষ্টা করার আগে বা কোনও থিম বা প্লাগইনটির লেখকদের সাহায্য চাইতে যাওয়ার আগে, এখানে কী ভুল তা দেখার জন্য এখানে সর্বদা সার্থক।
উদাহরণস্বরূপ, আপনি যদি গ্রাহক হন OptinMonster কে আশ্চর্য করে যে তার অপ্টিন কেন লোড হয় না, তবে আপনি সহজেই সেই সমস্যাটি খুঁজে পেতে পারেন যা ইঙ্গিত করে যে " আপনার পৃষ্ঠার slug মেলে না ».
যদি আপনার শেয়ার বারটি সঠিকভাবে কাজ করে না, তবে আপনি দেখতে পাচ্ছেন যে এটির কারণে কোনও জাভাস্ক্রিপ্ট ত্রুটি রয়েছে।
এই টিউটোরিয়ালের জন্য এটুকুই, আশা করি আপনি আপনার ওয়ার্ডপ্রেস ব্লগকে আরও ভালোভাবে কাস্টমাইজ করতে পারবেন। আপনার বন্ধুদের সাথে এই টিউটোরিয়ালটি শেয়ার করতে দ্বিধা করবেন না।