如何创建移动端响应式页脚并修改footer.php实现内容差异化展示

可以实现该需求，有两种常用实现方案，优先推荐CSS方案，兼容性更稳定，不受网站缓存策略影响：

方案1：CSS媒体查询实现（推荐） #

无需修改PHP核心逻辑，仅通过样式控制不同设备的显示状态即可：

1. 给需要区分显示的区块自定义类名，比如给桌面端显示、移动端隐藏的区块加类hide-on-mobile，给仅移动端显示的区块加类show-on-mobile
2. 在主题的自定义CSS面板或者主题根目录的style.css文件中添加如下样式：

/* 适配移动端断点，可根据需求调整767px的阈值 */
@media (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .show-on-mobile {
    display: none !important;
  }
}

举个应用示例：如果你希望移动端隐藏社交图标栏，只需给原有代码中放社交图标的td标签添加hide-on-mobile类即可：

<td class="hide-on-mobile">
  <!-- 原有社交图标代码 -->
</td>

如果需要展示专属的移动端页脚内容，只需把专属内容加上show-on-mobile类插入页脚对应位置即可。

方案2：PHP服务端判断实现 #

可以直接修改footer.php文件，用WordPress原生的移动端判断函数wp_is_mobile()控制输出内容：

<?php if ( wp_is_mobile() ) : ?>
<!-- 移动端专属页脚内容 -->
<footer id="colophon" class="site-footer" role="contentinfo" <?php sydney_do_schema( 'footer' ); ?>>
  <!-- 此处插入你希望移动端展示的简化页脚代码 -->
</footer>
<?php else : ?>
<!-- 原有桌面端页脚代码 -->
<footer id="colophon" class="site-footer" role="contentinfo" <?php sydney_do_schema( 'footer' ); ?>>
  <!-- 你原有的完整table页脚代码全部放在这里 -->
</footer>
<?php endif; ?>

注意：该方案通过客户端UA判断设备类型，如果网站开启了全页CDN缓存，可能会出现桌面端、移动端内容串变的问题，有缓存场景优先选CSS方案。

另外你当前的页脚用table布局，在移动端容易出现内容挤压换行的问题，建议调整为flex布局，适配性会更好。

内容的提问来源于stack exchange，提问作者theredindian