वर्डप्रेसमध्ये सूचना पॅनेल तयार करण्यासाठी प्लगइन. वर्डप्रेस बिगस्लाइडमध्ये सूचना पॅनेल तयार करण्यासाठी प्लगइन - Jquery मधील स्लाइड नेव्हिगेशन पॅनेल

प्लगइन वापरून - WPFront सूचना बार, तुम्ही तुमच्या वेबसाइटवर तुमच्या वर्डप्रेस साइटच्या वर किंवा तळाशी एक सूचना बार जोडू शकता. पॅनेल कोणत्याही पृष्ठाच्या लिंकसह कोणताही मजकूर आणि बटण प्रदर्शित करू शकते; आपण HTML कोड जोडू शकता. तुम्ही सूचना पॅनेलसाठी तुमचे रंग सानुकूलित करू शकता; तुम्ही पॅनेलचे स्थान, साइटच्या वर किंवा तळाशी निवडू शकता. तुम्ही पॅनेल लॉक करू शकता जेणेकरुन तुम्ही पृष्ठ स्क्रोल करता तेव्हा, पॅनेल नेहमी स्क्रीनवर दृश्यमान असेल. पॅनेल कोणत्या पृष्ठांवर प्रदर्शित केले जाईल आणि कोणत्या पृष्ठावर दिसणार नाही, इत्यादी तुम्ही निवडू शकता.

तुम्ही प्लगइन थेट वर्डप्रेस अॅडमिन पॅनलवरून इन्स्टॉल करू शकता. टॅबवर जा: प्लगइन्स – नवीन जोडा, शोध फॉर्ममध्ये प्लगइनचे नाव प्रविष्ट करा, एंटर दाबा, प्लगइन स्थापित करा आणि सक्रिय करा.

प्लगइन स्थापित आणि सक्रिय केल्यानंतर, पृष्ठावर जा: प्लगइन कॉन्फिगर करण्यासाठी WPFront – सूचना बार.

डिस्प्ले

- सक्षम, सूचना पॅनेल सक्षम करण्यासाठी येथे बॉक्स चेक करा.

- स्थिती, पॅनेल कोठे प्रदर्शित केले जाईल ते निवडा, शीर्ष - शीर्षस्थानी, तळाशी - तळाशी.

- स्थितीत निश्चित, तुम्ही हा बॉक्स चेक केल्यास, पॅनेल नेहमी स्क्रीनवर दृश्यमान होईल, पृष्ठ स्क्रोल करताना देखील.

– स्क्रोलवर डिस्प्ले, तुम्ही हा बॉक्स चेक केल्यास, तुम्ही पेज स्क्रोल केल्यावर पॅनेल दिसेल.

– ऑफसेट स्क्रोल करा, सूचना पॅनेल दिसण्यापूर्वी किती पिक्सेल पृष्ठ स्क्रोल केले जावे हे तुम्ही येथे निर्दिष्ट करू शकता.

- बारची उंची, तुम्ही येथे बारची उंची पिक्सेलमध्ये निर्दिष्ट करू शकता.

- स्थिती ऑफसेट, येथे तुम्ही साइटच्या शीर्षापासून पॅनेलपर्यंतचे अंतर सेट करू शकता.

– नंतर डिस्प्ले करा, तुम्ही पॅनेल दिसण्याची वेळ सेट करू शकता, फंक्शनसाठी कार्य करत नाही – स्क्रोलवर प्रदर्शित करा.

- अॅनिमेशन कालावधी, जेव्हा पॅनेल स्क्रीनवर हलते तेव्हा तुम्ही अॅनिमेशनचा कालावधी सेट करू शकता.

- बंद करा बटण प्रदर्शित करा, पॅनेल बंद करण्यासाठी क्रॉस असलेले बटण दर्शविण्यासाठी बॉक्स चेक करा.

– ऑटो क्लोज नंतर, पॅनेल किती सेकंदांनंतर आपोआप बंद होईल हे तुम्ही निर्दिष्ट करू शकता, कार्यासाठी कार्य करत नाही – स्क्रोलवर प्रदर्शित करा.

- छाया प्रदर्शित करा, पॅनेलसाठी सावली दर्शवा.

- डिस्प्ले रीओपन बटण, जर तुम्ही बॉक्स चेक केला, तर पॅनेल बंद केल्यानंतर, पॅनेल उघडण्यासाठी स्क्रीनच्या कोपऱ्यात एक बटण प्रदर्शित होईल.

– बंद ठेवा, जर तुम्ही बॉक्स चेक केला, तर तुम्ही पॅनेल एका पानावर बंद केल्यावर, पॅनेल यापुढे इतर पानांवर प्रदर्शित होणार नाही.

– यासाठी बंद ठेवा, ज्या वापरकर्त्याने पॅनेल बंद केले आहे त्यांच्यासाठी पॅनेल किती दिवस दाखवले जाणार नाही हे तुम्ही येथे निर्दिष्ट करू शकता.

सामग्री

- संदेश मजकूर, येथे मजकूर निर्दिष्ट करा जो अधिसूचनेत प्रदर्शित केला जाईल, आपण HTML कोड जोडू शकता.

- शॉर्टकोडवर प्रक्रिया करा, बॉक्स चेक करा जेणेकरून तुम्ही सूचनांमध्ये शॉर्टकोड जोडू शकता.

- डिस्प्ले बटण, पॅनेलमधील बटण प्रदर्शित करण्यासाठी बॉक्स चेक करा.

- बटण मजकूर, येथे बटणासाठी मजकूर प्रविष्ट करा.

- बटण क्रिया, बटणाची लिंक येथे प्रविष्ट करा. नवीन टॅब/विंडोमध्ये URL उघडा - लिंक नवीन विंडोमध्ये उघडेल. फॉलो लिंक नाही - लिंक अनुक्रमित केली जाणार नाही.

- बटणावर बार बंद करा क्लिक करा, बटण दाबून बार बंद करा.

फिल्टर करा

- प्रारंभ तारीख आणि वेळ, आपण पॅनेल प्रदर्शित करणे सुरू होईल तेव्हा तारीख आणि वेळ निर्दिष्ट करू शकता.

- समाप्ती तारीख आणि वेळ, पॅनेल बंद झाल्यावर तुम्ही तारीख आणि वेळ निर्दिष्ट करू शकता.

- पृष्ठांवर प्रदर्शित करा, पॅनेल कोणत्या पृष्ठांवर दर्शविले जाईल ते निवडा. सर्व पृष्ठे – सर्व पृष्ठांवर. पुढील पृष्ठांमध्ये समाविष्ट करा – पॅनेल ज्या पृष्ठांवर दर्शवले जाईल ते तपासा. खालील पृष्ठांमध्ये वगळा - पृष्ठे वगळा.

