কিভাবে ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট করতে হয়

  • WordPress
  • 1 year ago
  • 288 Views Views
  • Share This Post On:

    আশা করি সবাই ভালোই আছেন।

    আজকে আমরা জানবো কিভাবে নিজে নিজেই নিজের ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট করবেন।

    ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট করুন আপনি নিজেই  । প্রাথমিক থিমটি তৈরি করতে আমাদের যে কয়টি ফাইল নিয়ে কাজ করা লাগবে এবার তা দেখে নেই।

    • হেডার
    • ফুটার
    •  সাইডার 
    • ইনডেক্স
    •  স্টাইল

    এই পাচটি ফাইল নিয়ে কিভাবে একটি বেসিক থিম তৈরি করা যায় তা আমরা আজকে শিখব।

    প্রয়োজনীয় সফটওয়্যারঃ

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

    কিভাবে থিম ডেভেলপ করবঃ

    মূলত আমরা একটি ফোল্ডারের ভেতর header.php Footer.php Index.php Sidebar-right.phpStyle.css ফাইলগুলো ক্রিয়েট করব এবং তাতে কোডিং করার পর সবগুলো ফাইল সেভ করব এবং ফোল্ডারটিকে জিফ ফরমেট দিয়ে সেভ করব। ফলে তৈরি হয়ে যাবে আমাদের আজকের বেসিক ওয়ার্ডপ্রেস থিমটি।

    ফাইলগুলো ক্রিয়েট করার জন্য ড্রিমওয়েভার বা নোটপ্যাড ওপেন করে header.php,Footer.ph্‌ Index.php, Sidebar-right.php, Style.css লিখে লিখে একই ফোল্ডারের ভেতর সেভ করুন।

    ধাপ এক

    প্রথমেই একটি ফোল্ডর ক্রিয়েট করুন। একে রিনেম করে যে কোন নাম দিন। আমি নাম দিলাম- my first theme

    ধাপ দুই

     

    আপনার ক্রিয়েট করা My first theme নামক ফোল্ডারের ভেতর ফাইলগুলো ক্রিয়েট করুন।

    header.php

    Footer.php

    Index.php

    Sidebar-right.php

    Style.css

    ফাইলগুলো এখন সম্পূর্ণ খালি । অথ্যাৎ এখনো এগুলোতে কোন প্রকার কোডিং করা হয়নি । এবার আমরা কোডিং করব।

    ধাপ তিন – কোডিং

     চলুন কোডিং এ প্রবেশ করি

     

    header.php

     

    প্রথমেই আসুন আমরা header.php তে কোডিং করি। কোডিং করার জন্য নিচের কোড গুলো লিখে ফাইলটি সেভ করুন।

    কোডগুলো বুঝে নিনঃ

    <head> দিয়ে হেড অংশের সূচনা করা হয়েছে এবং </head> দিয়ে শেষ করা হয়েছে। মাঝখানে
    <title>Welcome to bdtechpress</title>
    দিয়ে সাইটের টাইটেল দেয়া হয়েছে। আপনি যে কোন টাইট্যাল ব্যবহার করতে পারেন।  এবং

    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”> দিয়ে স্টাইলশীট কল করা হয়েছে। এটি স্টাইলশীট কল করার জন্য ওয়ার্ডপ্রেসের ডিফলট কোড।

    তারপর বডি অংশে রেপার এবং হেডার নামে দুটি ডিভ কল করা হয়েছে। সাইটের রেপার এবং হেডার স্টাইলিং করার জন্য তা অপরি হার্য।  হেডার ডিভ এর মাঝে

    <h1> Welcome to bdtechpress </h1> দিয়ে সাইটের হেডার অংশের টাইটেল বা হেডলাইন দেয়া হয়েছে। h1 হল বড় হেডলাইন । আপনি ২/৩/৪ ইচ্ছামত ব্যবহার করতে পারেন।এবং সবশেষে ডিভটি শেষ করা হয়েছে।

     Footer.php

    ফুটার অংশে নিচের কোড গুলো লিখে সেভ করুন।

     কোড বুঝে নিন 

    এখানে এইচটিএমএল ব্যবহার করে ফুটার অংশের লেখাটি নির্ধারণ করা হয়েছে। আপনি Designed By Marksitbd লেখাটি যে কোন নাম দিয়ে পরিবর্তন করে নিতে পারেন।  এখানে ডিভ আইডি ফুটার নামে যে ডিভ দেয়া হয়েছে তা Style.css ফাইলে স্টাইলিং করতে প্রয়োজন হবে। মূলত ডিভ ঘোষণা করে তা স্টাইলিং করা সুবিধাজনক।

    Sidebar-right.php

    সাইডবার রাইটে নিচের কোডগুলো লিখে সেভ করুন।

    কোড গুলো বুঝে নিনঃ

    <div id=”sidebar-right”> দিয়ে রাইট সাইডবার ঘোষণা করা হয়েছে।

    ক্যাটাগরী শো করানোর জন্য কোডগুলো ব্যবহার করা হয়েছে।

    এবং উপরিউক্ত কোডগুলো মাসিক ভিত্তিতে আর্কাইভ শো করানোর জন্য ব্যবহার করা হয়েছে।

    Index.php

    ইনডেক্স পিএইচপিতে নিচের কোডগুলো লিখে সেভ করুন

    কোড বুঝে নিন

    আমরা যখন আমাদের হোম পেজে থাকব তখন যাতে হেডার দেখা যায় সেজন্য <?php get_header(); ?> কোড দিয়ে হেডার কল করা হয়েছে। <div id=”main”> দিয়ে একটি ডিভ ঘোষণা করা হয়েছে। রাইট সাইডবার দেখা যাবার জন্য <?php get_sidebar(‘right’); ?> ব্যবহার করা হয়েছে। কনটেন্ট পাওয়ার জন্য ওয়ার্ডপ্রেসের ডিফল্ট কোড হলো এগুলো-  <div id=”content”>

    কোন ক্যাটাগরীতে পোস্ট করা হয়েছে এবং কত তারিখে পোস্ট করা হয়েছে তা দেখানোর জন্য এ কোড গুলো-

    পোস্টে রিডমোর অপশন যোগ করার জন্য এই কোড- <p><?php the_content(__(‘(more…)’)); ?></p>

    যদি কোন পোস্ট না পাওয়া যায় তখন কি হবে তা নির্ধারণ করতে নিচের কোড –

    এবং ফুটার পাওয়ার জন্য <?php get_footer(); ?> ব্যবহার করা হয়েছে। এই সমস্ত কোড আপনি বার  বার প্রাকটিস করুন এবং মনে রাখার চেস্টা করুন।

    ধন্যবাদ ।

    Related Posts

    Leave a Reply

    Your Name: (Required)

    E-Mail Address: (Required)
    Website: (Optional)
    Comment: (Required)

    My Account

    Remember Me