WordPress移动端优化指南

1. 打开你主题的functions.php文件，在最后那个?>前面加这段：

function mobile_optimize() {
  if (wp_is_mobile()) {
    remove_action('wp_head', 'print_emoji_detection_script', 7);
    add_filter('wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2);
  }
}
add_action('init', 'mobile_optimize');

这玩意儿能干掉手机端用不着的emoji脚本——毕竟谁需要在小屏幕上加载一堆表情符号字体啊？

2. 图片延迟加载必须搞，但别用默认那个。把这段扔进functions.php：

add_filter('wp_lazy_loading_enabled', '__return_false');
function lazy_load_mobile($content) {
  if(!wp_is_mobile()) return $content;
  return preg_replace('/<img(.*?)src=(.*?)>/i', '<img$1src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src=$2 class="555b-026c-6fe0-73bd lazyload">', $content);
}
add_filter('the_content', 'lazy_load_mobile');

记得还要自己写个JS来监听滚动触发加载，不然图片全变成灰色方块了——虽然用户可能以为这是某种极简主义设计。

3. 手机端菜单最好别用多层折叠，改成单级弹出式。用这个CSS骗过所有人的眼睛：

   @media screen and (max-width: 768px) {
   .sub-menu {
   display: none !important;
   position: absolute;
   background: #fff;
   z-index: 9999;
   }
   .menu-item:hover > .sub-menu {
   display: block !important;
   }
   }

   实际上手机压根没有hover状态？没关系，加上touchstart事件就行——用户会理解长按菜单是新时代的右键操作。

4. 最后来段粗暴的JS代码解决所有弹窗问题：

   document.addEventListener('DOMContentLoaded', function() {
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
   setTimeout(function() {
     document.querySelectorAll('[aria-modal="true"]').forEach(popup => popup.style.display = 'none');
   }, 3000);
   }
   });

   三秒后自动关闭所有弹窗，用户会感谢你的——虽然可能错过重要通知，但谁让手机屏幕这么小呢？

总之记住，移动优化就是让网站变得像路边传单一样简单直接，用户划两下就能看到核心内容，其他花里胡哨的功能就让他们在桌面端慢慢玩吧。

Tags：

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