国外VPS
好久没有分享WP的主题了，今天看到一个比较漂亮的主题，而且作者也非常不错的，完全开源，可以自己随意修改，代码托管在github上，下面给大家重点介绍一下。
演示图
托管地址
https://github.com/weipxiu/Art_Blog
作者网站：https://www.weipxiu.com/
运行环境
服务器：Apache
PHP版本：5.3以上7.2以下
WP版本：4.6以上版本
安装教程
本项目采用gulp自动化构建，可通过git克隆到本地，然后运行npm install安装依赖，接着运行npm run build即可压缩打包整个项目，到dist文件夹，如不需要打包压缩代码等一系列工具功能可直接下载即可，然后找到项目文件的dist目录，里面即是已打包好的主题源码
将下载或克隆好的项目中的dist文件名命名为Art_Blog,然后将整个文件夹上传到线上：/htdocs/wp-content/themes/目录下，可能有的小伙伴说找不到htdocs目录，htdocs是阿里云虚拟主机的叫法，如果你是服务器，通常叫www或htdocs甚至是www/htdocs/，具体根据你的服务器供应商实际情况来。
当然你也可以直接将Art_Blog压缩后将压缩包直接在网站后台上传主题，然后启用主题，注意，因为我没有每次打包项目去检查压缩包解压安装脚本，所以这种方式你可能有时候上传主题最终显示解压失败，这种情况不是主题源码问题，你可以通过git克隆项目到本地，然后自己npm run build打包一遍出来，就不会报错了。或者还是之前那个方式，直接将主题Art_Blog文件夹上传到/htdocs/wp-content/themes/目录下，然后去启用，这种不会报错。
后台配置
启用唯品秀Art_Blog主题后，在后台设置>常规中设置自己网站标题、副标题、邮箱等信息，然后到外观>唯品秀主题设置，设置站点域名地址（必须的）、公告、底部等信息
注意：移动端会使用副标题作为顶部固定标题，你的QQ和邮箱将会设置到一些地方，比如交换友链时候是像你邮箱发邮件给你申请，侧边栏客服QQ都来源你的设置，更多可自行在后台尝试体会
文件说明
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
│ page-time.php //穿梭机（单页） │ page-about.php //关于博客（单页） │ page-message.php //碎言碎语（单页） │ page-reminder.php //低版本浏览器重定向 │ category.php //通用列表模板 │ comments.php //评论模块 │ favicon.ico //网页浏览器标签icon │ footer.php //公共底部 │ functions.php //主题核心函数 │ header.php //公共头部 │ index.html //测试页面 │ index.php //首页 │ page.php //通用单页模板 │ screenshot.png //wordpress主题展示图片 │ search.php //搜索模板 │ sidebar.php //右侧栏目 │ single.php //文章详情 │ style.css //PC端样式 │ thanks.php //特别鸣谢（单页） │ theme-options.php //主题后台配置 │ ├─css │ PingFangSC-Regular.woff //字体文件 │ sf-pro-display_medium.woff2 │ sf-pro-display_regular.woff2 │ sf-pro-display_semibold.woff2 │ sf-pro-text_bold.woff2 │ sf-pro-text_regular.woff2 │ sf-pro-text_semibold.woff2 │ style-ios.css //手机端样式 │ style-ipd.css //ipd平板样式 │ swiper.min.css //移动端轮播swiper样式 │ video-js.css //视频插件样式 │ ├─images //公共图片资源 │ ├─js │ │ ajax_wordpress.js //分页ajax刷新 │ │ canvas-nest.min.js //canvas背景图插件 │ │ date.js //时光机数据 │ │ index.js //整个网站全局js │ │ javascript.js //只针对首页js文件 │ │ jquery-2.1.4.min.js // 公共js库 │ │ rem.js //移动端自适应适配 │ │ swiper.min.js //移动端的swiper轮播插件 │ │ │ ├─video.js │ │ video.min.js //视频插件 │ │ videojs-ie8.min.js │ │ zh-CN.js │ │ zh-CN.json │ │ │ └─xfg_banner //PC端首页banner │ banner-effect.js │ banner.js │ effect.js │ jquery.min.js │ utils.js │ └─music //导航音频文件 |
