WordPress के लिए एक फीचर्ड पोस्ट सेक्शन बनाएं

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

WordPress कमाल है। इससे भी अधिक कमाल यह तथ्य है कि इसे आप किसी भी प्रकार की साइट को पावर देने के लिए कस्टमाइज किया जा सकता है! यहां, हम सीखेंगे कि कैसे एक फीचर्ड और "latest posts" सेक्शन तैयार किया जाए - सभी अच्छी न्यूज़/मैगज़ीन थीम के लिए होना ही चाहिए। हम 'Custom Fields' का उपयोग अपनी पूरी क्षमता के लिए भी करेंगे।

परिचय

यह ट्यूटोरियल WordPress के लिए एक मैगज़ीन/न्यूज़ थीम के इंडेक्स पेज बनाने की प्रक्रिया को शामिल करता है। इस पेज की मुख्य विशेषताएं निम्न होगी:

Featured Posts.
Latest Posts.
PHP/WordPress से परिचित नहीं अपनी थीम के यूज़र्स के लिए उपरोक्त आसान कस्टमइजशन के लिए PHP वेरिएबल्स का उपयोग करना।
किसी पोस्ट की 'Custom Fields' सेक्शन से पोस्ट इमेज को प्राप्त करना।

Step 1 - Preparation

अपने WordPress इंस्टालेशन डायरेक्टरी से, 'wp-content/themes' के माध्यम से ब्राउज़ करें और एक नया फ़ोल्डर बनाएं। इसे आप जो आप चाहते हैं (मैं 'WordPress Times' का उपयोग कर रहा हूं) नाम दें। इसके बाद, 5 नई फ़ाइलें बनाएं:

index.php
header.php
footer.php
style.css

यह मूल लेआउट है जिसके लिए हम जा रहे हैं:

इसलिए एक 940px डॉक्यूमेंट, दो सेक्शंस के साथ:
300px पर 600px और साइडबार पर कंटेंट - दोनों के बीच 40px मार्जिन छोड़कर।

Step 2 - Header

अपना header.php फ़ाइल खोलें, और निम्न सम्मिलित करें:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
  <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<meta name="description" content="<?php bloginfo('description'); ?>" />
	<meta name="keywords" content="<?php bloginfo('name'); ?>" />
	<meta name="author" content="<?php bloginfo('name'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<title><?php bloginfo('name'); ?> <?php wp_title('-'); ?></title>
    <?php wp_head(); ?>
</head>
<body>
<div class="container">
    	<h1 id="header"><?php bloginfo('name'); ?></h1>

इस के माध्यम से चलते हुए, हम पहली बार DOCType को XHTML 1.0 Transitional के रूप में परिभाषित करते हैं। हेड सेक्शन में हम फिर सभी मेटा टैग, स्टाइलशीट और पेज टाइटल्स को वर्डप्रेस से प्राप्त करें; और हम अपनी 3 जावास्क्रिप्ट फ़ाइलों को शामिल करते हैं।
अंत में, हम एक 'कंटेनर' division खोलते हैं, और एक हैडर टाइटल के रूप में हमारे ब्लॉग का नाम डालते हैं।

Step 3 - 'Breaking News' Posts

हम हमारे पेज के शीर्ष पर एक 'Breaking News' केटेगरी से पोस्ट्स की यूजर-डिफ़ाइंड संख्या शामिल करेंगे। Index.php खोलें और निम्नलिखित टाइप करें, चिंता न करें, मैं इसे नीचे समझाऊंगा:

<?php get_header(); ?>
<div id="content">

<?php global $more;
$more = 0; ?>

<?php

/* ID of your 'Breaking News' Category */
$breaking_cat = "83"; 

/* How many posts from above category to display? Default = 3 */
$breaking_num = "3"; 

/* Number of recent posts to display under the Breaking News */
$latest_num = "4";
 
