WordPress主题分享-唯品秀前端技术博客Alt_Blog主题及使用教程

好久没有分享WP的主题了,今天看到一个比较漂亮的主题,而且作者也非常不错的,完全开源,可以自己随意修改,代码托管在github上,下面给大家重点介绍一下。

演示图

wpx

托管地址

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都来源你的设置,更多可自行在后台尝试体会

文件说明

│  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  //导航音频文件

广告栏+++++++蜜糖商店|大哥云| 搬瓦工JMS|红莓网络| Mielink|萌喵加速| 飞鸟云

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注