कस्टम मेटा बॉक्स के साथ एक स्लाइड शो कस्टम पोस्ट प्रकार बनाने में मदद करें?


16

मुझे अपने कस्टम पोस्ट प्रकार "स्लाइड शो" (यह पोस्ट प्रकार पहले से ही बनाया गया है) के लिए एक कस्टम पोस्ट मेटा बॉक्स (तों) बनाने की आवश्यकता है। प्रत्येक मेटाबॉक्स प्रत्येक स्लाइड स्लाइड में सामग्री को रखेगा और इसे संबंधित कस्टम फ़ील्ड में बचाएगा। प्रत्येक मेटाबॉक्स में निम्नलिखित क्षेत्र होने चाहिए:

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

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

अंत में, मैं स्लाइड्स को फिर से ऑर्डर करने में सक्षम होना चाहूंगा, चाहे "ड्रैग एंड ड्रॉप" द्वारा या किसी अन्य टेक्स्ट फील्ड द्वारा कि मैं ऑर्डर नंबर को टाइप कर सकूं।

मुझे यह लगभग मिल गया है, जहां मुझे "मोर फील्ड्स" प्लगइन के साथ इसकी आवश्यकता है और Rarst से कुछ कोड मदद करते हैं। "अधिक फ़ील्ड्स" प्लगइन के साथ मेरे पास प्रत्येक मेटाबोक्स में निम्नलिखित फ़ील्ड हैं:

  • शीर्षक (पाठ क्षेत्र)
  • छवि (पोस्ट से जुड़ी छवियों की एक लटकती सूची)
  • एम्बेड कोड (पाठ क्षेत्र)
  • विवरण (wysiwyg)
  • स्लाइड छिपाएँ (चेकबॉक्स अस्थायी रूप से इसे हटाने के बिना किसी स्लाइड को छिपाने के लिए उपयोग करने के लिए)

यहां बताया गया है कि "मोर फील्ड्स" प्लगइन के जरिए मैंने इसे कैसे सेटअप किया:

वैकल्पिक शब्द

इसके साथ समस्या यह है कि एक स्लाइड को हटाने का कोई तरीका नहीं है क्योंकि इसे बनाया जाता है क्योंकि "अधिक फ़ील्ड" <?php delete_post_meta($post_id, $key, $value); ?>कहीं भी उपयोग नहीं करता है । प्लगइन के साथ अन्य समस्या यह है कि यह बहुत अविश्वसनीय है और अपडेट के साथ अक्सर टूट जाता है।

मैं अपने स्वयं के कस्टम मेटाबोक्स के साथ एक समान समाधान लागू करने में सक्षम हूं जिसमें शामिल हैं:

  • शीर्षक (पाठ क्षेत्र)
  • चित्र (img URL के लिए पाठ फ़ील्ड)
  • एम्बेड कोड (पाठ क्षेत्र)
  • विवरण (पाठ क्षेत्र)
  • स्लाइड छिपाएँ (चेकबॉक्स अस्थायी रूप से इसे हटाने के बिना किसी स्लाइड को छिपाने के लिए उपयोग करने के लिए)

इस कार्यान्वयन से मुझे काम करने के लिए कई TinyMCE फ़ील्ड या छवि ड्रॉपडाउन बॉक्स नहीं मिल सकते हैं। TinyMCE कोड तब तक काम करता है जब तक कि मैं उस कोड को नहीं जोड़ता हूं जो पहले मेटाबॉक्स की वृद्धिशील प्रतियां बनाता है जिस बिंदु पर मुझे यह त्रुटि उस फ़ील्ड के ठीक ऊपर मिलती है जहां TinyMCE बटन होना चाहिए Warning: array_push() [function.array-push]: First argument should be an array...:।

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

मैं साइडबार में बिल्ट-इन "फीचर्ड इमेज" बॉक्स के माध्यम से इमेज अपलोड को संभाल रहा हूं, हालांकि मैं एक कस्टम मेटाबॉक्स को बुरा नहीं मानूंगा, जिसने लिखा पैनल के शीर्ष पर "इमेजेज अपलोड करें" कहा है।

अंतत: मैं इसके समान स्लाइड शो की तलाश में हूं: http://www.nytimes.com/slideshow/2010/08/10/science/20100810angier-1.html । मैं चाहता हूं कि मेरा भी चित्र के बजाय स्लाइड में सामग्री के रूप में एक वीडियो हो। मुझे अपने लेखकों के लिए व्यवस्थापक पैनल का उपयोग करने के लिए एक सहज और आसान की आवश्यकता है (वे html और / या शॉर्टकोड का उपयोग करके विश्वसनीय नहीं हैं और विश्वसनीय नहीं हैं)। यदि उदाहरण से यह स्पष्ट नहीं है, तो प्रत्येक स्लाइड को एक नया पेजव्यू जनरेट करना चाहिए।

