वर्डप्रेस में एक कूल CSS3 बटन शोर्ट कैसे जोड़ें

यदि आप वर्डप्रेस में एचटीएमएल संपादक के साथ काम करने के बहुत बड़े प्रशंसक नहीं हैं या अपने प्रीमियम विषयों के लिए कुछ शानदार एन्हांसमेंट प्रदान करना चाहते हैं, तो शॉर्टकोड चीजों को सरल रखते हुए आपके पोस्ट एडिटर की क्षमताओं का विस्तार करने के लिए एक बढ़िया समाधान है।.


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

शॉर्टकोड क्या हैं?

शॉर्टकोड को वर्डप्रेस 2.5 में वापस पेश किया गया था और वे आपको पोस्ट सामग्री में उपयोग के लिए मैक्रो कोड बनाने की अनुमति देते हैं। एक साधारण शॉर्टकोड कुछ इस तरह दिखेगा:

[छोटे संकेत]

जब पोस्ट एडिटर में जोड़ा जाता है तो आपकी थीम फाइलों में परिभाषित शोर्ट का मान लौटाएगा। मैं आपको एक शोर्ट बनाने का तरीका दिखाऊंगा जो आपको किसी भी कोड को छूने के बिना आसानी से अपने पोस्ट एडिटर में बटन जोड़ने की अनुमति देगा.

एक कस्टम “बटन” शोर्ट जोड़ना

पहली चीज जो आपको करने की ज़रूरत है वह है अपने थीम के लिए शोर्ट के लिए php कोड जोड़ना। निम्न कोड का उपयोग आपकी साइट पर एक साधारण बटन जोड़ने के लिए किया जा सकता है। इस कोड को functions.php फाइल में रखा जा सकता है। यदि आप 3rd पार्टी थीम का उपयोग कर रहे हैं, तो यह वर्डप्रेस चाइल्ड थीम के माध्यम से सबसे अच्छा है.

फ़ंक्शन myprefix_button_shortcode ($ atts, $ सामग्री = null) {

// शोर्ट विशेषताएँ निकालें
अर्क (शोर्ट_टेट्स (सरणी)
'url' => '',
'शीर्षक' => '',
'लक्ष्य' => '',
'पाठ' => '',
'रंग' => 'हरा',
), $ एटीएस));

// सामग्री के बिना आइटम के लिए पाठ मूल्य का उपयोग करें
$ सामग्री = $ पाठ? $ पाठ: $ सामग्री;

// लिंक के साथ रिटर्न बटन
अगर ($ url) {

$ link_attr = सरणी (
'href' => esc_url ($ url),
'शीर्षक' => esc_attr ($ शीर्षक),
'लक्ष्य' => ('रिक्त' == $ लक्ष्य)? '_ब्लांक': '',
'वर्ग' => 'मायपरफिक्स-बटन रंग-'। esc_attr ($ रंग),
);

$ link_attrs_str = '';

foreach ($ link_attr $ key => $ val) {

अगर ($ वैल) {

$ link_attrs_str। = ''। $ कुंजी। '=' '' $ वल। '' '';

}

}


वापसी ''। do_shortcode ($ सामग्री)। '';

}

// कोई भी लिंक एक स्पैन के रूप में रिटर्न बटन को परिभाषित नहीं करता है
अन्य {

वापसी ''। do_shortcode ($ सामग्री)। '';

}

}
add_shortcode ('बटन', 'myprefix_button_shortcode');

अपने पोस्ट एडिटर में शोर्ट का उपयोग करना

अब आपके पास एक शोर्ट है जिसमें आप नया “बटन” जोड़ सकते हैं (जो अब एक सादे लिंक की तरह दिखता है क्योंकि हमने इसे पोस्ट संपादक को नहीं दिया है).

// उदाहरण उपयोग 1
[बटन href = "आपका लिंक" लक्ष्य = "स्व"] बटन पाठ [/ बटन]

// उदाहरण उपयोग 2
[बटन href = "आपका लिंक" लक्ष्य = "स्व" पाठ = "बटन पाठ"]

स्टाइलिंग द बटन

अगर यह केवल एक सादे लिंक की तरह दिखने वाला है तो शोर्ट बनाने का क्या मतलब है? कुछ भी तो नहीं। यही कारण है कि मैं आपको दिखाऊंगा कि डाउनलोड बटन को स्टाइल करने के लिए कुछ शांत CSS3 कैसे जोड़े और इसे सेक्सी दिखें.

जैसा कि आपने शोर्ट में देखा था कि मैंने “myprefix-button” क्लास जोड़ी है, ताकि आप आसानी से इसे अपने style.css फ़ाइल के माध्यम से स्टाइल कर सकें। छवि की तरह अच्छा नीला बटन बनाने के लिए अपनी स्टाइलशीट में निम्न कोड डालें.

/ * मुख्य बटन शैली * /
.myprefix-button {पृष्ठभूमि: # 65A343; पाठ-छाया: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; बॉर्डर-त्रिज्या: 5px; -webkit-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0.1); -मोज़-बॉक्स-छाया: 1 पीएक्स 2 पीएक्स 1 पीएक्स आरजीबीए (0, 0, 0, 0.1); बॉक्स-छाया: 1px 2px 1px rgba (0, 0, 0, 0.1); कर्सर: सूचक; प्रदर्शन: इनलाइन-ब्लॉक; छिपा हुआ सैलाब; गद्दी: 1 पीएक्स; ऊर्ध्वाधर-संरेखित करें: मध्य; }

.मायपरफिक्स-बटन स्पैन {बॉर्डर-टॉप: 1 पीएक्स सॉलिड आरजीबीए (255, 255, 255, 0.25); -वेबकिट-बॉर्डर-त्रिज्या: 5 पीएक्स; -मोज़-बॉर्डर-रेडियस: 5 पीएक्स; बॉर्डर-रेडियस: 5 पीएक्स; रंग: #fff; प्रदर्शन क्षेत्र; फोंट की मोटाई: बोल्ड; फ़ॉन्ट-आकार: 1em; गद्दी: 6 पीएक्स 12 पीएक्स; पाठ-छाया: 1px 1px 1px rgba (0, 0, 0, 0.25); }

/ * हॉवर * /
.मायपरफिक्स-बटन: होवर {बैकग्राउंड: # 558938; text-decoration: कोई नहीं; }

/ * सक्रिय * /
.मायपरफिक्स-बटन: सक्रिय {पृष्ठभूमि: # 446F2D; }

ग्रीन शोर्ट बटन

एकाधिक रंग समर्थन

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

/ * ब्लू बटन * /
.myprefix-button.color-blue {पृष्ठभूमि: # 2981e4}

/ * ब्लू बटन होवर * /
.myprefix-button.color-blue: hover {बैकग्राउंड: # 2575cf}

/ * ब्लू बटन सक्रिय * /
.myprefix-button.color-blue: सक्रिय {पृष्ठभूमि: # 0760AD}

अब बस शोर्ट में रंग पैरामीटर का उपयोग करें:

[बटन href = "आपका लिंक" लक्ष्य = "स्व" रंग = "नीला"] बटन पाठ [/ बटन]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me