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

ওয়ার্ডপ্রেস ওস্তাদ

সবাইকে আন্তরিক শুভেচ্ছা এবং স্বাগতম জানাচ্ছি “ওয়ার্ডপ্রেস ওস্তাদ” এডভান্স ওয়ার্ডপ্রেস ডেভলপমেন্টের উপর একটা পূর্ণাঙ্গ ফ্রি চেইন কোর্স এর ১ম পর্বে। টেকটিউনস বিশ্বের সবচেয়ে বড় বাংলা সোশ্যাল নেটওয়ার্ক । এরকম একটা বড় প্লাটফর্মে “ওয়ার্ডপ্রেস ওস্তাদ” কোর্সটি টেকটিউনস কতৃপক্ষের প্রত্যক্ষ সহযোগিতায় শুরু করতে পেরে ভালো লাগছে।

“ওয়ার্ডপ্রেস ওস্তাদ ” কোর্সের ঘোষণা  টেকটিউন্সে প্রকাশ করার পর আপনাদের মধ্যে যে আগ্রহ দেখেছি, তা এই কোর্সটিকে সুন্দর করে পরিচালনা করতে সাহায্য করবে। সকলের সক্রিয় অংশগ্রহণ কামনা করছি।

আজ  প্রথম পর্বে একটা 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">হবে

<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 করুন।

আজ এ পর্যন্তই। সবার জন্য শুভকামনা রইলো।

Level 2

আমি অসীম কুমার পাল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 15 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 147 টি টিউন ও 469 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 17 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি অসীম কুমার পাল। ইলেকট্রনিক্স এবং ওয়েব ডিজাইনকে অন্তরে ধারণ করে পথ চলতেছি। স্বপ্ন দেখি এই পৃথিবীর বুকে একটা সুখের স্বর্গ রচনা করার। নিজেকে একজন অতি সাধারণ কিন্তু সুখী মানুষ ভাবতে পছন্দ করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 0

জানতাম একদিন না একদিন টেকটিউন এমন একটা কিছু উপহার দেবেই। ধন্যবাদ অসিম ভাই চালিয়ে যান।

    @s2: ধন্যবাদ ভাই শুভকামনা রইলো। আজকের টাস্কটা সম্পন্ন করে সক্রিয়ভাবে কোর্সে অংশ গ্রহণ করুন।

Level 0

ধন্যবাদ অসিম ভাই চালিয়ে যান।

    @rana786: আজকের টাস্কটা সম্পন্ন করে সক্রিয়ভাবে কোর্সে অংশ গ্রহণ করুন।ধন্যবাদ ভাই ,শুভকামনা রইলো।

ধন্যবাদ। অপেক্ষাই থাকলাম পরবর্তী পর্বের জন্য

    @micromission: ধন্যবাদ ভাই শুভকামনা রইলো।টাস্কটা সম্পন্ন করে কোর্সে সক্রিয় থাকার জন্য অনুরোধ রইলো।

অসীম ভাইকে অসংখ্য ধন্যবাদ। সক্রিয়ভাবে যে অংশ গ্রহন করতেই হবে। পরবর্তী টিউনের অপেক্ষায় রইলাম। আবারো অনেক অনেক ধন্যবাদ।

Level 0

ধন্যবাদ! অসিম ভাই।

প্রিয় টিউনার,

আপনার টিউন যেহেতু প্রোগ্রামিং সংক্রান্ত টিউন ও টিউনে কোডের ব্যবহার রয়েছে তাই বিভিন্ন প্রোগ্রামিং ল্যাঙ্গুয়েজের কোড যেমন HTML, CSS, JS, PHP ইত্যাদি কোড সুন্দর ও সঠিক ভাবে দেখাতে টেকটিউনসের রয়েছে নিজেস্ব “কোড হাইলাইটার”। টেকটিউনস কোড হাইলাইটার ব্যবহার করার জন্য Code Escape করার প্রয়োজন নেই।

টেকটিউনসের “কোড হাইলাইটার” কিভাবে ব্যবহার করতে হয় তা জানতে https://www.techtunes.io/web-design/tune-id/77692 এই টিউনটি দেখুন।

নিয়মিত টিউন করুন ধন্যবাদ আপনাকে।

j jinishguli jante hobe bolesen tar konotai to jani na tai course’r aga matha kisui bujbo na bole mone hosse….r a jonnei shuru na kortei jhore porte hosse amake apnader team theke.

সত্যি অসাধারন

অসীম ভাই আপনাকে অসংখ্য ধন্যবাদ।

আপনাকে অনেক অনেক ধন্যবাদ এই রকম একটি টিউন উপহার দেয়ার জন্য।

ধন্যবাদ ভাই চালিয়ে যান।

many many thanks vaia!!!!!!

ভাই, আমি সাইটে jQuery ব্যবহার করতে চাই না।তাহলেও কী functions.php তৈরী করতে হবে?

nice helpful post dear
http://jobtech24.com/

অসংখ্য ধন্যবাদ

অনেক ধন্যবাদ ভাইয়া আপনাকে ৷

আমি WordPress এ ওয়েবসাইট বানাতে চাই অনলাইন থেকে টিউটোরিয়াল দেখে কি সম্ভব ?
দেবাশীষ বর্মণ