/* IDs of any cats you dont want to include in Recent posts.
Start each ID with a 'minus' symbol Seperate by a comma.
EG: $latest_ignore = "7,-6,-8,-1";
Posts from the 'Breaking' category are automatically excluded. */
$latest_ignore = "-1"; 
?>

	<!-- Show x Posts from Breaking News -->
	<?php query_posts('showposts='.$breaking_num.'&cat='.$breaking_cat.''); 
	  while (have_posts()) : the_post();
	?>

    <div class="breaking">

    	<img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg" />
    	<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    	<p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>
    	<?php the_content('Continue...'); ?>
    	<div class="postmeta">
            <p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">
	    <span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>
        </div><!--/postmeta-->
        
    </div><!--/breaking-->

    <?php endwhile; ?>

3.1 - Opening

<?php get_header(); ?>
<div id="content">

पहली लाइन अपने header.php फ़ाइल को पहले इन्क्लूड करने के लिए एक सरल WordPress PHP फ़ंक्शन है। नीचे, हम अपने 'Content' div को सभी पोस्ट्स को एक साथ लपेटने के लिए खोलते हैं। मैंने प्रत्येक div टैग के समापन पर एक HTML कमेंट शामिल किया है। जिसमें यह कौन सा div बंद हो रहा है यह बताता है। मैं हाइली रेकमेंड करता हूं कि यदि आप पहले से ही नहीं करते हैं, तो आप अपनी प्रोजेक्ट्स में ऐसा करना शुरू कर दें, क्योंकि यह आपके कोड को यथासंभव व्यवस्थित रखने में मदद करता है।

3.2 - The $more tag

<?php global $more;
$more = 0; ?>

इस कोड में हमें केवल हर पोस्ट का हिस्सा इन्क्लूड करने की इजाजत देता है, जहां ऑथर ने <--more--> टैग को शामिल किया है - यह होमपेज पर प्रदर्शित होने से लॉन्ग पोस्ट में सभी टेक्स्ट को रोक देता है।

3.3 - Category IDs

$breaking_cat = "83"; 
$breaking_num = "3"; 

$latest_num = "4"; 
$latest_ignore = "-1";

थीम को कस्टमाइज करने में आसान बनाने के लिए, हम यहां किसी भी ऑप्शन को शामिल करते हैं। प्रत्येक लाइन को आगे कमेंट किया जाता है। हम ऐसा करते हैं इसलिए यदि कोई अन्य आपकी थीम का उपयोग करता है - अपने सभी कोड के माध्यम से क्रॉल (crawl) करके यह पता लगाने के लिए की वह अपनी केटेगरी IDs कहां रखता है की बजाय - वे फ़ाइल के शीर्ष पर सभी आसानी से एक्सेसिबल हैं। इस ट्यूटोरियल के दौरान, हम WordPress लूप में इन वेरिएबल्स का उपयोग करेंगे।

3.4 - क्या हमारे पास Posts है?

<?php query_posts('showposts='.$breaking_num.'&cat='.$breaking_cat.''); 
  while (have_posts()) : the_post();
?>

यह WordPress लूप का एक वेरिएशन है जो डेटाबेस से हमारी पोस्ट को आउटपुट करता है। जैसा कि आप देख सकते हैं, हम उपरोक्त सेक्शन से पहले दो वेरिएबल्स का उपयोग कर रहे हैं। वेरिएबल्स उनके साथ जुड़े स्ट्रिंग के साथ खुद को सब्सटीट्यूटे कर लेते हैं। उदाहरण के लिए, डिफ़ॉल्ट कोड का इस्तेमाल करते हुए, यह लाइन ऑटोमेटिकली बन जाएगी:

query_posts('showposts=3&cat=83')

दूसरी लाइन तब कहती हैं, अगर हमारे पास पोस्ट हैं तो उन्हें नीचे दी गई फॉर्मेट आउटलाइन्ड में पेज पर डालें।

3.5 - Post Content

<img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg" />

<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>

<?php the_content('Continue...'); ?>

यह उतना डरावना नहीं है जितना लग रहा है, मुझ पर भरोसा करें।

