হেডারে লোগো আপলোড করা ও ব্যানার অ্যাড উইজেট তৈরি করাঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-১২

সবাইকে সালাম ও শুভেচ্ছা জানিয়ে থিসিস থিম নিয়ে ১২তম পোস্ট আরম্ভ করতেছি। থিসিস থিম নিয়ে আমার আগের পোস্ট সমূহ দেখে নিতে পারেন-

লেআউট ও কলামঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-এক

নেভিগেশন মেনুঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-দু্ই

নেভিগেশন মেনুঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-তিন

সাইডবার ও উইজেটঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-চার

ফুটারে তিনটি কলাম তৈরীঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-পাঁচ

                                                                             ফুটারে কলাম তৈরীঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-ছয়

ফুটারে বিভাগ যুক্ত করাঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-সাত

ব্যাকগ্রাউন্ড ইমেজ ও ফুটারে অ্যাড উইজেট যোগ করাঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-আট

পোস্টে লেখক তথ্য যোগ করাঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-নয়

পোস্টে একই রকম পোষ্টের তথ্য যোগ করাঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-দশ

কনটেন্টে পোস্ট স্লাইডার যুক্ত করাঃ ওয়ার্ডপ্রেস থিসিস থিম টিউটোরিয়াল পর্ব-এগার

গত পর্বে আমি আপনাদের দেখিয়েছিলাম কেমন করে কন্টেন্টে পোস্ট স্লাইডার বসানো যাই।আজকে আমি আপনাদের দেখাব হেডারে কেমন করে লোগো বসানো যাই এবং হেডারে অ্যাড উইজেট যুক্ত করা যাই।

হেডারে লোগো বসানো 

প্রথমে আপনার হেডারের লোগো নির্বাচন করুন।

আপনার ওয়ার্ডপ্রেস ব্লগে লগিন করুন এবং নিচের এই কোডটি কপি করে থিসিস এর Custom.css ফাইলে পেস্ট করুন এবং সেভ করুন।

#header #logo, #header #tagline {text-indent:-99999px;}
#header{background:url('images/logo.png') no-repeat;}
#header #logo a{display:block;width:300px;height:100px;}

এখানে লাল রঙের কোডটিতে আপনার লোগো এর লিংক দিন।

এবার আপনার ব্লগটি রিফ্রেশ করে দেখুন হেডারে লোগো যুক্ত হয়েছে।

হেডারে অ্যাড উইজেট বসানো 

আপনারা অনেকেই অনেক ব্লগে লক্ষ্য করে দেখবেন যে হেডারে একটি অ্যাড দেওয়া থাকে অ্যাডটি বিভিন্ন মাপের হয়ে থাকে তবে বেশির ভাগ সময় ৪৬৮*৬০ ব্যবহার করা হয়ে থাকে। তাহলে চলুন আমাদের ব্লগেও হেডারে অ্যাড যুক্ত করি।

প্রথমে আপনার ওয়ার্ডপ্রেস ব্লগে লগিন করুন।

থিসিস থিমের  এর   Custom File Editor   ড্রপডাউন থেকে  Custom function.php  সিলেক্ট করুন  এবং নিচের এই php কোডটি লিখে সেভ করুন। ( থিমের Custom function.php ফাইলের ব্যাকআপ রেখে দিন )

/** Register a Widget Section to Display banner Ads */
register_sidebars( 1 , array(
‘name’ => ‘Header Banner Ad’,
‘description’ => ‘Display Header Banner Ads in Thesis Theme. Drap & Drop Text Widget to Start With.’,
‘before_widget’ => ‘<li id=”%1$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’
)
);
/** Display banner Ads in Header using Widget Section */
function header_widget() { ?>
<div id=”header-banner-ad”>
<?php if (!function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Header Banner Ad’) ): ?>
<?php endif; ?>
</div>
<?php }
add_action(‘thesis_hook_header’, ‘header_widget’);

থিসিস এর   Custom File Editor   ড্রপডাউন থেকে  Custom.css  সিলেক্ট করুন  এবং নিচের এই css কোডটি লিখে সেভ করুন।

#header-banner-ad {
display: block;
float: right;
list-style: none outside none;
margin-top: -9.5em;
width: 600px;
}

এবার আপনার উইজেটে গিয়ে দেখুন  Header Banner Ad  নামে একটি উইজেট যুক্ত হয়েছে।

একন আপনি এই উইজেটের মাধ্যমে আপনার ইচ্ছা মত হেডারে অ্যাড দিতে পারবেন।

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