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

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

यदि आपने एक HTML (+ CSS) वेबसाइट से शुरुआत की है, तो आपको वर्डप्रेस पर जाते समय इसे फेंकना नहीं पड़ेगा। आप अपने HTML को वर्डप्रेस में बदल सकते हैं और डायनामिक वर्डप्रेस प्लेटफॉर्म पर अपनी (अब अधिक शक्तिशाली) वेबसाइट चला सकते हैं.


या शायद ऐसा नहीं है। शायद आप सोच रहे होंगे कि क्लाइंट के एचटीएमएल डिज़ाइन को पूरी तरह से वर्डप्रेस थीम में कैसे बदला जाए। या हो सकता है कि आप अधिक परिचित HTML पक्ष से मूल वर्डप्रेस (+ PHP) प्रोग्रामिंग सीखना चाहते हों.

आज आप जो भी कारण हैं, यह वर्डप्रेस ट्यूटोरियल आपको HTML से वर्डप्रेस थीम बनाने की मूल बातें से परिचित कराएगा। आप अपनी थीम को स्क्रैच से बनाने के लिए इस गाइड का अनुसरण कर सकते हैं या आप जीथब को हेड कर सकते हैं और WPExplorer स्टार्टर थीम डाउनलोड कर सकते हैं जो कि आपकी थीम बनाने के लिए “खाली कैनवस” प्रदान करती है और आरंभ करने के लिए सभी आवश्यक टेम्पलेट फ़ाइलों और कोड के साथ। इसलिए यदि आप उन लोगों में से एक हैं जो कोड के माध्यम से पढ़कर सीखते हैं तो स्टार्टर थीम डाउनलोड करें, गाइड को छोड़ें और देखें कि चीजें कैसे काम करती हैं … अन्यथा, एक कोड संपादक प्राप्त करें (मैं उपयोग करता हूं और सिफारिश करता हूं) नोटपैड++, या SublimeText) और एक ब्राउज़र तैयार है, फिर अंत तक इस सरल गाइड का पालन करें.

अपने वर्डप्रेस थीम का नामकरण

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

इस बिंदु पर सामान्य धारणा:

  • आपके पास आपका index.html और CSS स्टाइलशीट तैयार है.
  • आपके पास कम से कम एक थीम के साथ काम करने वाला वर्डप्रेस इंस्टॉलेशन है उदा। बीस चौदह
  • आपने पहले ही एक थीम फ़ोल्डर बना लिया है, जहाँ आप अपनी नई वर्डप्रेस थीम को सहेज रहे होंगे

अपने WordPress विषय का नामकरण करने दें। अपने कोड संपादक को खोलें और अपनी स्टाइलशीट की सामग्री को एक नई फ़ाइल में कॉपी-पेस्ट करें और इसे सेव करें style.css अपने विषय फ़ोल्डर में। के शीर्ष पर निम्नलिखित जानकारी जोड़ें नई बनाई गई शैली:

/ *
थीम नाम: आपकी थीम का नाम
थीम यूआरआई: आपकी थीम का यूआरएल
विवरण: आपके विषय का संक्षिप्त विवरण
संस्करण: 1.0 या कोई अन्य संस्करण जो आप चाहते हैं
लेखक: आपका नाम या WordPress.org का उपयोगकर्ता नाम
लेखक URI: आपका वेब पता
टैग: वर्डप्रेस थीम रिपॉजिटरी में अपने विषय का पता लगाने के लिए टैग
* /

(/ *… * /) टिप्पणी टैग न छोड़ें. परिवर्तनों को सुरक्षित करें। यह जानकारी वर्डप्रेस को आपके विषय का नाम, लेखक और मानार्थ सामान जैसे बताती है। महत्वपूर्ण हिस्सा थीम का नाम है, जो आपको WP डैशबोर्ड के माध्यम से अपनी थीम चुनने और सक्रिय करने की अनुमति देता है.

PHP फ़ाइलों में अपने HTML टेम्पलेट को तोड़ना

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

अगले चरण में चार PHP फाइलें बनाना शामिल है। अपने कोड संपादक का उपयोग करके, index.php, header.php, sidebar.php और footer.php बनाएं, और उन्हें अपने थीम फ़ोल्डर में सहेजें। इस बिंदु पर सभी फाइलें खाली हैं, इसलिए उन्हें कुछ भी करने की उम्मीद नहीं है। चित्रण प्रयोजनों के लिए, मैं निम्नलिखित index.html और CSS स्टाइलशीट फ़ाइलों का उपयोग कर रहा हूँ:

index.html




HTML टेम्पलेट को वर्डप्रेस थीम में कैसे कन्वर्ट करें - WPExplorer



यह हैडर सेक्शन है। अपना लोगो और अन्य विवरण यहाँ रखें.

यह मुख्य सामग्री क्षेत्र है.

और यह पाद है.

CSS STYLESHEET

