HTML को वर्डप्रेस में बदलना (चरण-दर-चरण)


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


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

फिर भी, वर्डप्रेस की बढ़ती बाजार हिस्सेदारी से पता चलता है कि अधिक से अधिक लोग मंच पर स्विच कर रहे हैं.

2019 में वर्डप्रेस मार्केट शेयर

उनमें से कुछ के लिए, इसका अर्थ है स्थैतिक HTML से वर्डप्रेस पर जाना। यह एक कठिन काम हो सकता है, लेकिन यह पोस्ट यह समझाने की कोशिश करेगी कि इसे कुछ सरल तरीकों से कैसे किया जाए.

नीचे, हम आपको HTML से वर्डप्रेस में परिवर्तित करने के कई तरीके दिखाएंगे। सबसे पहले, आप सीखेंगे कि विभिन्न विकल्प क्या हैं और साथ ही साथ उनके पेशेवरों और विपक्ष भी हैं। उसके बाद, हम आपको दिखाएंगे कि उनमें से प्रत्येक को चरण दर चरण कैसे निष्पादित किया जाए.

चलो जाते रहे.

Contents

स्टैटिक HTML से वर्डप्रेस में जाने के 3 तरीके

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

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

A) HTML को WordPress Theme में Manually Convert कर सकते हैं

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

यह बहुत जटिल नहीं है, खासकर अगर आपको कोडिंग का अनुभव है। आप इसे HTML, CSS और कुछ PHP ज्ञान के साथ खींच सकते हैं। इसका बहुत सारा हिस्सा कॉपी और पेस्ट होता है.

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

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

B) वर्डप्रेस चाइल्ड थीम के माध्यम से वर्डप्रेस को HTML

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

ऐसा करने से आप अपनी पुरानी साइट के लुक को बरकरार रखते हुए वर्डप्रेस का पूरा लाभ उठा सकते हैं। आपको बाद में वर्डप्रेस सुविधाओं को भी नहीं जोड़ना होगा। इसके बजाय, आप एक मौजूदा विषय पर निर्माण कर सकते हैं – कुछ ऐसा जो वर्डप्रेस प्लेटफॉर्म के लिए स्पष्ट रूप से बनाया गया है.

सी) HTML से प्लगइन का उपयोग करके वर्डप्रेस से आयात सामग्री

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

A) HTML को WordPress Theme में Manally Convert कैसे करें

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

चिंता न करें अगर यह डराने वाला लगता है, तो आप देखेंगे कि यह कुछ भी है लेकिन बस कुछ फ़ाइलों और फ़ोल्डरों, साथ ही कुछ कॉपी और पेस्ट, यह सब लेता है.

1. एक थीम फोल्डर और बेसिक फाइल्स बनाएं

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

उसके बाद, कोड संपादक पर जाएं और कई टेक्स्ट फाइलें बनाएं। उन्हें निम्नलिखित नाम दें:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

अभी तक उनके साथ कुछ भी नहीं किया है, संपादक में फाइलें खुली रखें। जल्द ही आपको उनकी आवश्यकता होगी.

2. मौजूदा मौजूदा सीएसएस को वर्डप्रेस स्टाइल शीट में कॉपी करें

अब वर्डप्रेस स्टाइल शीट (फ़ाइल) तैयार करने का समय आ गया हैstyle.css आपने अपनी पुरानी साइट के CSS को इसमें कॉपी करने के लिए बस बनाया)। उसके लिए, फ़ाइल खोलें और निम्नलिखित पेस्ट करें:

/ *
थीम नाम: बीस तेरह
थीम URI: http://wordpress.org/themes/twentythirteen
लेखक: वर्डप्रेस टीम
लेखक यूआरआई: http://wordpress.org/
विवरण: वर्डप्रेस के लिए 2013 की थीम हमें ब्लॉग पर वापस ले जाती है, जिसमें पोस्ट प्रारूपों की एक पूरी श्रृंखला होती है, प्रत्येक को अपने स्वयं के अनूठे तरीके से खूबसूरती से प्रदर्शित किया जाता है। डिजाइन विवरण लाजिमी है, एक जीवंत रंग योजना और मिलान हेडर इमेज, सुंदर टाइपोग्राफी और आइकन और एक लचीले लेआउट के साथ शुरू करना, जो किसी भी डिवाइस पर बड़ा या छोटा दिखता है.
संस्करण: 1.0
लाइसेंस: GNU जनरल पब्लिक लाइसेंस v2 या बाद का
लाइसेंस URI: http://www.gnu.org/licenses/gpl-2.0.html
टैग: काले, भूरे, नारंगी, तन, सफेद, पीले, प्रकाश, एक-स्तंभ, दो-स्तंभ, दाईं-साइडबार, लचीली-चौड़ाई, कस्टम-हेडर, कस्टम-मेनू, संपादक-शैली, चित्रित-चित्र, माइक्रोफ़ॉर्मेट्स, आदि पोस्ट-प्रारूप, आरटीएल-भाषा-समर्थन, चिपचिपा-पद, अनुवाद-तैयार
पाठ डोमेन: बीसवीं