Image - हमारे होमपेज प्रीव्यू पर, आप देखेंगे कि प्रत्येक पोस्ट की अपनी इमेज है। एक पोस्ट लिखते समय WordPress ''Custom Fields'' सेक्शन का उपयोग करके इसमें शामिल किया गया है। बस thumbnail के लिए 'key' सेट करें तब इमेज का लिंक डालें:

कोड वास्तव में कहते हैं की "'thumbnail' नाम के पोस्ट के कस्टम फ़ील्ड से डेटा लें और एक img टैग में चिपकाएं।"
Title - यह हमारे पोस्ट टाइटल को h2 टैग के बीच एक लिंक के रूप में सम्मिलित करता है। the_permalink() पोस्ट के लिंक को प्राप्त करता है, और the_title() टाइटल को प्राप्त करता है। बहुत आसान, है ना?
Date & Time - यहां, हमें वो टाइम प्राप्त करते है जब पोस्ट बनता है जो इस फॉर्मेट में होता है: l, F j, Y G:i - या अंग्रेजी में: Day, Date, Year Time (जैसे Saturday, August 2, 2008 14:27)।
Content - पोस्ट के कंटेंट को प्राप्त करता है (इस कोड के लिए धन्यवाद जो हमने पहले इन्क्लूड किया था) 'Continue...' पोस्ट के अंत में प्रदर्शित टेक्स्ट है। आप जैसे चाहते हैं कस्टमाइज करें।

3.6 - Post Meta

<div class="postmeta">

<p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">

<span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>

</div>

यह उस category(s) को प्राप्त करता है जो पोस्ट से है। यदि एक से अधिक है, तो उन्हें कॉमा से अलग किया जाएगा। कमेंट अनुभाग के लिए एक लिंक, और लेख में कमैंट्स की संख्या तब प्राप्त की जाती है।

</div> <!-- /breaking -->
<?php endwhile; ?>

यह केवल "div.breaking" बंद कर देता है जो हमारी पोस्ट में था; और फिर एक बार जब यह पूरा हो जाए तो लूप को बंद कर देता है।

Step 4 - Latest Posts

हमारे 'Breaking News' पोस्ट्स के नीचे, हम 'Breaking' केटेगरी से किसी भी पोस्ट की अनदेखी करते हुए और अनदेखा करने के लिए अन्य यूज़र-निर्दिष्ट केटेगरी को छोड़कर, नवीनतम पोस्ट्स के यूज़र्स-निर्दिष्ट संख्या शामिल करेंगे। हम अपने मौजूदा कोड के निचले हिस्से में निम्नलिखित को जोड़ देंगे:

<!-- Show x Latest Posts -->
<?php query_posts('showposts='.$latest_num.'&cat=-'.$breaking_cat.','.$latest_ignore.''); ?>
<?php while (have_posts()) : the_post(); ?>


<div class="recent">

    <img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg-s" />
    <h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>
    <div class="postmeta">
        <p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">
	<span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>
    </div>

</div>


<?php endwhile; ?>

4.1 - The Loop

showposts='.$latest_num.' - लूप को केवल '$latest_num' वेरिएबल में उल्लेखित किए गए रीसेंट पोस्ट की संख्या को प्रदर्शित करने के लिए कहता है।
cat=-'.$breaking_cat.','.$latest_ignore.' - यह लूप को अनदेखा करने के लिए निर्देश देता है ('minus' सिंबल को ध्यान दें कि यूज़र को वेरिएबल्स में उपयोग करने की ज़रूरत होती है) जो पोस्ट 'Breaking' केटेगरी में हैं, ताकि कोई भी पोस्ट डुप्लिकेट न करें; और उन केटेगरी में से किसी भी पोस्ट की उपेक्षा भी करें जो कि यूज़र '$latest_ignore' वेरिएबल में निर्दिष्ट करता है।

