वर्डप्रेस में डायनामिक पेज टेम्पलेट, भाग 1

() translation by (you can also view the original English article)

वर्डप्रेस पेज टेम्प्लेट्स वेब पेज प्रदर्शित होने के तरीके को पूरी तरह से बदलने का एक शानदार तरीका है। आप अपनी साइट पर कार्यक्षमता की विशाल सीमा जोड़ने के लिए उनका उपयोग कर सकते हैं।

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

इस ट्यूटोरियल श्रृंखला में, मैं देख रहा हूं कि आप कैसे पेज टेम्पलेट्स को और अधिक लचीला बना सकते हैं, उनकी कार्यक्षमता में बहुत सुधार कर सकते हैंI मैं एक और अधिक लचीली एप्रोच पर जाने से पहले, एक जनरल पर्पस डायनामिक पेज टेम्पलेट बनाने से पहले मैं चाइल्ड थीम के माध्यम से एक स्टैण्डर्ड पेज टेम्पलेट कैसे बनाएं से शुरू करूँगा I

अंत में, मैं आपको पूरी तरह से काम कर रहे डायनामिक पेज टेम्पलेट्स के तीन रियल-वर्ल्ड उदाहरण दिखाता हूँ। मैं उन्नत विषयों को भी कवर करूँगा जैसे कि कस्टम पोस्ट प्रकारों के लिए पेज टेम्पलेट कैसे असाइन करें।

आगे बढ़ना चाहते हैं?

इस ट्यूटोरियल श्रृंखला के साथ अनुसरण करने के लिए, आपको एडमिन एक्सेस के साथ एक वर्डप्रेस साइट की आवश्यकता होगी। ऐसा करने का सबसे आसान तरीका लोकल डेवलपमेंट एनवायरनमेंट का उपयोग करना है। एक डेडिकेटेड टेक्स्ट एडिटर भी उपयोगी है लेकिन आवश्यक नहीं है।

यदि आप एक रिमोट सर्वर के जरिए वर्डप्रेस के साथ डेवेलप करते हैं, तो आपको वर्डप्रेस एडमिन के माध्यम से थीम फाइल को एडिट करने या locally फाइलों को एडिट करने और सर्वर पर उन्हें वापस स्थानांतरित करने के लिए FTP सॉफ्टवेयर का उपयोग करने की आवश्यकता होगी। सादगी के लिए, मैं ऐसा मानता हूँ कि आप ट्यूटोरियल के बाकी हिस्सों में वर्डप्रेस के साथ स्थानीय स्तर पर काम कर रहे हैं।

हमारे पेज टेम्पलेट्स को कार्यान्वित करने के लिए, मैं Twenty Seventeen पैरेंट थीम पर आधारित एक चाइल्ड थीम का उपयोग कर रहा हूं, जो (लिखने के समय) नवीनतम डिफ़ॉल्ट वर्डप्रेस थीम है। इसलिए यदि आप साथ चल रहे हैं तो आगे बढ़ने से पहले इसे इनस्टॉल करना एक अच्छा विचार है।

यदि आप चाहें तो आप किसी अन्य पैरेंट थीम के आधार पर एक चाइल्ड थीम का उपयोग कर सकते हैं, लेकिन आपको कुछ विशेष कोड को संशोधित करने के लिए इसे अपने विशेष थीम के साथ जोड़कर काम करना होगा। बेसिक मेथड, हालांकि, किसी भी चाइल्ड थीम के लिए एक सामान ही है।

WordPress Page Templates

पेज टेम्पलेट्स को अधिक लचीला बनाने का तरीका सीखने से पहले, हम कुछ बुनियादी विवरणों पर चलते हैं।

वर्डप्रेस template hierarchy का उपयोग करता है, यह तय करने के लिए कि कौन सा टेम्पलेट मौजूदा पेज को रेन्डर करता है। पेजेज के लिए अधिकतर परिदृश्यों में प्रयुक्त टेम्पलेट page.php है लेकिन यदि आप किसी विशेष ID या slug के साथ पेज देख रहे हैं तो यह अलग हो सकता है। हालांकि, यदि आप किसी विशेष पेज के लिए एक पेज का टेम्प्लेट चुनते हैं, तो यह हमेशा वरीयता में उपयोग किया जाता है, जो पेज टेम्पलेट का उपयोग करके किसी भी पेज को कस्टमाइज करना बहुत आसान बनाता है।