- वापरकर्ता भूमिकांसाठी प्रदर्शन, येथे तुम्ही पॅनेल कोणत्या वापरकर्त्याच्या भूमिकांसाठी दाखवले जाईल ते निवडू शकता. सर्व वापरकर्ते – प्रत्येकासाठी, सर्व लॉग इन केलेले वापरकर्ते – फक्त अधिकृत वापरकर्त्यांसाठी, अतिथी वापरकर्ते – फक्त पाहुण्यांसाठी, पुढील वापरकर्त्यांच्या भूमिकांसाठी – भूमिका तपासा.

रंग

- बार रंग, बारसाठी रंग निवडा.

- संदेश मजकूर रंग, पॅनेलमधील मजकूरासाठी रंग निर्दिष्ट करा.

- बटणाचा रंग, बटणासाठी रंग निवडा, आपण ग्रेडियंट प्रदर्शित करण्यासाठी दोन रंग निर्दिष्ट करू शकता.

- बटण मजकूर रंग, बटणातील मजकूरासाठी रंग.

- बटणाचा रंग पुन्हा उघडा, पॅनेल उघडण्यासाठी बटणाचा रंग.

- बटणाचा रंग बंद करा, पॅनेलच्या बंद बटणासाठी रंग निवडा.

- सानुकूल CSS, आपण पॅनेलसाठी आपल्या स्वतःच्या CSS शैली सेट करू शकता, परंतु हे आवश्यक नाही.

शेवटी तुमचे बदल जतन करा.

तुमच्या वर्डप्रेस साइटच्या वरच्या किंवा तळाशी सूचना बारअद्यतनित: 25 जुलै 2018 द्वारे: इल्या झुरावलेव्ह

नमस्कार, ब्लॉग साइटचे प्रिय वाचक. आज मला बर्‍यापैकी कार्यक्षम आणि सोयीस्कर upPrev प्लगइनबद्दल बोलायचे आहे, जे एकाच वेळी अनेक प्रकारचे पृष्ठ लिंकिंग लागू करू शकते. प्रत्येक लेखाच्या पानाच्या तळाशी तुम्ही त्याचे कार्य (किमान हा लेख लिहिताना) पाहू शकता - समान सामग्रीच्या सूचीसह एक पॉप-अप पॅनेल उजवीकडे दिसेल.

प्लगइन केवळ समान सामग्रीच नाही तर त्याच श्रेणीतील मागील लेख किंवा टॅगचे संग्रहण देखील प्रदर्शित करू शकते (याबद्दल आम्ही वरील लेखात तपशीलवार बोललो आहोत आणि ज्याचे व्यावहारिक अंमलबजावणी मी वर्णन केले आहे), मागील साहित्य संपूर्ण ब्लॉगचे स्वरूप, तसेच यादृच्छिकपणे घेतलेली प्रकाशने. शिवाय, पोस्ट लिहिताना तुम्ही थंबनेल तयार केल्यास संपूर्ण गोष्ट मसालेदार होऊ शकते.

आता वेबसाइट प्रमोशनमध्ये लिंकिंग काय भूमिका बजावते?

सर्वसाधारणपणे, वेबसाइटला तिच्या पुढील यशस्वी प्रमोशनसाठी ऑप्टिमाइझ करणे हे कार्य क्रमांक एक आहे (क्रमांक दोन म्हणजे बॅकलिंक्स मिळवणे). अंतर्गत घटक इतर सर्व गोष्टींचा प्रभाव रोखू शकतात आणि कमी करू शकतात. दुसरीकडे, हे शक्य नाही (विशेषत: सामग्रीमधील कीवर्ड आणि अंतर्गत लिंक्सच्या अँकरसह).

आजकाल, प्रमोशनसाठी एकात्मिक दृष्टीकोन प्रभारित आहे आणि त्यात दुवा साधणे खूप महत्वाचे आहे. अलीकडे, कोणत्याही गोष्टीचे दृश्यमानपणे प्रतिनिधित्व करण्यासाठी इन्फोग्राफिक्स वापरणे फॅशनेबल झाले आहे. एसइओच्या विषयावर तुम्हाला अनेक समान फ्लोचार्ट सापडतील, उदाहरणार्थ, वेबसाइटची जाहिरात कशी करावी याबद्दल Seopro च्या लेखात. दुर्दैवाने, मी अद्याप अशा उत्कृष्ट कृती तयार करण्यास तयार नाही, परंतु त्यांचा संदर्भ घेतल्याने मला अनावश्यक पाणी ओतण्याची परवानगी मिळेल.

कोणती लिंकिंग योजना निवडायची? खूप कठीण प्रश्न, कारण याआधी चांगल्या प्रकारे काम केलेल्या अनेक योजना (सर्व समान "रिंग", अंमलबजावणीच्या पद्धतींचे दुवे ज्या मी वर दिले आहेत) यापुढे दहा वर्षांपूर्वी पाहिलेले अभूतपूर्व परिणाम देत नाहीत. शोध इंजिन देखील शिकत आहेत आणि त्यांच्या दृष्टिकोनातून स्पष्टपणे फसवणूक काय आहे हे लक्षात न घेण्याचा प्रयत्न करीत आहेत.

पेड्रँकच्या सिद्धांतानुसार रिंगांच्या मालिकेच्या रूपात एकमेकांशी जोडणे, या रिंगमध्ये गुंतलेल्या साइट पृष्ठांचे () स्थिर वजन गंभीरपणे वाढवायला हवे.

तथापि, हे नेहमी सराव मध्ये कार्य करत नाही. हे शक्य आहे की जेव्हा वैयक्तिक पृष्ठे निर्देशांकाच्या बाहेर पडतात, तेव्हा रिंग तुटते किंवा हे शक्य आहे की मार्कअप कमी करण्यासाठी, शोधाने स्थितीचे वजन मोजण्यासाठी क्लासिक फॉर्म्युलामध्ये एक गंभीर घट घटक सादर केला आहे.

वेबसाइट पृष्ठांना दुवा साधण्याचे आणखी एक कार्य आहे, जे यापुढे Yandex किंवा Google ला आनंदित करण्यासाठी नाही तर पाहुण्याला ते आवडेल. तुमचा ब्लॉग वापरून पाहण्यासाठी त्याला एक लेख स्पष्टपणे पुरेसा नसतो - तुम्ही त्याला आवडण्यासाठी, त्याला टिकवून ठेवण्यासाठी आणि शक्यतो त्याला तुमचा सदस्य बनवण्यासाठी त्याला दुसरीकडे जाण्यासाठी आमंत्रित केले पाहिजे.

