Wordpress使用wp_is_mobile()缓慢加载一页网站
我正在更新一个使用wordpress的网站的外观。对于前端，我使用的是bootstrap 4，我正在尝试优化网站的加载时间。我注意到，当用户尝试滚动页面，并且在用户滚动页面后的一段时间内渲染显示一些空白部分时，速度会非常慢。它是一个单页面的站点，所以我没有一个页面分区，所有的内容都是加载到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功能下的图像或内容，我正在使用与桌面相同的代码来显示我想要的元素，这些元素在移动设备上显示在布局中，在桌面上显示在另一个布局中。这会打破DRY原则，我知道这是一个糟糕的做法。任何关于如何改善加载的建议都将不胜感激。
回答 1
Stack Overflow用户
发布于 2019-09-14 02:11:25
我建议您使用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 );
}https://stackoverflow.com/questions/57928422
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号