WordPress Tutorial: कैसे एक भयानक पृष्ठ फ्लिप प्लगइन बनाने के लिए

नोट: हम अब इस WP प्लगइन का समर्थन नहीं करते हैं क्योंकि लेखक अभी हमारे लिए नहीं लिख रहा है. 


आज से, हर हफ्ते हम एक भयानक कोडिंग ट्यूटोरियल की सुविधा देंगे, जो आपको सिखाएगा कि वर्डप्रेस का उपयोग करके कस्टम सामान को मूल से उन्नत तक कैसे किया जाए। आज हम जेएस का उपयोग करके एक “पेज फ्लिप” गैलरी बनाने के लिए एक प्लगइन बनायेंगे (ताकि आप इस पर मूल चरण सीखें).

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

बुनियादी कार्यक्षमता शॉर्टकोड के माध्यम से कुछ छवियों और उनके आकारों के आधार पर एक नए प्रकार की गैलरी बनाई जाएगी.

चलिए फिर शुरू करते हैं!

ज़िप & इंस्टॉल

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

[फ्लिप_बुक आईडी = "78 79 78 79 79 78 78 79 79 78" चौड़ाई ="300" ऊंचाई ="225" प्रदर्शन ="दोहरा"]

त्वरित पूर्वावलोकन

और यह उस तरह का परिणाम है जो आपको मिलेगा:

फ्लिपबुक प्रभाव

लेकिन वहां किस तरह का काला जादू चलता है? वास्तव में, यह वास्तव में काफी सरल है। आइए जानें कि कुछ ऐसा कैसे बनाया जाए.

द हैडर

सबसे पहले आपको एक नया फ़ोल्डर और एक नई .php फ़ाइल बनाने की आवश्यकता होगी। इस बिंदु पर यह भयानक होगा यदि आपके पास एक परीक्षण वातावरण है, तो आप सामान को तोड़ सकते हैं और परीक्षण कर सकते हैं.

फ़ाइल और फ़ोल्डर में एक सरल और अनूठा नाम होना चाहिए, ताकि आप मौजूदा प्लगइन्स के साथ संघर्ष से बच सकें। तब हमारी फ़ाइल की मूल सामग्री कुछ इस प्रकार है:

/ *
प्लगइन का नाम: FlipBook गैलरी
विवरण: फ्लिपबुक दीर्घाओं के लिए एक शोर्ट बनाएं.
संस्करण: 1.0
लेखक: वेब राजस्व ब्लॉग
लाइसेंस: GPL2
* /

बहुत सरल, हुह? एक बार जब आप यह फ़ाइल बना लेते हैं, तो आप WP व्यवस्थापक के तहत सूची में अपना प्लगइन देखेंगे > प्लगइन्स, और आप इसे सक्रिय कर सकते हैं (लेकिन यदि आपकी फ़ाइल में केवल यही सामग्री है, तो इससे आपकी साइट बहुत बदल जाएगी).

लिपियों को बुलाना

अब हमें यहां कुछ महत्वपूर्ण बाहरी संपत्तियों को शामिल करने की आवश्यकता है। बुनियादी कार्यक्षमता के लिए आवश्यक बाहरी फाइलें हैं:

  • jQuery (1.9+)
  • स्क्रिप्ट चालू करें
  • मूल स्टाइल को चालू करें

यदि आप बस स्क्रिप्ट और शैली टैग जोड़ते हैं, तो आपके पास कुछ मुद्दे होंगे। उदाहरण के लिए, डबल jQuery कॉल संभवतः आपकी साइट को तोड़ देगा। इसके अलावा वर्डप्रेस ने खुद को “पता” नहीं किया है कि आपने उन वस्तुओं को बनाया है, इसलिए यदि कोई अलग प्लगइन कॉल करता है। फिर से या एक अलग स्टाइल से यह आपकी साइट को तोड़ देगा।.

इसलिए हमें हमेशा wp_enqueue_script और wp_enqueue_style फ़ंक्शन का उपयोग करना चाहिए। यहाँ मूल उपयोग है:

function plugin_scripts () {
wp_enqueue_script ( ‘jQuery’);
wp_enqueue_script (‘टर्न’, plugins_url (‘js / turn.js’, __FILE__), ऐरे (‘jquery’), ‘1.3’, false);
wp_enqueue_style (‘turnCSS’, plugins_url (‘css / style.css’, __FILE__), गलत, ‘1.3’, ‘all’);
}