सामान्यतः वर्डप्रेस पेज टेम्पलेट्स के कुछ विशिष्ट उदाहरण यहां दिए गए हैं:

Contact Form
Portfolios
Frequently Asked Questions
Custom 404 Page
Custom Login Page
Sitemap
Full Width Page
Blog Posts Page
Widgetized Page
और भी बहुत सारे…

मैं और भी आगे जा सकता हूँ, लेकिन आपको आईडिया हो ही गया होगा। पेज टेम्पलेट्स कूल हैं! आप उन्हें लगभग सबकुछ के लिए उपयोग कर सकते हैं।

अगर आपने कितने भी समय के लिए वर्डप्रेस का इस्तेमाल किया है तो यह बहुत अधिक संभावना है कि आप पहले से ही एक या अधिक उदाहरणों से परिचित हो चुके हैं। अधिकांश थीम्स थीम कार्यक्षमता के पूरक के लिए पेज टेम्पलेट्स शामिल करती हैं, और आप आसानी से एक चाइल्ड थीम के माध्यम से स्वयं जोड़ सकते हैं। यह कैसे करेंगे मैं जल्दी ही इसे कवर करूँगा।

पेज टेम्पलेट्स बहुत उपयोगी हैं क्योंकि वे आपको पूरे पेज पर पूर्ण नियंत्रण देते हैं। अगर आप चाहें तो हेडर, फुटर और / या साइडबार छोड़ सकते हैं। यह एक ऐसा कारण है कि फुल-विड्थ पेज टेम्पलेट्स इतने सामान्य हैं क्योंकि एक पेज टेम्प्लेट के माध्यम से साइडबार को मैनिपुलेट करना बहुत आसान है।

वर्तमान में उपलब्ध सभी पेज टेम्पलेट देखने के लिए, वर्डप्रेस पेज एडिटर पर जाएं और पेज टेम्पलेट मेटा बॉक्स के माध्यम से Template ड्रॉप डाउन पर जाएं। बस जिसे आप चाहते हैं उस पेज टेम्पलेट का चयन करें और, एक बार पेज अपडेट हो जाए, तो अगली बार यह पेज देखे जाने पर दिखाई देगा।

एक चाइल्ड थीम के माध्यम से पेज टेम्पलेट जोड़ना

जैसा कि ऊपर बताया गया है, हम इस ट्यूटोरियल में सभी पेज टेम्पलेट्स को कार्यान्वित करने के लिए एक कस्टम वर्डप्रेस चाइल्ड थीम का उपयोग करेंगे। मैं एक मूल चाइल्ड थीम और पेज टेम्पलेट के साथ शुरू करूँगा, और फिर इसके बाद जैसे जैसे हम इसके साथ आगे बढ़ेंगे इसमें और कम्प्लेक्सिटी जोड़ूंगा।

पूरी प्रक्रिया चरणबद्ध रूप से कवर की जाएगी, इसलिए यदि आप चाइल्ड थीम्स और / या पेज टेम्पलेट से परिचित नहीं हैं तो चिंता न करें। आप ट्यूटोरियल के अंत तक हो जायेंगे!

चाइल्ड थीम के पीछे मूल विचार यह है कि वे आपको अपनी वर्तमान थीम (जिसे पैरेंट थीम कहा जाता है) की लुक और फील को कस्टमाइज करने की अनुमति देते हैं, जिस तरीके से पैरेंट थीम को अपडेट करते समय वह प्रभावित नहीं होगी।

यदि कोड सीधे पैरेंट थीम में जोड़ा जाता है तो सभी कस्टमाइज़ेशन ओवरराईट हो जायेंगे और निर्धारित थीम अपडेट के दौरान यह लॉस्ट (lost) हो जायेंगे। यह एक महत्वपूर्ण मुद्दा है क्योंकि किसी अच्छी तरह से रखी गई थीम को नियमित रूप से अपडेट किया ही जाएगा। चाइल्ड थीम के बारे में अधिक जानने के लिए, मैं आधिकारिक दस्तावेजों पर एक नज़र लेने की सलाह देता हूं।

