वर्डप्रेस ट्यूटोरियल: HTML से वर्डप्रेस थीम कैसे बनाएं (भाग 2)

  1. 1. वर्डप्रेस ट्यूटोरियल: HTML से वर्डप्रेस थीम कैसे बनाएं (भाग 1)
  2. 2. इस समय पढ़ना: वर्डप्रेस ट्यूटोरियल: HTML से वर्डप्रेस थीम कैसे बनाएं (भाग 2)
  3. 3. एक वर्डप्रेस थीम के एनाटॉमी के लिए एक परिचय

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


छवियों और जावास्क्रिप्ट फ़ाइलों को कॉन्फ़िगर करना

यदि आपके मूल HTML टेम्पलेट में चित्र थे (index.html), आपने शायद देखा कि वे टेम्पलेट को PHP फ़ाइलों में काट देने के बाद दिखाना बंद कर देते हैं। चिंता बिल्कुल न करें, यह PHP का तरीका है। उदाहरण के लिए, यदि आपके पास अपने हेडर अनुभाग में एक लोगो है तो…

your_logo_alt_text

… आपको कोड के साथ थोड़ा सा खेलना होगा। जिस कोड को मैं एक पल में प्रकट करूंगा, वह ब्राउज़र को आपके लोगो (या किसी अन्य छवि) को खोजने में मदद करेगा इमेजिस फ़ोल्डर, जो आपके विषय की मुख्य निर्देशिका का एक सबफ़ोल्डर है (या होना चाहिए)। इसलिए, हेडर सेक्शन में अपना लोगो प्रदर्शित करने के लिए, हेडर। एफपी फ़ाइल खोलें और उपरोक्त कोड को निम्नलिखित के साथ बदलें:

your_logo_alt_text

Get_template_directory_uri () फ़ंक्शन आपके थीम निर्देशिका के लिए url लौटाता है। SO यदि आप अपने लोगो को एक इमेज फोल्डर में जोड़ते हैं, तो कोड उस लोगो को पकड़ लेगा.

कोई अंतर नोटिस? जाहिर है, कोड का यह टुकड़ा केवल आपके लोगो को ठीक करेगा। अन्य छवियों को ठीक करने के लिए, आपको उनके कोड को इसी तरह से फिर से लिखना होगा. आसान मटर का सामान.

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

उपरोक्त कोड का उपयोग करता है example.js चित्र के रूप में। अपनी जावास्क्रिप्ट फ़ाइल के नाम के साथ उस हिस्से को बदलना न भूलें.

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

टेम्पलेट फ़ाइलें

इस ट्यूटोरियल के एक भाग में, हमने चार मूल टेम्पलेट फ़ाइलों का उल्लेख किया है index.php, header.php, sidebar.php तथा footer.php. टेम्प्लेट फ़ाइलें नियंत्रित करती हैं कि आपकी वेबसाइट वेब पर कैसे प्रदर्शित होगी। टेम्पलेट आपके वर्डप्रेस के MySQL डेटाबेस से जानकारी प्राप्त करते हैं और उसी HTML कोड में अनुवाद करते हैं जो वेब ब्राउज़र में प्रदर्शित होता है। दूसरे शब्दों में, टेम्पलेट फाइलें वर्डप्रेस थीम के बिल्डिंग ब्लॉक हैं। टेम्प्लेट की बेहतर समझ पाने के लिए, आइए हम एक अवधारणा में तल्लीन हों टेम्पलेट पदानुक्रम.