त्यामुळे लिंकिंगवरही परिणाम होतो वर्तणूक घटक, जे शोध देखील विचारात घेते आणि दरवर्षी मोठ्या प्रमाणात आणि मोठ्या प्रमाणात. जवळजवळ सर्व वेबमास्टरना हे समजते आणि समान सामग्रीसह, सर्वाधिक वाचलेल्या प्रकाशनांसह किंवा त्याच श्रेणीतील लेखांसह साइटवर ब्लॉक्स जोडतात. थीमवर कदाचित इतर भिन्नता आहेत.

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

मी स्वतः त्यांच्यासाठी बरेच प्रयत्न केले आहेत आणि त्यापैकी काहींबद्दल पुनरावलोकने देखील लिहिली आहेत (). खरं तर, संबंधित पोस्ट्सची गणना करण्यासाठी आणि ब्लॉग पृष्ठांवर सूचीबद्ध करण्यासाठी नमूद केलेले प्लगइन सर्वोत्तम आहे.

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

बरं, किंवा हे:

आमच्या आजच्या नायकाला फोन केला वर मागीलअजून एक संबंधित पोस्ट प्लगइन डेटाबेसमधून माहिती कशी घ्यायची हे देखील माहित आहे आणि योग्य गोष्ट करते, कारण प्रत्येक वेळी चाक पुन्हा शोधण्याची आवश्यकता नाही. चला, खरं तर, अभियांत्रिकीच्या या चमत्काराच्या क्षमतेचे वर्णन करूया.

upPrev प्लगइन वापरून पर्याय लिंक करणे

मी या शैलींना स्पर्श केला नाही, कारण मी वेगळा मार्ग घेतला (सर्वात थेट नाही), ज्याचे मी खाली मजकूरात वर्णन करेन. नंतर दुसऱ्या टॅबवर जा:

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

ही बाब केवळ पोस्टसाठी आयोजित करण्याचा माझा हेतू आहे, जे योग्य फील्डमध्ये चेकमार्कद्वारे सूचित केले आहे. पोस्टच्या शीर्षकाव्यतिरिक्त, हे पॅनेल पोस्टच्या सुरुवातीपासून किंवा कोट क्षेत्र भरल्यास अनेक शब्द (त्यांचा क्रमांक अगदी तळाशी सेट केलेला आहे) देखील प्रदर्शित करू शकतो. ते मला अनावश्यक वाटले.

तिसरा टॅब या पॅनेलमधील लिंकवरील क्लिक्सच्या संख्येचा मागोवा ठेवण्यासाठी वापरला जातो, जो मी वापरला नाही. तथापि, चौथ्या टॅबवर मी अजूनही कॅशे सक्रिय केला आहे. पाचव्या टॅबवर, मी मोबाइल फोनवर पॅनेलचे प्रदर्शन प्रतिबंधित केले, परंतु टॅब्लेटवर त्याच्या प्रदर्शनावर आक्षेप घेतला नाही:

बरं, हे सर्व आहे, upPrev ने सेटिंग्ज पूर्ण केल्या आहेत, परंतु मी अजून एक संबंधित पोस्ट प्लगइनच्या सेटिंग्जमध्ये पॅनेलचे स्वरूप आधीच बदलले आहे.

स्लाइडिंग पॅनेल सामग्रीचे स्वरूप सानुकूलित करणे

तेथे मी एक टेम्पलेट फाइल निवडली जी समान पोस्ट प्रदर्शित करण्यासाठी जबाबदार असेल (या विस्तारासह कार्य करण्याचे सार आणि तपशीलांसाठी वरील लिंक पहा):

ते. आता upPrev प्लगइन (पॉप-अप पॅनेलमध्ये) द्वारे प्रदर्शित केलेल्या समान पोस्टच्या सूचीचे स्वरूप माझ्या थीम () असलेल्या फोल्डरमधील माझ्या yarpp-template-list.php फाइलमध्ये लिहिलेल्या कोडद्वारे निर्धारित केले जाते. जर तुमचा ब्लॉग पोस्टसाठी लघुप्रतिमा तयार करत असेल, तर त्यांच्या समर्थनासह अजून एक संबंधित पोस्ट प्लगइन आर्सेनलमधून टेम्पलेट निवडण्यात अर्थ आहे.

या फाइलसाठी कोड आहे:

have_posts()): $postsArray = array(); तर ($related_query->have_posts()): $related_query->the_post(); $postsArray = "
• ".get_the_title()."
"; endwhile; echo implode(" "."\n",$postsArray); // स्वल्पविरामाने विभक्त केलेल्या संबंधित आयटमची सूची मुद्रित करा:?>

संबंधित पोस्ट नाहीत.

तुम्ही बघू शकता, येथे स्लाइडिंग सॉकेटचे शीर्षलेख राहतात, त्यामुळे क्रॅक() टाळण्यासाठी तुम्हाला ही फाइल BOM शिवाय UTF-8 एन्कोडिंगमध्ये रूपांतरित करावी लागेल (आवश्यक असल्यास). मला तुमच्याबद्दल माहिती नाही, परंतु माझ्याकडे नोटपॅड++ () हा माझा मुख्य संपादक म्हणून बराच काळ आहे आणि त्यात हे रूपांतरण खालीलप्रमाणे केले आहे:

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