यह ध्यान रखना दिलचस्प है कि पेज टेम्पलेट्स जोड़ने के लिए एक वर्डप्रेस प्लगइन का उपयोग करना संभवतः तकनीकी रूप से संभव है, लेकिन चाइल्ड थीम का उपयोग करने के लिए यह बहुत सरल है। मैं अनावश्यक रूप से बाहरी कोड के साथ चीजों को उलझाना नहीं चाहता, इसलिए मैं हमारे पेज टेम्पलेट क्रियान्वयन के लिए चाइल्ड थीम के साथ ही रहूंगा।

आएँ शुरू करें!

ठीक है, इतने सारे सिद्धांत - चलो हमारे शुरुआती पेज टेम्पलेट बनाते हैं! यह कस्टम Twenty Seventeen चाइल्ड थीम में स्थित होगा जो हमारे पेज टेम्पलेट कंटेनर के रूप में कार्य करेगा, इसलिए हमें पहले चाइल्ड थीम बनाने की आवश्यकता है।

अपना थीम फ़ोल्डर खोलें और अपने चाइल्ड थीम के लिए एक नया फ़ोल्डर बनाएं। वर्डप्रेस सर्वोत्तम प्रथाओं (best practices) के मुताबिक, यह अनुशंसा (recommend) की जाती है कि आप चाइल्ड थीम फ़ोल्डर को उस पैरेंट थीम के आधार पर नाम दें जिस पर यह आधारित है, '-child' लगा कर संशोधित करें। हमारे पैरेंट थीम फ़ोल्डर का नाम twentyseventeen है, आपके चाइल्ड थीम फ़ोल्डर को twentyseventeen-child नाम दें। इस नए फ़ोल्डर के अंदर, style.css नामक एक फ़ाइल बनाएं और निम्न कमेंट ब्लॉक को शीर्ष पर जोड़ें।

/*
 Theme Name:   Twenty Seventeen Child
 Description:  Twenty Seventeen Child Theme
 Author:       David Gwyer
 Template:     twentyseventeen
 Version:      0.1
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twenty-seventeen-child
*/

अब हमें Twenty Seventeen पैरेंट थीम से सभी styles का संदर्भ देने की आवश्यकता है। यदि आपने कभी चाइल्ड थीम्स के साथ काम किया है, तो आप सीधे कमेंट ब्लॉक के नीचे एक CSS @import स्टेटमेंट जोड़ने के लिए इस्तेमाल कर सकते हैं। गति की चिंताओं के कारण यह अब वर्डप्रेस का सबसे अच्छा अभ्यास नहीं माना जाता है। इसके बजाय, हम पैरेंट थीम styles को enqueue करेंगे, जो कि अधिक कुशल होगा।

चाइल्ड थीम रूट फ़ोल्डर के अंदर, एक functions.php फ़ाइल बनाएं और एक खाली क्लास कंटेनर सेट करने के लिए निम्न कोड जोड़ें। हम अपने सभी सेटअप कोड के लिए इस क्लास का उपयोग करेंगे।

<?php

/**
 * Twenty Seventeen child theme class.
 *
 * DPT = D[ynamic] P[age] T[emplates].
 */
class DPT_Twenty_Seventeen_Child {

    /**
     * Register hooks.
     */
    public function init() {
        // ...
    }
}

$ts_child_theme = new DPT_Twenty_Seventeen_Child();
$ts_child_theme->init();

नोट: समापन PHP स्टेटमेंट आवश्यक नहीं है, लेकिन अगर आप चाहें तो इसे जोड़ सकते हैं।

अब style.css फ़ाइल में सीधे उन्हें इम्पोर्ट करने के बजाय, एक हुक और कॉलबैक को Twenty Seventeen पैरेंट थीम स्टाइल्स को enqueue करने के लिए जोड़ें। दो नए क्लास मेथड्स को जोड़कर ऐसा करें।

