আপনি কি ওয়ার্ডপ্রেস থিম ডিজাইনার? নিজের জন্য অথবা ক্লাইন্টের জন্য কোন থিম ডিজাইন করে চলছেন প্রতিনিয়তই? অথবা বড় কোন মার্কেটপ্লেসে(যেমন: ThemeForest.Net) আপনার থিম বিক্রির জন্য ছাড়ছেন? থিমটি রিলিজ করবার পূর্বে একবার টেস্ট করে দেখেছেন কি, আপনার থিমের কম কাজগুলো সম্পন্ন করা এখনও বাকি? থিম রিলিজের পূর্বে কিছু কথা মনে রাখবেন, যেকোনো বড় মার্কেটপ্লেসে থিম বিক্রি করতে গেলে সেখানের ক্রেতাদের দিয়ে আপনার থিম টেস্ট করার চিন্তা থাকলে, অবশ্যই হিতে বিপরীতের শিকার আপনি নিজেই হবে! ১০-১৫ মিনিট সময় নিয়ে টিউনটি পড়ুন, তাহলেই হয়তো পেয়েও যেতে পারেন আপনার অসম্পন্ন কাজটি। যা আপনার ভবিষ্যতের মিসটেক গুলোকে এড়ানোর জন্য যথেস্থ ভূমিকা রাখবে...

১. পাসওয়ার্ড প্রোটেক্টেড টিউনে টিউমেন্ট না দেখানোঃ

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

<?php if ( post_password_required() ): ?>

<p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view and post comments.’ ’mytheme’); ?></p>

</div>

<?php

return;

endif;

?>

২. ঠিকঠাক মত এটাচমেন্ট ফাইল দেখানোঃ

আপনার সদ্য তৈরি করা ওয়ার্ডপ্রেস থিমে এটাচমেন্ট ফাইল গুলো (টেক্সট, পিডিএফ, অডিও, ভিডিও ইত্যাদি) ঠিকঠাক মত দেখায় কিনা সেটাও আপনাকেই নিশ্চিত করতে হবে। এর জন্য ওয়ার্ডপ্রেস থিমের সাথে আরেকটি স্পেশাল ফাইল attachment.php বানিয়ে নিবেন।

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

ওয়ার্ডপ্রেস ৩.০ ভার্সনের ডিফল্ট TwentyTen থিমে ইমেজ এটাচমেন্ট এর জন্য যে কোড লিখা হয় তা নিম্নরুপঃ

if ( wp_attachment_is_image() ) {

echo ' <span class="meta-sep">|</span>  ';

$metadata = wp_get_attachment_metadata();

printf( __( 'Full size is %s pixels', 'twentyten'),

sprintf( '<a href="%1$s" title="%2$s">%3$s × %4$s</a>',

wp_get_attachment_url(),

esc_attr( __('Link to full-size image', 'twentyten') ),

$metadata['width'],

$metadata['height']

)

);

}

৩. Right-To-Left সিএসএস সাপোর্টঃ

আপনি হয়তো এর আগেও অনেকবার শুনেছেন/দেখেছেন rtl.css স্টাইলসিট এর কথা। হয়তো ভাবছেন এটা অনেক কঠিন কিছু? একদম না! rtl.css স্টাইলসিট যেকোনো থিমে ব্যবহার করা হয় যদি কোন ভাষায় ডানদিকে থেকে বাদ দিকে পড়া হয়। যেমন: আরবি এবং হিব্রু ভাষা। মনে পড়েছে? যখনি আপনার থিমের ভাষা আরবি অথবা হিব্রু করা হবে ঠিক তখন আপনার জন্য rtl.css স্টাইলসিট কল করে থিমের ভাষা পড়তে হবে। আপনার থিমে যদি rtl.css স্টাইলসিট সাপোর্ট না থাকে তবে এই ভাষা দিয়ে থিমে কাজ করবে না। কারণ, ওয়ার্ডপ্রেস কনফিগারেশন সেটিং এ গিয়ে যখন ডিফল্ট ভাষা আরবি define('WP_LANG', 'ar') সিলেক্ট করে দেয়া হবে সেটই তখন ডিফল্ট style.css এর বডি এর টেক্সট ডিরেকশনকে কে ওভাররাইট করবে নিচের মত:

body {

direction: rtl;

unicode-bidi: embed;

}

প্রথম ডিরেকশন প্রোপার্টিটির ব্যাপারে আগেই বলেছি। দ্বিতীয়টি ডব্লিউথ্রি কনসোর্টিয়ামের ইউনিকোড ডিরেকশনাল এলগোরিদম। rtl.css ফাইল টি কোন স্টাইল সিটের সাথে ডুপ্লিকেট করার প্রয়োজন নেই। শুধু কয়েকটি প্রোপার্টি পরিবর্তন করে দিলেই rtl.css তার মত করে কাজ করে যাবে। float: left; কে করতে হবে float:right; এবং margin-right এবং padding-right এর দিতে হবে margin-left এবং padding-left এ। এছাড়াও আরও পরিবর্তন আনতে এবং বুঝতে আপনাকে মাল্টিলাংগুয়েজ সাইট ফেসবুক অথবা উইকিপিডিয়া সাইট অথবা ইন্টারন্যাশনাল আরবি সাইট আল-জাজিরা ভিজিট করতে হবে।

রেফারেন্স: RTL support on the WordPress Codex

৪. এডিটর প্যানেল ডিজাইন করাঃ

আপনি যদি ওয়ার্ডপ্রেস TinyMCE এডিটর এর স্টাইল করতে চান তবে, আপনার থিম ডিরেক্টরিতে editor-style.css নামে একটি স্টাইল ফাইল ওপেন করুন। এই সেকশনটি নিজের মত করে ডিজাইন করা অনেক সহজ, আপনাকে শুধু মেইন স্টাইলসিটের টাইপোগ্রাফি এবং ক্লাস এর সাথে মিল রেখে কোডিং করতে হবে। নতুন করে কোডিং করার সময় ব্লক লেআউট নিয়ে দুশ্চিন্তায় পড়বার কোন কারণ নেই। কারণ TinyMCE এডিটরের কন্টেন্ট ডিফল্টভাবেই ব্লক করা। আপনি যদি প্যারাগ্রাফ এর স্টাইলকে লং লাইন থেকে কমিয়ে আনতে চান তবে editor-style.css ফাইল এ .mceContentBody ক্লাসের মধ্যে max-width দিয়ে মেজার করে দিতে পারেন।

আপনি যদি এডিটর প্যানেলেও right-to-left ভাষার সাপোট চান তবে editor-style-rtl.css নামে আরেকটি স্টাইল ফাইল ওপেন করুন। এবং প্রয়োজনীয় কোডিং প্রোপার্টি ডিক্লেয়ার করুন।

৫. টিউনের পেজিনেশন তৈরি করুনঃ

ওয়ার্ডপ্রেস থিমে পেজের পেজিনেশন ফিচারটি অনেক কার্যকারী। প্রায়শই দেখা যায়, ওয়ার্ডপ্রেস দিয়ে তৈরি যেকোনো সাইটে টিউন পেজের ফুটারে ১ ২ ৩ এমন ক্রমিক অথবা Older Post, Newer Post লিঙ্ক দেখা যায়। এটাই পেজিনেশন। পেজিনেশন তৈরি করে রাখলে আপনার ব্লগের রিডাররা নতুন কন্টেন্টের পাশাপাশি পূর্বের কন্টেন্টও পরতে পারবে অনায়াসে। আর এই কাজটি একজন থিম ডিজাইনার হিসেবে আপনাকেই করে দিতে হবে যখন আপনি টিউনের জন্য লুপ ডিক্লেয়ার করবেন তার পরপরই:

wp_link_pages(

array(

'before' => '<p><strong>Pages:</strong> ',

'after' => '</p>',

'next_or_number' => 'number')

);

