WordPress Theme Development – Zero to Hero : Episode 11 (End)

Nill ডিসেম্বর ২৮, ২০২৪

এটি আমাদের থিম ডেভেলপমেন্ট এপিসোডের শেষ এপিসোড। পরবর্তী সিরিজে আমারা একটি থিম ডেভেলপমেন্ট করবো এবং স্টাইল ও ডিজাইন সহ কম্পলিট একটি থিম তৈরি করবো যেটা আমরা আমাদের ওয়েবসাইটে ব্যবহার করবো।
আমরা এই সিরিজে থিম এর ফাংশন, থিম কীভাবে কাজ করে একটি সিম্পল থিম কিরকম দেখতে এবং এডভান্স কী কী হুক রয়েছে সেগুলো দেখবো। এই এপিসোড শেষে আমরা যেই থিমটি দার করেছি সেটা পূর্ববর্তী এপিসোড (১০) এ দেখতে পাবেন।
আপনারা যদি আমার সাথে “সিজন ২” এ থাকতে চান বা

হাতে কলমে সম্পুর্ন একটি থিম বানাতে চান, স্টাইল ডিজাইন সহ। আমাকে এই পোস্টের কমেন্টে জানাবেন নয়তো সিরিজটি এখানে শেষ করে দিব।

আমরা এই পোস্টে নতুন কিছু কোড লিখব এবং আগের কোড গুলোতে কিছু নতুন কোড।

সরাসরি কোড গুলো এখান থেকে কপি করে নিন।

অনেকের কোড বুঝতে অসুবিধা হয়। ফলে আমি নিচে আমার টেলিগ্রাম এড্রেস দিয়েছি এতে করে লাইভ সমাধান করে নিতে পারবেন। আমরা যেহেতু হাতে কলমে শিখছি তাই এখানে প্রি-বিল্ড কোনো কিছুই থাকবে না। শূন্য থেকে সব হবে। ইতিমধ্যে আমরা ১০ টি এপিসোড শেষ করেছি।

EPISODES:

Episode 08
Episode 09

Episode 10

Episode 11

ধাপ ১১ : থিমের পারফরম্যান্স অপ্টিমাইজেশন

একটা ওয়ার্ডপ্রেস থিম শুধু সুন্দর হলেই হবে না, সেটার লোডিং টাইম কম এবং কোড অপ্টিমাইজড থাকতে হবে। এতে করে ব্যবহারকারীদের অভিজ্ঞতা ভালো হবে এবং SEO-তেও সাহায্য করবে। এই ধাপে আমরা থিমের পারফরম্যান্স অপ্টিমাইজেশন নিয়ে কাজ করব।

ধাপ ১: থিমে অপ্রয়োজনীয় স্ক্রিপ্ট এবং স্টাইল লোড বন্ধ করা

ওয়ার্ডপ্রেস অনেক ডিফল্ট স্ক্রিপ্ট এবং স্টাইল লোড করে, যা সবসময় দরকার হয় না। এগুলো বন্ধ করতে functions.php ফাইলে কোড যোগ করুন:

// অপ্রয়োজনীয় স্ক্রিপ্ট এবং স্টাইল লোড বন্ধ করা
function mytheme_remove_unused_scripts() {
    if (!is_admin()) {
        wp_deregister_script('wp-embed'); // wp-embed.js বন্ধ
    }
}
add_action('wp_footer', 'mytheme_remove_unused_scripts');

ধাপ ২: Google Fonts লোডিং অপটিমাইজেশন

Google Fonts সরাসরি লোড করলে সাইট স্লো হয়ে যেতে পারে। এজন্য ফন্টগুলো self-hosted করতে পারেন।

ফন্টগুলো Google Fonts থেকে ডাউনলোড করুন।
style.css ফাইলে ফন্টগুলো লোকাল ফাইল থেকে লোড করুন:

@font-face {
    font-family: 'Roboto';
    src: url('fonts/roboto-regular.woff2') format('woff2'),
         url('fonts/roboto-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

ধাপ ৩: থিমে কোড মিনিফাই করা

CSS এবং JavaScript ফাইলগুলো মিনিফাই করলে থিম ফাইলের সাইজ কমবে এবং লোডিং টাইম কমবে।

style.css এবং script.js মিনিফাই করার জন্য Online Minifier Tools ব্যবহার করুন।
মিনিফাই করার পর ফাইলগুলো থিমে ব্যবহার করুন।

উদাহরণ:

/* মিনিফাই করা CSS */
body{margin:0;padding:0;font-family:'Roboto',sans-serif;}

ধাপ ৪: Lazy Load যোগ করা

ইমেজগুলো Lazy Load করলে সাইটের লোডিং টাইম দ্রুত হবে।

// Lazy Load ইমেজ
function add_lazy_loading($content) {
    if (!is_admin()) {
        $content = preg_replace('/<img(.*?)src=/', '<img$1loading="lazy" src=', $content);
    }
    return $content;
}
add_filter('the_content', 'add_lazy_loading');

ধাপ ৫: থিমে CDN ব্যবহার করা

স্ট্যাটিক ফাইল (CSS, JS, Images) লোডিং দ্রুত করার জন্য CDN (Content Delivery Network) ব্যবহার করুন। উদাহরণ:

Cloudflare
BunnyCDN

CDN ব্যবহার করলে থিমের লোডিং টাইম উল্লেখযোগ্যভাবে কমে যাবে।

ধাপ ৬: অপ্রয়োজনীয় ফিচার Disable করা

ডিফল্ট ওয়ার্ডপ্রেস ফিচার যেমন Emojis Script বা Query Strings রিমুভ করতে নিচের কোড যোগ করুন:

// Emoji Script বন্ধ
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

// Query Strings বন্ধ
function remove_query_strings($src) {
    if (strpos($src, '?ver='))
        $src = remove_query_arg('ver', $src);
    return $src;
}
add_filter('script_loader_src', 'remove_query_strings');
add_filter('style_loader_src', 'remove_query_strings');

ধাপ ৭: থিমে Caching ব্যবহার করা

ক্যাশিং ব্যবহারে সাইট দ্রুত লোড হয়। থিম লেভেলে transients API ব্যবহার করতে পারেন:

// ক্যাশিং উদাহরণ
function mytheme_get_cached_data() {
    $data = get_transient('mytheme_cached_data');
    if (false === $data) {
        $data = 'এইটা ক্যাশ করা ডেটা।'; // Replace with actual data
        set_transient('mytheme_cached_data', $data, 12 * HOUR_IN_SECONDS);
    }
    return $data;
}

ধাপ ৮: থিমের Responsive Images ব্যবহার করা

ইমেজ ট্যাগে srcset এবং sizes অ্যাট্রিবিউট যোগ করুন, যেন ডিভাইস অনুযায়ী উপযুক্ত সাইজের ইমেজ লোড হয়।

<img src="image-large.jpg" 
     srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w" 
     sizes="(max-width: 768px) 100vw, 768px" 
     alt="Responsive Image">

এপিসোড-১১ শেষ করছি। এর মধ্যে দিয়ে আমরা সিরিজটি শেষ করলাম। এবং আপনাদের এক একটি কমেন্ট গুরুত্বপূর্ণ ভূমিকা রাখবে।
আপনাদের মতামত আমি কামনা করছি।
সবাই ভালো থাকবেন সুস্থ থাকবেন।
যেকোন সমস্যা বা কোড না বুঝলেঃ

My Telegram