बाकी का यह स्वयं व्याख्यात्मक है और ब्रेकिंग न्यूज के फीचर के समान है। कुछ मतभेद प्रत्येक पोस्ट से 'content' सेक्शन की कमी है, और पोस्ट इमेज को इसके बजाय 'postimg-s' का क्लास दिया गया है। इससे हमें केवल एक थंबनेल इमेज की आवश्यकता होगी - जो कि हम अपने CSS में 200x200 से 50x50 तक का साइज लेंगे।

4.2 - Closing the page

करंट पेज को समाप्त करने के लिए, हमें div#content को बंद करना और हमारे footer को शामिल करना होगा:

</div><!--/content-->
<?php get_footer(); ?>

4.3 - Footer.php

इस फ़ाइल में, बस #container, body और html टैग बंद करें:

</div><!--/container-->
</body>
</html>

Step 5 - CSS Styling

अभी, अगर आपने कुछ पोस्ट बनाई हैं, तो आपका डिज़ाइन इस तरह दिखना चाहिए:

काफी बदसूरत, एह? खैर बहुत ज्यादा समय तक नहीं।

5.1 - Necessities

अपना style.css फ़ाइल खोलें और निम्न कोड में पेस्ट करें:

/*------------------------------------------------------------------------
Theme Name:    WordPress Times
Theme URI:     http://www.vivawp.com/
Description:   A tutorial for NETTUTS.com by Dan Harper
Version:       1.00
Author:        Dan Harper
Author URI:    http://danharper.me
------------------------------------------------------------------------*/

यह इस फाइल के शीर्ष पर जरूरी है, क्योंकि WordPress में थीम मैनेजर आपकी इनफार्मेशन के बारे में कुछ जानकारी देता है। जितने चाहें उतने सेक्शंस को भरें।

5.2 - Styling

नीचे डॉक्यूमेंट को स्टाइल करने के लिए उपयोग किए गए सभी CSS कोड हैं। यह नीचे डॉक्युमेंटेड है।

* {margin:0;padding:0;}

body {
background-color: #faf9f5;
color: #3d3d3d;
font-size:75%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#container {
width: 940px;
margin: 15px auto;
}

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", Times, serif;
}

/* BLUEPRINT CSS TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
/* /BLUEPRINT CSS TYPOGRAPHY */

h1#header {
margin-bottom: 20px;
}

#content {
width: 600px;
float: left;
}

.breaking, .recent {
padding: 10px;
border: 1px solid #3d3d3d;
margin-bottom: 15px;
}

.postimg {
float: right;
width: 200px;
height: 200px;
padding-bottom: 10px;
}

.postimg-s {
float: right;
width: 50px;
height: 50px;
padding-bottom: 10px;
}

.breaking h2 {
font-size: 2.5em;
line-height: 1em;
margin-bottom: 0px;
}

    .breaking h2 a, .recent h3 a {
    text-decoration: none;
    color: #3d3d3d;
    }
    
    .breaking h2 a:hover, .recent h3 a:hover {
    text-decoration: underline;
    }

p.datetime {
font-style: italic;
font-size: 0.9em;
}

/* POST META */
.postmeta {
margin: -10px;
padding: 4px;
background-color: #dedbd1;
clear: both;
}

    .postmeta p {
    margin: 0;
    padding-left: 6px;
    text-transform: uppercase;
    font-weight: bold;
    }
    
    .postmeta span.comm {
    font-weight: normal;
    }
    
    .postmeta a:link, .postmeta a:visited {
    color: #3d3d3d;
    text-decoration: none;
    }
    
    .postmeta a:hover, .postmeta a:active {
    text-decoration: underline;
    }

#sidebar {
width: 300px;
margin-left: 620px;
}

5.3 - Examining the CSS