* /

यह तथाकथित स्टाइल शीट हेडर है (महत्वपूर्ण: टिप्पणी छोड़ें नहीं/*...*/ टैग!)। प्रत्येक भाग को इस तरह भरें:

  • थीम का नाम – यहां आपकी थीम का नाम दिया गया है। यह कुछ भी हो सकता है, लेकिन यह आमतौर पर आपके थीम फ़ोल्डर के नाम के समान है.
  • थीम यूआरआई – आप आमतौर पर थीम के होमपेज को यहां पोस्ट करेंगे लेकिन आप अपने स्वयं के साइट पते का उपयोग कर सकते हैं.
  • लेखक – यह आप हैं। अपना खुद का नाम यहां रखें या जिसे भी आप बुलाया जाना चाहते हैं.
  • लेखक यू.आर.आई. – आपके होमपेज का लिंक। यह वही हो सकता है जो आप बना रहे हैं या जो कुछ भी समझ में आता है.
  • विवरण – अपने विषय का एक वैकल्पिक विवरण। यह वर्डप्रेस बैकएंड में दिखाई देगा.
  • संस्करण – अपने विषय का संस्करण। चूंकि आप इसे प्रकाशित नहीं कर रहे हैं, यह वास्तव में मायने नहीं रखता है। हम आमतौर पर 1.0 यहाँ डालते हैं.
  • लाइसेंस, लाइसेंस यूआरआई, टैग – ये चीजें केवल तभी महत्वपूर्ण हैं जब आप अपना विषय प्रस्तुत करने की योजना बना रहे हैं वर्डप्रेस थीम डायरेक्टरी. आप उन्हें इस मामले में छोड़ सकते हैं, हमने उन्हें पूरा करने के लिए शामिल किया.

शीर्ष लेख के बाद, अपने स्थिर HTML वेबसाइट से मौजूदा CSS को कॉपी और पेस्ट करें। फिर, फ़ाइल को अपने नए थीम फ़ोल्डर में सहेजें और इसे बंद करें। बाकी को स्थानांतरित करने का समय.

3. अपने मौजूदा HTML को अलग करें

अगले भाग के लिए, आपको यह समझने की आवश्यकता है कि वर्डप्रेस आमतौर पर अपने डेटाबेस से जानकारी खींचने के लिए PHP का उपयोग करता है। उस कारण से, आपको अपने मौजूदा HTML को अलग-अलग टुकड़ों में काटना होगा ताकि CMS उन्हें ठीक से एक साथ रख सकें.

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

html से वर्डप्रेस उदाहरण पृष्ठ

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





वेबसाइट शीर्षक







वेबसाइट शीर्षक

  • नौसेना आइटम # 1
  • नौसेना आइटम # 2
  • नौसेना आइटम # 3

लेख का शीर्षक

लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। एलिकम सोडेल्स ओर्ना नॉन ओडियो इजेस्टास अस्थाई। ननक वेल वाहनिकुला एं। एटिआम बाईबेंडम इयुकुलिस लिबर्टो, ईगेट मोलेस्टी निसल फेट्रा। इन सपर रेसिस्टैट एस्ट, यूए पोर्टा वेलिट मोलिस एनईसी.

उपशीर्षक

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

उपशीर्षक

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

यदि आपका डिज़ाइन अलग है, तो आपको नीचे दिए गए चरणों को कुछ हद तक समायोजित करना पड़ सकता है। हालाँकि, समग्र प्रक्रिया समान रहती है.

सबसे पहले अपना करंट ओपन करें index.html (आपकी HTML साइट की मुख्य फ़ाइल) उसके बाद, अपनी नई बनाई गई वर्डप्रेस फ़ाइलों के माध्यम से जाएं और उनमें निम्नलिखित को कॉपी करें (नीचे दिए गए उदाहरण मेरे मार्कअप हैं):

header.php

