Without Plugin WordPress Site Me Code Box Kaise Lagaye

यदि आप अपने wordpress blog में blogging related tutorial post publish करते हैं तो आपके लिए ये post helpful हो सकती है। क्योंकि आज हम आपको बताने वाले हैं कि WordPress Blog में Code box कैसे add करते हैं। यदि आपके blog पर ऐसी पोस्ट share की जाती हैं जिसमें readers के लिए कुछ coding provide की जाती है तो आपको अपने wordpress ब्लॉग में code box लगाना पड़ता है, जहाँ से readers आसानी से उस कोड को copy कर सके।

कुछ समय से बहुत से blogger की requirement थी कि आप इस topic पर post लिखिए जिससे में भी अपनी website में code box add कर सकूँ।

वैसे WordPress site में code box लगाने के लिए बहुत सारी plugins मिल जातीं हैं जिनकी मदद से website में इस तरह का box आसानी से लगा सकते हैं और अपनी post में जरूरत पड़ने पर code box show कर सकते हैं।

लेकिन हम सब जानते हैं कि ब्लॉग पर ज्यादा plugins install करने से ब्लॉग की loading speed खराब होती है और security risk भी बढ़ जाती है।

Read Also: WordPress में User Registration Disable रखना क्यों जरुरी है

इसलिए हमें अपनी website में ज्यादा plugins use करने से बचना चाहिए। इसलिए में आपको यहाँ without plugin के wordpress website में code box add करने के बारे में आगे बताउँगा।

इस code box की सबसे बड़ी खास बात ये है कि ये सिर्फ CSS coding से बना हुआ है, जो किसी भी पोस्ट में बहुत ही fast show होता है। जिससे loading speed भी खराब नहीं होती और बढ़िया code box भी अपने ब्लॉग में आसानी से लग जाता है।

Read Also: WordPress Site में Message Box कैसे add करते हैं

बिना Plugin के WordPress Blog में Code Box कैसे add करते हैं ?

यदि आप अपनी wordpress site में कोड बॉक्स लगाना चाहते हैं तो नीचे बताये गए steps को follow कीजिये –

Step – 1

सबसे पहले अपना WordPress Dashboard open कर लीजिए।

1. Appearance पर जाइये।
2. अब Editor पर क्लिक कीजिए।

Step – 2

अब आपके सामने आपकी WordPress theme की style.CSS file open हो जाएगी।

1. 1. नीचे दिया गया code CSS file में सबसे आखरी (last) में paste कर दीजिए।

 code,pre{-webkit-user-select:text;overflow:auto;
font-size:smaller;font-family:monospace;color:#333}
pre{resize:auto;padding:1em!important;
white-space:pre-wrap;word-wrap:break-word;
border:1px solid #d47300;
border-left:5px solid #d47300;
font-style:italic!important}

2. इसके बाद Update file बटन पर क्लिक करके coding को save कर दीजिए।

अब आपका code box आपके blog में successfully लग चुका है। लेकिन अभी ये आपकी posts में show नहीं होगा।

Read Also: Feedburner में Short Post कैसे Set करते हैं

WordPress post में code box कैसे show करते हैं ?

जब आप पोस्ट लिखते हैं और उसमें code बॉक्स show करना चाहते हैं तो आपको एक छोटे से shortcode का use करना पड़ेगा।

जब आप पोस्ट लिखें तो html view में जायें और नीचे दिया गया shortcode वहाँ paste करें जहाँ आप अपनी post में कोड बॉक्स दिखाना चाहते हैं –

<pre> your code here </pre>

अब उन website पर एक problem जरुर आती है, जिन पर Text copy नहीं होते। मतलब कुछ blogs पर post चोरी रोकने के लिए content को protected किया जाता है जिससे हमारे ब्लॉग का कोई भी Text content कोई copy ना करे। सीधे शब्दों में कहें तो select & copy को disable किया जाता है। जिसका उपयोग हम अपने भी इस website पर करते हैं।

Read Also: अपने blog में Stylish Social Media Follow Buttons कैसे लगायें

Content Protected Blog पर code Box वाले कोड को copy करने लायक कैसे बनायें ?

अब यदि आपने भी अपने blog पर text copy को disable कर रखा है और आप इस code box को लगायेंगे तो आपके visitors बॉक्स में दिए गए कोड को भी copy नहीं कर पाएंगे।

लेकिन इसकी tension अब हम आपको नहीं लेने देंगे क्योंकि आपको इसका भी solution दे रहे हैं। जिससे आपके blog के content copy नहीं होंगे लेकिन code box में दिए गए कोड को कोई भी reader आसानी से copy कर पायेगा।

जैसा आप मेरी इस site पर देख सकते हैं कि कोई भी content copy नहीं होता लेकिन box में दिया गया code आसानी से user copy कर पाते हैं।

इसके लिए नीचे बताये गए points को follow कीजिये –

1. Appearance पर जाइये।
2. अब Editor पर क्लिक कीजिए।
3. अब style.CSS file में सबसे last में नीचे दिया गया code paste कर दीजिये।

.pre {
    -webkit-user-select: text;
}

4. इसके बाद Update file बटन पर click करके code save कर दीजिये।

तो मेरे blogger दोस्तों इस तरह से आप अपने ब्लॉग में कोड बॉक्स लगा सकते हैं। यदि आपका blog पर copy disable है तब भी बॉक्स वाला code कोई भी reader copy कर पायेगा।

Read Also: WordPress site में किसी भी sidebar widget को Fix कैसे करते हैं

मुझे आशा है आपने भी अपने wordpress blog में code box add कर लिया होगा। यदि फिर भी आपको कोई problem आये तो उसे comment करके पूछ सकते हैं, और यदि आप अपने email पर free में इसी तरह की पोस्ट पाना चाहते हैं तो इस website को subscribe कर लीजिए। लेकिन इस post को अपने social media friends के साथ share जरूर कर दें।