Drag'n'Drop reordering एक उच्च प्राथमिकता नहीं है, लेकिन यह अच्छा होगा। मुझे एक प्लगइन मिला जो इसे वास्तव में अच्छी तरह से संभालता है: स्लाइडडेक । दुर्भाग्य से प्लगइन मेरी जरूरतों के अनुरूप नहीं है, लेकिन जिस तरह से वे स्लाइड के आदेश को संभालते हैं वह बहुत चालाक है। यह साइडबार में एक अलग मेटाबॉक्स है जो आपको अपनी पसंद के अनुसार स्लाइड को चारों ओर खींचने देता है। यह भी है कि आप स्लाइड कैसे जोड़ते हैं, एक "स्लाइड जोड़ें" बटन पर क्लिक करके जो लेखन पैनल में एक और स्लाइड मेटाबॉक्स जोड़ता है। यहाँ एक स्क्रीनशॉट है:

वैकल्पिक शब्द

आप वर्डप्रेस रिपॉजिटरी में कार्रवाई में इसके अधिक स्क्रीनशॉट भी देख सकते हैं ।

यहाँ मेरे सभी कोड है:

मेरे स्लाइड शो पोस्ट प्रकार और स्लाइड शो पेजेशन की स्थापना करने वाले कार्य: http://loak.pastebin.com/g63Gf186

DeluxeBloggingTips.com (DBT) का मूल कोड जो मैंने अपने मेटाबेस को बंद कर दिया है: http://loak.pastebin.com/u9YTQrxf

DBT कोड का संस्करण जिसे मैंने एक ही मेटाबेस के वृद्धिशील संस्करण देने के लिए संशोधित किया: http://loak.pastebin.com/WtxGdPrN

डीबीटी कोड का एक संशोधित संस्करण जो क्रिस बब्रिज ने टिनीएमसीई के कई उदाहरणों के लिए अनुमति देने के लिए बनाया था: http://loak.pastebin.com/Mqb3pKhx इस कोड के साथ टाइनीमेसी काम करते हैं।

ब्यूरब्रिज के कोड का मेरा संशोधन जो मेरी वृद्धि और एक क्षेत्र को शामिल करने की कोशिश करता है जो आपको पोस्ट से जुड़ी सभी छवियों की एक लटकती सूची से छवि चुनने देता है: http://loak.pastebin.com/xSuenJTK इस प्रयास में, TinyMCE टूट गया है और ड्रॉपडाउन काम नहीं करता है।

यह शायद मायने नहीं रखता है, लेकिन अगर आप सोच रहे हैं, तो यहां मैं कस्टम पोस्ट मेटा से एम्बेड कोड खींचने के लिए उपयोग कर रहा हूं, इसे आकार दें, और पोस्ट में डालें: http://loak.pastebin.com / n7pAzEAw

यह परियोजना की वर्तमान स्थिति को प्रतिबिंबित करने और टिप्पणियों में पोस्ट किए गए सवालों के जवाब देने के लिए मूल प्रश्न का एक संपादित संस्करण है। इस पर बाउंटी लगाने के लिए क्रिस_ओ को धन्यवाद । इसके अलावा, थीमहाइब्रिड डॉट कॉम फोरम में बहुत मदद करने के लिए रैस्ट और जस्टिन का धन्यवाद । मैंने इस पर घंटों और घंटे बिताए हैं और मैं फंस गया हूं (मैंने इस प्रश्न पर अकेले कुछ घंटे बिताए)। किसी भी तरह की सहायता का स्वागत किया जाएगा।


क्या आप एक ऐसी उपमा छवि बना सकते हैं, जो पूरी तस्वीर दिखाती है, जैसे कि स्केच? मुझे लगता है कि आपकी आवश्यकताओं को बेहतर ढंग से समझने में मददगार है।
हकर्रे

मैंने नीचे कुछ उदाहरण जोड़े। अगर यह पर्याप्त रूप से स्पष्ट नहीं करता है तो मुझे बताएं।
मैट

क्या यह अभी भी स्पष्ट नहीं है?
मैट

किसी को? इस बात पर है?
मैट

@ हकरे, तुम वहाँ?
मैट

जवाबों:


6

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

एकाधिक फ़ील्ड

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

