WordPress Blog में Custom CSS use करने की Complete Guide

आप custom CSS को use करके अपने WordPress ब्लॉग या website को दिखने में जैसा चाहें वैसे बना सकते हैं. इस आर्टिकल में हम यही जानेंगी की यदि आपको CSS की knowledge है तो आप इसे अपने WordPress ब्लॉग पर कैसे implement कर सकते हैं.

यदि आप CSS के बारे में नहीं जानते, तो आप हमारा पहले publish किया जा चूका एक पोस्ट पढ़ सकते हैं, जिसके second section में हमने CSS के बारे में जानकारी दी है.

आप WordPress में custom CSS का प्रयोग केवल तभी कीजिये, यदि आपको CSS की थोरी-बहुत जानकारी हो. इसलिए शुरू करने से पहले main आपको recommend करूँगा कि आप CSS के बारे में जानने. यदि आप CSS सीखना चाहते हैं, तो W3Schools सबसे बढ़िया है.

CSS सीखने के लिए आप नीचे दी गयी video series को भी देख सकते हैं:

By default, जो भी theme की designing आप WordPress website में देखते हैं, वे pre-defined CSS कीई बदौलत होती है जोकि आपकी theme का developer theme files में ही set करता है.

लेकिन आप उन CSS rules को Custom CSS को use करके override कर सकते हैं या अपनी खुद की कुछ नईं CSS propertiees को add कर सकते हैं.

तो चलिए जानते हैं कि आप…

WordPress में Custom CSS कैसे add करें?

WordPress में custom CSS को add करने के लिए नीचे दिए गए steps को follow कीजिये:

अपने WordPress के Dashboard के अन्दर left pane में, Appearance > customize में जाईये, जैसा की नीचे दिए गए screenshot में दिखाया गया है.

अब आपके सामने WordPress की customize window open होगी, जिसमे आप अपने WordPress blog की designing से जुड़े अलग-अलग options को manage कर सकते हैं और ज़्यादातर WordPress users इस window से familiar ही होंगे.

इसमें आपको Additional CSS का एक option दिखेगा, जैसा कि ऊपर दिए गए screenshot में highlight भी किया गया है. आपको इस पर click करना है.

यदि आप इसको first time open करेंगे, तो आपके सामने कुछ ऐसी window open होगी, जिसमे कुछ basic instructions भी दी होंगी.

मैं आपको recommend करूँगा कि आप इन basic instructions को ध्यान से समझें और फिर ही शुरू करें. जब आपको ये screen समझ लग जाये तो instructions को close कर दें और नीचे जो window होगी उसमे आप अपनी खुद की कोई भी CSS property लगा सकते हैं. CSS properties आपको selectors के साथ जिस window में लिखनी है, वह नीचे highlight की गयी है.

तो जैसे ही आप कोई CSS property completely add करेंगे, वो साथ के साथ ही आपकी साईट पर apply हो जाएँगी, और उसका result आपको right में खुले आपके website page पर दिखेगा, क्योंकि ये एक Live customize window है.

चलिए मैं आपको example के तौर पर एक CSS property add करके दिखता हूँ. यदि आप CSS जानते हैं, तो आपको पता होगा, कि CSS properties पर style लगाने के लिए, आपको selectors का use करना होता है. Selectors HTML elements की reference में IDs, Classes, tags आदि होते हैं.

अब मान लीजिये, कि आप चाहते हैं की आपकी साईट का Logo गायब हो जाये. तो मैं आपको ऐसा custom CSS का प्रयोग करके दिखाता हूँ. सबसे पहले मुझे अपनी website के logo का selector पता होना चाहिए. अलग-अलग theme के हिसाब से selectors अलग-अलग हो सकते हैं. तो सबसे पहले काम होगा कि आप selector का पता लगायें.

WordPress में CSS selectors कैसे find करें?

जिस भी element का selector find करना हो, उसपर right click कीजिये, और फिर inspect element के option पर क्लिक कीजिये, जैसा कि screenshot में दिखाया गया है.

उसके बाद आपके सामने कुछ complicated सी दिखने वाली window open हो जाएगी, जैसा कि नीचे दिए गए screenshot में दिखाया गया है. इसमें आपको सही selector को ढूँढना है. यह काम थोरा ध्यान देने वाला है, लेकिन यदि आप CSS की knowledge रखते हैं तो आपको selector कुछ ही seconds में मिल जायेगा. जैसा कि अभी मुझे मेरी theme के logo का selector class के रूप में मिल गया है जो है, shoutmeloud_logo_class.

तो इस तरह से आप अपने WordPress blog के किसी भी page के किसी भी HTML element का CSS selector ढूंढ सकते हैं.

आप customizer window के WordPress website के किसी भी page के लिए open कर सकते हैं. जैसा कि नीचे screenshot में दिखाया गया है कि मैंने एक WordPress पोस्ट open किया है, तो यदि मैं WordPress के डैशबोर्ड में login हूँगा, तो आप ऊपर के बार में customize का ये option देख पाएंगे.

तो चलिए अब मैंने जो logo के लिए selector ढूंडा है, उसको use करके logo को गायब करते हैं.

इसके लिए मुझे custom CSS वाली window में ये code type करना होगा:

.shoutmeloud_logo_class {

display : none;

}

तो हिसा कि आप ऊपर दिए गए screenshot में देख सकते हैं, जैसे ही मैंने ये code लिखा, logo गायब हो गया. यदि आप ऐसे CSS add करके changes को save करना चाहते हैं, तो आपको बस ऊपर दिए गए publish के button पर क्लिक करना होगा. तो आपके changes save हो जायेंगे, और सभी visitors के लिए apply होंगे.

तो इस तरीके से आप कोई भी CSS property का उपयोग करके, अपनी WordPress website या blog के design में किसी भी तरह का बदलाव कर सकते हैं.

मुझे बताईये यदि आपके इस पोस्ट के सम्बंधित कोई भी प्रश्न आपके मन में है?

हमारे पोस्ट के प्रति अपनी प्रसन्नता और उत्त्सुकता को दर्शाने के लिए कृपया इस पोस्ट को Social Networks जैसे कि Facebook, Google+ और Twitter इत्यादि पर share कीजिये.

हमारे अन्य articles भी ज़रूर पढ़ें:

• WordPress में Social Media Sharing Buttons कैसे Display करे: Top 5 plugins
• अपने blog का loading time कैसे कम करें?
• अपने Blog में Wikipedia के जैसा Table of Contents कैसे add करें?
• HTML, CSS, PHP क्या हैं और आपके लिए इनका क्या use है?

ऐसे ही और informational Posts पढ़ते रहने के लिए और नए blog posts के बारे में Notifications प्राप्त करने के लिए हमारे Subscribe कीजिये.

इस blog पोस्ट से सम्बंधित किसी भी तरह का प्रश्न पूछने के लिए नीचे comment कीजिये.