ওয়ার্ডপ্রেস কাস্টমাইজারের মাধ্যমে সহজেই লোগো অপশন তৈরি করুন

  • by
How to Setup a WordPress Website in Local Server

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

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

ওয়ার্ডপ্রেস ৩.৪ থেকে এর সঙ্গে যুক্ত করা হয়েছে থিম কাস্টমাইজার যে কারনে লোগো অপশন তৈরি করা এখন খুবই সোজা। ওয়ার্ডপ্রেস থিম কাস্টমাইজারের মাধ্যমে লোগো অপশনটি ব্যবহার করে খুব সহজেই থিমের হিডারে একটি ইমেজ লোগো হিসেবে প্রদর্শন করা সম্ভব। যদি কোনও ইমেজ আপলোড না করা হয় তবে লোগোর স্থলে ওয়েবসাইটের নাম ও স্লোগান দেখা যাবে।

এজন্য, প্রথমেই কাস্টমাইজেশনের জন্য আলাদা সেকশন, সেটিংস এবং কন্ট্রোল তৈরি করতে হবে যা customize_register হুকের মাধ্যমে থিম কাস্টমাইজারের সাথে যুক্ত হবে।

প্রথমেই থিমের function.php ফাইলটি খুলুন এবং নিচের তিনটি লাইন যোগ করুন। ফাংশন ফাইলে সরাসরি কোড যোগ করতে না চাইলে customize নামে একটি পিএইচপি ফাইল তৈরি করে তা ফাংশন ফাইলে অন্তর্ভুক্ত করে দিন।

function themename_theme_customizer( $wp_customize ) {
    // Fun code will go here
}
add_action( 'customize_register', 'themename_theme_customizer' );

উপরের কোডে আমাদের নতুন ফাংশনের নাম হচ্ছে themename_theme_customizer এবং এর ভেরিয়েবল হচ্ছে $wp_customize। একে ওয়ার্ডপ্রেস হুকও বলে। add_action( ‘customize_register’, ‘themename_theme_customizer’ ); এর মাধ্যমে আমরা নতুন ফাংশনটি রেজিস্টার করেছি।

এবার এর মাঝেই আমরা সেকশন, সেটিংস ও কন্ট্রোল যুক্ত করবো। উল্লেখ্য, $wp_customize হচ্ছে একটি ওয়ার্ডপ্রেস হুকের নাম। এই হুকটি সেকশন, সেটিংস ও কন্ট্রোল এই তিনটি বিষয় কাস্টমাইজারে যুক্ত করবে।

$wp_customize->add_section( 'themename_logo_section' , array(
    'title'       => __( 'Logo', 'themename' ),
    'priority'    => 30,
    'description' => 'Upload a logo to replace the default site name and description in the header',
) );

এবার লোগো আপলোডের জন্য নতুন সেকশন তৈরি করুন। এই কোডের মাধ্যমে লোগো আপলোডের জন্য থিম কাস্টমাইজারে শুধুমাত্র টাইটেলটি দেখা যাবে। আর ডিসক্রিপশনের জায়গায় নতুন ডিসক্রিপশনটি দেখাবে।

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

$wp_customize->add_setting( 'themename_logo' );

একেবারে শেষে থিম কাস্টমাইজারকে একটি লোগো আপলোড করার জন্য বলি। এটা হচ্ছে একধরনের ইমেজ কন্ট্রোল যা উপরের সেকশন ও সেটিংস ব্যবহার করবে।

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array(
    'label'    => __( 'Logo', 'themename' ),
    'section'  => 'themename_logo_section',
    'settings' => 'themename_logo',
) ) );

এবার নিন্মোক্ত কোডের মাধ্যমে আমরা আমাদের থিমে এই লোগো সেটিংসটি প্রদর্শন করতে পারি।

<?php if ( get_theme_mod( 'themename_logo' ) ) : ?>
    <div class='site-logo'>
        <a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><img src='<?php echo esc_url( get_theme_mod( 'themename_logo' ) ); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'></a>
    </div>
<?php else : ?>
    <hgroup>
        <h1 class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>' title='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' rel='home'><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class='site-description'><?php bloginfo( 'description' ); ?></h2>
    </hgroup>
<?php endif; ?>

লোগোর স্টাইলের ক্ষেত্রে ডিভিশন ক্লাস ‘site-logo’ দিয়ে লোগোর দৈর্ঘ্য এবং প্রস্থ ইত্যাদি নির্ধারণ করে দেয়া সম্ভব।

এবং ‘site-title’ এর মাধ্যমে টাইটেলের টাইপোগ্রাফি, ফন্টকালার ও ফন্টের আকার নির্ধারণ করে দেয়া সম্ভব।

পূর্ণাঙ্গ সেটিংস টি নিন্মরূপঃ

//*Function for Logo Uploader*//
function themename_theme_customizer( $wp_customize ) {
    $wp_customize->add_section( 'themename_logo_section' , array(
    'title'       => __( 'Logo', 'themename' ),
    'priority'    => 30,
    'description' => 'Upload a logo to replace the default site name and description in the header',
) );
$wp_customize->add_setting( 'themename_logo' );

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array(
    'label'    => __( 'Logo', 'themename' ),
    'section'  => 'themename_logo_section',
    'settings' => 'themename_logo',
) ) );

}
add_action( 'customize_register', 'themename_theme_customizer' );

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

এক্ষেত্রে আপনার থিমের মূল ডাইরেক্টরিতে inc নামের একটি নতুন ডাইরেক্টরি তৈরি করে তাতে customize.php নামে একটি ফাইল তৈরি করতে পারেন যাতে লোগোর সেটিংসগুলো যোগ করা যেতে পারে। পরবর্তীতে ওই ফাইলটি থিম ফাংশনে যোগ করে দিলেও একই ভাবে কাজ করবে। এক্ষেত্রে সুবিধা হলো, কাস্টমাইজ অপশনগুলো আলাদা ফাইলে থাকলো, যাতে পরবর্তীতে কোনও কিছু সংযোজন বা বিয়োজন করা সহজ হয়।

Customizer.php মূল functions.php তে যোগ করতে হলে নিন্মোক্ত কোডটি দিয়ে customizer.php কে functions.php তে কল করতে হবে।

//Add Customizer functionality.
require get_template_directory() . '/inc/customizer.php'; 

অথবা,

include( get_template_directory() . '/inc/customizer.php' );

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.