आपकी HTML फ़ाइल की शुरुआत से लेकर मुख्य सामग्री क्षेत्र तक सब कुछ (आमतौर पर संकेत दिया गया है)

या

) इस फाइल में जाता है। इसके अलावा, जहां यह कहता है उससे ठीक पहले, प्रतिलिपि करें और चिपकाएं . यह कई वर्डप्रेस प्लगइन्स को ठीक से काम करने के लिए महत्वपूर्ण है.




वेबसाइट शीर्षक






वेबसाइट शीर्षक

  • नौसेना आइटम # 1
  • नौसेना आइटम # 2
  • नौसेना आइटम # 3

sidebar.php

सब कुछ अनुभाग से संबंधित

उसके बाद, आप के साथ किया जाता है index.html और इसे बंद कर सकते हैं। अपने थीम फ़ोल्डर में अन्य सभी फ़ाइलों को सहेजें और उन्हें छोड़कर बंद करें header.php तथा index.php. आपके पास उनके साथ काम करने के लिए कुछ और काम हैं.

4. “WordPressify” Header.php और Index.php

शीर्ष लेख के लिए, बाईं ओर सभी को HTML से शैली पत्रक के लिए कॉल को वर्डप्रेस प्रारूप में बदलना है। ऐसा करने के लिए, किसी मौजूदा लिंक की तलाश करें अनुभाग। यह कुछ इस तरह लग सकता है:

इसे इसके साथ बदलें:

कूल, अब आप बचा सकते हैं और बंद कर सकते हैं header.php. फिर बारी index.php. यह फिलहाल खाली होना चाहिए। तो, पहले, कोड की इन पंक्तियों को कॉपी और पेस्ट करें:




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

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


अब, बचाओ index.php फ़ाइल और इसे बंद करें। बहुत बढ़िया! आपका मूल विषय तैयार है। अब आप इसे अपनी नई वर्डप्रेस साइट पर जोड़ सकते हैं.

5. एक स्क्रीनशॉट और अपलोड थीम बनाएँ

अब आप एक थीम स्क्रीनशॉट जोड़ेंगे, जो आपकी स्टाइल शीट हेडर की जानकारी के साथ, वर्डप्रेस बैकेंड में आपकी वेबसाइट के पूर्वावलोकन के रूप में काम करेगा.

ऐसा करने के लिए, अपनी मौजूदा साइट को ब्राउज़र में खोलें और अपने पसंदीदा तरीके से स्क्रीनशॉट लें। उसके बाद, अपनी पसंद का इमेज एडिटिंग सॉफ़्टवेयर खोलें और इसे 880 × 660 पिक्सेल पर क्रॉप करें। इसे इस रूप में सहेजें screenshot.png और इसे अपने थीम फ़ोल्डर में जोड़ें। अब आप अपनी थीम अपलोड करने के लिए तैयार हैं.

अपनी WordPress साइट पर नई थीम प्राप्त करने के लिए, आपके पास कई विकल्प हैं। हालाँकि, शर्त यह है कि सभी फ़ाइलें आपके थीम फ़ोल्डर के अंदर रहती हैं.

पहला विकल्प यह है कि इसमें से जिप फाइल बनाई जाए। उसके बाद, अपनी वर्डप्रेस साइट पर जाएं और फिर सूरत> थीम्स. यहाँ, क्लिक करें नया जोड़ें सबसे ऊपर और फिर थीम अपलोड करें.

परिवर्तित विषय अपलोड करें

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

वैकल्पिक रूप से, आप FTP के माध्यम से अपने सर्वर से कनेक्ट कर सकते हैं (या बस अपनी हार्ड ड्राइव पर स्थानीय निर्देशिका पर जाएं) और नेविगेट करें WP-सामग्री / विषयों. फिर, अपने (अनज़ैप्ड) थीम फ़ोल्डर को वहां अपलोड करें। उसके बाद, विषय को पहले की तरह उसी स्थान से सक्रिय करें.

अच्छा! आपकी नई साइट का अगला छोर अब आपकी पुरानी साइट की तरह दिखना चाहिए HTML से वर्डप्रेस तक की चाल को पूरा करने के लिए बाकि सब अपने मौजूदा कंटेंट को इम्पोर्ट करना है मौजूदा वर्डप्रेस थीम का उपयोग करने के बारे में बात करते समय हम इसे और नीचे कवर करेंगे.

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

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

B) वर्डप्रेस चाइल्ड थीम के माध्यम से वर्डप्रेस को HTML

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