A.oy (रंग: #333; फॉन्ट:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif; line-height:18px;) li.eto (text-align:center; padding:12px 5px 17px 5px;मार्जिन: 5px 0;बॉर्डर: डॉटेड 2px #ccc;) li.eto:hover (मजकूर-सजावट:अधोरेखित;) div.oyy (मार्जिन:0 0 0 0;पॅडिंग:5px 0;font:normal 17px "Trebuchet एमएस", वर्डाना, एरियल;रंग:#666;)

lampochka वर्ग हिरव्या चेकमार्क जोडतो, जे बेस64 कोड वापरून माझ्या CSS कोडमध्ये सेट केले आहेत (मी हा कोड कुठेतरी कॉपी केला आहे). तुम्हाला स्वारस्य असल्यास, माझ्या style.css वर एक नजर टाका. ठीक आहे आता सर्व संपले आहे. जर तुम्ही काही विसरलात तर विचारा. खरे आहे, मी हा लिंकिंग पर्याय एका महिन्यापूर्वी सेट केला होता आणि या काळात माझ्या मनातून काहीतरी आधीच गायब झाले आहे.

तुला शुभेच्छा! ब्लॉग साइटच्या पृष्ठांवर लवकरच भेटू

तुम्हाला स्वारस्य असेल

अजून एक संबंधित पोस्ट प्लगइनमधील पारदर्शक पिक्सेल http://yarpp.org/pixels कसे काढायचे आणि शिलालेख तत्सम साहित्य कसे बदलावे
अंतर्गत लिंकिंगसाठी संबंधित पोस्ट प्लगइन वापरून वर्डप्रेसमध्ये (थंबनेल्ससह) संबंधित पोस्टची सूची तयार करणे
वर्डप्रेससाठी अजून एक संबंधित पोस्ट आणि संबंधित पोस्ट स्लाइडर प्लगइन वापरून वेबसाइट वर्तणुकीची आकडेवारी कशी सुधारायची
साधे काउंटर आणि श्रेणी आणि पृष्ठ चिन्ह - सुंदर आरएसएस आणि ट्विटर काउंटर, तसेच वर्डप्रेसमधील श्रेणी आणि पृष्ठांसाठी चिन्हे
माझ्या ब्लॉगवर (साइट) वर्डप्रेस प्लगइन तुमच्या वेबसाइटसाठी स्लाइडर आणि स्लाइडशो - कोणते पर्याय अस्तित्वात आहेत आणि jQuery स्लाइडर स्क्रिप्ट्स कसे वापरायचे
ब्रेडक्रंब NavXT प्लगइन वापरून वर्डप्रेसमध्ये ब्रेडक्रंब (लिंकिंग मजबूत करणे)
पृष्ठे तयार करताना वर्डप्रेसमध्ये मेमरी वापर कमी करणे - स्थानिकीकरण फाइल बदलण्यासाठी WPLANG लाइट प्लगइन
WP-PageNavi - वर्डप्रेस ब्लॉगसाठी पृष्ठ नेव्हिगेशन - स्थापना, कॉन्फिगरेशन आणि पृष्ठांकनाचे स्वरूप बदलणे
ते कॅलेंडर करा! - WordPress साठी इव्हेंट कॅलेंडर
वर्डप्रेसवरून मेल पाठवले जात नाही आणि व्हिज्युअल एडिटर काम करत नाही - SMTP आणि पोस्ट एडिटर बटणे प्लगइन कॉन्फिगर करून उपाय

निश्चितपणे, तुम्ही अनेकदा वेबसाइटच्या पृष्ठांवर विविध प्रकारचे आणि स्थानांचे मागे घेता येण्याजोगे पॅनेल भेटले असतील जे शीर्षस्थानी, खाली, उजवीकडे किंवा डावीकडे पूर्णपणे स्वयंचलितपणे, दिलेल्या वेळेच्या अंतराने किंवा क्लिक करून सक्रिय केले जातात. नियमानुसार, अशा पॅनल्समध्ये काही अतिरिक्त माहिती असते, काही महत्त्वाची आणि काही इतकी महत्त्वाची नसते, जी वापरकर्त्याच्या नजरेतून काही काळासाठी लपलेली असते. उदाहरणार्थ, सबस्क्रिप्शन फॉर्म, सोशल नेटवर्क विजेट्स, लिंक्स, टॅग, संपर्क माहिती इ. इ., थोडक्यात, काहीही.
जावास्क्रिप्टमध्ये स्लाइडिंग पॅनेल, विविध सीएमएस, वैयक्तिक jQuery प्लगइन्स, मॉड्यूल्स आणि प्लगइन्समध्ये स्लाइडिंग पॅनेल लागू करण्यासाठी मोठ्या संख्येने तयार समाधाने आहेत, परंतु माझ्या लक्ष वेधून घेतलेल्या फारच कमी CSS मध्ये पूर्णपणे कार्य करण्याच्या पद्धती होत्या.

मला बर्‍याच दिवसांपासून असे काहीतरी करायचे आहे, लपविलेले चेकबॉक्सेस वापरण्याची यंत्रणा सर्वज्ञात आणि समजण्यासारखी आहे, परंतु तरीही मला ते कधीच मिळाले नाही. आणि म्हणून, कोडपेनच्या धुळीने भरलेल्या स्टोअररूममध्ये अडखळल्यावर, मी शुद्ध CSS मध्ये मागे घेता येण्याजोग्या शीर्ष पॅनेलची स्वतःची आवृत्ती प्रयोग करण्याचे आणि तयार करण्याचे ठरवले, अगदी कार्यरत, किंचित सुधारित आणि आमच्या भावासाठी अनुकूल, आणि हेच घडले)) .

आम्ही उदाहरण पाहिले, त्याची मूळशी तुलना केली आणि आता, कोणाला याची गरज आहे, ही संपूर्ण गोष्ट कशी कार्य करते हे एकत्र शोधूया. मी तुम्हाला पुन्हा एकदा आठवण करून देतो, js नाही, फक्त मूळ html आणि css ची “जादू” सर्व काम करेल.

HTML लेआउट

यात तीन मुख्य घटक असतात: एक मूलभूत कंटेनर, सामग्रीसह ब्लॉक आणि पॅनेल उघडण्यासाठी/बंद करण्यासाठी एक बटण.

तुम्ही बघू शकता, पॅनेल डिझाइनमध्ये type=" " ध्वज असतो, जो पूर्वनिर्धारितपणे लपवलेला आणि निष्क्रिय असतो. टॅग वापरणे , जे css मधील बटण म्हणून डिझाइन केलेले आहे, आम्ही चेकबॉक्स दरम्यान कनेक्शन स्थापित करतो, म्हणजे, आपण लेबलवर क्लिक केल्यास, इनपुट कार्य करेल (सक्रिय होईल). बरं, स्यूडो-क्लास वापरून: css मध्ये आम्ही लपविलेले चेकबॉक्स आणि पॅनेल घटकांमधील कनेक्शन स्थापित करतो.
मी ताबडतोब लक्षात घेऊ इच्छितो की उघडे/बंद बटण पॅनेलच्या मुख्य भागाशी जोडलेले नाही, परंतु मुख्य पृष्ठ सामग्री कंटेनरशी संबंधित आहे

आणि जेव्हा स्लाइडिंग पॅनेल सक्रिय केले जाते, तेव्हा सामग्री ब्लॉक आणि बटण पॅनेलच्या उंचीशी संबंधित अंतराने खाली हलवले जातात.

आता, आपल्या स्लाइडिंग पॅनेलच्या शैली तयार करूया, प्रथम, बेस कंटेनरची परिमाणे सेट करा, पार्श्वभूमी रंग आणि त्याचे प्रारंभिक स्थान निश्चित करा. CSS मध्ये आपण class.top-panel तयार करू, ज्यामध्ये आपल्याला आवश्यक असलेले सर्व गुणधर्म लिहू.
आमचे पॅनेल मागे घेण्यायोग्य आहे, याचा अर्थ आम्हाला ते लपविण्याची गरज आहे, हे अगदी सोप्या पद्धतीने केले जाते. निश्चित स्थितीची स्थिती निश्चित करा: निश्चित; , पृष्ठाच्या रुंदीच्या पूर्ण रुंदीपर्यंत पसरवा: 100%; , आम्ही पॅनेलची उंची (उंची:) निर्दिष्ट करत नाही, या प्रकरणात, पॅनेल स्वयंचलितपणे सामग्रीच्या आकाराशी जुळवून घेते आणि transform: translateY(-100%); , आमच्या पॅनेलला पृष्ठाच्या वरच्या काठाच्या पलीकडे ढकलून द्या.

