我正在更新使用 wordpress 的網站的外觀。對于前端，我使用的是 bootstrap 4，并且正在嘗試優化網站的加載時間。我注意到當用戶嘗試滾動并且在用戶滾動頁面后渲染顯示一些空白部分一段時間時，它真的很慢。這是一個單頁網站，所以我沒有頁面 suddivision，所有內容都是加載到index.php文件中的帖子。我對wp_is_mobile()我用來檢測用戶是否從桌面或移動設備查看網站的功能，我有一個僅在移動設備上加載的滑動滑塊和另一個布局結構，其具有僅在桌面上加載的相同圖像。網站的所有部分都會發生這種情況，我認為這是元素渲染緩慢的原因。我想嘗試使用 bootstrap 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; ?>我不知道這樣能不能加快加載速度，我也很擔心，因為我不知道加倍查詢會不會有問題，對于加倍查詢我的意思是在移動 wordpress 下顯示圖片或內容函數，我正在使用與桌面相同的代碼來處理我想要的元素，這些元素以布局形式出現在移動設備上，并與另一個元素一起出現在桌面上。這將打破 dìthe DRY 原則，我知道這是一種不好的做法。任何有關如何改善加載的建議將不勝感激。
1 回答
ITMISS
TA貢獻1871條經驗 獲得超8個贊
我建議您使用該wp_is_mobile()函數并將結果存儲在一個變量中，并在您使用的任何地方重用該變量wp_is_mobile()。
$is_mobile = wp_is_mobile();
此外，您應該使用 Bootstrap 提供的 CSS 類在布局上顯示/隱藏元素：
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 回答
- 0 關注
- 125 瀏覽
添加回答
舉報
0/150
提交
取消