<?php

/**
 * Register hooks.
 */
public function init() {
    add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_parent_theme_styles' ) );
}

/* Enqueue parent theme styles. */
public function enqueue_parent_theme_styles() {
  wp_enqueue_style( 'twenty-seventeen-css', get_template_directory_uri() . '/style.css' );
}

अपने परिवर्तनों को सेव करें और चाइल्ड थीम को सक्रिय करें। अब आपके पास पूरी तरह से काम कर रही, यद्दपि साधारण, Twenty Seventeen चाइल्ड थीम है। यह ठीक से काम कर रहा है या नहीं, यह जांच करने के लिए, कस्टम CSS को style.css में जोड़ें।

1	* { color: red !important; }

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

आगे बढ़ने से पहले टेस्ट CSS को हटाने के लिए मत भूलना। अब जब चाइल्ड थीम सक्रिय है, तो हम अपना पहला पेज टेम्पलेट लागू करना शुरू कर सकते हैं।

अपना पहला पेज टेम्पलेट जोड़ना

एक बात मेंशन करना जरूरी है कि आप अपने पेज टेम्पलेट्स को चाइल्ड थीम के अंदर कहाँ स्टोर करेंगे। आप पेज टेम्प्लेट को सीधे मूल चाइल्ड थीम फ़ोल्डर में या top-level फ़ोल्डर में स्टोर कर सकते हैं। इससे कोई फर्क नहीं पड़ता कि आप किसको चुनते हैं; कोई भी स्थान ठीक है।

हालांकि, यदि आपके पास एक से अधिक पेज टेम्पलेट हैं, तो आप उन्हें संगठनात्मक उद्देश्यों के लिए फ़ोल्डर में स्टोर करने का निर्णय ले सकते हैं। फ़ोल्डर का नाम महत्वहीन है, लेकिन रुट चाइल्ड थीम फ़ोल्डर में सीधे स्थित होना चाहिए, अन्यथा WordPress आपके पेज टेम्पलेट को नहीं पहचान पायेगा। इस ट्यूटोरियल के लिए, मैं page-templates नामक एक फ़ोल्डर का उपयोग कर रहा हूं।

चलिए अब चाइल्ड थीम पर एक नया पेज टेम्पलेट जोड़ते हैं। ऐसा करने का मानक तरीका पैरेंट थीम में से page.php कि एक कॉपी बनाना और इसे अपने चाइल्ड थीम में जोड़ना है। आप फ़ाइल को अपनी पसंद का नाम दे सकते हैं, लेकिन मैं कुछ ऐसी चीज़ों सहित सुझाऊंगा जो एक पेज टेम्पलेट के रूप में इसे पहचानने योग्य बनाता है। मैं test-page-template.php के साथ जाऊंगा।

page.php फ़ाइल को page-templates फ़ोल्डर में कॉपी करने के बाद (और उसका नाम बदलकर), आपकी चाइल्ड थीम संरचना अब इस तरह दिखनी चाहिए:

test-page-template.php खोलें और निम्नलिखित के साथ फाइल के शीर्ष पर कमेंट ब्लॉक को बदलें।

<?php

/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

यह कदम बहुत महत्वपूर्ण है क्योंकि टिप्पणी ब्लॉक वर्डप्रेस को एक पेज टेम्पलेट के रूप में फाइल को पहचानने के लिए कहता है और इसे पेज एडिटर स्क्रीन पर उपलब्ध पेज टेम्पलेट्स की सूची में जोड़ देगा।

पूरा पेज टेम्पलेट कोड अब इस तरह दिखना चाहिए।

