WordPress响应式网站制作

1. 现在搞网站不做响应式简直没法看，毕竟人人都在手机上刷东西。WordPress整响应式其实路子很多，最省事的办法就是直接选个现成的响应式主题，比如Twenty Twenty-Four这种官方主题，装上去默认就能自适应各种屏幕。不过如果你想自己深度定制，那得折腾主题文件里的CSS和HTML结构。

2. 先看个最简单的例子，在主题的style.css里加一段媒体查询，针对不同屏幕宽度调整样式。比如把手机屏幕上的标题字体缩小：

@media (max-width: 768px) {
  .site-title {
    font-size: 1.5rem !important;
    line-height: 1.2;
  }
  .navigation-menu {
    flex-direction: column;
  }
}

3. 不过光调CSS不够，有时候还得动PHP模板。比如在输出菜单的时候加个下拉式按钮，小屏幕上点击才展开菜单。在header.php里可能得这样写：

<button class="e10f-f163-f8c3-2bc7 menu-toggle" aria-controls="primary-menu" aria-expanded="false">
  <?php esc_html_e( '展开菜单', 'textdomain' ); ?>
</button>
<?php
wp_nav_menu( array(
  'theme_location' => 'primary',
  'menu_id'        => 'primary-menu',
  'container_class' => 'nav-main-wrapper'
) );
?>

4. 然后配合点jQuery实现点击展开，把这段塞进主题的js文件里：

jQuery(document).ready(function($) {
  $('.menu-toggle').click(function() {
    $('#primary-menu').slideToggle('fast');
    $(this).attr('aria-expanded', function(i, attr) {
      return attr == 'false' ? 'true' : 'false';
    });
  });
});

5. 图片响应式也得处理，不然大图在手机上直接撑破布局。WordPress自带的图片其实已经加了srcset属性，但如果你要手动控制，可以用这样的HTML结构：

<img 
  src="image-large.jpg" 
  srcset="image-small.jpg 480w, image-medium.jpg 800w" 
  sizes="(max-width: 600px) 480px, 800px" 
  alt="示例图片"
>

6. 有时候内容区块也得调整顺序，比如在电脑上是左右两栏，到手机上就得上下堆叠。用Flexbox或Grid布局很容易实现，比如：

.content-wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
@media (max-width: 768px) {
  .content-wrapper {
    grid-template-columns: 100%;
  }
}

7. 别忘了测试，Chrome开发者工具里有个设备模拟器，能看各种屏幕尺寸下的效果。但真机测试更重要，毕竟实际手感不一样。我一般先用模拟器调个大概，再拿真机细调。

8. 如果懒得写代码，可以装个CSS框架比如Bootstrap，很多WordPress主题已经集成了。或者用Elementor这类页面构建器，直接拖拽设置响应式断点，可视化调整不同设备上的布局。

9. 最后提醒一下，响应式不只是布局变化，还得考虑触摸操作、性能优化这些。比如在手机上减少动画效果、压缩图片体积，这些细节加一起才算合格的响应式站点。

总之搞WordPress响应式就是CSS媒体查询打底，再配合点JS交互和HTML结构优化。现成主题能省事，但自己懂代码才能灵活控制。测试环节不能省，毕竟用户不会只在一种设备上访问你的站。

Tags：

文章版权声明：除非注明，否则均为WP集市原创文章，转载或复制请以超链接形式并注明出处。