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

आगे जाने से पहले, आइए कुछ उदाहरण देखें:

1. पत्रिका लेखक बॉक्स को तोड़ना

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

2. ProBlogDesign लेखक बॉक्स

Problogdesign पर लेखक बॉक्स बहुत प्रभावशाली लग रहा है। लेखक ग्रेवटर और विवरण बाएं कॉलम में दिखाए जाते हैं जबकि सही कॉलम सामाजिक बुकमार्किंग बटन दिखाता है।

अपने ब्लॉग की थीम के लिए एक लेखक बॉक्स बनाएँ

1. सबसे पहले, सभी लेखकों को वर्डप्रेस प्रशासन क्षेत्र के भीतर प्रदान किए गए "प्रोफाइल लिंक" से अपनी लेखक प्रोफ़ाइल अपडेट करने के लिए प्राप्त करें। लेखक को पहला नाम, अंतिम नाम भरना चाहिए और विवरण फ़ील्ड में एक कस्टम बायो जोड़ना चाहिए। जैसा कि नीचे दिखाया गया है, संबंधित क्षेत्र में लेखक की वेबसाइट का लिंक जोड़ने की भी सिफारिश की जाती है:

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

2. लेखक बॉक्स को दिखाने के लिए, अपनी एकल .php फ़ाइल खोलें और एक अद्वितीय HTML div बनाएं जिसमें लेखक बॉक्स संलग्न होगा। उदाहरण के लिए

यह div बनाया गया है ताकि हम सीएसएस नियम जोड़ सकें और तदनुसार अनुभाग को स्टाइल कर सकें। आप यह कोड डाल सकते हैं जहां आप लेखक बायलाइन प्रदर्शित करना चाहते हैं।
3. अब आपको यह तय करने की आवश्यकता है कि लेखक बायलाइन अनुभाग में आप कौन से तत्व दिखाना चाहते हैं। कुछ पैरामीटर और उनके संबंधित कोड नीचे दिए गए हैं:
1. लेखक का पहला नाम:
यदि आप केवल लेखक का पहला नाम प्रदर्शित करना चाहते हैं, तो उपयोग करें
2. लेखक का अंतिम नाम:
लेखक का अंतिम नाम प्रदर्शित करने के लिए, उपयोग करें
3. पहला नाम और अंतिम नाम दोनों दिखाएं:
उपर्युक्त कोड दोनों को गठबंधन करना और लेखक का पूरा नाम प्रदर्शित करना आसान है। पूरा नाम प्रदर्शित करने के लिए, उपयोग करें
4. अपनी वेबसाइट के लिंक के साथ लेखक का नाम दिखाएं :
आप लेखक का पूरा नाम दिखा सकते हैं और साथ ही नाम को लेखक की वेबसाइट से लिंक कर सकते हैं। उपयोग
5. लेखक विवरण:
लेखक जैव का विवरण दिखाने के लिए, उपयोग करें
6. लेखक की वेबसाइट लिंक प्रदर्शित करें:
लेखक की वेबसाइट यूआरएल प्रदर्शित करने के लिए, उपयोग करें
उपर्युक्त सभी कोड आपकी शैली के अनुरूप अनुकूलित किए जा सकते हैं। नीचे दिए गए अनुसार एचटीएमएल टैग के भीतर आप उपरोक्त कोड को आगे बढ़ा सकते हैं:
7. लेखक Gravatar:
लेखक के Gravatar उपयोग प्रदर्शित करने के लिए
उपरोक्त कोड में उपयोग की गई "80" संख्या छवि के आकार के लिए है। आप इसे और कस्टमाइज़ कर सकते हैं जो इस बात पर निर्भर करता है कि अवतार को कितना बड़ा या कितना छोटा होना चाहिए।
मुझे लगता है कि आपको कोड को कस्टमाइज़ करने का विचार मिल रहा है, जो पूरी तरह से इस बात पर निर्भर करता है कि आप अनुभाग को कैसा दिखाना चाहते हैं।
8. लेखक का ईमेल पता:
लेखक का ईमेल पता प्रदर्शित करने के लिए, उपयोग करें
9. ट्विटर खाते से लिंक करें:
यह थोड़ा मुश्किल है, क्योंकि वर्डप्रेस में डिफ़ॉल्ट रूप से ट्विटर प्रोफाइल के यूआरएल को प्रदर्शित करने के लिए कोई फ़ील्ड नहीं है। हालांकि, एक स्मार्ट वर्कअराउंड है जिसका उपयोग लेखक द्वारा प्रदान किए गए किसी भी कस्टम लिंक या टेक्स्ट को दिखाने के लिए किया जा सकता है।
वर्डप्रेस प्रशासन क्षेत्र में "प्रोफाइल" के तहत एआईएम क्षेत्र में अपने ट्विटर खाते का लिंक जोड़ने के लिए अपने ब्लॉग के लेखकों से पूछें।
अब single.php फ़ाइल पर जाएं और डालें
ट्विटर प्रोफाइल लिंक प्रदर्शित करने के लिए। फिर, यह पूरी तरह से निर्भर करता है कि आप देखो और आउटपुट को कैसे अनुकूलित करते हैं। यहां एक उदाहरण कोड है:
शैली सीएसएस का उपयोग कर अनुभाग अनुभाग 
एक बार कोडिंग नौकरी समाप्त होने के बाद, यह अनुभाग को सुशोभित करने और वस्तुओं को सही तरीके से संरेखित करने का समय है। यहां एक उदाहरण सीएसएस कोड है
 // gravatar // शेष कोड // लेखक बॉक्स समाप्त होता है 