तथाकथित बच्चे विषय का उपयोग करके। ये थीम किसी अन्य थीम (पैरेंट) के ऊपर बनाई गई हैं, जो अपने दम पर खड़ी नहीं होती हैं, लेकिन केवल अपनी आवश्यकताओं को पूरा करने के लिए मूल विषय को संशोधित करें। यह करने के लिए काफी आसान है, हालांकि यह जासूसी का एक सा काम करता है.

1. एक उपयुक्त विषय चुनें

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

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

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

2. एक नया फ़ोल्डर बनाएँ

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

बाल थीम बनाते समय, फ़ोल्डर को पैरेंट थीम प्लस के समान नाम देना सामान्य है -बच्चा. इसलिए, चूंकि हमारा बच्चा विषय ट्वेंटी बारह विषय पर आधारित है, इसलिए हम इसकी निर्देशिका कहते हैं twentytwelve वाले बच्चे.

आप जो भी नाम चुनते हैं, बस किसी भी स्थान को शामिल नहीं करना सुनिश्चित करें क्योंकि यह उस तरह से काम नहीं करेगा.

3. स्टाइल शीट सेट करें

चाइल्ड थीम को स्टाइल शीट भी चाहिए। यह एक ऊपर बनाई गई स्टाइल शीट के समान ही काम करेगा। हालांकि, इसमें थोड़ा अलग हेडर है और इसमें कम कोड होगा.

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

/ *
थीम का नाम: ट्वेंटी फिफ्टीन चाइल्ड
थीम यूआरआई: http://example.com/twenty-fifteen-child/
विवरण: बीस पंद्रह बाल थीम
लेखक: जॉन डो
लेखक यूआरआई: http://example.com
साँचा: बारहवीं
संस्करण: 1.0.0
लाइसेंस: GNU जनरल पब्लिक लाइसेंस v2 या बाद का
लाइसेंस URI: http://www.gnu.org/licenses/gpl-2.0.html
टैग: प्रकाश, अंधेरा, दो-स्तंभ, राइट-साइडबार, उत्तरदायी-लेआउट, पहुंच-तैयार
पाठ डोमेन: बीस-पंद्रह-बच्चे
* /

जैसा कि आप देख सकते हैं, यह एक अपवाद के साथ आपके द्वारा उपयोग किए जाने वाले स्टाइल शीट हेडर के समान है: इसमें यह शामिल है खाका टैग.

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

4. Functions.php और Inherit जनक शैलियाँ बनाएँ

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

इसे बदलने के लिए, आपको सबसे पहले माता-पिता की शैलियों को इनहेरिट करना होगा और उसके लिए, आपकी आवश्यकता है functions.php. यह फ़ाइल किसी भी वर्डप्रेस इंस्टॉलेशन का एक महत्वपूर्ण हिस्सा है और आपको अपनी वेबसाइट में व्यापक बदलाव करने की अनुमति देता है.

हालाँकि, इस मामले में, आप इसका उपयोग केवल माता-पिता की स्टाइल को कॉल करने के लिए करेंगे। उसके लिए, एक नई फ़ाइल बनाएं और उसे कॉल करें functions.php. पहली चीज जो आप बहुत शुरुआत में जोड़ेंगे वह यह है:

PHP टैग खोलने के साथ, फ़ाइल सैद्धांतिक रूप से तैयार है लेकिन यह अभी तक कुछ भी नहीं करता है। इसलिए, इसके अतिरिक्त आपको यह इनपुट देना होगा:

फ़ंक्शन चाइल्ड_थीम_नेक्स्ट_स्टाइल्स () {

$ parent_style = 'parent-style';

wp_enqueue_style ($ parent_style, get_template_directory_uri ()। '/style.css');
wp_enqueue_style ('बाल-शैली',
get_stylesheet_directory_uri ()। '/Style.css',
सरणी ($ parent_style),
wp_get_theme () -> प्राप्त ( 'संस्करण')
);
}
add_action ('wp_enqueue_scripts', 'child_theme_enqueue_styles');

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

5. बाल थीम को सक्रिय करें

इस बिंदु पर, बच्चा विषय सक्रिय होने के लिए तैयार है.

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

दोनों ही मामलों में, जब आप थीम को सक्रिय करते हैं, तो आपकी साइट को अब इसके माता-पिता के समान दिखना चाहिए.

6. डिजाइन को समायोजित करें

यहाँ पर उपर्युक्त जासूसी का काम शुरू होता है। अब मौजूदा थीम के डिज़ाइन को बदलने का समय आ गया है ताकि यह आपकी मूल HTML साइट जैसा दिखे.

