() translation by (you can also view the original English article)
থিম থাকার ফিচার ওয়ার্ডপ্রেস জনপ্রিয় হওয়ার অন্যতম কারণ। এই টিউটোরিয়ালে আমরা দেখবো কিভাবে আমাদের নিজেদের থিম বানানো যায়!
২য় পর্ব
২য় পর্বে স্বাগতম। আগের পর্বে আমরা ভালো থিম কেমন হয় এটা নিয়ে আলোচনা করেছি। এখন দেখবো সেটা কিভাবে বানাতে হয়।
- প্রথম ওয়ার্ডপ্রেস থিম বানানোঃ ৩ দিনের ১ম দিন
- প্রথম ওয়ার্ডপ্রেস থিম বানানোঃ ৩ দিনের ২য় দিন
- প্রথম ওয়ার্ডপ্রেস থিম বানানোঃ ৩ দিনের ৩য় দিন
আমাদের থিম
চলুন শুরু করি। নিজের লেআউট ব্যবহার করে এই টিউটোরিয়াল ফলো করতে পারেন।
আমরা এই লে আউট ব্যবহার করব। এটা একটা ব্লগের লেআউট। এটা ডাউনলোড করে নিয়ে আপনি আমাদের টিউটোরিয়াল ফলো করতে পারেন। জিপ ফাইলটি ডাউনলোড করে আনজিপ করে নিন।
থিমটি ব্রাউজারে ওপেন করে দেখুন দেখতে কেমনঃ
পার্ট গুলো আলাদা করে নেয়া
আমরা এই ফ্রন্টেন্ড কোড থিমের বিভিন্ন ফাইলের জন্য আলাদা করে নিবো। ওয়ার্ডপ্রেসের ডিফল্ট ফাইল স্ট্রাকচার ফলো করে থিম বানানো ভালো। ওয়ার্ডপ্রেসের ফাইল ইনক্লুড করার জন্য such as get_header() ফাংশন রয়েছে।
আসুন প্রস্তুতি নেই। থিমের নামে একটি ফোল্ডার তৈরি করুন ফোল্ডারে নিচে দেয়া নামের ফাইল তৈরি করে নিন।
- index.php
- single.php
- page.php
- comments.php
- functions.php
- header.php
- footer.php
- sidebar.php
এখন আমরা কাজ শুরু করব। style.css ফাইলে এই কোড বসান।
ওয়ার্ডপ্রেস অটোমেটিকেলি এই ফাইল থেকে থিম ইনফরমেশন নিয়ে নিবে। এই কোড style.css এ পেস্ট করুনঃ
1 |
/*
|
2 |
Theme Name: Blind Faith
|
3 |
Theme URI: https://www.danwalker.com/
|
4 |
Description: A minimalistic, simple theme for WordPress -- supports widgets in the sidebar, all manors of post/page formatting and comes with an easy to customize stylesheet.
|
5 |
|
6 |
Author: Dan Walker
|
7 |
Version: 1.0
|
8 |
Tags: minimalistic, simple, widgets, sidebar, elegant
|
9 |
*/
|
এখন ওয়ার্ডপ্রেস চেক করলে ড্যাশবোর্ডে থিমের নাম দেখতে পাবেন। থিম অ্যাক্টিভেট করুন, এরপর আমরা কাজ শুরু করব। কিছু দেখছেন না? গুড। কারন এই মুহূর্তে আমাদের index.php ফাইল একেবারে খালি।
প্রথমে আমরা HTML কোড ভাগ ভাগ করে নিবো। টিউটোরিয়ালের সাথে দেয়া index.html ফাইল ওপেন করলে এই কোড দেখতে পাবেন।
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
2 |
<html lang='en'> |
3 |
<head>
|
4 |
<title>Blind Faith</title> |
5 |
<link rel="stylesheet" href="reset.css" type="text/css"> |
6 |
<link rel="stylesheet" href="style.css" type="text/css"> |
7 |
<!--[if IE]>
|
8 |
<link rel="stylesheet" href="ie.css" type="text/css" />
|
9 |
<![endif]-->
|
10 |
</head>
|
11 |
<body class="home blog"> |
12 |
<div id="top-bar-tile"> |
13 |
<div id="top-bar-content"> |
14 |
<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> |
15 |
<span class="slogan">Just Another Theme by Dan Walker</span> |
16 |
<div id="search-box"> |
17 |
<form method="get" id="searchform" action="" > |
18 |
<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> |
19 |
</form>
|
20 |
</div><!-- search-box --> |
21 |
</div><!-- top-bar-content --> |
22 |
</div><!-- top-bar-tile --> |
23 |
<div id="nav-bar-tile"> |
24 |
<div class="nav-bar-content"><ul><li class="current_page_item"><a href="http://www.danwalker.com/themes/blindfaith/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=2" title="About">About</a></li><li class="page_item page-item-4"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=4" title="Typography">Typography</a></li></ul></div> |
25 |
</div><!-- nav-bar-tile --> |
26 |
<div id="wrapper"> |
27 |
<div id="content"> |
28 |
|
29 |
<div class="post"> |
30 |
<h1><a href="http://www.danwalker.com/themes/blindfaith/?p=1">Hello world!</a></h1> |
31 |
<div class="post-details"> |
32 |
<div class="post-details-left"> |
33 |
Posted on <strong>February 6, 2011</strong> by <span class="author">Dan</span> under <span class="author"><a href="http://www.danwalker.com/themes/blindfaith/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span> |
34 |
</div>
|
35 |
<div class="post-details-right"> |
36 |
<span class="comment-count"><a href="http://www.danwalker.com/themes/blindfaith/?p=1#comments" title="Comment on Hello world!">1 Comment</a></span> |
37 |
</div>
|
38 |
</div>
|
39 |
|
40 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. In tortor orci, auctor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat eget luctus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Vestibulum non lectus ut quam tempus varius. Nunc a ligula non metus luctus molestie.</p> |
41 |
|
42 |
<p> <a href="#" class="more-link">Read More</a></p> |
43 |
|
44 |
<div class="dots"></div> |
45 |
</div><!-- post --> |
46 |
|
47 |
<div id="only-page">No newer/older posts</div> |
48 |
|
49 |
<div class="spacer"></div> |
50 |
<div class="dots"></div> |
51 |
|
52 |
<div id="footer"> |
53 |
Copyright © 2011 <a href="http://www.danwalker.com">Dan Walker</a><br /> |
54 |
Don't steal anything etc |
55 |
</div>
|
56 |
|
57 |
</div><!-- content --> |
58 |
<div id="sidebar"> |
59 |
<div class="sidebar-box"> |
60 |
<span class="sidebar-title">a bit about me</span> |
61 |
<div class="dots"></div> |
62 |
<div class="textwidget"> |
63 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo.</p> |
64 |
</div>
|
65 |
</div>
|
66 |
<div class="sidebar-box"> |
67 |
<span class="sidebar-title">recent posts</span><div class="dots"></div> |
68 |
<ul>
|
69 |
<li><a href="http://www.danwalker.com/themes/blindfaith/?p=1" title="Hello world!">Hello world!</a></li> |
70 |
</ul>
|
71 |
</div>
|
72 |
</div><!-- sidebar --> |
73 |
<div class="spacer"></div> |
74 |
</div><!-- wrapper --> |
75 |
</body>
|
76 |
</html>
|
ব্রাউজারে লোড করলে HTMLলেআউট এমন দেখাবে। ভাবুন কেমন হেডার ইনক্লুড করবেন। যেহেতু ন্যাভিগেশন, সার্চ বক্স ও টাইটেল সব পেজে থাকবে, তাই এটা হেডার ফাইলে রাখবো।
মেইন কন্টেন্ট index.php, page.php ইত্যাদি পেজে থাকবে। কন্টেন্ট বক্সের বাইরের সব কন্টেন্ট সাইডবার ও ফুটারে থাকে। আমাদের থিম এভাবে বানানো হবে।
index.html এ doctype থেকে কন্টেন্ট ডিভ পর্যন্ত কোড কপি করে header.php তে পেস্ট করুনঃ
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
2 |
<html lang='en'> |
3 |
<head>
|
4 |
<title>Blind Faith</title> |
5 |
<link rel="stylesheet" href="reset.css" type="text/css"> |
6 |
<link rel="stylesheet" href="style.css" type="text/css"> |
7 |
<!--[if IE]>
|
8 |
<link rel="stylesheet" href="ie.css" type="text/css" />
|
9 |
<![endif]-->
|
10 |
</head>
|
11 |
<body class="home blog"> |
12 |
<div id="top-bar-tile"> |
13 |
<div id="top-bar-content"> |
14 |
<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> |
15 |
<span class="slogan">Just Another Theme by Dan Walker</span> |
16 |
<div id="search-box"> |
17 |
<form method="get" id="searchform" action="" > |
18 |
<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> |
19 |
</form>
|
20 |
</div><!-- search-box --> |
21 |
</div><!-- top-bar-content --> |
22 |
</div><!-- top-bar-tile --> |
23 |
<div id="nav-bar-tile"> |
24 |
<div class="nav-bar-content"><ul><li class="current_page_item"><a href="http://www.danwalker.com/themes/blindfaith/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=2" title="About">About</a></li><li class="page_item page-item-4"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=4" title="Typography">Typography</a></li></ul></div> |
25 |
</div><!-- nav-bar-tile --> |
26 |
<div id="wrapper"> |
27 |
<div id="content"> |
এখন আমরা কন্টেন্ট সেকশন স্কিপ করে যাবো। ওটাই সবচেয়ে কঠিন পার্ট। আসুন আগে ফুটার দেখি। ফুটার লেআউটের লাস্ট অংশ। তবে, সাইডবারের কোড ফুটারের পরে আসে। footer.php তে যেই কোড থাকবেঃ
1 |
<div class="spacer"></div> |
2 |
|
3 |
<div id="footer"> |
4 |
Copyright © 2011 Blind Faith by <a href="http://www.danwalker.com">Dan Walker</a><br /> |
5 |
</div>
|
6 |
|
7 |
</div><!-- content --> |
8 |
<?php get_sidebar(); ?>
|
আমরা get_sidebar() ওয়ার্ডপ্রেস ফাংশন ব্যবহার করছি। সাইডবারের কোড যেহেতু ফুটারের পরে আসে, তাই এই কোড ফুটারেই অ্যাড করা হয়।
ফাইনালি, সাইডবার অ্যাড করব। সবার শেষের কোড বিধায় র্যাপার, বডি ইত্যাদি ক্লোসিং ট্যাগ সাইডবারে থাকে।
1 |
<div id="sidebar"> |
2 |
<div class="sidebar-box"> |
3 |
<span class="sidebar-title">a bit about me</span> |
4 |
<div class="dots"></div> |
5 |
<div class="textwidget"> |
6 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo.</p> |
7 |
</div>
|
8 |
</div>
|
9 |
<div class="sidebar-box"> |
10 |
<span class="sidebar-title">recent posts</span><div class="dots"></div> |
11 |
<ul>
|
12 |
<li><a href="http://www.danwalker.com/themes/blindfaith/?p=1" title="Hello world!">Hello world!</a></li> |
13 |
</ul>
|
14 |
</div>
|
15 |
</div><!-- sidebar --> |
16 |
<div class="spacer"></div> |
17 |
</div><!-- wrapper --> |
18 |
</body>
|
19 |
</html>
|
index.php তে এই কোড বসানঃ
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php get_footer(); ?>
|
এমন দেখাবে
কন্টেন্ট লোড হচ্ছে, কিন্তু স্টাইলশিট লোড হচ্ছে না। কারন হেডার ফাইলে স্টাইলশিটের লোকেশন দেয়া হয়নি। এটা করার একটা সহজ ডায়নামিক উপায় আছে।
bloginfo() ফাংশন
bloginfo() ফাংশন ওয়ার্ডপ্রেসের বিল্টইন থাকে, এটা দিয়ে সব লোকাল ইনফর্মেশন যেমন ব্লগের নাম, ডেসক্রিপশন, স্টাইলশিট ডায়রেক্টরি ইত্যাদি ইমপোর্ট করা হয়। bloginfo() সম্পর্কে বিস্তারিত জানতে ওয়ার্ডপ্রেস কোডেক্সে দেখুন।
হেডার ফাইল ওপেন করে এই ইনফরমেশন বসান। header.php এর কোড এখন এমনঃ
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
2 |
<html lang='en'> |
3 |
<head>
|
4 |
<title>Blind Faith</title> |
5 |
<link rel="stylesheet" href="reset.css" type="text/css"> |
6 |
<link rel="stylesheet" href="style.css" type="text/css"> |
7 |
<!--[if IE]>
|
8 |
<link rel="stylesheet" href="ie.css" type="text/css" />
|
9 |
<![endif]-->
|
10 |
</head>
|
11 |
<body class="home blog"> |
12 |
<div id="top-bar-tile"> |
13 |
<div id="top-bar-content"> |
14 |
<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> |
15 |
<span class="slogan">Just Another Theme by Dan Walker</span> |
16 |
<div id="search-box"> |
17 |
<form method="get" id="searchform" action="" > |
18 |
<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> |
19 |
</form>
|
20 |
</div><!-- search-box --> |
21 |
</div><!-- top-bar-content --> |
22 |
</div><!-- top-bar-tile --> |
আসুন মিসিং স্টাইলশিট ফিক্স করি। bloginfo থেকে আমরা stylesheet_directory ও stylesheet_url এই দুটা ভ্যালু ব্যবহার করব। URL ভ্যালু ডায়রেক্ট স্টাইল শিটের ডায়রেক্টরি ইন্ডিকেট করে। এইসব ওয়ার্ডপ্রেস ফাংশন ট্রেইলিং স্ল্যাশ ভ্যালুতে অ্যাড করে না, এটা খেয়াল রাখতে হবে।
স্টাইল শিট লাইন এই কোড দিয়ে রিপ্লেস করুনঃ
1 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css"> |
2 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"> |
3 |
<!--[if IE]>
|
4 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" />
|
5 |
<![endif]-->
|
থিমে এখন স্টাইলশিপ প্রপার্টি ঠিক করা হয়ে গেছে। এখন হেডার ফাইলে ব্লগের নাম ও ট্যাগ লাইন চেঞ্জ করব।
wp_title() ফাংশন ব্যবহার করে। এই ফাংশন টাইলেটের ভ্যালু রিটার্ন করে। পেজের নামের আগের » বাদ দিতে wp_title() এর বদলে wp_title(“”, true); ব্যবহার করুন।
1 |
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> |
এটাতেঃ
1 |
Local Test Blog >> Hello World |
এখন আমরা bloginfo() প্রপার্টি দিয়ে লোগো, টাইটেল ইত্যাদি চেঞ্জ করতে পারবো।
1 |
<h1><a href="<!--?php bloginfo('url'); ?-->"><?php bloginfo('name'); ?></a></h1> |
2 |
<span class="slogan"><?php bloginfo('description'); ?></span> |
পেজটি এখন এমন দেখাবেঃ
আবার index.php ফাইলে যান। এটা ডিফল্ট পেজ, এখানেই পেজ পোষ্ট ইত্যাদি কন্টেন্টের লিস্ট থাকে। এই পেজে ওয়ার্ডপ্রেস লুপ ব্যবহার করে ডাটা আনা হয়।
লুপ
লুপ হচ্ছে ওয়ার্ডপ্রেসের পোষ্ট লিস্ট করে দেখানোর একটি উপায়। এটা ওয়ার্ডপ্রেসের একটা বিল্টইন ফাংশন।
আসুন আমরা আগে একটা পোষ্টের স্ট্রাকচার দেখে নেই।
1 |
<div class="post"> |
2 |
<h1><a href="http://www.danwalker.com/themes/blindfaith/?p=1">Hello world!</a></h1> |
3 |
<div class="post-details"> |
4 |
<div class="post-details-left"> |
5 |
Posted on <strong>February 6, 2011</strong> by <span class="author">Dan</span> under <span class="author"><a href="http://www.danwalker.com/themes/blindfaith/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span> |
6 |
</div>
|
7 |
<div class="post-details-right"> |
8 |
<span class="comment-count"><a href="http://www.danwalker.com/themes/blindfaith/?p=1#comments" title="Comment on Hello world!">1 Comment</a></span> |
9 |
</div>
|
10 |
</div>
|
11 |
|
12 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. In tortor orci, auctor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat eget luctus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Vestibulum non lectus ut quam tempus varius. Nunc a ligula non metus luctus molestie.</p> |
13 |
|
14 |
<p> <a href="#" class="more-link">Read More</a></p> |
15 |
|
16 |
<div class="dots"></div> |
17 |
</div><!-- post --> |
এটা দেখে নিয়ে এখন আমরা আমাদের লুপ সাজাতে পারব। পোষ্টের কিছু বিশেষ ইনফরমেশন ডিসপ্লে করতে হবে, যেমনঃ
- the_title
- the_tags
- the_ID
- the_category
- the_date
- the_content
- এছাড়াও আরও অনেক কিছু। (http://codex.wordpress.org/Template_Tags#Post_tags লিংকে দেখে নিন)
লুপে এমন একেক ফাংশন কল করে একেক ডাটা ডিসপ্লে করা হয়।
উপরে দেয়া লিংকে এমন সব ফাংশনের লিস্ট দেয়া আছে।
কোড এমন দেখাবেঃ
1 |
<div class="post"> |
2 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
3 |
<div class="post-details"> |
4 |
<div class="post-details-left"> |
5 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
6 |
</div>
|
7 |
<div class="post-details-right"> |
8 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
9 |
</div>
|
10 |
</div>
|
11 |
|
12 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
13 |
<?php the_excerpt(); ?>
|
14 |
<?php else : ?>
|
15 |
<?php the_content('Read More'); ?>
|
16 |
<?php endif; ?>
|
17 |
|
18 |
<div class="dots"></div> |
19 |
</div><!-- post --> |
যেই কোডে সমস্যা হওয়ার কথা, আসুনে সেটা দেখে নেই।
ক্যাটাগরি ডিসপ্লে করার সময় ওয়ার্ডপ্রেস বাই ডিফল্ট লিস্ট স্টাইলে পোষ্ট করে। এটা ওভাররাইড করতে, আমরা নিজেদের সেপারেটর ব্যবহার করব।
1 |
<?php the_category(', '); ? |
এরপর কমেন্ট এর লিংকস।
1 |
<?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?>
|
এরপর কন্টেন্ট শো করতে একটা সহজ if স্টেটমেন্ট। the_excerpt() দিয়ে পোষ্টের এক্সার্প্ট ও the_content() দিয়ে পোষ্টের পুরো কন্টেন্ট। যেটা <--more--> বাটনে ক্লিক করলে দেখা যাবে। আর্কাইভ পেজে ফুল কন্টেন্ট ব্যবহার করার দরকার নেই, তাই the_excerpt() ব্যবহার করা হয়।
এই কোড আমরা আমাদের লুপের ভিতরে ব্যবহার করব। আমাদের index.php ফাইল এখন দেখতে এমন হয়েছেঃ
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<div class="post"> |
4 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
5 |
<div class="post-details"> |
6 |
<div class="post-details-left"> |
7 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
8 |
</div>
|
9 |
<div class="post-details-right"> |
10 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
11 |
</div>
|
12 |
</div>
|
13 |
</div>
|
14 |
|
15 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
16 |
<?php the_excerpt(); ?>
|
17 |
<?php else : ?>
|
18 |
<?php the_content('Read More'); ?>
|
19 |
<?php endif; ?>
|
20 |
|
21 |
<div class="dots"></div> |
22 |
</div><!-- post --> |
23 |
|
24 |
<?php get_footer(); ?>
|
এই কোড হেডার ফাংশনে রাখুনঃ
1 |
<?php if ( ! have_posts() ) : ?>
|
2 |
<h1>Not Found</h1> |
3 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
4 |
<?php endif; ?>
|
5 |
|
6 |
<?php while ( have_posts() ) : the_post(); ?>
|
আর এটা ফুটার ফাংশনের ঠিক আগেঃ
1 |
<?php endwhile; ?>
|
এখন ওয়ার্ডপ্রেস ব্লগটি লোড করলে এমন দেখাবেঃ
এখন আমাদের থিম পোষ্ট ডিসপ্লে করার জন্য রেডি। কিন্তু যদি অনেক পোষ্ট থাকে? এরপর পেজিনেশন দরকার।
যেমন ৭ টা পোষ্ট থাকলে, প্রথম পেজে ৫ টা পোষ্ট দেখা গেলে, যেন বাকি দুটা পরের পেজে দেখা যায়।
1 |
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
|
2 |
<div id="older-posts"><?php next_posts_link('Older Posts'); ?></div> |
3 |
<div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div> |
4 |
<?php else: ?>
|
5 |
<div id="only-page">No newer/older posts</div> |
6 |
<?php endif; ?>
|
এর জন্য আমরা ব্যবহার করব next_posts_link() এবং previous_posts_link() ফাংশন। শুধু এই দুটা ফাংশন ব্যবহার করেও সব পোষ্ট ডিসপ্লে করা যায়, লুপের পরিবর্তে।
1 |
<div id="older-posts"><?php next_posts_link('Older Posts'); ?></div> |
2 |
<div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div> |
কিন্তু লুপ ব্যবহার করাই প্রচলিত নিয়ম।
আর লুপের মাধ্যমে এক পেজে এখাধিক পোষ্ট শো করা যায়। এখন আমাদের index.php এর কোড যেমন দেখাবেঃ
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php /* If there are no posts to display, such as an empty archive page */ ?>
|
4 |
<?php if ( ! have_posts() ) : ?>
|
5 |
<h1>Not Found</h1> |
6 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
7 |
<?php endif; ?>
|
8 |
|
9 |
<?php while ( have_posts() ) : the_post(); ?>
|
10 |
|
11 |
<div class="post"> |
12 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
13 |
<div class="post-details"> |
14 |
<div class="post-details-left"> |
15 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
16 |
</div>
|
17 |
<div class="post-details-right"> |
18 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
19 |
</div>
|
20 |
</div>
|
21 |
|
22 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
23 |
<?php the_excerpt(); ?>
|
24 |
<?php else : ?>
|
25 |
<?php the_content('Read More'); ?>
|
26 |
<?php endif; ?>
|
27 |
|
28 |
<div class="dots"></div> |
29 |
</div><!-- post --> |
30 |
|
31 |
<?php endwhile; ?>
|
32 |
|
33 |
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
|
34 |
<div id="older-posts"><?php next_posts_link('Older Posts'); ?></div> |
35 |
<div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div> |
36 |
<?php else: ?>
|
37 |
<div id="only-page">No newer/older posts</div> |
38 |
<?php endif; ?>
|
39 |
|
40 |
<div class="spacer"></div> |
41 |
<?php get_footer(); ?>
|
সিঙ্গেল পোষ্ট
সিঙ্গেল পোষ্টের কোড নিয়ে কিছু কাজ করতে হবে। single.php file ও index.php এর কোড প্রায় কাছাকাছি। কিন্তু single.php file ফাইলে আমাদের পেজিনেশন লিংক দরকার নেই। single.php ফাইলের কোডঃ
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php /* If there are no posts to display, such as an empty archive page */ ?>
|
4 |
<?php if ( ! have_posts() ) : ?>
|
5 |
<h1>Not Found</h1> |
6 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
7 |
<?php endif; ?>
|
8 |
|
9 |
<?php while ( have_posts() ) : the_post(); ?>
|
10 |
|
11 |
<div class="post"> |
12 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
13 |
<div class="post-details"> |
14 |
<div class="post-details-left"> |
15 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
16 |
</div>
|
17 |
<div class="post-details-right"> |
18 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
19 |
</div>
|
20 |
</div>
|
21 |
|
22 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
23 |
<?php the_excerpt(); ?>
|
24 |
<?php else : ?>
|
25 |
<?php the_content('Read More'); ?>
|
26 |
<?php endif; ?>
|
27 |
|
28 |
<div class="dots"></div> |
29 |
</div><!-- post --> |
30 |
|
31 |
<div class="spacer"></div> |
32 |
|
33 |
<?php comments_template( '', true ); ?>
|
34 |
|
35 |
<?php endwhile; ?>
|
36 |
|
37 |
<div class="spacer"></div> |
38 |
<?php get_footer(); ?>
|
শেষের লাইন ছাড়া index.php এর সাথে তেমন কোন পার্থক্য নেই. আমরা পেজিনেশনের দুটা ফাংশন বাদ দিয়ে, comments_template() অ্যাড করেছি। এর ফলে পোষ্টের নিচে কমেন্ট লোড হবে, যদি থাকে।
আর নতুন কমেন্ট করার ফর্ম, যদি কমেন্ট এনেবল থাকে।
পেজ
পেজ লোড করার ফাইলের কোডও সিঙ্গেল পোষ্ট ফাইলের মতই। শুধু পোষ্ট অথর, টাইম ইত্যাদি বাদ দিতে হবে। যেটার কোড দেখতে এমনঃ
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php /* If there are no posts to display, such as an empty archive page */ ?>
|
4 |
<?php if ( ! have_posts() ) : ?>
|
5 |
<h1>Not Found</h1> |
6 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
7 |
<?php endif; ?>
|
8 |
|
9 |
<?php while ( have_posts() ) : the_post(); ?>
|
10 |
|
11 |
<div class="post"> |
12 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
13 |
|
14 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
15 |
<?php the_excerpt(); ?>
|
16 |
<?php else : ?>
|
17 |
<?php the_content('Read More'); ?>
|
18 |
<?php endif; ?>
|
19 |
|
20 |
<div class="dots"></div> |
21 |
</div><!-- post --> |
22 |
|
23 |
<div class="spacer"></div> |
24 |
|
25 |
<?php comments_template( '', true ); ?>
|
26 |
|
27 |
<?php endwhile; ?>
|
28 |
|
29 |
<div class="spacer"></div> |
30 |
<?php get_footer(); ?>
|
ন্যাভিগেশন
ফাইনালি আমরা একটা ন্যাভিগেশন মেন্যু অ্যাড করব। header.php ওপেন করে nav-bar-tile এই কোড দিয়ে রিপ্লেস করুনঃ
1 |
<div id="nav-bar-tile"> |
2 |
<?php wp_nav_menu(array( 'menu' => 'mainnav', 'menu_class' => 'nav-bar-content', 'menu_id' => 'navigation', 'container' => false, 'theme_location' => 'primary-menu', 'show_home' => '1')); ?>
|
3 |
</div><!-- nav-bar-tile --> |
এখানে wp_nav_menu ফাংশন ব্যবহার করা হয়েছে। এখানে একটি আর্গুমেন্ট ব্যবহার করে একটি এরে ডিসপ্লে করা হয়েছেঃ
- menu - আপনার সাইটের মেন্যু
- wp_nav_menu সিএসএস ক্লাস
- menu_id - The UL element ID
- container - Whether or not to wrap the list
- theme_location - যেই লোকেশনে মেন্যু শো হবে
- show_home - মেন্যুতে হোম লিংক শো হবে কিনা
ওয়ার্ডপ্রেস কিভাবে কন্টেন্ট জেনারেট করে, সেটা যাচাই করে দেখে সেইভাবেই এই সিএসএস ক্লাস গুলো বসানো হয়েছে।
এখন আমাদের ওয়ার্ডপ্রেস ব্লগ এমন দেখতে হবেঃ
পরবর্তী...
এর পরের আর্টিকেলে আমরা দেখবো কিভাবে সাইডবার বসাতে হবে। কিভাবে ডায়নামিক পোষ্ট টাইপ, কাস্টম ফিল্ড ও উইজেট নিয়ে কাজ করতে হবে!
আমরা কোন প্রশ্ন থাকলে সেটা আমাদের কমেন্টে জানাতে পারেন। আমরা বিস্তারিত জানার আগ্রহ থাকলে সেগুলো শেখার জন্য WordPress Codex এর কোণ বিকল্প নেই।