# ग्रैप {मार्जिन: 0 ऑटो; चौड़ाई: 95%; मार्जिन टॉप: -10px; ऊंचाई: 100%;}
.शीर्ष लेख {चौड़ाई: 99.8%; सीमा: 1px ठोस # 999; ऊँचाई: 135px;}
.सामग्री {चौड़ाई: 70%; बॉर्डर: 1px ठोस # 999; मार्जिन-टॉप: 5 पीएक्स ;;
.साइडबार {फ्लोट: सही; मार्जिन टॉप: -54px; चौड़ाई: 29%; बॉर्डर: 1px ठोस # 999 ;;
.पाद {{चौड़ाई: 99.8%; सीमा: 1px ठोस # 999; मार्जिन-टॉप: 10 पीएक्स;}

यदि आपके पास काम करने के लिए कुछ नहीं है तो आप दोनों कोड हड़प सकते हैं। बस उन्हें अपने कोड संपादक में कॉपी-पेस्ट करें, उन्हें सहेजें, हमारे द्वारा उल्लिखित चार PHP फाइलें बनाएं और अगले भाग के लिए तैयार हो जाएं। अपना नव-निर्मित (और खाली) खोलें header.php. अपने मौजूदा वर्डप्रेस इंस्टॉलेशन में लॉगिन करें, नेविगेट करें सूरत – >> संपादक और खुला है header.php. के बीच सभी कोड को कॉपी करें टैग और अपने शीर्ष लेख में इसे पेस्ट करें। निम्नलिखित कोड है जो मुझे चौबीस विषय में हैडर.फपी फाइल से मिला है:




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




फिर अपने को खोलें index.html हेडर कोड को फाइल करें और कॉपी करें (यानी कोड इन द कोड

खंड) अपने शीर्ष लेख के लिए। ठीक नीचे नीचे दिखाए गए टैग:




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







यह हैडर सेक्शन है। अपना लोगो और अन्य विवरण यहाँ रखें.

फिर जोड़िए…

… के बीच कहीं भी अपने स्टाइलशीट को लिंक करने के लिए शीर्ष लेख में टैग। याद रखना भी डाल दिया तथा शीर्षकों में टैग खोलना। ऊपर दिखाए गए अनुसार। सभी परिवर्तनों को सहेजें.

दूसरे खंड (यानी.

index.html से नव-निर्मित सूचकांक। एफपी , और जोड़…

… बहुत ऊपर और …


… परम तल तक। ये तीन पंक्तियाँ शीर्षलेख.php, sidebar.php और footer.php (उस क्रम में) लाती हैं और उन्हें index.php में प्रदर्शित करती हैं, जो आपके कोड को वापस एक साथ रखता है। सभी परिवर्तनों को सहेजें। इस बिंदु पर, आपकी index.php फ़ाइल की तरह दिखना चाहिए:



फिर अपने index.html में साइडबार और पाद लेख अनुभाग से सामग्री को क्रमशः sidebar.php और footer.php पर कॉपी करें.

पोस्ट जोड़ना

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

अब, में अपनी पोस्ट प्रदर्शित करने के लिए सामग्री अनुभाग index.php टेम्पलेट के बीच, निम्न कोड को कॉपी और पेस्ट करें

तथा

नीचे दिखाए गए टैग:

>

जो आपके पदों का ध्यान रखेगा. एबीसी के रूप में आसान. इस मोड़ पर (और इस ट्यूटोरियल में दी गई नमूना फाइलों का उपयोग करके), आपका शीर्ष लेख इस प्रकार दिखना चाहिए:




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




आपका sidebar.php इस तरह दिखना चाहिए:

आपका पाद लेख .php इस तरह दिखना चाहिए:

और यह पाद है

क्या आपने समापन पर ध्यान दिया? तथा पाद लेख में टैग? उन लोगों को भी शामिल करना न भूलें.

आपकी शैली। कुछ इस तरह दिखना चाहिए:

/ *
थीम नाम: HTML से वर्डप्रेस थीम बनाना
थीम यूआरआई: http://wpexplorer.com
विवरण: यह थीम आपको HTML से वर्डप्रेस थीम बनाने का तरीका दिखाती है
संस्करण: 1.0
लेखक: @WPExplorer के लिए फ्रेडी
लेखक URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Tags: wpexplorer, custom theme, HTML to WordPress, वर्डप्रेस थीम बनाएं
* /
तन {
font-family: arial, helvetica, verdana;
फ़ॉन्ट-आकार: 0.8em;
चौड़ाई: 100%;
ऊंचाई: 100%;
}

.हेडर {
पृष्ठभूमि-रंग: # 1be;
मार्जिन-वाम: 14%;
शीर्ष: 0;
सीमा-चौड़ाई: 0.1em;
सीमा-रंग: # 999;
सीमा-शैली: ठोस;
चौड़ाई: 72%;
ऊंचाई: 250 पीएक्स;
}

.सामग्री {
पृष्ठभूमि-रंग: # 999;
मार्जिन-वाम: 14%;
मार्जिन-टॉप: 5 पीएक्स;
बाईंओर तैरना;
चौड़ाई: 46%;
सीमा-चौड़ाई: 0.1em;
सीमा-रंग: # 999;
सीमा-शैली: ठोस;
}

.साइडबार {
पृष्ठभूमि-रंग: # 1d5;
मार्जिन-राइट: 14%;
मार्जिन-टॉप: 5 पीएक्स;
सही नाव;
सीमा-चौड़ाई: 0.1em;
सीमा-रंग: # 999;
सीमा-शैली: ठोस;
शीर्ष: 180 पीएक्स;
चौड़ाई: 23%;
}

.पाद {
पृष्ठभूमि-रंग: लाल;
मार्जिन-वाम: 14%;
बाईंओर तैरना;
मार्जिन-टॉप: 5 पीएक्स;
चौड़ाई: 72%;
ऊंचाई: 50 पीएक्स;
सीमा-चौड़ाई: 0.1em;
सीमा-रंग: # 999;
सीमा-शैली: ठोस;
}

और आपके index.php को समान दिखना चाहिए:





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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map