一款基于Js+jquery2.1.4+H5/CSS3开发,遵循黄金分割定律,把控每个元素每一个像素差的wordpress主题v2.6.0,主题介绍
主题后台配置预览
哪些网站在使用(据不完全统计)
如何使用它
I、本项目采用gulp自动化构建,推荐通过git克隆到本地,然后运行npm install
安装依赖,接着运行npm run build即可压缩打包整个项目
到dist
文件夹(很显然,这一切需要你电脑安装了Node.js以及git工具)。当然,如不需要打包压缩代码等一系列工具功能可直接下载即可,同样找到项目文件的dist目录,里面即是已打包好的主题源码
II、将dist文件名命名为Art_Blog
(这是必须的),将整个文件夹
上传到线上:/htdocs/wp-content/themes/
目录下。也可以将改好名字的Art_Blog文件夹压缩成Zip文件
通过后台主题上传,最后后台启用主题
III、运行环境条件:虚拟主机/云主机环境选优先用Apache、wordPress版本≥4.6,≥5.3服务器php版本≤php7.2,如果出现报错,请尝试切换php版本,阿里云虚拟主机升级php7.x报错处理,注意:请尽可能使用云服务器而不要使用虚拟主机
IV、启用唯品秀Art_Blog主题后,在设置>常规中设置自己网站标题、副标题、邮箱等信息,然后到外观>唯品秀主题设置,设置站点域名地址、公告、底部等信息
V、在后台>外观>菜单中管理你的导航栏
VI、更多详细教程点击:唯品秀前端技术博客主题使用教程;文档枯燥还是不知道说的啥?简洁教程视频链接,4drw
Ⅶ、如若喜欢,请多多打赏,您的认可与支持将是我前进的最大动力!
碎言碎语
I、wordPress主题制作有特别要求,例如主题根目录必须存在header.php、index.php、footer.php、style.css,否则主题视为"不完整",无法安装。 因此不用觉得某些文件摆放不合理,存在必定有意义
II、为了用户最佳浏览体验,该主题对≤IE8作了屏蔽跳转,≥IE9版本可能无法完整展示CSS3效果,但会尽量兼容 到不影响阅读
III、基于css文件作了根据终端分割,所以你会看到主题目录dist>css文件夹中有style-ios.css、style-ipd.css 两个文件,没错,三端样式完全独立,不重用,有利有弊,不做过多评论
IV、源码开放供大家使用并修改,但在使用过程中底部请保留"唯品秀"版权说明,即:在footer.php源码中请不要去掉:
本站主题由WEIPXIU.COM免费提供
项目文件说明
│ 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 //导航音频文件