WordPress 添加个性化的博客宠物

tengxunyun cera

某日闲逛看到的某个博客上的一个博客宠物,准确来说不是宠物,人家可是萌妹纸啊!看看右侧这个图,就是这个萌妹纸了(后来用谷歌相似图片搜索才发现是死亡笔记的)。让我感到有点跌眼镜的是,那个博客主是个汉纸!看着喜欢,于是右键审查元素扒了代码。

看来下代码,发现代码是博客捣鼓笔记的博主木木的作品,不过这个博客现在已经挂了。给大家献上添加到这个萌妹纸到你的WordPress 主题的方法,但,建议汉纸慎用,下次再分享个适合汉纸的……

WordPress 添加个性化的博客妹纸相关文件
教程中要用到的文件有:一张图片、spig.js文件

下载地址:直链下载 百度网盘 华为网盘

WordPress 添加个性化的博客妹纸篇教程
一、CSS

将下载得到的spig.png放在主题的images文件夹里(应该都有吧?),当然所有代码都可以自定义路径,后面不再累赘。然后在主题的style.css 文件下加入以下代码:

  1. /* pets devework.com */
  2. .spig {display:block;width:150px;height:190px;position:absolute;top: 200px;left: 160px;zindex:9999;}
  3. #message{color :#191919;border: 1px solid #c4c4c4;background:#ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;min-height:1em;padding:5px;top:-30px;position:absolute;text-align:center;width:auto !important;z-index:10000;-moz-box-shadow:0 0 15px #eeeeee;-webkit-box-shadow:0 0 15px #eeeeee;border-color:#eeeeee;box-shadow:0 0 15px #eeeeee;outline:none;}
  4. .mumu{width:150px;height:190px;cursor: move;background:url(images/spig.gif) norepeat;}

懂css 代码的话可以修改一下message这个id,使得更加适合你的主题。

二、加载jQuery库

请确定你的主题有没有加载加载jQuery库,如果没有,请按照《为你的WordPress 选择最佳的第三方jQuery 库》与《WordPress中的jQuery库不起作用的相关问题》自行配置。

三、HTML

在主题的footer.php 文件下(一般是前)加入以下代码:

加载中……

四、JS

在添加js 文件前,需要对spig.js文件进行修改,打开该文件,用编辑器的”替换”工具将devework.com 为你的网址。

接着,同样是在主题的footer.php 文件下,接着第三步的代码下面,加入以下代码:

上面代码的spig.js 路径是在主题根目录下,你可以自定义路径。

一些效果图集合:

正常的话应该是可以显示宠物的啦,如果不行,先用开发者工具查看哪里出问题了(路径错误?js冲突?);如果再不行,留言请教~

cera aliyun tengxunyun cloudiplc

相关推荐

Yoast SEO|WordPress SEO|优化插件推荐|帮助网站|进行SEO优化

如果你建站使用的是 #WordPress#,比如老唐就是用的 WordPress 建站,并且想要对网站进行#SEO# 优化,那么可以使用一些 WordPress SEO 优化插件。目前老唐也尝试过一些 WordPress SEO 插件,感觉比较好的还是 Yoast SEO 这个插件。设置起来比较方便,而且选项也比较多,但是如果不会设置的话默认设置也已经足够使用,所以推荐我们新手刚接触 SEO 的时候使用。 下载后在后台上传安装,或者直接在后台搜索安装也可以。 Yoast SEO 插件简单设置 其实基本上没有改什么设置,基本都用的#默认#设置。 不过有些设置可以看一下确认一下,比如搜索外观里,标题是否需要强制重写,我们可以重写为自己想要的网站标题,后期更换#主题#也不会影响。 此外,我们主要可能会修改的是搜索外观中的 SEO title 和 Meta description,包括每个文章页和每个独立页面的,一般来说默认也可以,我们有需求可以根据自己的需求进行修改。 如果有需要,我们也可以付费升级高级版,但是一般来说免费版够用了。  