यह एक साइडबार में कितने विजेट्स काम करते हैं इसका मूल है:

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

खींचें और छोड़ें

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

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

jQuery UI में एक महान " ड्रैगेबल " इंटरफ़ेस है जिसे आप आसानी से इस कस्टम मेटा बॉक्स के भीतर अपने उद्देश्यों के लिए हेरफेर कर सकते हैं। हार्ड पार्ट इंटरफ़ेस का निर्माण नहीं कर रहा है, यह मेटा बॉक्स और पेज पर अन्य जगहों पर स्लाइड मेटा बॉक्स के संग्रह के बीच लगातार, सटीक संचार प्राप्त कर रहा है ।

संक्षेप में

मैंने आपके पद से जो इकट्ठा किया है, वह यह है कि आपके पास कुछ काम का हल है:

  • आपने अधिक फ़ील्ड्स विजेट के माध्यम से अपने कस्टम पोस्ट प्रकार में 15 कस्टम फ़ील्ड जोड़े हैं, लेकिन सेट संख्या के साथ कार्य करने के बजाय फ़ील्ड को गतिशील रूप से जोड़ना / निकालना चाहते हैं
  • आप इन कस्टम फ़ील्ड्स के क्रम को समायोजित करने का एक तरीका चाहते हैं ताकि स्लाइड्स क्रम में लोड हो सकें

जिस तरह से मैं दृष्टिकोण करूंगा वह है कि मैं एक नई कक्षा में नए मेटा मेटा फ़ील्ड बनाने के लिए कस्टम मेटा निर्माण प्रक्रिया को फिर से उपयोग कर सकता हूं। फिर मैं दो प्रकार के मेटा बॉक्स को इनिशियलाइज़ करने के लिए क्लास का विस्तार करूँगा: एक स्लाइड के लिए, एक स्लाइड स्ट्रक्चर के लिए। मैं स्लाइड संरचना मेटा बॉक्स में भी नया स्लाइड मेटा बॉक्स बनाने की क्षमता (स्लाइड मेटा बॉक्स अपने स्वयं के "डिलीट" एक्शन का उपयोग कर सकता हूं)।

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

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


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

मूल सिद्धांतों को प्राप्त करने के बारे में आपकी सलाह पहले समझ में आती है, लेकिन मैं कुछ वास्तविक दुनिया की बाधाओं के खिलाफ हूं, जो मुझे उत्पादन के माहौल में इसे प्राप्त करने की आवश्यकता है और सबसे महत्वपूर्ण कारकों में से एक wysiwyg संपादक है क्योंकि कई लेखक बहुत गैर-तकनीकी हैं । मैं इस परियोजना को वृद्धिशील बनाने और रास्ते में बैसाखी पर भरोसा करने से इनकार नहीं करता लेकिन इस दृष्टिकोण को स्पष्ट रूप से स्केलेबल बनाने की आवश्यकता है। यह कहा कि यह मुझे लगता है कि "अधिक क्षेत्रों" प्लगइन का उपयोग कर एक अस्थायी समाधान के रूप में सेवा कर सकता है जब तक कि मुझे यह पता नहीं है, लेकिन मुझे यकीन नहीं है कि इसके साथ काम करेंगे ...
मैट

एक कस्टम क्षेत्र में पूरे स्लाइड शो को बचाने का आपका तरीका। क्या आप वास्तव में सोचते हैं कि यह सब एक क्षेत्र में करना बेहतर है? यह अज्ञानी लग सकता है, लेकिन मुझे लगता है कि त्रुटियों के लिए बहुत अधिक जगह है अगर wp को पूरे स्लाइड शो को फिर से लिखना पड़े तो हर बार एक मामूली बदलाव किया जाता है।
मैट

पूरे शो को एक मेटा फ़ील्ड में सहेजना दोनों ही समस्याओं को रोकता है और परिचय देता है: यह आपको कई क्षेत्रों के माध्यम से चयन, पढ़ने और लूप के लिए मजबूर नहीं करके प्रस्तुति साइट पर समय बचाता है। हालाँकि, अगर कुछ एक स्लाइड में टूट जाता है और DB को लिखा जाता है तो यह पूरे स्लाइड शो को तोड़ देता है। निश्चित रूप से एक ट्रेडऑफ, लेकिन मैं हमेशा गति और आसानी से विकास का विकल्प चुनता हूं।
एमान सिप

क्या आप कह रहे हैं कि यह साइट के सामने के छोर पर समय बचाता है? ऐसा क्यों होगा यदि यह एक बार में केवल एक स्लाइड दिखा रहा है?
मैट

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.