उपरोक्त संरचना को निम्नलिखित चित्र द्वारा सचित्र किया जा सकता है
उपर्युक्त सीएसएस संरचना में, हम तीन div टैग बना रहे हैं। बाहरी div टैग में दो आंतरिक div टैग होंगे जिन्हें क्रमशः "बाएं" और "दाएं" के रूप में नामित किया गया है। "बाएं" div में लेखक gravatar होगा जबकि सही div में लेखक का नाम, जैव और ट्विटर प्रोफ़ाइल लिंक होगा। हम बाएं "div" div को बाएं और दाएं "दाएं" div को संरेखित करेंगे। यहां संपूर्ण कोड और सीएसएस है जिसका उपयोग करने की आपको आवश्यकता है
कोड
अपने एकल.एफ़पी फ़ाइल में निम्न कोड शामिल करें जहां आप लेखक जानकारी अनुभाग दिखाना चाहते हैं:
द्वारा लिखित

सीएसएस
सीएसएस स्टाइलशीट में निम्न कोड शामिल करें
 .authorbox {width: 590px; ऊंचाई: 140 पीएक्स; पृष्ठभूमि: # सीसीसीसी; फ़ॉन्ट-फ़ैमिली: वर्दान; फ़ॉन्ट-आकार: 13 पीएक्स; पृष्ठभूमि-रंग: #FAFAFA; सीमा: 1 पीएक्स ठोस # एफ 0 एफ 0 एफ 0;}। बाएं {फ्लोट: बाएं; चौड़ाई: 100 पीएक्स; ऊंचाई: 100 पीएक्स; मार्जिन: 25 पीएक्स;}। राइट {फ्लोट: बाएं; मार्जिन-टॉप: 25 पीएक्स; चौड़ाई: 425 पीएक्स;} 
नोट: संघर्ष से बचने के लिए अपनी थीम के मौजूदा वर्गों की तुलना करके कक्षा के नामों को बदलने की सलाह दी जाती है।
और यहां उपरोक्त कोड का आउटपुट है
यह ट्यूटोरियल समाप्त होता है। क्या आपने अपने वर्डप्रेस थीम में एक लेखक जानकारी अनुभाग बनाया है? आइए टिप्पणी अनुभाग में अपने विचारों और विचारों को सुनें।