轩枫阁

首页 / Web前端 / CSS / 轩枫阁V3主题开发-开发篇

轩枫阁V3主题开发-开发篇

前言

本文介绍关于轩枫阁V3主题开发内容,分为移动端和PC端。

移动端

针对移动端主题的开发处理主要有表格滚动条、纯文本简介、搜索标签、文件模块、loading加载、判断页面类型、微信图片预览等。

表格处理

文章里面的表格,经常宽度会大于移动设备屏幕的宽度,所以给表格加上滚动条尤为重要。

WP在编辑文章插入表格时,会插入table标签,外层并没有特殊的class来标记含有表格,所以无法直接通过CSS的方式加上横向滚动条。

1. JS判断表格,给外层加上指定Class。这种方法实现的会比较不友好。

2. 通过PHP给table表格加上class

纯文本简介

移动端的文章摘要为2行文字…,所以需要PHP输出纯文本。

v3-desc

搜索标签

移动端的搜索页面,点击搜索框后,会在页面随机显示标签,可点击标签搜索。

h5-search

文件模块

WP中,除了可以<?php get_header();?>引入header.php文件之外,对于公用的小文件模块,可以单独命名并引入。

如上面的标签搜索页面,在WP的文件中是没有的,但是很多页面都需要引入,这时候可以命名为search-index.php,通过get_template_part方式引入。

loading加载

关于文章列表的loading,在页面滚动到底部的时候,需要显示loading,同时加载下一页文章。

由于移动端是在滚动缓冲停止后才会触发scroll,使得loading是不是及时的出现,有一定的延时。

换一种思路实现,即loading为一直显示,当有下一页内容返回,插入到页面底部,同时loading被挤到最后;如果没有下一页,则将loading移除。

判断页面类型

由于JS代码不多,所以将JS文件合并成一个文件。不同页面都适用同一个js,有些功能并不需要触发,所以需要PHP提供当前页面类型给JS读取。

微信图片预览

移动端的文章,如果分享到微信,在微信中阅读的时候,可以使用微信提供的JSSDK,imagePreview实现预览大图。预览图片这个功能并不需要wx.config注册。如果有使用到分享功能,则需要注册订阅号或企业号签名。

PC端

针对PC版主题的开发主要处理文章链接新窗口打开、分享、赞赏、查看大图、文章导航、钢琴导航、返回顶部、友情链接、文章列表分页等内容。

文章链接新窗口打开

在阅读文章的时候,文章里的链接在新窗口中打开才是合理的。而在编辑文章的时候,往往可能会漏掉勾选在新窗口中打开,所以可以通过PHP来实现。

同时对于外链,最好同时加上rel=”nofollow”告诉搜索引擎无需追踪目标页,防止恶意链接给博客带来降权。

分享

对于分享,本站支持微博、微信二维码、空间、腾讯微博、人人网,实现代码参考本站介绍:社交平台分享自定义javascript组件

v3-share

赞赏

新增赞赏功能,可以使用微信支付打赏作者。

v3-reward

v3-rewards

查看大图

文章页查看大图,之前是使用的wp-lightbox2插件,使用简单方便。但是为了减少使用的插件,这里自己开发了查看大图的功能。

功能:图片垂直居中显示、点击图片左半部分切换上一张、点击图片左半部分切换下一张、点击遮罩层或关闭按钮关闭、显示当前预览进度、可以下载原图、图片不能超过屏幕可显示范围。

pc-lightbox

文章导航

具体实现方式参考文章介绍:wordpress自动生成文章目录

v3-menu

钢琴导航

介绍:钢琴节奏

Github:piano-play

返回顶部

返回顶部这里结合CSS3,做出纸飞机起飞的动画。

scrolltop

友情链接

侧边栏的友情链接,之前是写在sidebar.php文件里,又更新需要上线代码。V3主题改为在WP后台配置,代码读取的方式,相对灵活。

 

文章列表分页

之前的分页实现方式为使用wp-pagenavi插件,为了减少插件的使用,更改为代码实现分页的方式。

v3-pagenavi

相关文章

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]