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

<?php if( wp_is_mobile() ): ?>
<div class="jumbotron jumbotron-fluid" id="carousel-wrapper">
  <div id="progetti-carousel" class="swiper-container">
    <div class="swiper-wrapper">
      <?php $slider = get_posts(array('post_type' => 'slider_progetti', 'posts_per_page' => 12)); ?>
        <?php foreach($slider as $slide): ?>
          <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" class="swiper-slide img-fluid"/>
      <?php endforeach; ?>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
<?php endif; ?>

// or for desktop on the same template part:

<?php if( !wp_is_mobile() ): ?>
    <div class="col-lg-6">
      <div class="card-columns">
<?php $slider = get_posts(array('post_type' => 'slider_progetti', 'posts_per_page' => 12)); ?>
<?php foreach($slider as $slide): ?>
        <div class="card">
          <a class="open-modal" data-toggle="modal" href="#zoom-image"><img class="card-img-top" src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($slide->ID)) ?>" /></a>
        </div>
<?php endforeach; ?>
      </div>
    </div>
    <div class="modal" tabindex="-1" role="dialog" id="zoom-image">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <img class="img-fluid w-100 img-zoomed" />
          </div>
        </div>
      </div>
    </div>
<?php endif; ?>

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

0
jihuuNI 13 सितंबर 2019, 21:04

1 उत्तर

सबसे बढ़िया उत्तर

मेरा सुझाव है कि आप wp_is_mobile() फ़ंक्शन का उपयोग करें और परिणाम को एक वेरिएबल में स्टोर करें और वेरिएबल का पुन: उपयोग करें जहां आप wp_is_mobile() का उपयोग करते हैं।

$is_mobile = wp_is_mobile();

इसके अलावा, आपको अपने लेआउट पर तत्वों को प्रदर्शित/छिपाने के लिए बूटस्ट्रैप के साथ पेश किए गए सीएसएस वर्गों का उपयोग करना चाहिए:

https://getbootstrap.com/docs/4.0/utilities/display/

संदर्भ के लिए, wp_is_mobile() निम्नानुसार काम करता है:

/**
 * Test if the current browser runs on a mobile device (smart phone, tablet, etc.)
 *
 * @since 3.4.0
 *
 * @return bool
 */
function wp_is_mobile() {
    if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
        $is_mobile = false;
    } elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Android' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Silk/' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Kindle' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' ) !== false
        || strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }

    /**
     * Filters whether the request should be treated as coming from a mobile device or not.
     *
     * @since 4.9.0
     *
     * @param bool $is_mobile Whether the request is from a mobile device or not.
     */
    return apply_filters( 'wp_is_mobile', $is_mobile );
}
1
wlarcheveque 13 सितंबर 2019, 18:11