উপরের পেজিনেশনের কোডটি দিয়ে নিচের মত ফলাফল পাবেন আমাদের এই ব্লগের হোম পেজ দেখুন অথবাঃ

Pages: 1 2 3

টিউন পেজে পেজিনেশন থাকলে ভিজিটর শুরু থেকে শেষ পর্যন্ত সব লিখা পরতে পারবেন। পেজের পেজিনেশন নিয়ে আরও বিস্তারিত জানতে ওয়ার্ডপ্রেস কোডেক্স গাইড দেখুন।

৬. ডিফল্ট উইজেট স্টাইল করাঃ

বাই ডিফল্ট ওয়ার্ডপ্রেসে অনেক গুলো উইজেট থাকে, যা বেছে বেছে ডিজাইন করা ইম্পসিবল! কিন্তু এমন কিছু উইজেট রয়েছেন যা আপনি অবশ্যই ডিজাইন করবেন আপনার প্রয়োজনে। যেমন: ক্যাটেগরি এবং ক্যালেন্ডার উইজেট। ক্যাটেগরি উইজেটটি ড্রপ-ডাউন হিসেবে থাকে বাই ডিফল্ট এবং এর সাথে অনেক গুলো নেস্টেড ইলিমেন্ট যুক্ত থাকে। তাই ক্যাটেগরি উইজেটের জন্য আপনাকে স্টাইল তই করে দিতে হবে মেইন স্টাইলসিটে। ক্যালেন্ডার উইজেট, এটি টেবিল দিয়ে ডিজাইন করা। আপনি অবশ্যই চাইবেন প্রতিটা টেবিল সেল এর ইলিমেন্ট মাঝে(Centered) থাকুক। নিচের ইমেজ দুটি লক্ষ করুণ, প্রথমটিতে কোন স্টাইল নেই কিন্তু পরেরটিতে কিছু স্টাইল করা হয়েছে বিঁধায় ক্যালেন্ডারটি স্ক্রিনের মাঝে মাঝি দেখাচ্ছে:

ফাইনালি, আপনি চাইলে আপনার থিমের উইজেটের জন্য একটি ইউনিক স্টাইল ক্লাস .widget ব্যবহার করতে পারেন। এটা আপনার থিমে বর্তমান এবং আপকামিং সকল উইজেটের জন্য স্টাইল ইমপ্লিমেন্ট করবে। হয়তো আলাদা স্টাইল আপনার থিমকে অনেকটা অড দেখাবে।

৭. Threaded Comments সিস্টেমঃ

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

৮. wp_head() এবং wp_footer() হুক কল করাঃ

ওয়ার্ডপ্রেসের জন্য তৈরি প্রতিটি থিমের header.php ফাইলের ক্লোজিং ট্যাগের ঠিক আগে wp_head() হুক এবং footer.php ফাইলের ক্লোজিং

ট্যাগের পূর্বে wp_footer() হুক কল করা বাধ্যতামূলক। কারণ, এ ২টি অ্যাকশন হুক দিয়ে বিভিন্ন প্লাগিন থিমে রেন্ডার হয়। সাথে ওয়ার্ডপ্রেস এডমিনবার ডিসপ্লে করতেও এ ২টি ইউজ করা হয়। এ ২টি অ্যাকশন হুক নিয়ে আরও জানতে ভিজিট করুন: WordPress Plugin API reference পেজে।

৯. ইমেজ থাম্বনাইল সাপোর্টঃ

ওয়ার্ডপ্রেস ভার্সন ২.৯ এর আগে দেখে যেত অনেকেই থিমে ইমেজ থাম্বনাইল সাপোর্ট করানোর জন্য প্লাগিন ইউজ করতেন অন্য উপায় না পেয়ে। যা থিম লোডিং টাইম বাড়িয়ে দেয়। কিন্তু ২.৯ ভার্সন রিলিজের পর থেকে এই প্রবলেমটি সল্ভ হয়েছে। কারণ, ওয়ার্ডপ্রেস ২.৯ ভার্সন থেকে থেকে থিমে ইমেজ থাম্বনাইল সাপোর্ট যুক্ত হয়েছে। এই সুবিধাটি পেতে আপনাকে শুধু নিচের লাইন দুটি থিমের functions.php যুক্ত করতে হবেঃ