उदाहरण के लिए, पहली चीज़ जो बाहर खड़ी होती है, वह यह है कि हमारा वर्डप्रेस थीम हेडर के ऊपर और पाद लेख के नीचे जगह जोड़ता है जो कि हमारी HTML साइट पर नहीं है.

html से बाल विषय उदाहरण पेज के माध्यम से वर्डप्रेस

इसे मापने के लिए, हम अपने साथ HTML साइट को देख सकते हैं ब्राउज़र डेवलपर उपकरण मार्कअप को खोजने के लिए जिम्मेदार है। जब हम ऐसा करते हैं, तो हम इसका सामना करते हैं:

तन {
मार्जिन: 0;
}

फिर, हम अपनी नई वर्डप्रेस थीम के साथ ऐसा ही करते हैं जहां हमें ये शैलियाँ मिलती हैं:

शरीर .site {
मार्जिन-टॉप: 48px;
मार्जिन-टॉप: 3.428571429rem;
मार्जिन-नीचे: 48px;
मार्जिन-बॉटम: 3.428571429rem;
}

मेरा उद्देश्य अब HTML साइट से वर्डप्रेस थीम पर स्टाइल लागू करना है। इस स्थिति में, हम इसे अपने बच्चे के विषय में निम्नलिखित जोड़कर प्राप्त कर सकते हैं style.css:

शरीर .site {
मार्जिन: 0 ऑटो;
}

सहेजने के बाद, वर्डप्रेस थीम पर नई शैली लागू होती है:

HTML से बाल विषय के माध्यम से वर्डप्रेस संपादित उदाहरण पृष्ठ

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

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

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

सी) HTML से प्लगइन का उपयोग करके वर्डप्रेस से आयात सामग्री

अंत में, HTML से वर्डप्रेस पर जाने की सूची में एक मौजूदा विषय का उपयोग किया जा रहा है और बस अपनी सामग्री को अपने HTML साइट से माइग्रेट करना है। यह सबसे आसान तरीका है - आपको अपनी पसंद की थीम को स्थापित और सक्रिय करना होगा (हम मानते हैं कि आप जानते हैं कि अब तक कैसे करें) और फिर नीचे दिए गए चरणों का पालन करें.

वैसे, हालांकि यह प्रक्रिया बहुत कठिन नहीं है, फिर भी ऐसी चीजें हैं जो गलत हो सकती हैं। उस कारण से, सुनिश्चित करें कि आप इसके साथ जाने से पहले अपनी वर्डप्रेस साइट का बैकअप लें.

1. इंपोर्ट प्लगिन इंस्टॉल करें

पहली चीज जो आपको करने की ज़रूरत है वह है प्लगइन स्थापित करना HTML आयात 2. इसे प्राप्त करने का सबसे आसान तरीका है प्लगइन्स> नया जोड़ें और नाम से इसे खोजें। जब आप इसे सूची में पाते हैं (यह आगे से नीचे तक हो सकता है), पर क्लिक करें अभी स्थापित करें. जब यह पूरा हो जाए तो इसे सक्रिय करें.

html से wordpress import plugin

2. आयात तैयार करें

कई पृष्ठों को एक ही बार में आयात करने के लिए, आपको उन्हें उसी सर्वर पर अपलोड करना होगा जैसे कि आपका वर्डप्रेस इंस्टॉलेशन। प्लगइन कुछ इस तरह का प्रस्ताव देगा एचटीएमएल-फ़ाइलें करने के लिए आयात  फ़ोल्डर का नाम लेकिन आप जो चाहें चुन सकते हैं। बस pathname याद रखना सुनिश्चित करें.

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

फ़ाइलें

HTML आयात करने के लिए फ़ाइलें

इस स्क्रीन को निम्नानुसार कॉन्फ़िगर करें:

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

सामग्री

सामग्री के तहत, आपको उस HTML टैग को कॉन्फ़िगर करना होगा जिसमें आपकी साइट सामग्री हो.

html से वर्डप्रेस आयात सामग्री

ऐसा करने के लिए, विकल्प चुनें HTML टैग शीर्ष पर। फिर टैग को निम्नलिखित तीन क्षेत्रों में कॉन्फ़िगर करें। उदाहरण के लिए, यदि आपकी सामग्री नामक टैग में निहित है

, आपके द्वारा दी जाने वाली जानकारी div, आईडी तथा मुख्य.

