टिप्पणियों के लिए डिजाइन बहुत सरल लग सकता है। और यह है! लेकिन मुझे लगता है कि सरल इस मामले में प्रभावी है। टिप्पणियाँ सीएसएस-ट्रिक्स का ऐसा महत्वपूर्ण हिस्सा हैं जो मैं चाहता हूं कि वे बहुत पठनीय और आरामदायक हों।
अब हम वर्डप्रेस में कूदने जा रहे हैं और इस टिप्पणी को एक वास्तविकता बनाते हैं। पहली चीज़ जो हम करते हैं वह एक टेम्प्लेट है जिसमें हम टिप्पणियों को प्रदर्शित करेंगे। single.phpशायद सबसे महत्वपूर्ण (व्यक्तिगत ब्लॉग पोस्ट) है। हम उस टेम्प्लेट में पाते हैं कि फ़ंक्शन comments_template()सभी है जिसे हमें संपूर्ण टिप्पणियों के क्षेत्र को प्राप्त करने के लिए कॉल करना होगा। अनिवार्य रूप से वह कार्य जो करता है वह है फ़ाइल को प्राप्त करें comments.phpऔर उसे वहां रोक दें। तो, हम उस पर गौर करना शुरू करते हैं।
उस फ़ाइल में कोड के साथ शुरू होता है । यह बहुत उचित है। टिप्पणियाँ निश्चित रूप से एक अनुभाग हैं और इसमें एक पहचानकर्ता होना चाहिए। याद रखें कि हम आईडी के आधार पर कोई स्टाइलिंग नहीं करते हैं, लेकिन आपकी टिप्पणियों के आईडी के साथ एक तत्व में लिपटे होने के कारण अच्छा है:
- आप URL पर #comments जोड़कर टिप्पणियों को हमेशा हैश-लिंक कर सकते हैं।
- जो लोग टिप्पणियों से घृणा करते हैं, वे उन्हें अपने उपयोगकर्ता स्टाइलशीट में एक अनुमान योग्य आईडी के साथ छिपा सकते हैं।
हम इस फाइल में कोड से गुजरते रहते हैं। हम कुछ सामान को हटा देते हैं जो हमें यकीन है कि हम उपयोग करने वाले नहीं हैं। फ़ोटोशॉप में जो हमने डिज़ाइन किया है, उससे मिलान करने के लिए हम कुछ चीजें बदलते हैं।
इसके बाद हम उस फंक्शन में आते हैं, wp_list_comments()जो पूरे कमेंट थ्रेड को थूकने के लिए जिम्मेदार है। फिर यह टिप्पणी फार्म की तरह सामान बाहर थूकने के लिए चला जाता है। सभी समय के दौरान, अलग-अलग स्थितियों में चीजों को दिखाने के लिए तर्क होता है, जैसे कि जब टिप्पणियाँ बंद होती हैं या जब टिप्पणियां खुली होती हैं लेकिन कोई भी नहीं होती है।
हमें एक अजीब सा फंक्शन मिलता है जिसे cancel_comment_reply_link()हम देखते हैं और देखते हैं कि कमेंट फ़ॉर्म को वापस ले जाने के लिए कार्यक्षमता को हैंडल करता है उस मामले में जब तक कि एक रिप्लाई लिंक पर क्लिक नहीं किया गया और फॉर्म बढ़ गया, लेकिन हम नहीं चाहते थे यह करने के लिए।
फिर हम उस HTML में खोदते हैं जो हमें मिलता है wp_list_comments()। कुछ भी किए बिना, हम इस फ़ंक्शन से HTML प्राप्त करेंगे जो पूरी तरह से उचित है। लेकिन यह भी, यह वही है जो हर संभव डिजाइन के अनुकूल नहीं है। व्यक्तिगत रूप से, मैं मार्कअप पर पूर्ण नियंत्रण रखना पसंद करता हूं। इसलिए केवल जो हमें देता है उसे लेने के बजाय, हम अपनी functions.phpफ़ाइल में एक कस्टम फ़ंक्शन का उपयोग करके उस पर नियंत्रण रखते हैं जो डिफ़ॉल्ट मार्कअप को ओवरराइड करता है।
अब जब हमारे पास HTML नियंत्रण है, तो हम थोड़े "डिजाइन मोड" में आ सकते हैं, जहां हम सीएसएस और एचटीएमएल के बीच आगे पीछे उछालते हैं और हमारे डिजाइन को पूरा कर रहे हैं। टिप्पणियाँ सीएसएस, इस परियोजना में सीएसएस के किसी भी अन्य छोटे मॉड्यूलर बिट की तरह, हम एक _comments.scss फ़ाइल को फिर से शुरू करेंगे जिसे हम वैश्विक में शामिल कर सकते हैं। बिल्कुल सही मामला जहां सीएसएस को अपनी फ़ाइल में अलग करना समझ में आता है। हालाँकि, हमें जितनी हो सके उतनी वैश्विक शैलियों का उपयोग करना चाहिए। उदाहरण के लिए, प्रत्येक टिप्पणी निश्चित रूप से एक है .module, शीर्ष लेख शैलियों को नामों के लिए यहां बिल्कुल ठीक होना चाहिए, और सामान्य रूप से टाइपोग्राफी केवल वैश्विक टाइपोग्राफी शैलियों से आना चाहिए।
हम टिप्पणियों के भीतर भी अपने ग्रिड सिस्टम का उपयोग करते हैं क्योंकि प्रत्येक टिप्पणी अनिवार्य रूप से एक दो कॉलम ग्रिड है। अन्य छोटी चीजें पूरी तरह से टिप्पणियों के रिवाज हैं, जैसे हम उत्तर लिंक कहां और कैसे लगाते हैं।
स्क्रैंकेस्ट के अंत में, हम यह पता लगाते हैं कि हमारे फ़ोटोशॉप डिज़ाइन में एक घातक दोष है। नेस्टेड टिप्पणियां एक मूल टिप्पणी के भीतर रहती हैं और हमारे नेस्टेड मॉड्यूल को देखने के लिए बहुत मुश्किल है जैसे कि वे अलग हैं। हमें यहां कुछ समझौता करना पड़ सकता है।