वर्तमान में एक वर्डप्रेस बिल्ड खत्म करने की कोशिश कर रहा है लेकिन मैं थोड़ी सी समस्या में भाग गया हूं।

मैं निम्नलिखित jQuery कोड का उपयोग कर रहा हूं:

jQuery( document ).ready( function ($) {
    var mobile = $(window).width();
    if ( mobile <= 680 ){
        $( ".product_title.entry-title" ).insertBefore( ".woocommerce-product-gallery" );
    }
} );

इसलिए जब स्क्रीन 680px से कम है, तो "woocommerce-product-gallery" वर्ग से पहले "product_title.entry-title" वर्ग डाला जाएगा। यह मूल रूप से मेरे उत्पाद पृष्ठ पर उत्पाद गैलरी के ऊपर शीर्षक को स्थानांतरित करता है।

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

0
user3599852 30 जिंदा 2020, 07:27
आप दो शीर्षक एक मोबाइल के लिए और दूसरा 600px से अधिक व्यूपोर्ट के लिए रख सकते हैं। अब सीएसएस मीडिया प्रश्नों का उपयोग करके शीर्षक के प्रदर्शन को नियंत्रित करें। Jquery का उपयोग करने की कोई ज़रूरत नहीं है। developer.mozilla.org/en-US/docs/Web/ CSS/Media_Queries/…
 – 
Partha Roy
30 जिंदा 2020, 07:30
जैसा कि ऊपर उल्लेख किया गया है, मीडिया प्रश्न निश्चित रूप से यहां सही समाधान हैं। हालांकि, अपने वर्तमान कार्यान्वयन को ठीक करने के लिए आपको window.onresize ईवेंट। और अगर इस घटना का उपयोग कर रहे हैं, तो आप निश्चित रूप से एक डिब्यूसर का भी उपयोग करना चाहेंगे।
 – 
fubar
30 जिंदा 2020, 07:32
मुझे पता है कि मैं सीएसएस मीडिया प्रश्नों का उपयोग कर सकता हूं। लेकिन इसमें मेरी वर्डप्रेस थीम में खुदाई करना और लेआउट के साथ खिलवाड़ करना शामिल होगा। मैं किसी भी HTML को छूने से बचने की कोशिश कर रहा हूं।
 – 
user3599852
30 जिंदा 2020, 07:34
मीडिया क्वेरी आपके लिए बेहतरीन समाधान है।
 – 
Grey Chanel
30 जिंदा 2020, 07:34
बस उस अनुभाग पर कस्टम वर्ग जोड़ें (जो WP विकल्पों की अनुमति है) मीडिया क्वेरी के माध्यम से इस वर्ग का उपयोग करके उस शीर्षक को लक्षित करें, इसके लिए आपको JS की आवश्यकता नहीं है
 – 
Awais
30 जिंदा 2020, 07:44

2 जवाब

@ पार्थ रॉय की टिप्पणी का निर्माण आप इस तरह की मीडिया क्वेरी का उपयोग कर सकते हैं:

.product_title.entry-title.mobile-only {
  display: block;
}
.product_title.entry-title.desktop-only {
  display: none;
}

@media (min-width: 680px) {
  .product_title.entry-title.mobile-only {
    display: none;
  }
  .product_title.entry-title.desktop-only {
    display: block;
  }
}

या गैर-मोबाइल उत्तरदायी पहली रणनीति में:

.product_title.entry-title.mobile-only {
  display: none;
}
.product_title.entry-title.desktop-only {
  display: block;
}

@media (max-width: 680px) {
  .product_title.entry-title.mobile-only {
    display: block;
  }
  .product_title.entry-title.desktop-only {
    display: none;
  }
}

और निश्चित रूप से आपको उन पदों पर HTML के दो सेट की आवश्यकता होगी जहां आप उन्हें चाहते हैं।

<div class="product_title entry-title desktop-only">...</div>
<div class="product_title entry-title mobile-only">...</div>

आप इसी तरह के प्रश्न का उल्लेख कर सकते हैं: केवल टेक्स्ट कैसे दिखाएं सीएसएस के साथ मोबाइल?

0
Charley Bodkin 30 जिंदा 2020, 07:38
मुझे पता है कि मीडिया क्वेरीज़ का उपयोग कैसे किया जाता है ... मेरी समस्या यह है कि मेरे वर्डप्रेस थीम में जाने की आवश्यकता होगी जिसका मैं उपयोग कर रहा हूं और कुछ HTML में संपादित कर रहा हूं। और मुझे नहीं पता कि थीम फाइलों को संपादित करते समय भी कहां से शुरू किया जाए। इसलिए मैं सिर्फ एक त्वरित jQuery समाधान की तलाश में हूं। - अगर मुझे पता होता कि मेरी थीम फाइलों में कहां संपादित करना है, तो मैं सिर्फ एक और हेडर बनाउंगा और इसे एक मोबाइल क्लास दूंगा।
 – 
user3599852
30 जिंदा 2020, 07:39
एक अच्छे समाधान के लिए आपको इस उत्तर का संदर्भ लेना चाहिए: stackoverflow.com/a/9828919/9339513
 – 
Charley Bodkin
31 जिंदा 2020, 02:29

आप एक साधारण शोर्ट बनाने के लिए वर्डप्रेस बिल्ट-इन “मोबाइल डिटेक्ट” फ़ंक्शन wp_is_mobile का उपयोग कर सकते हैं जो आपकी सामग्री के कुछ हिस्सों को मोबाइल विज़िटर और-/या डेस्कटॉप विज़िटर से छिपा सकता है। जब आपकी साइट किसी मोबाइल ब्राउज़र से देखी जाती है तो wp_is_mobile फ़ंक्शन सही हो जाता है। इस फ़ंक्शन का उपयोग करके आप विज़िटर डिवाइस के आधार पर अनुकूली/उत्तरदायी वर्डप्रेस थीम बना सकते हैं।

For example,

<?php  if( wp_is_mobile()){  ?>
 // mobile stuff goes here
   <div class="product_title entry-title mobile-only"> << Mobile Text >> </div>
<?php } else { ?>
   // desktop stuff goes here
   <div class="product_title entry-title desktop-only"> << Desktop Text >> </div>
<?php  } ?>
0
Sonali Yewle 30 जिंदा 2020, 09:31