大前端wordpress主题618限时6.8折促销|其中xiu主题218元|热门的dux主题544元

大前端wordpress主题提供还是有多年时间了,同时也是维护时间较长的主题商家,比如14年发布的XIU主题现在还在维护、更新之中,而更早之前的热门wordpress主机D8也是维护之中,只是维护的频率不如DUX等更加热门的主题。在2020年618来临之际,大前端推送了最新的旗下wordpress主题限时6.8折,优惠之后DUX主题544元,XIU主题218元,D8主题168元,TOB主机266元等,相对于平时来说还是比较不错的,有打算需求的用户可以关注一下。 大前端主题不限制域名个人,只要是同一注册信息下的域名均可以使用,可以满足科技博客、个人站、各类图片、摄影展示站、企业站、淘宝客和各种展示站点!目前小七博客使用的就是XIU主题,也是使用期限最长久的一款主题,期间更换几次,最终还是使用这一款,便宜、实惠,可以满足自己的个人需求。 活动地址:大前端官网 活动时间:2020年6月11日-2020年6月18日; 活动内容: 旗下公开发行的wordpress主题6.8折折扣!

WordPress“正在执行例行维护|请一分钟后回来”解决方法

WordPress在升级程序、主题、插件时,都会先切换到维护模式,也就是显示 “正在执行例行维护,请一分钟后回来(Briefly unavailable for scheduled maintenance. Check back in a minute)”,如果升级顺利,也就几秒左右就恢复正常;但是如果由于网速不佳等原因导致升级中断,WordPress就会一直停留在维护模式,不论前台还是后台,都一直显示“正在执行例行维护,请一分钟后回来“。 如何解决这个问题呢? 1.马上通过FTP登录你的网站,删除WordPress根目录下的 .maintenance ,刷新网页即可。 2.但是有时候你会发现,根目录根本就没有 .maintenance!倡萌最近就遇到这个问题,最初以为是隐藏了,所以使用SSH登录服务器,但是依旧没有看到,怎么办?其实有一个比较简单的办法,直接新建一个空的txt文本,上传到主机空间中,然后重命名为 .maintenance,然后你会发现 .maintenance 居然不见了!不用担心,重新刷新你的网站,是不是正常了?!

wordpress主题DUX修改熊掌号为站长平台快速收录

百度移动平台的熊掌号已经废了。至少一个月没有正常收录了。刚好百度站长平台又上线了一款叫“快速#收录#”的功能。简单查看了下。貌似就是熊掌号的替代品。目前如果需要使用快速收录,就得取消熊掌号的配额。 将熊掌号改为站长平台快速收录的方法非常简单。在站长平台快速收录处选择继承熊掌号配额即可。然后熊掌号的配额会归零。快速收录数量变为10,后续看自己提交量提升。 反正熊掌号已经没有用了,那就切换成快速收录把,没准有用呢! 下面简单介绍下wordpress的DUX主题,把熊掌号模块修改成快速收录。 1、找到主题文件夹下的“functions-xzh.php”。小白使用的是DUX 6.3 ,将“熊掌号 新文章发布时实时推送”下面的 $api = ‘http://data.zz.baidu.com/urls?appid=’. _hui(‘xzh_appid’) .’&token=’. _hui(‘xzh_post_token’) .’&type=realtime’; 修改为 $api = ‘http://data.zz.baidu.com/urls?site=’. _hui(‘xzh_appid’) .’&token=’. _hui(‘xzh_post_token’) .’&type=daily’; 2、到#dux##主题#后台熊掌号处替换 百度熊掌号 Appid 里内容填写为你的网址。举例小白的为:https://yangmaodang.org/ ,带/ 。 百度熊掌号 推送密钥 token内容填写 快速收录API中的token= 后面部分 不含&以及后面。 大功告成,实测可以自动推送到百度快速收录。 备注:切换后熊掌号会失去权益。如果你之前熊掌号收录还可以,暂时不要改。

微信扫一扫,分享到朋友圈

WordPress 添加个性化的博客宠物