WordPress侧边栏添加古诗一言

分享小工具侧边栏添加古诗一言前端主题美化代码,不一定非要是古诗,

1000010342.webp

教程开始

进入WordPress后台,选择菜单,再选择小工具,选择自定义HTML小工具,添加下方代码!(注意下方有行js引用要添加路径)

<style type="text/css">
.wiiuii-suiji-main span{color:#fff}.wiiuii-suiji-main{background-size:cover;background-repeat:no-repeat;background-position:center center;cursor:pointer;height:320px;border-radius:var(--main-radius);position:relative}.wiiuii-suiji-header{display:flex;justify-content:space-between}.xingyu-dt-ty{padding:20px;display:flex;flex-direction:column}.xingyu-dt-day{font-size:60px;font-weight:700;color:#fff}.xingyu-sj-date{font-size:16px;font-weight:700;color:#fff}.xingyu-sjzt-ty{line-height:25px;height:200px;writing-mode:vertical-rl;padding:15px;color:#fff;font-size:15px}.xingyu-sj-qhbtn{position:absolute;bottom:30px;padding:10px}.xingyu-sj-qhbtn>span>i{font-size:16px}.xingyu-sj-qhbtn span:hover{color:#f44336}.xingyu-sjtitle-ty{position:absolute;bottom:0;text-align:center;left:0;right:0;bottom:0;padding:5px}
</style>
<div class="wiiuii-suiji-main">
<div class="wiiuii-suiji-header">
<div class="xingyu-dt-ty">
<span class="xingyu-dt-day wiiuiiDay"></span>
<p class="xingyu-sj-date">
<span class="wiiuiiYear"></span>
<span class="wiiuiiMonth"></span>
</p>
</div>
<div class="xingyu-sjzt-ty">
<span class="xingyu-yiyin"></span>
</div>
</div>
<div class="xingyu-sj-qhbtn">
<span id="xingyu-qh-btn"
><i class="fa fa-paper-plane" aria-hidden="true"></i> 换一句</span
>
</div>
</div>
<script
src="引用JS" <!--填写引用路径-->
></script>

PS:报错无法保存,把style标签里的CSS放到主题CSS样式文件里!

下面是JS代码,有点小问题已经修复,在主题任意目录创建一个JS文件,名字随意。将下方JS代码添加进去!原本的图像链接已失效,随便找了几张图片放进去,大家可以修改自己想要的文字或者图片。

/**
*
*本代码由云亿吧修复(www.YunYi2.com)
*
*/
var wiiuiiYiYan = [
'休对故人思故国,且将新火试新茶。诗酒趁年华。——宋苏轼《望江南》',
'山中何事?松花酿酒,春水煎茶。——元张可久《人月圆》',
'最是人间留不住,朱颜辞镜花辞树。——清·王国维《蝶恋花》',
'正是江南好风景,落花时节又逢君。——唐·杜甫《江南逢李龟年》',
'醉后不知天在水,满船清梦压星河。——元·唐温如《题龙阳县青草湖》',
'纸屏石枕竹方床,手倦抛书午梦长。——宋蔡确《夏日登车盖亭》',
'曾是惊鸿照影来。——宋陆游《沈园二首》',
'人生天地间,忽如远行客。——汉佚名《古诗十九首》',
'直道相思了无益,未妨惆怅是清狂。——唐·李商隐《无题》',
'秋风生渭水,落叶满长安。——唐·贾岛《忆江上吴处士》',
'一愿郎君千岁,二愿妾身常健。——唐冯延巳《长命女》',
'雾失楼台,月迷津渡。桃源望断无寻处。——宋秦观《踏莎行郴州旅舍》',
'独立小楼风满袖,平林新月人归后。——南唐冯延巳《鹊踏枝》',
'晓看天色暮看云,行也思君,坐也思君。——明唐寅《一剪梅》',
'叹息老来交旧尽,睡来谁共午瓯茶。——宋陆游《幽居初夏》',
'客散酒醒深夜后,更持红烛赏残花。——唐李商隐《花下醉》',
'柴门闻犬吠,风雪夜归人。——唐·刘长卿《逢雪宿芙蓉山主人》',
'庭院深深深几许,杨柳堆烟,帘幕无重数。——宋欧阳修《蝶恋花》',
'有约不来过夜半,闲敲棋子落灯花。——宋赵师秀《约客》',
'满目山河空念远,落花风雨更伤春。不如怜取眼前人。——宋晏殊《浣溪沙》'
]
var wiiuiiYiYanBg = [
'https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=wiseala&url=https%3A%2F%2Fstatic.aipiaxi.com%2Fimage_gif%2F2024%2F04%2FFo28LMI7jI66CSt522U7ShIUQ5e-.jpeg',

'https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=wiseala&url=https%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0222%252F5beb7f56j00qoxbg00022d000mi00ump.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg',

'https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=wiseala&url=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fc-ssl.duitang.com%252Fuploads%252Fitem%252F201803%252F31%252F20180331125158_mglne.thumb.1000_0.jpg%26refer%3Dhttp%253A%252F%252Fc-ssl.duitang.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1735254387%26t%3Dbfef9486d57c06eb03637a57705e6265',

]
var wiiuiiYiMain = document.querySelector(".wiiuii-suiji-main"),
wiuiSjMain = wiiuiiYiMain.parentNode.parentNode,
date = new Date(),
wiiuiiMonth = date.getMonth() + 1,
wiiuiiDay = date.getDate();
document.querySelector(".wiiuiiYear").innerHTML = date.getFullYear() + "年";
10 > wiiuiiMonth
? (document.querySelector(".wiiuiiMonth").innerHTML =
"0" + wiiuiiMonth + "月")
: (document.querySelector(".wiiuiiMonth").innerHTML = wiiuiiMonth + "月");
10 > wiiuiiMonth &&
(document.querySelector(".wiiuiiDay").innerHTML = "0" + wiiuiiDay);
wiuiSjMain.style.padding = "0";
var wiiuiiYyRanBtn = document.querySelector("#xingyu-qh-btn"),
wiiuiiYiYinTextBox = document.querySelector(".xingyu-yiyin");
function wiiuiiRanYiYin() {
var a = Math.floor(Math.random() * wiiuiiYiYanBg.length);
wiiuiiYiYinTextBox.innerHTML =
wiiuiiYiYan[Math.floor(Math.random() * wiiuiiYiYan.length)];
wiiuiiYiMain.style.backgroundImage = "url(" + wiiuiiYiYanBg[a] + ")";
}
wiiuiiRanYiYin();
wiiuiiYyRanBtn.onclick = function () {
wiiuiiRanYiYin();
};
wiiuiiYiYinTextBox.onclick = function () {
var a = document
.querySelector(".xingyu-yiyin")
.textContent.split("。")[0];
open("https://so.gushiwen.cn/search.aspx?value=" + a);
};

原创文章,作者:云亿吧,如若转载,请注明出处:https://www.yunyi2.com/archives/486.html

(0)
上一篇 2024年11月27日 上午7:30
下一篇 2024年11月27日 下午9:11

相关推荐