এডভান্স ওয়ার্ডপ্রেস। ধাপে ধাপে ওয়ার্ডপ্রেস শিখি অধ্যায়-১

এডভান্স ওয়ার্ডপ্রেস।ধাপে ধাপে ওয়ার্ডেপ্রেস শিখি।

শুরু করার আগে এই বিষয় গুলো সম্পর্কে জ্ঞান রাখতে হবে।

• লোকাল সার্ভার এবং ওয়েব সার্ভার সম্পর্কে বেসিক ধারণা থাকতে হবে
• HTML এবং  css  এর ভলো ধারণা থাকতে হবে।
• jQuery প্লাগইন সমূহ কিভাবে ব্যবহার করতে হয় জানতে হবে।
• ওয়ার্ডপ্রেস ইন্সটল করার পদ্ধতি জানতে হবে
• ওয়ার্ডপ্রেসের ব্যবহার জানতে হবে।

HTML টেমপ্লেট কে ওয়ার্ডপ্রেস

থিমে রূপান্তর

যে কোন ওয়েব সাইট তৈরির ক্ষেত্রে প্রথমে ঐ সাইটটির ডিজাইন ফটোশপ ব্যবহার করে PSD ফরমেটে তৈরি করা হয় যাকে বলা হয় PSD টেমপ্লেট । এর পর HTML, CSS প্রয়োজনে jQuery প্লাগইন সমূহ ব্যবহার করে PSD টেমপ্লেটটিকে Web টেমপ্লেট বা HTML টেমপ্লেটে রূপান্তর করা হয়। এর পরের কাজ একজন ওয়ার্ডপ্রেস ডেভলপারের। যা আমাদের কোর্সের আলোচনার বিষয়বস্তু। একজন ওয়ার্ডপ্রেস ডেভলপার একটা  HTML টেমপ্লেট পাওয়ার পর কি করবে তা নিয়েই আজকের আলোচনা।

HTML টেমপ্লেট কে ওয়ার্ডপ্রেস থিমে রূপান্তরের জন্য  আমাদের প্রাথমিক করণীয় কিছু পদক্ষেপ

• একটা HTML টেমপ্লেট নিতে হবে।
• WordPress ইন্সটল করে নিতে হবে।
• সাধারণত WordPress ইন্সটল করলেwp-content\themes এর মধ্য থিম সমূহ থাকে। এখানে HTML টেমপ্লেটটি রাখতে হবে।
• প্রতিটা wordpress থিমেই index.php এবং style.css থাকতে হবে।
• HTML টেমপ্লেটের index.html কে index.php করতে হবে।
• style.css না থাকলে style.css তৈরি করে নিতে হবে।
• একটা functions.php ফাইল তৈরি করতে হবে। functions.php এর কোড শুরু হবে <?php দিয়ে আর  শেষে থাকবে  ?>   ।
• HTML টেমপ্লেটে jQuery কল করা থাকলে তা ডিলেট করে দিতে হবে। কারণ WordPress এর সাথে ডিফল্টভাবে jQuery থাকে। আমাদের WordPress এর jQuery ব্যবহার করতে হবে।

WordPress  ডিফল্ট jQuery ব্যবহার করার জন্য functions.php ফাইলে যুক্ত করতে হবে।

5	/* Adding Latest jQuery from WordPress */ function call_wp_latest_jquery() { wp_enqueue_script('jquery'); } add_action('init', 'call_wp_latest_jquery');

• jQuery ব্যবহৃত কোন স্ক্রিপ্টে $ থাকলে তা jQuery  দ্বারা Replace করতে হবে।
• HTML টেমপ্লেটের <title>…………</title> হবে

<title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?> | <?php wp_title(); ?></title>

• Css ফাইল সমূহের থিম ডাইরেক্টরী ডাইনামিক করার জন্য ব্যবহার করতে হবে

<?php echo get_template_directory_uri(); ?>

যেমন

<link href="style/css/main.css" rel="stylesheet">1হবে 1<link href="<?php echo get_template_directory_uri(); ?>/style/css/main.css" rel="stylesheet">

• Style.css ডাইনামিক করার জন্য ব্যবহার করতে হবে <?php bloginfo('stylesheet_url'); ?>

অর্থাৎ

<link href="style.css" rel="stylesheet">

হবে

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet">

• বিভিন্ন ফাংশন Head সেকশনের মধ্যে সক্রিয় করার জন্য <?php wp_head(); ?> ব্যবহার করতে হবে। <?php wp_head(); ?> যুক্ত করতে হবে </head> এর ঠিক পূর্বে।
• HTML টেমপ্লেটের ইমেজ সমূহ ডাইনামিক করার জন্য ব্যবহার করতে হবে  <?php echo get_template_directory_uri(); ?>

যেমন

<img src="style/images/logo.png" alt="" />

হবে

<img src="<?php echo get_template_directory_uri(); ?>/style/images/logo.png" alt="" />

• js ফাইল সমূহের থিম ডাইরেক্টরী ডাইনামিক করার জন্য ব্যবহার করতে হবে

<?php echo get_template_directory_uri(); ?>/

যেমন

<script src="style/js/scripts.js"></script>

হবে

<script src="<?php echo get_template_directory_uri(); ?>/style/js/scripts.js"></script>

• বিভিন্ন ফাংশন footer সেকশনের মধ্যে সক্রিয় করার জন্য

<?php wp_footer(); ?>

·         ব্যবহার করতে হবে।

<?php wp_footer(); ?>

·         যুক্ত করতে হবে </head> এর ঠিক পূর্বে।

• Style.css শুরু করতে হবে নিচের কোড এর অনুরূপ কোড দিয়ে।

/*Theme Name: My WordPress ThemeTheme URI: http://sitename.com/my_wordpress_themeAuthor: Ashim KumarAuthor URI: http://authorsitename.com Version: 1.0 */

• 600px x 450px এর একটা screenshot.png ইমেজ নিতে হবে থিম ডিরেকটরীতে, যা থিমের screenshot হিসেবে আসবে,এবং থিম একটিভ করার সময় দেখাবে। 
• লাইক করুন প্রশ্ন করুন