द बटरफ्लाई सर्कस – उन्नत कैनवास संशोधन पर एक केस स्टडी

द बटरफ्लाई सर्कस - उन्नत कैनवास संशोधन पर एक केस स्टडी

द बटरफ्लाई सर्कस - उन्नत कैनवास संशोधन पर एक केस स्टडी
निक डॉटरटी

यह अतिथि पोस्ट द्वारा लिखा गया था निक डॉटरटी स्काईरॉकेट वेबसाइटों की संख्या जिनके पास ग्राहकों का एक प्रभावशाली पोर्टफोलियो है और व्यापक WooThemes संशोधन हैं।

कैनवस v4 की रिलीज़ के साथ-साथ, WooThemes के लोगों ने मुझे अपने हाल के कुछ कैनवास-आधारित प्रोजेक्ट्स के लिए एक केस स्टडी लिखने के लिए कहा, जिसे करने के लिए मैं बिल्कुल रोमांचित हूं।

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

यह पोस्ट TheButterflyCircus.com के बारे में है, जो आज तक का मेरा सबसे महत्वाकांक्षी चाइल्ड थीम संशोधन रहा है।

तो कमर कस लें, एक पेंसिल लें और अपनी सोच की टोपी पहन लें। यह नीरस हो सकता है।

कॉल प्राप्त करना

द बटरफ्लाई सर्कस - उन्नत कैनवास संशोधन पर एक केस स्टडी
तितली सर्कस वेबसाइट

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

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

हम इसे वर्डप्रेस में बनाना चाहते थे, उन्होंने मुझे बताया। लेकिन हमें यकीन नहीं है कि वर्डप्रेस वह कर सकता है जो हम चाहते हैं। और अब हम फंस गए हैं।

टू वू या नॉट टू वू

मैं हमेशा एक चुनौती के लिए तैयार हूं, और यह एक अच्छा लग रहा था। इसलिए मैं कार में कूद गया और एलए में उनके कार्यालय में यह देखने के लिए चला गया कि क्या मैं थोड़ी सहायता कर सकता हूं।

उनके पास वेबसाइट के लिए एक बहुत विशिष्ट डिजाइन अवधारणा थी और वे यह सुनिश्चित करना चाहते थे कि साइट समय अवधि के लिए प्रामाणिक दिखे। (1930 के ग्रेट डिप्रेशन युग के बारे में सोचें)।

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

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

एक कैनवस चाइल्ड थीम

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

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

द बटरफ्लाई सर्कस - उन्नत कैनवास संशोधन पर एक केस स्टडी
कैनवस थीम पर आधारित बटरफ्लाई सर्कस।

अलंकृत फ़्रेम, सर्कस नेविगेशन, और अन्य सजावटी तत्व

साइट को विकसित करने में मेरी सबसे बड़ी चुनौती केवल सीएसएस का उपयोग करके डिजाइन में हेरफेर करने के रचनात्मक तरीके खोजना था। सरलता के लिए, मैं कैनवस थीम के डिफ़ॉल्ट टेम्प्लेट के अंदर HTML या PHP कोड को बदलना नहीं चाहता था, अगर मुझे ऐसा नहीं करना है।

सर्कस नेविगेशन कैनवस थीम विकल्पों के कस्टम लोगो बॉक्स (सामान्य सेटिंग्स के तहत) के बजाय हेडर बैकग्राउंड इमेज बॉक्स (हेडर स्टाइलिंग के तहत) में लोगो डालकर पूरा किया गया था।

द बटरफ्लाई सर्कस - उन्नत कैनवास संशोधन पर एक केस स्टडी
नेविगेशन मेनू।

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

द बटरफ्लाई सर्कस - उन्नत कैनवास संशोधन पर एक केस स्टडी
नेविगेशन मेनू को स्टाइल करना