* - सभी एलिमेंट्स से अन-वांछित मार्जिन और पैडिंग को हटाता है जो स्वयं को इन्सर्ट करते हैं।
body - रंग और फोंट का मूल पेज स्टाइल।
#container - पेज की चौड़ाई 940 px तक सेट करता है। 15px मार्जिन टॉप & बॉटम पर, और विंडो में इसे सेण्टर करता है।
h1, h2, h3, h4, h5, h6 - Heading fonts to Georgia, Times New Roman, Times या कोई भी serif font।
ब्लूप्रिंट कमेंट टैग के बीच - ब्लूप्रिंट CSS फ्रेमवर्क से बेसिक टाइपोग्राफी स्टाइलिंग। अच्छा दिखने के लिए टेक्स्ट पाने के साथ बहुत परेशानी बचाता है।

h1#header - ब्लॉग नाम से थोड़ा अलग जोड़ता है, और बाकी डॉक्यूमेंट।
#content- हमारे सारे कंटेंट को बाईं ओर 600px में लपेटा हुआ है। शेष स्थान को एक साइडबार के रूप में इस्तेमाल किया जा सकता है।
.breaking, .recent - 10px पैडिंग के साथ बॉक्स में ब्रेकिंग और रीसेंट पोस्ट शामिल करता हैं। हर एक के बीच 15px का अंतर है।
.postimg - ब्रेकिंग आर्टिकल्स के लिए पोस्ट की इमेज को फॉर्मेट करता है। इमेज साइज 200px तक सीमित है और दायीं ओर फ्लोटेड हैं।
.postimg-s - उपरोक्त के समान, लेकिन लेटेस्ट आर्टिकल्स के लिए और इमेज को 50px में रीसाइज कर दिया गया है।
.breaking h2 - ब्रेकिंग आर्टिकल का टाइटल छोटा, बिना किसी नीचे के मार्जिन के छोटा करें।
.breaking h2 a, .recent h3 a - आर्टिकल्स के टाइटल्स के लिए बुनियादी स्टाइल, डिफ़ॉल्ट लिंक स्टाइल को छिपाते हुए।
.breaking h2 a:hover, .recent h3 a:hover - यूजर को दिखाने के लिए की यह वास्तविक लिंक है जब होवर होता है तो टाइटल लिंक पर एक अंडरलाइन जोड़ता है।
P.datetime - आर्टिकल्स के लिए Date & Time की स्ट्रिंग थोड़ी छोटी और इटैलिक में।

.postmeta - पोस्ट मेटा डिटेल्स (केटेगरी और कमैंट्स) को शामिल करने के लिए बॉक्स बनाता है। मार्जिन -10 px सुनिश्चित करता है कि यह पूरे पोस्ट्स बॉक्स को भरता है।
.postmeta p - पोस्टमेटा div में टेक्स्ट अपरकेस और बोल्ड बना दिया गया है।
.postmeta span.comm - "x Comments" टेक्स्ट के लिए बोल्ड स्टाइल को निकालता है।
.postmeta a - डिफ़ॉल्ट लिंक रंग को हटाने के लिए लिंक स्टाइल
.postmeta a:hover - होवर पर लिंक को अंडरलाइन करता है।

#sidebar - पेज के दाईं ओर एक साइडबार के लिए एक क्षेत्र बनाता है।

पेज अब इस तरह दिखाई देगा। बहुत साफ़!

निष्कर्ष

बधाई हो। आपने सफलतापूर्वक WordPress के लिए एक न्यूज़ थीम के फ्रंट पेज के लिए बेसिक्स तैयार कर लिया हैं, जो फ़ीचर्ड पोस्ट एरिया के साथ पूरा होता है - जब न्यूज़ थीम की बात आती है तो 'होना ही चाहिए'। आप PHP वेरिएबल्स का उपयोग करके अपने आसान कस्टमाइज ऑप्शंस के साथ कम्पटीशन से आगे भी रह सकते हैं।

vivaWP के शुभारंभ के लिए देखें - प्रीमियम WordPress थीम का एक नया परिवार अगस्त के मध्य आ रहा है। हमारी पहली थीम, CocoaNews, इस ट्यूटोरियल में दिखाए गए कुछ बेसिक कोड शेयर करती है।