WordPress:【IT老五】一分钟快速支持移动端

2023-10-18 09:10

本文主要是介绍WordPress:【IT老五】一分钟快速支持移动端,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

wp用了很久了,因为wp站点IT老五一直只是作为自己的博客用于记录,也就没有去考虑移动端兼容的问题了。这段时间看到Google Search Console的几封关于“移动设备易用性 问题”的邮件,而且在手机上打开wp站点确实体验很差,于是决定做下移动端兼容处理。

思路很简单,使用一个新的主题用于在移动设备上展示。于是,找到了两个插件,WordPress Mobile Themes与WP Mobile X,两者都能为wp开启在移动端使用一个新的主题。

区别

两者最大区别在于:前者仅提供插件,需要自己另外找主题;而后者在插件基础上,自带了一套免费默认主题以及一套收费主题。另外,还有一些小区别:前者后台设置仅提供主题选择(手机及平板设备可以分别设置),后者因为带有默认主题,所以在主题选择之外还有简易的主题设置页面。

WP Mobile X

为了省事,我选择了WP Mobile X,并使用了其默认主题,安装及配置操作步骤如下:

  1. 下载WP Mobile X插件包
  2. 在wp后台-->插件-->安装插件页,点击上传插件,选择刚下载的zip包进行上传并安装,


    9166166-9b6199001d51f378.png
    itlao5后台设置.png
  3. 安装成功后,在已安装的插件中找到WP Mobile X并开启
  4. 此时可以看到左边功能列表最下方出现了“手机主题”,点击进入设置


    9166166-dbb537c29b2c30db.png
    itlao5后台设置2.png
  5. 根据提示在常规设置和主题设置中进行设置
  6. 需要注意的是,因为是使用了新的主题,所以需要在 外观-->菜单中为你的移动端主题设置新的菜单(也可以跟pc端的共用)
  7. 其他个性设置,因为是新的主题,如果你之前在pc主题下做过一些js修改,可能需要在新主题下再重新修改一次。
效果

最终效果如下图:


9166166-48cbde22fe06ea9c.jpg
IT老五移动端

基本上使用上述的两个插件,实现wp兼容移动端仅仅需要几分钟的时间,加上一些配套的信息完善、主题选择及js修改等,也花不了多少时间,但在移动设备上的体验确实有了巨大的改善。

简书:ThinkinLiu 博客: IT老五

下载地址:
WordPress Mobile Themes 官网:https://wordpress.org/plugins/wp-mobile-themes/
WP Mobile X 官网:https://wordpress.org/plugins/wp-mobile-x/

9166166-931fd471780b7e64.jpg
IT老五(it-lao5):关注公众号,一起源创,一起学习!

这篇关于WordPress:【IT老五】一分钟快速支持移动端的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/231605

相关文章

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)

《k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)》本文记录在K8s上运行的MySQL/MariaDB备份方案,通过工具容器执行mysqldump,结合定时任务实... 目录前言一、获取需要备份的数据库的信息二、备份步骤1.准备工作(X86)1.准备工作(arm)2.手

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

《华为鸿蒙HarmonyOS5.1官宣7月开启升级!首批支持名单公布》在刚刚结束的华为Pura80系列及全场景新品发布会上,除了众多新品的发布,还有一个消息也点燃了所有鸿蒙用户的期待,那就是Ha... 在今日的华为 Pura 80 系列及全场景新品发布会上,华为宣布鸿蒙 HarmonyOS 5.1 将于 7

MybatisX快速生成增删改查的方法示例

《MybatisX快速生成增删改查的方法示例》MybatisX是基于IDEA的MyBatis/MyBatis-Plus开发插件,本文主要介绍了MybatisX快速生成增删改查的方法示例,文中通过示例代... 目录1 安装2 基本功能2.1 XML跳转2.2 代码生成2.2.1 生成.xml中的sql语句头2

8种快速易用的Python Matplotlib数据可视化方法汇总(附源码)

《8种快速易用的PythonMatplotlib数据可视化方法汇总(附源码)》你是否曾经面对一堆复杂的数据,却不知道如何让它们变得直观易懂?别慌,Python的Matplotlib库是你数据可视化的... 目录引言1. 折线图(Line Plot)——趋势分析2. 柱状图(Bar Chart)——对比分析3

一文教你Java如何快速构建项目骨架

《一文教你Java如何快速构建项目骨架》在Java项目开发过程中,构建项目骨架是一项繁琐但又基础重要的工作,Java领域有许多代码生成工具可以帮助我们快速完成这一任务,下面就跟随小编一起来了解下... 目录一、代码生成工具概述常用 Java 代码生成工具简介代码生成工具的优势二、使用 MyBATis Gen

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

SpringBoot快速搭建TCP服务端和客户端全过程

《SpringBoot快速搭建TCP服务端和客户端全过程》:本文主要介绍SpringBoot快速搭建TCP服务端和客户端全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录TCPServerTCPClient总结由于工作需要,研究了SpringBoot搭建TCP通信的过程