澄沨的漫游茶记

澄沨的漫游茶记

马上订阅 澄沨的漫游茶记 RSS 更新: https://champhoon.xyz/atom.xml

来给 WordPress 添加一个书单页面吧

2021年5月29日 13:09

封面来源:和洋折衷ライブラリー | 藤ちょこ(藤原) #pixiv https://www.pixiv.net/artworks/61930743

自从建立博客以来,在下一直喜欢拜访其他大佬的博客,发现很多博客都有书单页面,令在下也很是动心。基于在下贫弱不堪的前端水平,在下开始寻找能够给 WordPress 博客添加一个书单页面的一条龙教程或插件,可惜既没有找到满意的教程,也没有能用的插件,遂决定自己动手制作。

说到书单页面,给在下留下非常深刻印象的还属 蝉时雨 大佬的作品,其书籍以立体的形式展示而且还带有旋转效果。于是在下决定也给自己来一个这样的书单,然而对于一个发量危急的法学生来说,想实现这个效果可并没有那么简单。好在有其他大佬已经在 CSDN 分享了立体书籍旋转效果的代码,只要拿来作适当修改便是。

模板制作

接下来就开始书单模板的制作了,首先在 Wordpress 主题根目录下把 page.php 复制一份,重命名为 page-book.php ,并把开头的注释改为如下所示。

1
2
3
/**
* Template Name: 书单模版
*/

这样一来,就能在后台的新建页面界面的模板选项中看到书单模板了。 继续在 page-book.php 的注释后添加如下样式代码。 当然可以依照个人需要进行微调。

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159...

剩余内容已隐藏

查看完整文章以阅读更多