অনেক ব্লগে দেখা যায় প্রতিটা পোষ্টে আলাদা বাটন ব্যাবহার করেছে। তাছাড়া একেটা পোষ্টে একেক রকম CSS এর জাদু দেখিয়েছে। কিন্তু সাইট লোড হতে সময় লাগে না। আমিও প্রথমে দেখে একটু অবাক হতাম কারণ, CSS কোড গুলো মূলত style.css ফাইলে যোগ করা হয় আর ওয়েব সাইট লোডের সময় সম্পূর্ণ style.css ফাইলটাই লোড হয়। এত CSS কোড ও পিকচার(এখানে CSS কোডে ব্যবহৃত ছবির কথা বলেছি) আছে কিন্তু সাইট এত পাতলা। আসলে খুব সহজেই প্রতিটা পোষ্টে আলাদা CSS কোড কোড ব্যাবহার করা যায়।
১ম ধাপ: প্লাগিন ইনিস্টল
কোড যোগ করার একটা খুব ভালো প্লাগিন এর নাম হল Art Direction । আপনার প্রথম কাজ হবে প্লাগিনটা ইনিস্টল করা। প্লাগিন ইনিস্টল করার জন্য নিচের ধাপগুলো অনুসরণ করুণ।
১. প্রথমে প্লাগিনটা ডাউনলোড করে নিন এবং আন জিপ করুণ।
২. FTP সফটওয়্যার ব্যাবহার করে উক্ত আন জিপ কৃত ফাইল আপনার হোস্টিং এর public_html/wp-content/plugins ফোল্ডারে আপলোড করুণ।
৩. এবার আপনার ওয়ার্ডপ্রেস এডমিন প্যানেলে গিয়ে প্লাগিন একটিভ করুণ।
২য় ধাপ: প্লাগিন ডেভেলপমেন্ট
৪. এটাকে এখন CSS কোড ফ্রেন্ডলি করার জন্য নিচের কোডটুকু art-direction.php ফাইলের নিচে যোগ করে দিন।
function artStyle() {
global $post;
if (is_single()) {
$currentID = $post->ID;
$serverfilepath = TEMPLATEPATH.’/art-direction/style-‘.$currentID.’.css’;
$publicfilepath = get_bloginfo(‘template_url’);
$publicfilepath .= ‘/art-direction/style-‘.$currentID.’.css’;
if (file_exists($serverfilepath)) {
echo “<link rel=’stylesheet’ type=’text/css’ href=’$publicfilepath’ media=’screen’ />”.”\n”;
}
}
}
add_action(‘wp_head’, ‘artStyle’);
//Custom CSS Widget
add_action(‘admin_menu’, ‘custom_css_hooks’);
add_action(‘save_post’, ‘save_custom_css’);
add_action(‘wp_head’,’insert_custom_css’);
function custom_css_hooks() {
add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘post’, ‘normal’, ‘high’);
add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘page’, ‘normal’, ‘high’);
}
function custom_css_input() {
global $post;
echo ‘<input type=”hidden” name=”custom_css_noncename” id=”custom_css_noncename” value=”‘.wp_create_nonce(‘custom-css’).'” />’;
echo ‘<textarea name=”custom_css” id=”custom_css” rows=”5″ cols=”30″ style=”width:100%;”>’.get_post_meta($post->ID,’_custom_css’,true).'</textarea>’;
}
function save_custom_css($post_id) {
if (!wp_verify_nonce($_POST[‘custom_css_noncename’], ‘custom-css’)) return $post_id;
if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST[‘custom_css’];
update_post_meta($post_id, ‘_custom_css’, $custom_css);
}
function insert_custom_css() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo ‘<style type=”text/css”>’.get_post_meta(get_the_ID(), ‘_custom_css’, true).'</style>’;
endwhile; endif;
rewind_posts();
}
ব্যাস হয়ে গেছে কাজ। এবার পোষ্ট লেখার সময় নিচে CSS কোড যোগ করার জন্য আর একটা বক্স দেখা যাবে।
এই পদ্ধতি ব্যাবহার না করলেও শুধু প্লাগিন এর সাহায্যে CSS কোড যোগ করা যাবে তবে এটা লোড হতে অনেক বেশী সময় নেয়। আমার দুর্বল নেট এর কারণে তো বেশীর ভাগ সময় CSS কোড গুলো লোড হয় না।
বিদ্র: বলে রাখি প্লাগিন ডেভলপ করার পর ইনিস্টল করবেন।
ডিজাইনার শিবলী লেখা তোর লাল ইমেজটাই বেশি সুন্দর…
সিএসএস তেমন বুঝিনা, যদিও ব্লগিং এর ক্ষেত্রে এগুলো বিশেষভাবে জানা প্রয়োজন…
পরে সময় করে শেখার চেষ্টা থাকবে…
শেখ! শেখ! শিখতে যদি বোরিং লাগে তাহলে “মোহাম্মদ নূর এলাহী আলী শিবলী“কে জানা। তিনি সর্বদা আপনাদের সেবায় নিয়োজিত।
@শিবলী, 😛
@তাওহিদুল ইসলাম, খালি একটা স্মাইল তাওহিদুল ভাই? মাইন্ড করলাম!
@শিবলী, এবার একটা দরকারে মন্তব্য করলাম। প্রত্যেক পোষ্টে আলাদা সিএসএস দেওয়ার জন্য custom css এ একটা উদাহরন দেয়া আছে। নিশ্চয় আরো অনেকগুলো বাকি আছে আমার মনে হয় ভুলে দেয়া হয়নি। সেগুলো দিলে খুশি হই। আমি কি বলেছি আশা করি বোঝার কথা
@তাওহিদুল ইসলাম, হা! হা! তৌহিদুল ভাই আপনার কাছে ঐটা CSS কোড মনে হয়??
আপনি যদি কোড পরীক্ষা করে দেখতে চান তাহলে বাটন লাগিয়ে পরীক্ষা করতে পারেন।
@শিবলী, হাহাহ, ভুল করে কি লিখে ফেলেছি , মাথা যাম থাকায় কাকে সিএসএস ভেবেছি 😛
“২য় ধাপ: প্লাগিন ডেভেলপমেন্ট
৪. এটাকে এখন CSS কোড ফ্রেন্ডলি করার জন্য নিচের কোডটুকু art-direction.php ফাইলের নিচে যোগ করে দিন।”
এই কথাটার মানে একটু বুঝিয়ে বলুন। আমি কি এটা সেই ফাইল (art-direction.php) এডিট করে সেট করবো নাকি নতুন একটা ফাইল বানিয়ে সেটাতে অ্যাড করবো।
আমি যদি art-direction.php ফাইলটি ওপেন করে সব নিচে কোড দেয় তাহলে ভুল দেখাচ্ছে।
একটু হেল্পান প্লিজ
@আমিনুল ইসলাম, আপনি মনে হয় অন্যান্য কোড গুলা মুছে দিয়ে উক্ত কোড গুলা বসাচ্ছেন। আপনাকে ঐ কোড গুলার সাথে নিচের কোড গুলা বসিয়ে দিতে হবে।
ডিজিটাল বাংলাদেশ গড়ার জন্য কম্পিউটার এবং ইন্টারনেটের কোন বিকল্প নেই ।আর এই প্রযুক্তির ক্ষুধা মেটানোর জন্য এটা খুব ভাল সাইট ,এটা সবার জন্য খুবই প্রয়োজন।আমি অনেক দিন ধরে এমন একটা সাইট খোঁজ করছিলাম।হটাৎ করে পেয়েও গেলাম।এটা আমার খুব ভাল লাগছে।আমি চাই আপনি আমাদের নতুন নতুন পোস্ট উপহারে দিবেন। আপনাকে অনেক অনেক ধন্যবাদ ,আর সময় পেলে আমাদের কম্পিউটার, ইন্টারনেট এবং ওয়েব সাইট বিষয়ক পুরাপুরি বাংলা ব্লগ সাইট http://www.pchelpline24.com ভুবনে ঘুরে আসুন।দেখুন,জানুন এবং আপনিও এখানে লিখুন, আমরা আপনার অপেক্ষায় থাকব ।
আমাদের ব্লগ আনুষ্ঠানিকভাবেযাত্রা শুরু করবে ০১/০৮/২০১১তরিখ থেকে এছাড়া
ওয়ার্ডপ্রেসের নিরাপত্তার বিষয়ে বিস্তারিত লিখুন। অভিজ্ঞদের কাছে আবেদন।