अब हमारे पास स्निपेट्स क्षेत्र के मुखपृष्ठ के लिए काम करने के लिए एक फ़ोटोशॉप डिज़ाइन है। यह पहले की तुलना में बहुत अधिक ब्राउज़-सक्षम है, लेकिन इंद्रधनुष भावना को रखता है जो पहले थी। अब हम वास्तव में इसे अपने WordPress टेम्पलेट्स में बना सकते हैं। सभी HTML और PHP और CSS लिखना और आप ड्रिल जानते हैं!
चरण एक हमारे कस्टम हेडर पर बढ़ रहा है जिसे हमने अपने स्थिर डिजाइन में जाने के लिए तैयार किया था। इसका मतलब है कि सही रैपर तत्वों को बदलने के लिए थोड़ा HTML के आसपास बदलना। इसका मतलब यह भी है कि यह सुनिश्चित करने के लिए कि इस क्षेत्र में सीएसएस विशिष्ट लोड करने के लिए हेडर में सशर्त तर्क है। यह हमेशा मुझे 1, 2, या 3 नियम के बारे में सोचता है जो मेरे पास किसी भी वेबसाइट पर CSS फाइलों और जावास्क्रिप्ट फ़ाइलों के लिए हैं। CSS-Tricks "2" वेबसाइट का एक आदर्श उदाहरण है, जहां हमारे पास वैश्विक शैली है और साइट के प्रत्येक विशेष खंड के लिए एक सीएसएस है, जहां यह स्टाइल के लिए काफी अलग है। यह स्निपेट्स लेआउट निश्चित रूप से अद्वितीय है।
इस पृष्ठ पर सभी आउटपुट प्राप्त करने के लिए जिसकी हमें आवश्यकता है, हम wp_list_pages () कॉल का एक गुच्छा फिर से उपयोग करते हैं। हम इस बारे में बात करते हैं कि यह समस्याग्रस्त कैसे हो सकता है क्योंकि यह इस तरह की एक गहन कॉल है और जब हमने पंचांग क्षेत्र बनाया था, तो हमें इसके साथ समस्या थी। हालाँकि, चूंकि हमने अपनी मेमोरी का उपयोग बढ़ा दिया है और कैशिंग का उपयोग कर रहे हैं, इसलिए यह कोई बड़ी बात नहीं है।
हम पृष्ठ पर आउटपुट और एक बहुत ही मूल ग्रिड सेट करने की आवश्यकता वाले सभी चीज़ों के साथ पेंचकस को समाप्त करते हैं। अब हम इसे अपने मॉकअप की तरह बना सकते हैं और अंत में बातचीत को जोड़ सकते हैं।