विस्तार अलंकृत फ्रेम डिजाइन के लिए केंद्रीय था, क्योंकि यह साइट के लिए सभी सामग्री को फ्रेम करता है। यह मुश्किल था, क्योंकि इसमें फ्रेम को 3 भागों में तोड़ना आवश्यक था:

  • शीर्ष – फ्रेम का शीर्ष पृष्ठ के #मुख्य तत्व में हुक करता है और इसे शीर्ष पर रखने के लिए एक जेड-इंडेक्स कॉल का उपयोग करता है।
  • मध्य – यह विस्तार करने वाला भाग है। यह एक दोहराई जाने वाली, अर्ध-पारदर्शी काली पृष्ठभूमि है जो पृष्ठ के #content तत्व में हुक करती है।
  • नीचे – यह एकमात्र हिस्सा था जहाँ

    मुझे पृष्ठ पर एक नया HTML तत्व जोड़ना पड़ा। फ़्रेम के निचले भाग में डालने के लिए कोई व्यवहार्य CSS हुक नहीं थे, इसलिए मैंने अपना बनाया

    और इसे मेरे functions.php फ़ाइल के अंदर woo_footer_top क्रिया हुक के साथ जोड़ दिया। अंत में, मैंने बैकग्राउंड इमेज को कॉल करने के लिए CSS जोड़ा और इसे ठीक से लेयर करने के लिए z-इंडेक्स कॉल का इस्तेमाल किया।

फ़्लैश का उपयोग किए बिना एक आकर्षक मुखपृष्ठ

यह पता चला है कि आपको अपने होमपेज के लिए कुछ अच्छे इंट्रो एनिमेशन करने के लिए वास्तव में फ्लैश की जरूरत नहीं है। सरल jQuery एनिमेशन के साथ यह पूरी तरह से संभव है।

यदि आपने कभी PowerPoint में कोई स्लाइड एनिमेट की है तो घबराएं नहीं, यह वास्तव में समान है। चाल पीछे की ओर काम करना है।

यहां बताया गया है कि मैंने अपना कैसे किया

  • मैंने Template-animation.php नामक एक कस्टम पेज टेम्प्लेट बनाया और प्रत्येक HTML तत्वों (ज्यादातर छवियों) को टेम्प्लेट में जोड़ा।
  • मैंने प्रत्येक छवि को पूरी तरह से सीएसएस का उपयोग करके उन्हें स्थिति में लाने के लिए रखा।
  • एक बार यह हो जाने के बाद, मैं प्रत्येक तत्व को फीका करने या स्लाइड करने के लिए एनिमेट करने लगा।
  • एक छोटे से jQuery (होमपेज-एनीमेशन.जेएस नामक फ़ाइल में) का उपयोग करके मैंने एनीमेशन को 5 चरणों में तोड़ दिया जो पेज लोड पर शुरू होता है। प्रत्येक तत्व को फीका करने के लिए मैं जिस सिंटैक्स का उपयोग करता था वह इस तरह दिखता है:
  • अंत में, मैंने होमपेज पर अपने कस्टम एनीमेशन जावास्क्रिप्ट को कॉल करने के लिए अपने functions.php फ़ाइल के अंदर एक wp_enqueue_script कॉल जोड़ा।

अच्छा लग रहा है, हुह? जब आप इसे एक साथ रखते हैं, तो यह एक आकर्षक उपयोगकर्ता अनुभव बनाता है।

थीम में अन्य उल्लेखनीय परिवर्धन/परिवर्तन थे:

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

अधिक तकनीकी परिवर्धन: कस्टम पृष्ठभूमि

क्लाइंट के शुरुआती अनुरोधों में से एक साइट पर प्रत्येक पृष्ठ के लिए कस्टम पृष्ठभूमि छवियां थीं। यह चाइल्ड थीम के माध्यम से थीम विकल्पों को अनुकूलित करने का अभ्यास करने का एक शानदार अवसर प्रतीत होता है।

कई विकल्पों की कोशिश करने के बाद, मैं WP पेज एडिटर के अंदर एक कस्टम मेटाबॉक्स के साथ समाप्त हुआ, जैसे:

द बटरफ्लाई सर्कस - उन्नत कैनवास संशोधन पर एक केस स्टडी
पृष्ठ संपादक में कस्टम मेटा बॉक्स बनाना

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

यदि आप रुचि रखते हैं, तो मार्क के ट्यूटोरियल में हुक और फिल्टर का उपयोग करने के बारे में और भी बहुत कुछ है।

ई-कॉमर्स सुविधाएं

