Uncategories ওয়ার্ডপ্রেস ওস্তাদ [পর্ব-০১] :: HTML টেমপ্লেট কে ওয়ার্ডপ্রেস থিমে রূপান্তরের জন্য প্রাথমিক করণীয়

ওয়ার্ডপ্রেস ওস্তাদ [পর্ব-০১] :: HTML টেমপ্লেট কে ওয়ার্ডপ্রেস থিমে রূপান্তরের জন্য প্রাথমিক করণীয়

টিউন করেছেনঃ | প্রকাশিত হয়েছেঃ 6:55 AM | টিউন বিভাগঃ
সবাইকে আন্তরিক শুভেচ্ছা এবং স্বাগতম জানাচ্ছি “ওয়ার্ডপ্রেস ওস্তাদ” এডভান্স ওয়ার্ডপ্রেস ডেভলপমেন্টের উপর একটা পূর্ণাঙ্গ ফ্রি চেইন কোর্স এর ১ম পর্বে। টেকটিউনস বিশ্বের সবচেয়ে বড় বাংলা সোশ্যাল নেটওয়ার্ক । এরকম একটা বড় প্লাটফর্মে “ওয়ার্ডপ্রেস ওস্তাদ” কোর্সটি টেকটিউনস কতৃপক্ষের প্রত্যক্ষ সহযোগিতায় শুরু করতে পেরে ভালো লাগছে।
“ওয়ার্ডপ্রেস ওস্তাদ ” কোর্সের ঘোষণা  টেকটিউন্সে প্রকাশ করার পর আপনাদের মধ্যে যে আগ্রহ দেখেছি, তা এই কোর্সটিকে সুন্দর করে পরিচালনা করতে সাহায্য করবে। সকলের সক্রিয় অংশগ্রহণ কামনা করছি।
আজ  প্রথম পর্বে একটা HTML টেমপ্লেট কে ওয়ার্ডপ্রেস থিমে রূপান্তর কারর ক্ষেত্রে যে সকল প্রথমিক কর্যক্রম  রয়েছে সে সম্পর্কে বিস্তারিত আলোচনা করা হবে।

এই কোর্সে অংশ গ্রহণের পূর্ব প্রস্তুতি সমূহ :

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

HTML টেমপ্লেট কে ওয়ার্ডপ্রেস থিমে রূপান্তর

যে কোন ওয়েব সাইট তৈরির ক্ষেত্রে প্রথমে ঐ সাইটটির ডিজাইন ফটোশপ ব্যবহার করে PSD ফরমেটে তৈরি করা হয় যাকে বলা হয় PSD টেমপ্লেট । এর পর HTML, CSS প্রয়োজনে jQuery প্লাগইন সমূহ ব্যবহার করে PSD টেমপ্লেটটিকে Web টেমপ্লেট বা HTML টেমপ্লেটে রূপান্তর করা হয়। এর পরের কাজ একজন ওয়ার্ডপ্রেস ডেভলপারের। যা আমাদের কোর্সের আলোচনার বিষয়বস্তু। একজন ওয়ার্ডপ্রেস ডেভলপার একটা  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 ফাইলে যুক্ত করতে হবে।
 /* 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 হিসেবে আসবে,এবং থিম একটিভ করার সময় দেখাবে।
প্রতিটা পর্বে কোর্সে সক্রিয় অংশগ্রহণকারীদের জন্য কিছু প্রশ্ন, প্রজেক্ট বা বিশেষ কিছু করণীয় থাকবে। এগুলো সম্পন্ন করে কোর্সে আপনার সক্রিয়তা নিশ্চিৎ করুন। এই কোর্সের সাথে সম্পৃক্ত বিচারক মন্ডলী এগুলো পর্যবেক্ষণ করবেন এবং প্রয়োজনীয় নির্দেশনা প্রদান করবেন।
ওয়ার্ডপ্রেস ওস্তাদ [পর্ব-০১] এর জন্য করণীয়
১. আজকে যে কোড সমূহ নিয়ে আলোচনা করা হলো এই কোড গুলো দিয়ে index.php,style.css এবং functions.php ফাইল তৈরি করে একসাথে wpostad_task01_YourName.zip  রুপে যুক্তকরে  নিজনিজ dropbox বা mediafire এ যুক্ত করে  comment করুন।
আজ এ পর্যন্তই। সবার জন্য শুভকামনা রইলো।

টিউনারঃ
Next
« Prev Post
Previous
Next Post »
টেকভয়েস সম্পর্কে

টেকভয়েস নীতিমালা

টেকভয়েস ল্যাব

টেকভয়েস সাহায্য

টেকভয়েস © সর্বস্বত্ব সংরক্ষিত
Designed by MS Design

Powered by Blogger