该修改方案的优点是:
1. 无需修改任何主题文件,即在主题更新后无需重新修改。
2. 在开启PJAX的情况下可以正常加载和重载。
前言
网上有很多Sakura、Sakurairo主题为留言板增加动态诗句的教程,但是大多需要修改主题相关文件,特别是主题的js文件(以实现初载和重载)。
但是最新的Sakurairo主题js文件采用Webpack进行打包,修改起来比较麻烦,而且一旦更新主题,所有的修改都会丢失。
此方案不用修改主题的任何文件,所以不存在上述的问题。
修改方法
增加相关css样式
首先在iro主题设置-其他设置-低使用设置-自定义CSS样式
中加入如下代码(此处对CSS样式做的修改在更新主题后不会丢失
)
/*诗*/.poem-wrap { position: relative; width: 730px; max-width: 80%; border: 2px solid #797979; border-top: none; text-align: center; margin: 80px auto;}.poem-wrap h1 { position: relative; margin-top: -20px; display: inline-block; letter-spacing: 4px; color: #797979}.poem-wrap p { width: 70%; margin: auto; line-height: 30px; color: #797979;}.poem-wrap p#poem { font-size: 25px;}.poem-wrap p#info { font-size: 15px; margin: 15px auto;}.poem-border { position: absolute; height: 2px; width: 27%; background-color: #797979;}.poem-right { right: 0;}.poem-left { left: 0;}@media (max-width: 685px) { .poem-border { width: 18%; }}@media (max-width: 500px) { .poem-wrap { margin-top: 60px; margin-bottom: 20px; border-top: 2px solid #797979; } .poem-wrap h1 { margin: 20px 6px; } .poem-border { display: none; }}
新建页面并实现
引入完样式之后我们就已经完成了一大半了,之后就是在Wordpress中新建一个页面,并且在页面中加上这样一段代码
<script src="https://blog.cos.nyadoo.com/static/poem/poem.js" charset="utf-8"></script><div class="poem-wrap"> <div class="poem-border poem-left"></div> <div class="poem-border poem-right"></div> <h1>念两句诗</h1> <p id="poem">挑选中...</p> <p id="info"></div>
OK,到这里动态诗句的实现就已经全部完成了。你可以在后面写上任何你想要说的话,并且开放页面评论功能就可以了。
当然,你也可以将上面这段代码放在任何其他你想要放的页面、文章中。
Comments 1 条评论
博主 繁星·三三得六
最好这个时候能加个样例,做出来大概什么样,就更加nice了