वेबसाइट का एक अन्य प्रमुख हिस्सा एक ऑनलाइन स्टोर था जहां फिल्म निर्माता अपनी डीवीडी की प्रतियां सीधे प्रशंसकों को बेच सकते थे।

WPMU DEV पर लोगों का अनुयायी होने के नाते, मैंने MarketPress नामक उनके नए ई-कॉमर्स प्लगइन का उपयोग करने का निर्णय लिया। मुझे यह पसंद है क्योंकि यह वर्डप्रेस 3 में अंतर्निहित कस्टम पोस्ट प्रकार की कार्यक्षमता का उपयोग करता है। अब डेटाबेस को अव्यवस्थित करने वाले गंदे MYSQL तालिकाओं के एक समूह की आवश्यकता नहीं है। इसके अलावा, यह मूल रूप से WP मल्टीसाइट और बडीप्रेस के साथ काम करने के लिए बनाया गया है, अगर आप उस तरह के हैं।

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

द बटरफ्लाई सर्कस - उन्नत कैनवास संशोधन पर एक केस स्टडी
मार्केटप्रेस प्लगइन के अंदर उदाहरण उत्पाद सूची

अब फिल्म निर्माता सीधे प्रशंसकों को डीवीडी बेच सकते हैं, साथ ही आईट्यून्स के माध्यम से अपने साउंडट्रैक को बेच सकते हैं – उपयोगकर्ता को साइट पर रखते हुए, चेकआउट करने का समय आने तक (पेपैल एक्सप्रेस भुगतान के माध्यम से)।

अन्य तृतीय पक्ष प्लगइन्स

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

हम साइट पर इन प्लगइन्स का भी उपयोग कर रहे हैं:

  • Google Analytics और Mailchimp डेटा को सीधे WP डैशबोर्ड में खींचने के लिए Analytics360
  • रैंक ट्रैकर फिल्म निर्माताओं को यह दिखाने के लिए कि Google में उनके पेज किस कीवर्ड और स्थिति के लिए रैंकिंग कर रहे हैं

निष्कर्ष

कुछ लोगों ने मुझसे पूछा है कि दुनिया में मैं एक ऐसे प्रोजेक्ट पर फिर से काम क्यों शुरू करूंगा जो पहले से ही आधा पूरा हो चुका है।

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

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

अंत में, सभी थीम विकल्प, कोड हुक, और अन्य उपहार (जैसे शॉर्टकोड) जो कैनवस ने मुझे दिए, ने इसे केवल एक सप्ताह में एक शानदार दिखने वाली वेबसाइट देने के लिए एक स्नैप बना दिया।

चीजें कभी-कभी थोड़ी नीरस हो जाती हैं, लेकिन WooThemes के साथ आश्चर्यजनक परिणाम देने के लिए आपको वास्तव में HTML, CSS, PHP, या Javascript का विशेषज्ञ होने की आवश्यकता नहीं है। हालांकि, मैं अनुशंसा करता हूं कि आप इनमें से प्रत्येक भाषा (उस क्रम में) में खतरनाक होने के लिए पर्याप्त सीखें।

मुझे लगता है कि कैनवास जैसी थीम के साथ शुरुआत करना और उसके साथ प्रयोग करना सबसे अच्छा तरीका है। कोड के साथ खेलकर अपने हाथ गंदे करें और अपनी कल्पना को उड़ान भरने दें।

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

निक डॉटरटी स्काईरॉकेट वेबसाइट्स के सीईओ और सह-संस्थापक हैं, जो लॉस एंजिल्स, सीए, यूएसए में एक डिजिटल डिजाइन/मार्केटिंग फर्म है। इस मौके पर कि वह अपने मैक से दूर है, आप निक को एक स्थानीय कॉफी शॉप में गिटार बजाते हुए या पास के डोजो में अपने मार्शल आर्ट कौशल का अभ्यास करते हुए पा सकते हैं।

सीटीए-बैनर-10-उत्पाद-पृष्ठ-v2_2x



द बटरफ्लाई सर्कस - उन्नत कैनवास संशोधन पर एक केस स्टडी द बटरफ्लाई सर्कस - उन्नत कैनवास संशोधन पर एक केस स्टडी

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *