सीएसएस के साथ अपनी वर्डप्रेस वेबसाइट को कैसे अनुकूलित करें: 3 आसान तरीके

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

यह वह जगह है जहाँ कस्टम CSS काम आता है। CSS स्टाइलिंग आपको अपनी वर्डप्रेस वेबसाइट के रंग, स्पेसिंग, फोंट, लेआउट और मूल रूप से हर दूसरे दृश्य तत्व को संपादित करने की अनुमति देता है, जिससे आप इसे ठीक वैसा ही बना सकते हैं जैसा आप चाहते हैं।

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

CSS के साथ अपनी वेबसाइट को Customize क्यों करें?

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

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

शून्य लागत

प्रीमियम थीम और वर्डप्रेस पेज बिल्डर काम में आ सकते हैं, लेकिन वे डॉलर और सेंट में लागत पर आते हैं। कस्टम सीएसएस लिखने के ज्ञान के साथ सशस्त्र, दूसरी ओर, आप बिना किसी अतिरिक्त खर्च के समान प्रभाव प्राप्त कर सकते हैं।

मिनिमल ब्लोट

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

दूसरी ओर, कस्टम CSS लिखते समय, आप केवल आवश्यक सुविधाएँ ही जोड़ेंगे, जिसके परिणामस्वरूप आम तौर पर हल्की वेबसाइटें और तेज़ लोडिंग गति होती है।

CSS के साथ अपनी वर्डप्रेस वेबसाइट को अनुकूलित करने के 3 आसान तरीके

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

विधि 1: वर्डप्रेस कस्टमाइज़र का उपयोग करें

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

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

यहाँ कदम उठाने हैं:

चरण 1: पर जाए सूरत > अनुकूलित करें.

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

चरण 2: पर क्लिक करें अतिरिक्त सीएसएस टैब।

यह बाएँ फलक में एक छोटा सा बॉक्स खोलेगा जहाँ आप अपना कस्टम CSS जोड़ सकते हैं। आप सीएसएस कोड की जितनी चाहें उतनी लाइनें टाइप कर सकते हैं। इस संपादक के बारे में सबसे अच्छी बात यह है कि यह आपके कोड को मान्य करता है, अगर कोई त्रुटि है तो आपको सतर्क करता है।

चरण 3: अपने परिवर्तन प्रकाशित करें।

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

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

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

विधि 2। एक प्लगइन का प्रयोग करें

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

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

• सरल कस्टम सीएसएस

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

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

• सरल कस्टम सीएसएस और जेएस

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

• सीएसएस हीरो

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

विधि 3. रॉ कोड संपादित करें

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

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

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

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

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

क्लिक में समज आगे बढ़ने के लिए।

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

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

कस्टम सीएसएस के साथ अपनी साइट की उपस्थिति पर नियंत्रण रखें

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

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

5 वर्डप्रेस पेज बिल्डर्स जो आपको अद्भुत वेबसाइट बनाने में मदद कर सकते हैं

अपनी वर्डप्रेस साइट को अद्भुत दिखाना चाहते हैं, लेकिन एक डेवलपर का खर्च नहीं उठा सकते हैं? इसके बजाय इन वर्डप्रेस पेज बिल्डरों को आज़माएं।

आगे पढ़िए

लेखक के बारे में