add_theme_support( 'post-thumbnails' );

set_post_thumbnail_size( 70, 70 );

প্রথম লাইনটি হচ্ছে থিমে থাম্বনাইল সাপোর্ট পেতে। দ্বিতীয়টি, টিউনের ফিচার থাম্বনাইল ইমেজ সাইজ সেট করতে: 70, 70 হচ্ছে ইমেজ এর হাইট 70px এবং ওয়াইড 70px। আপনি চাইলে বাড়াতে বা কমাতে পারেন আপনার সুবিধার্থে। 70px * 70px সাইজ দেয়ার পরেও আপনার লেআউট এর থাম্বনাইল ইমেজ যেন সঠিক সাইজে দেখায় তার জন্য নিচের

set_post_thumbnail_size( 70, 70, TRUE );

লাইনটি রিপ্লেস করতে পারেন। এতে করে আপনার থাম্বাইল ইমেজটি অটো ক্রোপ হয়ে 70px * 70px সাইজে সেট হবে। যদি টিউনের ভিতরে ইমেজ থাম্বনাইল সাইজ নির্ধারণ করে দিতে চান তবে আরও একটি লাইন আপনার ফাংশন ফাইলে যুক্ত করে নিন:

add_image_size( 'big-thumb', 500, 500 );

তাহলে, set_post_thumbnail_size( 70, 70, TRUE ); দিয়ে আপনার টিউনের ফিচার ইমেজ শো করাতে পারবেন এবং add_image_size( 'big-thumb', 500, 500 ); দিয়ে আপনি টিউনের/ পেজের মাঝে নির্ধারিত সাইজ এর ইমেজ দেখাতে পারবেন।

রেফারেন্স: ইমেজ থাম্বনাইল নিয়ে নিয়ে পরিপূর্ণ বিস্তারিত দেখতে পারেন ওয়ার্ডপ্রেস ডেভেলপার Mark Jaquith এর ব্লগ।

১০. কাস্টম মেন্যু সাপোর্টঃ

ওয়ার্ডপ্রেস ভার্সন ৩.০ থেকে থিমের মধ্যে কাস্টম মেন্যু সাপোর্ট করে বা করানো যায়। তবে আমার নিজের দেখা কিছু থিমের মধ্যে কাস্টম মেন্যু সাপোর্ট পাই নাই। ফল স্বরূপ নিজেকেই কোড লিখে মেন্যু সাপোর্ট করিয়ে নিতে হয়। তবে, একজন সচেতন থিম ডিজাইনার হিসেবে প্রত্যেকের উচিৎ কাস্টম মেন্যু থিমে রেজিস্টার করে রাখা। যেভাবে কাস্টম মেন্যু রেজিস্টার করবেন নিচে বিস্তারিত শেয়ার করলাম।

আপনার থিমের functions.php ফাইল নিচের লাইনটি দেখুন:

register_nav_menu( 'main_nav', __( 'Main Navigation Menu', 'Theme Name' ) );

এবার এই মেন্যুটি থিমে শো করা আপনাকে wp_nav_menu(); টি ব্যবহার কর‍তে হবে। থিমের যে স্থানে মেন্যুটি দেখাতে চান সেখানে গিয়ে নিচের কোডটি লিখুন...

wp_nav_menu( array( 'theme_location' => 'main_nav' ) );

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

১১. Custom Backgrounds সাপোর্টঃ

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

add_custom_background();

এরপর আপনার সদ্য বানানো থিমের জন্য কাস্টম ব্যাকগ্রাউন্ড সাপোর্ট পেয়ে যাবেন। এটি ইউজ করতে হলে ওয়ার্ডপ্রেস এডমিন প্যানেল থেকে Appearance > Background সেকশনে যেতে হবে।

