अतीत में, हमने आपको दिखाया है कि लाइटबॉक्स प्रभाव के साथ वर्डप्रेस में एक गैलरी कैसे जोड़नी है। यह लेख केवल वर्डप्रेस कार्यक्षमता की सतह को कवर करता है हाल ही में, हमारे पास ग्राहक था जो हमें मासिक एल्बम द्वारा आयोजित एक फोटो गैलरी बनाना चाहता था। वे चाहते थे कि उपयोगकर्ता उस महीने के एल्बम में सूचीबद्ध सभी पोस्ट देखने के लिए एल्बम फ़ोटो पर क्लिक कर सकें। फोटोग्राफर और उनके यूआरएल के बारे में जानकारी के साथ प्रत्येक तस्वीर का अपना व्यक्तिगत पृष्ठ होना चाहिए। आम तौर पर लोग इस तरह कुछ पूरा करने के लिए अगली पीढ़ी गैलरी या अन्य जैसे प्लगिन का सहारा लेंगे। हम एक तीसरे पक्ष के प्लगइन का उपयोग करने से बचने के लिए चाहते थे इसलिए हमने कोर-कार्यक्षमता का उपयोग करने का फैसला किया जो वर्डप्रेस कुछ काम करने के लिए ऑफर करता है इस आलेख में, हम आपको एक प्लगइन के बिना वर्डप्रेस में एक मासिक फोटो एलबम गैलरी कैसे बना सकते हैं।

नोट: यह एक अपेक्षाकृत उन्नत ट्यूटोरियल है जो बहुत सारे वर्डप्रेस अवधारणाओं को एक साथ लाता है। इस का पालन करने के लिए आपको वर्डप्रेस और एचटीएमएल / सीएसएस का उचित ज्ञान होना चाहिए।

अपडेट: हमने एक नया ट्यूटोरियल लिखा है, जो हमने बनाया एक प्लगइन का उपयोग करता है, Envira Gallery, इसलिए यह सुपर फास्ट और उपयोग में आसान है यदि आप शुरुआत कर रहे हैं या बस कोड से निपटना नहीं चाहते हैं तो यह ट्यूटोरियल देखें।

हम क्या करने की कोशिश कर रहे हैं:

इससे पहले कि हम शुरू करें, अंतिम परिणाम क्या दिखते हैं, इस पर नज़र डालें:

जब उपयोगकर्ता एल्बम पेज पर क्लिक करता है, तो वे ग्रिड डिस्प्ले में एक अभिलेखीय दृश्य देखेंगे जहां प्रत्येक एल्बम इसके अलग-अलग कवर और उसके सभी फ़ोटो के साथ शुरू होगा। इस विचार में प्रति माह एक एल्बम होना था।

यदि उपयोगकर्ता एल्बम के कवर फ़ोटो पर क्लिक करता है, तो उन्हें उस एल्बम के लिए एक पृष्ठ पर ले जाया जाएगा, जहां आप उपयोगकर्ता को कुछ पृष्ठभूमि जानकारी दे सकते हैं और साथ ही उस एल्बम में सभी फ़ोटो को सूचीबद्ध कर सकते हैं।

अगर उपयोगकर्ता फोटो पर क्लिक करता है, तो उन्हें एकल फोटो पृष्ठ पर ले जाया जाएगा, जहां वे फोटो का शीर्षक देखेंगे। फोटोग्राफर का नाम और उनकी साइट का यूआरएल

हम इसे कैसे बनायेंगे?

जैसा कि आप उपरोक्त वर्णन से देख सकते हैं, आवश्यक सभी सुविधाएं अंतर्निर्मित वर्डप्रेस कार्यक्षमता का उपयोग करके किया जा सकता है। हम प्रत्येक मासिक एल्बम को एक पोस्ट के रूप में इलाज कर सकते हैं, इसलिए प्रत्येक एल्बम को कुछ पृष्ठभूमि जानकारी आदि के साथ अपना एकल पृष्ठ हो सकता है। प्रत्येक छवि को लगाव के रूप में माना जाएगा (इस प्रकार यह स्वयं का एकल पृष्ठ प्राप्त कर रहा है)। हम एल्बम कवर फ़ोटो के लिए अंतर्निहित विशेषीकृत थंबनेल का उपयोग करेंगे। आप डिफ़ॉल्ट पोस्ट का उपयोग कर सकते हैं, यदि पूरी साइट का उद्देश्य यह फोटो एल्बम गैलरी है, लेकिन अगर आपके पास एक ब्लॉग भी है, तो इसे कस्टम पोस्ट प्रकार में बनाया जाना चाहिए।

एक फोटो एल्बम गैलरी बनाने की सुविधा देता है

आपको सबसे पहले करना चाहिए एक साइट-विशिष्ट प्लगिन (या यहां तक ​​कि किसी प्रोजेक्ट-विशिष्ट प्लग इन) को बनाना।

यदि आप अपने प्रोजेक्ट के लिए कस्टम पोस्ट प्रकार का उपयोग करने जा रहे हैं, तो आपको कोड बनाना चाहिए और इसे अपनी साइट-विशिष्ट प्लग इन में पेस्ट करना चाहिए। आप हमारे वीडियो को कैसे कस्टम पोस्ट प्रकार बनाने के लिए देख सकते हैं

ग्रिड डिस्प्ले के लिए वर्डप्रेस में अतिरिक्त छवि आकार रजिस्टर करना आवश्यक है।

उदाहरण होगा:

add_image_size ('एल्बम-ग्रिड', 225, 150, सच); 

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