हम बाहरी वस्तुओं को 3 अलग-अलग तरीकों से बुला रहे हैं, यहां वे हैं:

  • किसी मौजूदा आइटम को कॉल करना: jQuery – अगर हमें पता है कि वर्डप्रेस पहले से ही इस स्क्रिप्ट को लोड करता है, तो हमें बहुत सारे मापदंडों को पारित करने की आवश्यकता नहीं है, हम सिर्फ उसे बता रहे हैं “यार, यह स्क्रिप्ट यहाँ होनी चाहिए अन्यथा हमारा कोड नहीं होगा काम”
  • एक नई स्क्रिप्ट बनाना – आपको नाम, फ़ाइल स्थान, आवश्यक आइटम (इस मामले में इसे jQuery की आवश्यकता होती है), संस्करण जैसी कुछ विशेषताओं को पास करने की आवश्यकता होगी, और यदि यह पाद या शीर्ष लेख में लोड किया गया है (गलत = शीर्ष लेख, सही = पाद लेख)
  • एक नई शैली बनाना – पिछले वाले की तरह ही बहुत सुंदर, पिछले विशेषता में एक छोटे से अंतर के साथ, यह कहता है कि कौन सा मीडिया इस शैली को टाइप करता है यदि

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

हमारे मामले में, हमारे पास गैलरी स्थापित करने के लिए केवल कुछ अतिरिक्त स्क्रिप्ट हैं जब इसका HTML बनाया जाता है, और इसे शरीर में जोड़ा जाएगा। यही कारण है कि हम इस स्क्रिप्ट को सिर में जोड़ना चाहते हैं, अन्यथा जब हमारे कोड को “टर्न” फ़ंक्शन कहा जाता है तो अभी तक नहीं है.

इस अच्छे कोड के बाद, हमें वर्डप्रेस को स्क्रिप्ट के रूप में लोड करने के लिए बताने की आवश्यकता है, “wp_enqueue_scripts” यह कार्रवाई करेगा:

add_action (‘wp_enqueue_scripts’, ‘plugin_scripts’);

शोर्ट

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

add_shortcode ("फ्लिप किताब","create_flip_book");

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

टर्नरी ऑपरेशन्स एक तरह के होते हैं अगर वेरिएबल वैल्यू में सीधे स्टेटमेंट। यदि यह संरचना इस प्रकार है:

$ चर = (धारणा) ? "मान अगर विचार है तो सही है" : "मान अगर विचार गलत है";

आप उन्हें हमारे कार्य के पहले भाग में देख सकते हैं:

फ़ंक्शन create_flip_book ($ attr) {

// संसाधित किए जाने वाले आईडी तैयार करना
$ सरणी [‘आईडी’] = विस्फोट (" ",$ Attr [ ‘आईडी’]);

//प्रदर्शन प्रणाली
$ सरणी [‘प्रदर्शन’] = खाली ($ attr [‘प्रदर्शन’]) ? "एक" : $ attr [‘डिस्प्ले’]; // मानक मूल्य

//चौड़ाई
$ सरणी [‘चौड़ाई’] = खाली ($ attr [‘चौड़ाई’])? 400: $ attr [‘चौड़ाई’];

//ऊंचाई
$ सरणी [‘ऊंचाई’] = खाली ($ Attr [‘ऊंचाई’])? 300: $ attr [‘ऊंचाई’]; // HTML और बाकी कोड यहाँ जाता है
}

फिर हमें HTML और हमारी छवियों के लिए मूल कॉल बनाने की आवश्यकता होगी। एक अन्य महत्वपूर्ण बिंदु यह है कि यदि हम पत्रिका शैली का उपयोग कर रहे हैं तो इसका आकार समायोजित करना चाहिए (यह 2x चौड़ाई होनी चाहिए क्योंकि हमारे पास एक के बजाय 2 चित्र होंगे):

<?php
अगर ($ सरणी [‘प्रदर्शन’] == "दोहरा" ) {
$ सरणी [‘चौड़ाई’] = $ सरणी [‘चौड़ाई’] * 2;
}
// HTML, JS और ब्लैक मैजिक
?>

<?php
के लिए ($ i = 0; $ i) < आकार ($ सरणी [‘आईडी’]); $ i ++) {
?>

<?php
इको wp_get_attachment_image ($ सरणी [‘आईडी’] [$ i], ‘पूर्ण’);
अगर ($ सरणी [‘प्रदर्शन’] == "एक" ) {
?>
<?="".($ I + 1)?>/<? गूंज "".sizeof ($ सरणी [ ‘आईडी’])?>
<?php
} अन्य {
?>

<?php
गूंज "".($ I + 1)?>/<? गूंज "".sizeof ($ सरणी [ ‘आईडी’]);
?>

<?php
}
?>

<?php
}
?>

jQuery ("#फ्लिप किताब")।मोड़({
चौड़ाई: <?php गूंज $ सरणी [‘चौड़ाई’]; ?>,
ऊंचाई: <?php गूंज $ सरणी [‘ऊंचाई’]; ?>,
ऑटोकेंटर: सच,
प्रदर्शन: ‘<?php गूंज $ सरणी [‘प्रदर्शन’]; ?>’, // सिंगल पेज या डबल पेज
त्वरण: सच,
ग्रेडिएंट:! jQuery.isTouch,
});

तुम क्या सोचते हो?

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map