हम एक सादृश्य का उपयोग करेंगे। यदि कोई विज़िटर श्रेणी लिंक (यानी किसी श्रेणी का लिंक) जैसे http://www.yoursite.com/blog/category/your-category/ पर क्लिक करता है, तो वर्डप्रेस सही फ़ाइल (और सामग्री) उत्पन्न करने के लिए टेम्पलेट पदानुक्रम का उपयोग करता है नीचे समझाया गया है:

  • सबसे पहले, वर्डप्रेस एक टेम्पलेट फ़ाइल की तलाश करेगा जो श्रेणी आईडी से मेल खाती है
  • यदि श्रेणी की ID उदाहरण के लिए 2 है, तो वर्डप्रेस श्रेणी-2. एफपी नामक एक टेम्पलेट फ़ाइल की तलाश करेगा
  • यदि श्रेणी-2. एफपी अनुपलब्ध है, तो वर्डप्रेस जेनेरिक श्रेणी के टेम्पलेट फ़ाइल के लिए जाएगा जैसे कि श्रेणी। एफपी
  • यदि यह टेम्प्लेट फ़ाइल अनुपलब्ध है, तो वर्डप्रेस एक सामान्य आर्काइव टेम्प्लेट जैसे कि आर्काइव.फपी की तलाश करेगा
  • यदि सामान्य संग्रह टेम्पलेट मौजूद नहीं है, तो वर्डप्रेस मुख्य टेम्पलेट फ़ाइल, index.php पर वापस आ जाएगा

यह है कि वर्डप्रेस टेम्प्लेट कैसे काम करते हैं, और आप अपनी आवश्यकताओं के अनुरूप अपने वर्डप्रेस थीम को अनुकूलित करने के लिए इन फ़ाइलों का उपयोग कर सकते हैं। अन्य टेम्पलेट फ़ाइलों में शामिल हैं:

home.php या index.phpब्लॉग पोस्ट इंडेक्स को रेंडर करने के लिए उपयोग किया जाता है
सामने page.phpस्टैटिक पेज या लेटेस्ट पोस्ट रेंडर करने के लिए उपयोग किया जाता है जैसा कि फ्रंट पेज डिस्प्ले में सेट किया जाता है
single.phpएक पोस्ट पेज को रेंडर करने के लिए उपयोग किया जाता है
एकल {बाद प्रकार} .phpकस्टम पोस्ट प्रकार रेंडर करने के लिए उपयोग किया जाता है उदा। यदि पोस्ट-प्रकार एक उत्पाद था, तो वर्डप्रेस एकल-उत्पाद का उपयोग करेगा। पीपी
page.phpस्थैतिक पृष्ठों को प्रस्तुत करने के लिए उपयोग किया जाता है
category.php या संग्रह.phpश्रेणी पुरालेख सूचकांक को प्रस्तुत करने के लिए प्रयुक्त
author.phpलेखक को प्रस्तुत करने के लिए उपयोग किया जाता है
date.phpतारीख सौंपने के लिए उपयोग किया जाता है
search.phpखोज परिणामों को रेंडर करने के लिए उपयोग किया जाता है
404.phpसर्वर 404 त्रुटि पृष्ठ को रेंडर करने के लिए उपयोग किया जाता है

यह सिर्फ एक छोटी सूची है, कई अन्य हैं वर्डप्रेस टेम्पलेट. टेम्प्लेट का विषय एक बड़ा है, और यह जानने का सबसे अच्छा तरीका है कि टेम्प्लेट फ़ाइलों के साथ खेलना कैसे व्यापक है थीम विकास WordPress पर पुस्तकालय। वैकल्पिक रूप से, आप छोटे को पढ़ सकते हैं वर्डप्रेस कोडेक्स पर टेम्पलेट अनुभाग.

टेम्प्लेट टैग

यह देखकर कि हमने अभी टेम्प्लेट फाइलें पेश की हैं, टेम्प्लेट टैग के बारे में एक या दो बातों का उल्लेख करना उचित है, और वे वर्डप्रेस थीम में जो भूमिका निभाते हैं। WordPress.org के अनुसार, “… आपके ब्लॉग के टेम्प्लेट के भीतर टेम्प्लेट टैग का उपयोग सूचना को गतिशील रूप से प्रदर्शित करने के लिए किया जाता है या अन्यथा आपके ब्लॉग को कस्टमाइज़ किया जाता है, जो आपको व्यक्तिगत और दिलचस्प बनाने के लिए उपकरण प्रदान करता है।”

हमारे पिछले ट्यूटोरियल में, आप कुछ टेम्प्लेट टैग जैसे कि मिले get_header, get_sidebar, get_footer तथा bloginfo. निम्नलिखित अनुभाग में, हम अपनी नई बनाई गई वर्डप्रेस थीम में कुछ टेम्प्लेट टैग जोड़ेंगे। मैं मान रहा हूं कि आपने पहले ही अपने हैडर.php फ़ाइल में DOCTYPE घोषणा को शामिल कर लिया है। यदि आप नहीं करते हैं, तो यहां कोड है:

DOCTYPE घोषणा आपके HTML कोड को अर्थ प्रदान करती है। उस रास्ते से, चलिए हम HTML टैग को खोलते हैं। हम का उपयोग करके एक lang विशेषता शामिल करेंगे language_attributes टैग इस तरह:

उपरोक्त कोड निम्नलिखित उत्पन्न करेगा:

जगह में DOCTYPE घोषणा और Language_attribute टैग के साथ, आपकी थीम की संरचना वैध है और ब्राउज़र आपके कोड को समझेंगे। यदि आप एक ब्लॉग के लिए एक थीम बना रहे हैं, तो इसके लिए आपके सिर में अपने pingback URL और RSS फ़ीड के लिंक रखना महत्वपूर्ण है। अपने शीर्ष लेख में। निम्न कोड जोड़ें:

क्या आपने देखा कि हमने कैसे काम किया ब्लग्नाफो टैग RSS फ़ीड (ss rss2_url ’) और pingback (RSS pingback_url’) को शामिल करने के लिए? अपनी शीर्ष लेख फ़ाइल को सहेजने से पहले, निम्न कोड भी जोड़ें:

उपरोक्त wp_head टैग आपके प्लगइन्स द्वारा आवश्यक शैलियों और जावास्क्रिप्ट फ़ाइलों में खींच जाएगा। यदि आप कोड के इस छोटे से टुकड़े को छोड़ देते हैं, तो आपके प्लगइन्स इच्छानुसार काम नहीं कर सकते हैं। उस रास्ते से, चलिए हम अपने WordPress विषय में पेज टाइटल जोड़ते हैं – एक बार फिर से – ब्लजिनो टैग। अपनी शीर्ष लेख फ़ाइल में, निम्न कोड जोड़ें:

<?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?>

पहला टैग wp_title आपके पेज या पोस्ट का शीर्षक जोड़ देगा और दूसरा टैग ब्लोगिनफो (’नाम’) आपके ब्लॉग का नाम जोड़ देगा। अब जब आपके वर्डप्रेस थीम में पेज टाइटल हैं, तो हम कैसे अपने विषय के लिए स्क्रीनशॉट बनाते हैं, थीम को फिर से तैयार करें और आराम करें?

अपने थीम के लिए एक स्क्रीनशॉट बनाना

जब आपने पहली बार अपना परीक्षण विषय अपलोड किया था, तो आपने देखा होगा कि उसमें वर्डप्रेस थीम पैनल में स्क्रीनशॉट की कमी थी। यह नीरस लग रहा था, खासकर यदि आपके पास रंगीन स्क्रीनशॉट के साथ अन्य विषय थे। लेकिन चिंता न करें, अपने विषय के लिए स्क्रीनशॉट बनाना बहुत आसान है। बस अपने पसंदीदा छवि संपादक (जैसे एडोब फोटोशॉप) का उपयोग करके एक छवि बनाएं या अपने विषय का स्क्रीन हड़पने लें। सुनिश्चित करें कि आपकी छवि 600px चौड़ी और 450px ऊँची है। के रूप में छवि सहेजें screenshot.png अपने विषय फ़ोल्डर में। सभी परिवर्तनों को सहेजें, एक ज़िप संग्रह में अपने विषय फ़ोल्डर को संपीड़ित करें। विषय अपलोड करें और अपने नए परिवर्तनों को देखने के लिए इसे सक्रिय करें it

निष्कर्ष

मैं विश्वास करना चाहता हूं कि इस दूसरे ट्यूटोरियल ने आपको स्थिर HTML से वर्डप्रेस थीम बनाने में गहन अंतर्दृष्टि प्रदान की। निकट भविष्य में, मैं आपको वर्डप्रेस थीम के अन्य पहलुओं से परिचित कराऊंगा, लेकिन इस बीच, मैंने आपके लिए निम्नलिखित संसाधन तैयार किए हैं:

खुश करने वाला!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me