. शीर्ष पॅनेल (पार्श्वभूमी: #39464e; स्थिती: निश्चित; शीर्ष: 0; रुंदी: 100%; पॅडिंग: 0; - वेबकिट- बॉक्स- आकार बदलणे: सीमा- बॉक्स; - मोझ- बॉक्स- आकार देणे: सीमा- बॉक्स; बॉक्स- आकार बदलणे: बॉर्डर- बॉक्स; - वेबकिट- ट्रान्सफॉर्म: translateY(- 100% ) ; - moz- transform: translateY(- 100% ) ; transform: translateY(- 100% ) ;)

टॉप-पॅनल (पार्श्वभूमी: #39464e; स्थिती: निश्चित; शीर्ष: 0; रुंदी: 100%; पॅडिंग: 0; -वेबकिट-बॉक्स-साइजिंग: बॉर्डर-बॉक्स; -मोज-बॉक्स-साइजिंग: बॉर्डर-बॉक्स; बॉक्स- आकारमान: बॉर्डर-बॉक्स; -वेबकिट-ट्रान्सफॉर्म: ट्रान्सलेटवाय(-100%); -मोज-ट्रान्सफॉर्म: ट्रान्सलेटवाय(-100%); ट्रान्सफॉर्म: ट्रान्सलेटवाय(-100%);)

पॅनेल संदेश ब्लॉक बेस कंटेनरच्या आत स्थित आहे आणि त्याला विशिष्ट वर्ग वर्ग="संदेश" नियुक्त केला आहे, त्यात आम्ही या बाजूला, रंग आणि फॉन्ट फॅमिली, प्रतिमा आकार इ.च्या आत असलेल्या सर्व घटकांसाठी गुणधर्म निर्दिष्ट करतो. .
तुम्ही अर्थातच, थेट बेस कंटेनरमध्ये संदेश ठेवून या अतिरिक्त ब्लॉकशिवाय सहजपणे करू शकता, परंतु यामुळे पॅनेलच्या संभाव्य सेटिंग्जची लवचिकता गमावली जाते.
संदेश मध्यभागी काटेकोरपणे प्रदर्शित केला जातो आणि निर्दिष्ट रुंदी कमाल-रुंदी: 980px पर्यंत पसरलेला असतो; , मूल्य अनियंत्रित आहे, आपण पूर्णपणे भिन्न आकार निवडू शकता.

/* संदेश ब्लॉक */ .संदेश (रंग: #fff; फॉन्ट-वजन: 300; स्थान: सापेक्ष; पॅडिंग: 2em; समास: 0 ऑटो; कमाल-रुंदी: 980px ) /* स्तर 1 शीर्षक */ .message h1 ( रंग: #fff ) /* स्तर 2 शीर्षलेख */ .संदेश h2 (रंग: #888 )

पुढे, आम्ही आमच्या पॅनेल स्विचसाठी सर्व आवश्यक शैली परिभाषित करू. सुरूवातीस, html टॅगमध्ये, अधिक त्रास न करता, वापरकर्त्यांच्या नजरेतून type="checkbox" ध्वज लपवूया चला लपविलेले गुणधर्म लिहू, जे ऑब्जेक्ट ब्राउझर विंडोमध्ये प्रदर्शित केले जावे की नाही हे निर्धारित करते.

उघडा ( स्थिती: परिपूर्ण; क्लिप: रेक्ट(0 0 0 0); अपारदर्शकता: 0; )

तेगू चला class="btn" असाइन करूया, ज्याच्या सोबत आपण css मध्ये काम करू जेणेकरून एक छान स्विच (बटण) “ड्रॉ” करण्यासाठी:

/* पॅनेल स्विच */लेबल btn (प्रदर्शन: ब्लॉक; स्थिती: परिपूर्ण; उजवीकडे: 25px; शीर्ष: 100%; /*तळ: -35px;*/ कर्सर: पॉइंटर; पार्श्वभूमी: #2bbbad; सीमा- त्रिज्या: 0 0 3px 3px; पॅडिंग: 8px 16px ; रंग: #fff; फॉन्ट-आकार: 100%; रेखा-उंची: 1em; मजकूर- संरेखित: मध्यभागी; - वेबकिट- फॉन्ट- स्मूथिंग: अँटिअलियास्ड; कर्सर: पॉइंटर; बॉक्स- सावली: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16 ) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12 ) ; z-इंडेक्स: 9999 ) /* फिरवा चालू करा */लेबल btn: होवर (- वेबकिट- संक्रमण: 0. 35s; - moz- संक्रमण: 0. 35s; संक्रमण: 0. 35s; बॉक्स- सावली: 0 5px 11px 0 rgba(0 , 0 , 0 , 0.18 ) , 0 15x 4px 0 rgba(0 , 0 , 0 , 0.15 ) ) /* डाउन स्विच बाण */लेबल btn: नंतर ( सामग्री: "\f078" ; फॉन्ट: सामान्य 18px/ 1 फॉन्ट अप्रतिम; मजकूर- सजावट: इनहेरिट )

/* पॅनेल स्विच */ label.btn ( प्रदर्शन: ब्लॉक; स्थिती: परिपूर्ण; उजवीकडे: 25px; शीर्ष: 100%; /*तळ: -35px;*/ कर्सर: पॉइंटर; पार्श्वभूमी: #2bbbad; सीमा-त्रिज्या: 0 0 3px 3px; पॅडिंग: 8px 16px; रंग: #fff; फॉन्ट-आकार: 100%; ओळ-उंची: 1em; मजकूर-संरेखित: मध्यभागी; -वेबकिट-फॉन्ट-स्मूथिंग: अँटीअलियास्ड; कर्सर: पॉइंटर; बॉक्स-छाया: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); z-इंडेक्स: 9999 ) /* फिरवा टॉगल */ label.btn:होवर ( - webkit -संक्रमण: 0.35s; -moz-संक्रमण: 0.35s; संक्रमण: 0.35s; बॉक्स-छाया: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15) ) /* डाउन स्विच बाण */ label.btn: नंतर ( सामग्री: "\f078"; फॉन्ट: सामान्य 18px/1 FontAwesome; मजकूर-सजावट: इनहेरिट )

स्विच बाण FontAwesome फॉन्ट-आयकॉन पॅकेजमधून घेतले जातात; त्यानुसार, या सेटसाठी शैली फाइल प्रथम पृष्ठाशी कनेक्ट केलेली असणे आवश्यक आहे:

< link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

तुम्ही दुसऱ्या प्रकारचे स्विच वापरू शकता, जसे की जुळणारा मजकूर किंवा html चिन्ह.
डीफॉल्टनुसार, मी स्विचसाठी तीन अवस्था परिभाषित केल्या आहेत: जेव्हा पॅनेल बंद असते - खाली बाण, जेव्हा पॅनेल उघडे असते - वर बाण आणि अर्थातच फिरत असताना थोडासा होव्हर प्रभाव.

आम्ही आमचे पॅनेल सक्रिय करतो आणि pseudo-class:checked वापरून स्विचची स्थिती बदलतो.
बॉक्स-शॅडो गुणधर्म वापरून, मी सक्रिय पॅनेलच्या तळाशी एक हलकी सावली जोडली आणि संक्रमण वापरून, मी पॅनेलच्या दोन अवस्थांमध्ये (खुले आणि बंद) एक सामान्य संक्रमण प्रभाव सेट केला.

. उघडा: तपासले ~ . टॉप-पॅनल ( बॉक्स- सावली: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16 ) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12 ) ; - वेबकिट- ट्रान्सफॉर्म: translateY(0 ) - ट्रान्सफॉर्म: translateY(0) ; ट्रान्सफॉर्म: translateY(0) ; - वेबकिट- संक्रमण: 0. 35s; - moz- संक्रमण: 0. 35s; संक्रमण: 0. 35s). उघडा: नाही(: चेक केलेले) ~ . टॉप-पॅनल (- वेबकिट- संक्रमण: 0. 35s; - moz- संक्रमण: 0. 35s; संक्रमण: 0. 35s) /* क्लिक केल्यावर रंग बदला */. उघडा: तपासले ~ . शीर्ष-पॅनेल > लेबल. btn (पार्श्वभूमी: #dd6149 ) /* बाण वर स्विच करा*/. उघडा: तपासले ~ . शीर्ष-पॅनेल > लेबल. btn: नंतर ( सामग्री: "\f077" ; फॉन्ट: सामान्य 18px/ 1 फॉन्ट अप्रतिम )

उघडा:चेक केलेले ~ .टॉप-पॅनेल ( बॉक्स-छाया: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -webkit-transform: translateY( 0); -moz-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.35s; -moz-transition: 0.35s; संक्रमण: 0.35s ) .open:not(:checked) ~ .टॉप-पॅनल ( -वेबकिट-संक्रमण: 0.35s; -moz-संक्रमण: 0.35s; संक्रमण: 0.35s) /* क्लिक केल्यावर रंग बदला */ .open:checked ~ .top-panel > label.btn (पार्श्वभूमी: #dd6149 ) /* वर स्विच बाण*/ .open:checked ~ .top-panel > label.btn:after ( सामग्री: "\f077"; फॉन्ट: सामान्य 18px/1 FontAwesome )

वापरकर्ता उपकरणांच्या वेगवेगळ्या स्क्रीनवर पाहिल्यावर फॉन्ट आकार बदलण्यासाठी, मी @media मीडिया क्वेरी वापरतो. आधुनिक वास्तविकता लक्षात घेता, मला वाटते की हे जोडणे अजिबात अनावश्यक नाही:

@media फक्त स्क्रीन आणि (कमाल-रुंदी: 400px) (बॉडी (फॉन्ट-आकार: 90%)) @media फक्त स्क्रीन आणि (कमाल-रुंदी: 800px) (बॉडी (फॉन्ट-आकार: 100%)) @media फक्त स्क्रीन आणि (किमान-रुंदी: 1100px) ( मुख्य भाग ( फॉन्ट-आकार: 120% ) )

@media फक्त स्क्रीन आणि (कमाल-रुंदी: 400px) ( बॉडी (फॉन्ट-आकार: 90% ) ) @media फक्त स्क्रीन आणि (कमाल-रुंदी: 800px) (बॉडी (फॉन्ट-आकार: 100%) ) @media फक्त स्क्रीन आणि (किमान-रुंदी: 1100px) ( मुख्य भाग ( फॉन्ट-आकार: 120% ) )

बहुधा एवढेच! वरून स्लाइड होणारे पॅनेल वापरासाठी तयार आहे; जे काही शिल्लक आहे ते सामग्रीसह भरणे आहे. पुन्हा एकदा, थेट उदाहरण पहा, स्त्रोत कोडसह संग्रहण डाउनलोड करा, विविध पॅरामीटर्ससह प्रयोग करण्यास मोकळ्या मनाने आणि तयार करा, तयार करा, तयार करा...

सर्व आदराने, अँड्र्यू

अलीकडे, आमच्या वाचकांपैकी एकाने त्याच्या साइट नेव्हिगेशन मेनूला jQuery पॉप-अप मेनू बारसह कसे बदलायचे ते विचारले. असे पॅनेल साइटच्या मोबाइल आवृत्त्यांवर उपयोगिता लक्षणीयरीत्या सुधारू शकते. या लेखात, आम्ही तुम्हाला वर्डप्रेस थीममध्ये स्लाइडिंग मेनू बार कसा जोडायचा ते दर्शवू.

टीप: हा लेख HTML आणि CSS चे मध्यवर्ती ज्ञान गृहीत धरतो.

वर्डप्रेसमध्ये स्लाइडिंग पॅनेलसह मानक मेनू बदलणे

आमच्या थीमचा मानक मेनू राखून, कमी स्क्रीन रिझोल्यूशन असलेल्या वापरकर्त्यांना स्लाइडिंग मेनू बार दाखवणे हे येथे लक्ष्य आहे जेणेकरून डेस्कटॉप वापरकर्ते मेनूची संपूर्ण आवृत्ती पाहू शकतील. आम्‍ही प्रारंभ करण्‍यापूर्वी, हे समजून घेण्‍याची महत्‍त्‍वाची आहे की तेथे बर्‍याच वेगवेगळ्या वर्डप्रेस थीम आहेत, म्‍हणून तुम्‍हाला तुमच्‍या डिझाईनवर अवलंबून CSS शैली बदलण्‍याची आवश्‍यकता आहे.

सर्व प्रथम, आपल्याला नोटपॅड सारखे टेक्स्ट एडिटर उघडावे लागेल आणि एक नवीन फाइल तयार करावी लागेल. त्यात खालील कोड कॉपी आणि पेस्ट करा:

(function($) ( $("#toggle").toggle(function() ( $("#popout").animate(( left: 0 ), "slow", function() ( $("#toggle" .html(" "); )); ), फंक्शन() ( $("#popout").ऍनिमेट(( डावीकडे: -250), "स्लो", फंक्शन() ( $("#toggle").html(" "); )); )); ))(jQuery);

बदला example.comतुमच्या वेबसाइट डोमेन नावावर आणि बदला तुमची थीमतुमच्या वर्तमान थीमच्या वास्तविक फोल्डरमध्ये. नावासह फाईल सेव्ह करा slidepanel.jsसंगणकावर. हा कोड स्लाइडिंग मेनू बार टॉगल करण्यासाठी jQuery वापरतो. हे स्विचिंग इफेक्ट देखील अॅनिमेट करते.

तुमचा FTP क्लायंट (फाइलझिला किंवा टोटल कमांडर) उघडा आणि तुमच्या साइटशी कनेक्ट करा. पुढे, तुमच्या थीमच्या निर्देशिकेवर जा आणि त्यात आधीच एखादे फोल्डर असल्यास js, नंतर उघडा. जर तुमच्या थीममध्ये अशी निर्देशिका नसेल तर ती तयार करा आणि आत slidepanel.js फाइल अपलोड करा.

पुढील पायरी म्हणजे मेन्यूसाठी आयकॉन डिझाइन करणे किंवा शोधणे. यासाठी सर्वात जास्त वापरले जाणारे चिन्ह तीन बार असलेले आहे. तुम्ही ते कोणत्याही ग्राफिक्स एडिटरमध्ये तयार करू शकता (उदाहरणार्थ, फोटोशॉप) किंवा Google वर अस्तित्वात असलेल्या अनेकांपैकी एक शोधू शकता. या उदाहरणात आपण आयकॉनसाठी 27x23px आकाराचा वापर करू. एकदा तुम्ही ते तयार केले की, त्याचे नाव menu.png असे बदला आणि तुमच्या थीम निर्देशिकेतील इमेज फोल्डरमध्ये अपलोड करा.

पुढील पायरी स्लाइडिंग मेनू बारसाठी आहे. तुम्हाला फक्त खालील कोड फाइलमध्ये कॉपी आणि पेस्ट करणे आवश्यक आहे functions.phpविषय:

Wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", खरे);

आता सर्व तयारीचे काम पूर्ण झाले आहे, तुम्हाला डीफॉल्ट थीम मेनूमध्ये बदल करणे आवश्यक आहे. सामान्यतः, बहुतेक थीम फाइलमध्ये नेव्हिगेशन मेनू प्रदर्शित करतात header.phpविषय. उघडत आहे header.phpआणि यासारखी एक ओळ शोधा:

"प्राथमिक", "menu_class" => "nav-मेनू")); ?>

छोट्या स्क्रीनवर स्लाइडिंग मेनू बार प्रदर्शित करण्यासाठी HTML कोडमध्ये थीम मेनू गुंडाळणे हे आव्हान आहे. आम्ही ते गुंडाळू

"प्राथमिक", "menu_class" => "nav-मेनू")); ?>

example.com ला तुमच्या डोमेन नावाने आणि तुमची-थीम तुमच्या थीम फोल्डरने बदला. तुमचे बदल जतन करा.

शेवटची पायरी म्हणजे मोठ्या स्क्रीन असलेल्या वापरकर्त्यांसाठी मेनू चिन्ह लपवण्यासाठी CSS वापरणे आणि लहान स्क्रीन असलेल्यांसाठी ते प्रदर्शित करणे. आम्हाला मेनू चिन्हाची स्थिती आणि स्लाइडिंग पॅनेलचे स्वरूप देखील समायोजित करावे लागेल. तुमच्या थीमच्या स्टाइलशीटमध्ये हा CSS कोड कॉपी आणि पेस्ट करा.

@media स्क्रीन आणि (किमान-रुंदी: 769px) ( #toggle (प्रदर्शन: काहीही; ) ) @media स्क्रीन आणि (कमाल-रुंदी: 768px) ( #popout (स्थिती: निश्चित; उंची: 100%; रुंदी: 250px; पार्श्वभूमी : rgb(25, 25, 25); पार्श्वभूमी: rgba(25, 25, 25, .9); रंग: पांढरा; शीर्ष: 0px; डावीकडे: -250px; ओव्हरफ्लो: ऑटो; ) #toggle ( फ्लोट: उजवीकडे; स्थिती : निश्चित; शीर्ष: 60px; उजवीकडे: 45px; रुंदी: 28px; उंची: 24px; ) .nav-menu li ( सीमा-तळा: 1px ठोस #eee; पॅडिंग: 20px; रुंदी: 100%; ) .nav-menu li :होवर (पार्श्वभूमी:#CCC; ) .nav-menu li a (रंग:#FFF; मजकूर-सजावट:कोणीही नाही; रुंदी:100%; ) )

लक्षात ठेवा की तुमच्या थीमचा मेनू भिन्न CSS वर्ग वापरू शकतो आणि ते वरील वर्गांशी विरोधाभास करू शकतात. तुमचा कोणता वर्ग विरोधाभास आहे हे शोधण्यासाठी तुम्ही Chrome किंवा Firefox मधील Inspector वापरून ही समस्या सोडवू शकता. तसेच, हे विसरू नका की तुम्ही साइटच्या डिझाइनला अनुरूप पॅनेलचे स्वरूप सानुकूलित करण्यास मोकळे आहात.

सूचना पटल- आवश्यक पृष्ठावर जाण्यासाठी वापरकर्त्यास उत्तेजित करण्याचे एक अत्यंत प्रभावी साधन. याव्यतिरिक्त, ते महत्त्वपूर्ण माहिती प्रदर्शित करतात, कारण ते नेहमी वापरकर्त्याचे लक्ष वेधून घेतात. काही पॅनेलमध्ये डेटा एंट्रीसाठी फॉर्म असतात आणि ते वापरले जाऊ शकतात, उदाहरणार्थ, मेलिंग सूचीची सदस्यता आयोजित करण्यासाठी.

ऑनलाइन स्टोअरमध्ये, जाहिराती आणि सवलतींबद्दल अभ्यागतांना सूचित करण्यासाठी अधिसूचना पॅनेल सक्रियपणे वापरल्या जातात आणि अशा प्रकारे, विक्री वाढविण्यासाठी एक शक्तिशाली यंत्रणा आहे.

या पुनरावलोकनात, मी माझ्या मते, प्लॅटफॉर्मवरील वेबसाइट किंवा ब्लॉगच्या पृष्ठांवर असे पॅनेल तयार करण्यासाठी प्लगइन्सपैकी काही सर्वात कार्यक्षम आणि आकर्षक बद्दल बोलेन. त्यांच्यापैकी प्रत्येकाचे स्वतःचे फायदे, अनेक कार्ये आणि आपल्या वेबसाइटच्या शैली आणि डिझाइनमध्ये देखावा जुळवून घेण्याची क्षमता आहे. मला यात काही शंका नाही की या पुनरावलोकनामुळे तुम्ही तुमच्या गरजा पूर्ण करणारे प्लगइन निवडण्यास सक्षम असाल.

सानुकूल सूचना

उच्च-गुणवत्तेचे प्रीमियम प्लगइन ज्यामध्ये या स्तराच्या प्लगइनमध्ये अंतर्निहित सर्व आवश्यक कार्ये आहेत.

सूचना बारमध्ये साधा मजकूर असू शकतो, ईमेल एंट्री फॉर्मकिंवा वेबसाइट, सोशल नेटवर्क्स आणि काउंटडाउन टाइमरवर.

आणि हे सर्व अनुकूली कंटेनरमध्ये बंद केले आहे आणि कोणत्याही स्क्रीनवर योग्यरित्या प्रदर्शित केले जाईल. याव्यतिरिक्त, सेटिंग्ज पॅनेल आपल्याला पृष्ठावरील स्थिती आणि रंगसंगती नियंत्रित करण्यास अनुमती देते जवळजवळ कोणतेही निर्बंध नाहीत.

किंमत: $29

BugMeBar वर्डप्रेस प्लगइन

अतिशय सुंदर आणि लक्षवेधी रंग प्रभावांसह एक साधा पण लक्षवेधी पॅनेल. हे पृष्ठावर कोठेही ठेवले जाऊ शकते आणि त्याव्यतिरिक्त, ते कुकीज सेट करू शकते आणि वापरकर्त्याने अचानक ते पाहू इच्छित नसल्यास पृष्ठाच्या नंतरच्या भेटीवर प्रदर्शित केले जाऊ शकत नाही.

इतर वैशिष्ट्ये लक्षात घेण्यासारखी आहेत:

• पॅनेल कोणत्या पृष्ठांवर प्रदर्शित केले जाईल आणि ज्यावर दिसणार नाही ते निर्दिष्ट करणे.
• कुकीजचा वैधता कालावधी सेट करत आहे.
• रंग, पारदर्शकता इ. निवडण्यासह दिसण्यावर पूर्ण नियंत्रण.
• लेआउटची अखंडता राखताना निश्चित शीर्षलेख बदलण्याची क्षमता.
• संक्रमण आणि अॅनिमेशन सक्षम किंवा अक्षम करण्याची क्षमता

किंमत: $12

हॅलो बार

सर्वात लोकप्रिय एक Wordpress साठी सूचना बार. आणि मग, फुकट, जरी कार्यक्षमतेच्या बाबतीत ते कोणत्याही प्रकारे त्याच्या प्रीमियम समकक्षांपेक्षा कमी दर्जाचे नाही.
हॅलो बार वापरण्यासाठी, फक्त प्लगइनवर जा आणि तुमच्या ब्लॉगची URL प्रविष्ट करा. पुढे, तुम्हाला सेटिंग्ज पॅनेलवर नेले जाईल, जिथे तुम्ही सूचनांचे स्थान आणि स्वरूप कॉन्फिगर करू शकता. शिवाय, सेटिंग्ज पॅनेलमध्ये पूर्वावलोकन फंक्शन आहे, ज्यामुळे तुम्ही तुमच्या सूचनांना त्वरीत इच्छित स्वरूप देऊ शकता.
सेटिंग्ज पूर्ण केल्यानंतर, तुम्हाला कोडचा तुकडा प्राप्त होईल जो तुम्हाला थेट साइट पृष्ठावर पेस्ट करणे आवश्यक आहे. तुम्हाला या ऑपरेशनसाठी पुरेसे पात्र वाटत नसल्यास, तुम्ही एक स्थापित करू शकता जे तुमच्यासाठी हे नियमित काम करेल.

डीडब्ल्यू प्रोमोबार

फक्त आवश्यक गोष्टी असलेले अगदी सोपे प्लगइन. सूचना बार साधा मजकूर, एक बटण, लिंक किंवा काउंटडाउन टाइमर प्रदर्शित करू शकतो. हे आकर्षक दिसते आणि तुम्हाला सर्व सानुकूलित पर्यायांवर पूर्ण नियंत्रण देते.

Foobar - वर्डप्रेस सूचना बार

मी Foobar चा उल्लेख केला नाही तर हे पुनरावलोकन पूर्ण होणार नाही. या वर्गातील हे सर्वाधिक वापरले जाणारे प्रीमियम प्लगइन आहे. यामध्ये ३० हून अधिक सानुकूलित पर्याय आहेत आणि इतर अनेकांप्रमाणे, तुम्हाला सूचना बार सानुकूलित करण्याची अनुमती देते प्रत्येक पृष्ठासाठी स्वतंत्रपणे.

किंमत: $9

वर्डप्रेस सूचना बार

विनामूल्य प्लगइन, वापरण्यास सोपे आणि सक्रिय. पॅनेल सामग्री साधा मजकूर असू शकते किंवा त्यात विशिष्ट क्रियेशी संबंधित बटण देखील असू शकते. रंग सेटिंग्जच्या विस्तृत श्रेणीबद्दल धन्यवाद, आपण पॅनेलला आपल्या वेबसाइटच्या डिझाइनमध्ये उत्तम प्रकारे अनुकूल करू शकता.

रॉयल फूटर बार

रॉयल फूटर बार हे उच्च श्रेणीचे प्लगइन आहे, खरोखर "रॉयल". हे खूप व्यावसायिक दिसते आणि त्यात विविध पर्याय आहेत.

माहिती पॅनेलमध्ये साधा मजकूर, मेलिंग सूचीची सदस्यता घेण्यासाठी एक फॉर्म आणि सोशल नेटवर्क्सवरील खात्यांसह विविध दुवे असू शकतात. सेटिंग्ज पॅनेलमध्ये, आपण केवळ आवश्यक सेटिंग्ज सेट करू शकत नाही तर क्रियाकलापांबद्दल संपूर्ण आकडेवारी देखील मिळवू शकता.

या प्लगइनचे वैशिष्ट्य म्हणजे विकासकांनी याला A/B/C चाचणी म्हटले आहे - तुम्ही अनेक सेटिंग्ज सेट करू शकता आणि तुमच्या कामकाजाच्या वातावरणात त्यांचे मूल्यमापन केल्यानंतर, साइटच्या संकल्पनेला अनुकूल असलेली एक निवडा.

किंमत: $39

सूचना बार

एक अतिशय साधे प्लगइन जे प्रदर्शित करते सूचना पॅनेलपृष्ठाच्या शीर्षस्थानी किंवा तळाशी. मजकूर संदेशासाठी 5 रंग पर्यायांचा समावेश आहे किंवा