इस पृष्ठ की अन्य सेटिंग्स स्व-व्याख्यात्मक होनी चाहिए और आपको छवियों, दस्तावेजों को आयात करने, आंतरिक लिंक को अपडेट करने, और बहुत कुछ करने में सक्षम बनाती हैं.

शीर्षक और मेटाडेटा

html वर्डप्रेस आयात शीर्षक और मेटाडाटा के लिए

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

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

यह महत्वपूर्ण है कि आप यह तय करें कि अपनी पुरानी सामग्री जैसे पोस्ट या पेज आयात करें या नहीं। बाकी बल्कि स्व-व्याख्यात्मक है और आपको नए पृष्ठों के लिए वर्डप्रेस सेटिंग्स को कॉन्फ़िगर करने देता है.

कस्टम फील्ड्स

HTML कस्टम फ़ील्ड आयात करने के लिए

यदि आपके पास कोई डेटा है जिसे कस्टम फ़ील्ड में आयात करने की आवश्यकता है, तो आप इसे यहां कॉन्फ़िगर कर सकते हैं.

श्रेणियाँ और टैग

HTML से वर्डप्रेस आयात श्रेणियों और टैग

यहां आप अपनी आयातित सामग्री में श्रेणियां, टैग और पोस्ट प्रारूप निर्दिष्ट कर सकते हैं। प्लगइन इस कदम को आसान बनाने के लिए आपकी साइट पर मौजूदा वर्गीकरण को दिखाएगा.

उपकरण

html से वर्डप्रेस आयात उपकरण

यह स्क्रीन HTML से वर्डप्रेस को सफलतापूर्वक आयात करने के लिए कई उपयोगी उपकरणों को सूचीबद्ध करती है.

3. आयात शुरू करें

एक बार जब आप कर लेते हैं, तो सेटिंग्स को सहेजें। यह सक्षम करेगा फ़ाइलें आयात करें बटन। आरंभ करने के लिए इसे क्लिक करें.

html से वर्डप्रेस इम्पोर्ट होता है

(नोट: आप यहां से भी जा सकते हैं उपकरण> आयात और फिर उठा चलाने वाला रिपोर्टर के नीचे एचटीएमएल विकल्प।)

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

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

अतिरिक्त कदम

यदि आप उसी जगह पर वर्डप्रेस साइट को तैनात करने की योजना बनाते हैं जहां स्थिर HTML वेबसाइट हुआ करती थी, तो खत्म होने से पहले कुछ और चीजें करनी होंगी।.

पहला यह है कि अपने नए आयातित पोस्टों और पृष्ठों के URL की जांच करें ताकि यह सुनिश्चित हो सके कि वे खोज इंजन के अनुकूल हैं (यानी उन कीवर्ड को शामिल करें जिन्हें आप रैंक करना चाहते हैं)। यह बहुत सरल है - बस एक पृष्ठ या पोस्ट पर जाएं और शीर्षक के नीचे URL देखें.

html के बाद permalinks को wordpress import में जाँचें

इसे बदलने के लिए, क्लिक करें संपादित करें दाईं ओर, URL को अपनी पसंद में बदलें, और हिट करें ठीक है.

दूसरी बात यह है कि पुराने URL से नए पर पुनर्निर्देश लागू करना है। इस तरह, आप मौजूदा एसईओ मूल्य से बाहर नहीं हटेंगे.

यदि आपने HTML प्लगइन में पुराने साइट पते को भर दिया है, तो यह आपके लिए रीडायरेक्ट कोड बनाएगा। आप इसे फ़ाइल में कॉपी और पेस्ट कर सकते हैं.इनको यह आपके सर्वर पर रहता है (आमतौर पर रूट डायरेक्टरी में).

आप इसे एफ़टीपी के माध्यम से एक्सेस करते हैं, हालांकि, आपको छिपी हुई फ़ाइलों को देखने में सक्षम करना पड़ सकता है क्योंकि यह डिफ़ॉल्ट रूप से दिखाई नहीं देता है। फिर संपादित करें .इनको और नियमों को इनपुट करें.

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

क्या आपने HTML से वर्डप्रेस में सफलतापूर्वक स्थानांतरित किया?

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

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

  • WordPress step by step Customize करें
  • अपनी साइट को HTTP से HTTPS में स्थानांतरित करें
  • WordPress में कस्टम फोंट जोड़ें
  • अपनी वर्डप्रेस वेबसाइट को गति दें
  • अपनी वर्डप्रेस साइट पर एक संपर्क फ़ॉर्म जोड़ें

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

क्या आपने अपनी साइट को 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