১২. Custom Headers সাপোর্টঃ

কাস্টম ব্যাকগ্রাউন্ড এর মত আপনার থিমের জন্য কাস্টম হেডার ব্যাকগ্রাউন্ড অপশন রাখতে পারেন। কাস্টম ব্যাকগ্রাউন্ড এর মতই তবে এর জন্য কয়েক লাইন বেশি কোড লিখতে হবে। কাস্টম হেডার ব্যাকগ্রাউন্ড সাপোর্ট পেতে আপনার থিমের functions.php ফাইলে নিচের ৪ লাইনের কোড গুলো লিখুন। এবং ‘yourwidth’ লিখার জায়গায় আপনার থিমের হেডার ব্যাকগ্রাউন্ড এর প্রস্থ লিখে দিন এবং ‘yourheight’ লিখার জায়গায় আপনার থিমের হেডার ব্যাকগ্রাউন্ড এর উচ্চতা লিখে দিন।

define( 'HEADER_TEXTCOLOR', '000' );

define( 'HEADER_IMAGE', get_bloginfo( 'stylesheet_directory' ) . 'path/to/your/image' );

define( 'HEADER_IMAGE_WIDTH', 'yourwidth' );

define( 'HEADER_IMAGE_HEIGHT', 'yourheight' );

উপরের লাইনগুলো লিখা হয়ে গেলে এবার আপনাকে থিমের কাস্টম হেডার ব্যাকগ্রাউন্ড এর জন্য ফাংশন লিখতে হবে। যা আপনার থিমের কাস্টম ব্যাকগ্রাউন্ড অ্যাপ্লাইয়ের সহায়ক হবে। ওয়ার্ডপ্রেস সাইট হেডারের জন্য কোন স্ট্যান্ডার্ড মার্কআপ না থাকায় ওয়ার্ডপ্রেস বুঝতে পারে না কিভাবে কাস্টম হেডার ব্যাকগ্রাউন্ড এর জন্য স্টাইল কোড অ্যাপ্লাই করতে হয়। উদাহরণ স্বরূপ, কোন থিমের কাস্টম ব্যাকগ্রাউন্ড সেকশনটি যদি কোন div ট্যাগের আওতায় হয় তবে নিচের মত ফাংশন লিখতে পারেন:

<?php

function mytheme_header_image() {

?>

<style type="css">

#header { background: url(<?php header_image(); ?>) no-repeat; }

</style>

<?php

}

?>

কাস্টম হেডার ব্যাকগ্রাউন্ডটি আসলেই আপনার সাইট কিভাবে দেখাবে সেটির প্রিভিউ দেখার জন্য আপনার থিমের functions.php ফাইলে আরও একটি ফাংশন mytheme_admin_preview_header() নামে। এটি করার ফলে আপনার থিমের ফাইনাল হেডার হিসেবে সেভ করা আগেই দেখে নিতে পারবেন হেডার ব্যাকগ্রাউন্ডটি আপনার সাইটের সাথে মিল রেখে হচ্ছে কিনা।

চূড়ান্তভাবে কাস্টম হেডার অপশন Appearance > Header এ পাবার জন্য আপনাকে এবার
add_custom_image_header( 'mytheme_header_image', 'mytheme_admin_preview_header' ); ফাংশনটি কল কর‍তে হবে।

রেফারেন্স: add_custom_image_header on the WordPress Codex

হোপফুলি, উপরের ১২টি স্টেপ আপনাদের সামনের থিম ডেভেলপমেন্টের ক্ষেত্রে কাজে দিবে। আসলে এ কয়েকটিতেই সীমাবদ্ধ হয়। আমার যে কয়েকটা ইম্পরট্যান্ট মনে হল আমি তুলে ধরলাম। আপনাদের জানার মধ্যে কোন কিছু বাদ পড়লে টিউমেন্ট করে জানাতে ভুলবেন না! 🙂

টিউনটি পূর্বে প্রকাশিত

রংপুরসোর্স ব্লগে! 🙂