<?php
/**
 * Template Name: Test Page Template
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

get_header(); ?>

<div class="wrap">
    <div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			while ( have_posts() ) : the_post();

				get_template_part( 'template-parts/page/content', 'page' );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

आइए हमारे पेज टेम्पलेट का परीक्षण करें। वर्डप्रेस एडमिन पर जाएं और किसी भी मौजूदा पेज को एडिट करें, या एक नया बनाएं। पेज एडिटर स्क्रीन पर, हमारे पेज टेम्पलेट को वर्तमान पेज पर असाइन करने के लिए Page Attributes मेटा बॉक्स से Template ड्रॉप-डाउन चुनें।

क्योंकि हम केवल पैरेंट थीम page.php टेम्पलेट फ़ाइल को कॉपी करते हैं, हमारे कस्टम पेज टेम्पलेट वर्तमान पेज को आउटपुट करने से ज्यादा कुछ नहीं कर रहा है, जो कि बहुत उपयोगी नहीं है। साथ ही, हमें एडिटर की कंटेंट या कमैंट्स को आउटपुट करने की ज़रूरत नहीं होगी, इसलिए while लूप को पेज के टेम्पलेट से हटा दें, और एक कस्टम संदेश जोड़ें। while लूप के कंटेंट को निम्न से बदलें।

1	<?php
2	while ( have_posts() ) : the_post();
3	echo "<p>This is our custom page template!</p>";
4	endwhile; // End of the loop.

इसे सेव करें और पेज को फ्रंट एन्ड पर देखें।

Viewing the page template on the front-end

नोट: यदि आप कस्टम संदेश नहीं देख पा रहे हैं तो सुनिश्चित करें कि आपने पेज एडिटर पर कस्टम पेज टेम्पलेट का चयन किया है और उसे सेटिंग्स अपडेट करने के लिए सेव किया गया है।

चलो अब हमारे कस्टम पेज टेम्पलेट थोड़ा और अधिक उपयोगी बनाते हैं। सभी प्रकाशित पेजेज के साइटमैप को आउटपुट करने के लिए हमने नीचे दिए गए कोड के साथ ऊपर दिए गए संदेश को बदलें।

<?php
while ( have_posts() ) : the_post();
	echo "<h2>Sitemap</h2>";
	echo "<ul>" . wp_list_pages( array( 'title_li' => '' ) ) . "</ul>";
endwhile; // End of the loop.

इसके परिणामस्वरूप निम्न आउटपुट होंगे।

यह देखने में आसान है कि कितने उपयोगी पेज टेम्पलेट हो सकते हैं। लेकिन हम भी बेहतर कर सकते हैं!

निष्कर्ष

अब तक, हमने एक चाइल्ड थीम बनायीं है और इसका उपयोग हमारे स्टैण्डर्ड पेज टेम्पलेट को लागू करने के लिए किया है। अगले ट्यूटोरियल में, मैं आपको यह बताऊंगा कि कैसे इसे कदम दर कदम विस्तारित किया जाये, यह दर्शाता है कि पेज टेम्पलेट्स को और अधिक लचीला कैसे बनाया जा सकता है।

विशेष रूप से, हम पेज एडिटर स्क्रीन पर कस्टम कंट्रोल्स जोड़कर एक सामान्य-उद्देश्य डायनामिक पेज टेम्पलेट बनाएंगेI तब पेज के टेम्पलेट में कण्ट्रोल लॉजिक जोड़ दिया जाएगा जो की हमे पेज कैसा दिखेगा उसे कस्टमाइज करने की अनुमति प्रदान करेगा।

वर्डप्रेस में एक अविश्वसनीय सक्रिय अर्थव्यवस्था है। Themes, plugins, libraries और अन्य कई प्रोडक्ट्स हैं जो आपकी साइट और प्रोजेक्ट को बनाने में आपकी सहायता करते हैं। प्लेटफार्म का ओपन सोर्स नेचर भी एक शानदार विकल्प है जिससे आप अपने प्रोग्रामिंग कौशल को बेहतर कर सकते हैं। जो भी मामला हो, आप देख सकते हैं कि हमारे पास Envato Marketplace में क्या उपलब्ध है।

यह मेरा पहला ट्यूटोरियल (नेक बनो!) है, इसलिए कृपया नीचे कमेंट फ़ीड में आपके पास की कोई भी प्रतिक्रिया छोड़ने में संकोच न करें। मैं हर सवाल का जवाब देने के लिए अपनी पूरी कोशिश करूँगा।