वर्डप्रेस मीडिया अपलोडर को अतिरिक्त फ़ील्ड कैसे जोड़ें

एक बार जब आप ऐसा करते हैं, तो आगे बढ़ें और कुछ एल्बम (पोस्ट) जोड़ें। उन सभी छवियों को अपलोड करें, जिन्हें आप उस एल्बम से जोड़ना चाहते हैं। फिर एक विशिष्ट कवर फ़ोटो संलग्न करें और इसे एक विशेष छवि के रूप में सेट करें आप पोस्ट की सामग्री क्षेत्र में पृष्ठभूमि जानकारी जोड़ सकते हैं

अब जब आपके बैकएंड में कुछ एल्बम हैं, तो कोड को इसे प्रदर्शित करने दें।

मान लीजिए कि आपके कस्टम पोस्ट प्रकार को एल्बम कहा जाता है। तो आप एक टेम्प्लेट फ़ाइल बनायेंगे जिसे नाम दिया गया है संग्रह-albums.php । हेडर कोड, पाद लेख, साइडबार और अन्य डिज़ाइन तत्वों को चिपकाएं जिन्हें आप चाहते हैं। पोस्ट लूप बनाएं उस पोस्ट लूप के अंदर, हम थंबनेल को छोड़कर किसी भी पोस्ट से सभी अटैचमेंट प्रदर्शित करने जा रहे हैं जो एकल छवि पृष्ठ से लिंक होगा। हम अलग-अलग फीचर्ड पोस्ट थंबनेल (एल्बम कवर फोटो) को भी अलग से जोड़ देंगे और उस लिंक को एक एकल पोस्ट पेज (एल्बम पृष्ठ) पर लिंक करेंगे।

हमने सूची तत्व का उपयोग करते हुए ग्रिड छवियों को शैली देने का निर्णय लिया। कोड इस तरह दिखता है:

“शीर्षक =” “>

पोस्ट_प्रकार == ‘एल्बम’ && $ post-> पोस्ट_स्टेटुस == ‘प्रकाशित करें’) {
$ संलग्नक = get_posts (सरणी (
‘पोस्ट_प्रकार’ => ‘अनुलग्नक’,
‘Posts_per_page’ => -1,
‘Post_parent’ => $ post-> आईडी,
‘बाहर करें’ => मिलते-पेस्ट_ थंबनेल_आईडी ()
));

अगर ($ संलग्नक) {
विदेशी मुद्रा ($ संलग्नक के रूप में $ संलग्नक) {
$ वर्ग = “पोस्ट-अटैचमेंट माइम-” sanitize_title ($ attachment-> post_mime_type);
$ शीर्षक = wp_get_attachment_link ($ attachment-> आईडी, ‘एल्बम-ग्रिड’, सच है);
प्रतिध्वनि ‘

‘ $ शीर्षक ‘

‘;
}

}
}
?>

स्रोत: फ़ीचर किए गए छवि को छोड़कर सभी अनुलग्नक कैसे प्राप्त करें

मुख्य सीएसएस शैली जिसे आप वास्तव में चिंता करने की ज़रूरत है कक्षा है। अलबम-ग्रिड

.album-grid {width: 225px;  ऊंचाई: 150px;  बाईंओर तैरना;  सूची शैली: कोई नहीं;  सूची-शैली-प्रकार: कोई नहीं;  मार्जिन: 0 18px 30px 0px;} 

इससे प्रत्येक छवि को ग्रिड में उचित रूप से रखा जा सकेगा, और हम यह शैली प्राप्त करेंगे कि हम इसे कैसे चाहते हैं।

अगली बात जो आपको करने की ज़रूरत है वह एक एकल-अटैचमेंट टेम्प्लेट है। यह वह पृष्ठ होगा जहां पर उपयोगकर्ता को लिया जाएगा, ताकि वे प्रत्येक व्यक्तिगत छवि को देख सकें। वे यहां छवि शीर्षक, फोटोग्राफर का नाम और फोटोग्राफर्स यूआरएल देखेंगे। आप वर्डप्रेस में एक कस्टम सिंगल अटैचमेंट टेम्पलेट को कैसे तैयार करें पर हमारी ट्यूटोरियल का अनुसरण कर सकते हैं।

एक टेम्पलेट शैली के लिए स्वतंत्र महसूस हालांकि आप की तरह

अब सूची में एक ही चीज़ छोड़ी गई है, एक अलग एल्बम एल्बम बनाना है। फिर से मान लें कि आपके कस्टम पोस्ट प्रकार को एल्बम कहा जाता है, आपको एक बनाना होगा एकल albums.php फ़ाइल। सभी हेडर, पाद लेख, साइडबार या किसी भी अन्य डिज़ाइन तत्वों को कॉपी करें जिन्हें आप चाहते हैं।

लूप एंट्री में मूल रूप से एक ही काम करते हैं जो हमने संग्रह-एल्बम टेम्प्लेट के साथ किया था। यद्यपि आप विशेष रुप से चित्र और अटैचमेंट ग्रिड को जोड़ने से पहले, आपको एल्बम का शीर्षक और वर्णन जोड़ना होगा। जो सिर्फ इस तरह से कोड जोड़कर किया जा सकता है:

// इस लाइन के नीचे ग्रिड कोड डालें 

हम कहते हैं, हम कर रहे हैं। हमने वर्डप्रेस में किसी भी प्लगइन का उपयोग किए बिना सिर्फ एक मासिक फोटो एलबम गैलरी बनाई है। आपको कोई भी प्रश्न हैं, तो हमें बताएं।