Wordpress get_template_part可以基于视口大小吗？

Question

我想知道是否可以根据视口大小加载不同的wordpress模板部分。

例如。如果视口小于740px加载<?php get_template_part( '/mobiletemplate'); ?>

如果视口大于741px加载<?php get_template_part( '/desktoptemplate'); ?>

非常感谢任何协助。

Answer 1

应用此代码

if ( wp_is_mobile() ) 
{
    get_template_part( '/mobiletemplate');
}
else
{
    get_template_part( '/desktoptemplate');
}

Answer 2

您只能使用PHP获取视口大小。你为此需要JS。

JS解决方案

获取视口并发送ajax请求以相应地更新模板的部分。

进一步阅读：

• screen.width
• screen.height

CSS解决方案

关于响应式设计（根据屏幕尺寸调整），更好的做法是拥有一个模板，并使用CSS（媒体查询）将其调整为每个屏幕尺寸。

另一种选择是加载模板的两个部分并使用CSS（媒体查询）隐藏其中一个关于视口大小的模板。例如：

.hide-on-desktop{
  display: none;
}

only screen and (min-width: 768px) {
  .hide-on-desktop{
    display: block;
  }
  .hide-on-mobile{
    display: none;
  }
}