OneNav一为主题魔改教程（五）：点赞后自动加入到首页“我的导航”--洞五洞洞幺

今日主题：点赞后自动加入到首页“我的导航”
声明：修改之前做好笔记或备份。

嫌“我的导航”没内容，在网站中发现了常用的网站不能快速的到达。所以我们来改进这一块，这款wp主题目前只支持本地localStorage保存，不会把个人设置的导航存到服务器数据库中。（如果想要永久保存，数据库是最好的解决方案），但是改动量太大，而且要开放用户注册功能。暂时想到一个简易的解决方案。在作者的基础上做简单的增加。

效果：

在网站内容页面“点赞”，自动存入“我的导航”。方便用户操作。

修改方法：
第一步：

在js目录找到并打开app.js文件，会发现作者的代码习惯真的很不错，非常规范。

第二步：

搜索位置："$(".btn-like").click", 大概在第58行。这个就是点赞的js方法，把它折叠起来。复制我下方的代码，紧跟着这个点击事件。

//点赞时，保存到我的收藏。
function likeToMyFav(my)
{var siteName = $(my).attr("my-title")
, siteUrl = $(my).attr("my-url");
debugger;
if(siteName!=null && siteUrl!=null){addSiteList({id: +new Date,
name: siteName,
url: siteUrl
});
}

然后在第62行， else{ 这里， 加入likeToMyFav(this); 进行调用。

app.js这一块完整代码如下：

第三步：编辑网址内容页。

找到并打开content-site.php文件。

搜索“点赞”二字，找到一个class为“btn-like”的a标签，加上自定义属性：

my-url="<?php echo $m_link_url ?>" my-title="<?php echo $sitetitle ?>"

完整代码：

<a href="javascript:;" post_like data-id="<?php echo get_the_ID() ?>" class=" btn btn-like btn-icon btn-light rounded-circle p-2 mx-3 mx-md-2 <?php echo $liked ?>" data-toggle="tooltip" data-placement="top" title="<?php _e('点赞\收藏','i_theme') ?>" my-url="<?php echo $m_link_url ?>" my-title="<?php echo $sitetitle ?>">
<span class="flex-column text-height-xs">
<i class="icon-lg iconfont icon-like"></i>
<small class="like-count text-xs mt-1"><?php echo $like_count ?></small>
</span>
</a>

保存，然后就可以去“点赞”看效果了。代码结束，但是引导什么的还没有考虑。

如何调试？

使用webkit内核浏览器，按F12打开开发者工具，切换到application选项卡，选择左侧菜单Application==>Clear storage==>点击Clear site data就能清空localStorage，然后刷新，重新点赞试试效果。

转载：https://www.05001.cn/2927.html”

OneNav一为主题魔改教程（五）：点赞后自动加入到首页“我的导航”--洞五洞洞幺相关推荐

OneNav一为主题魔改教程（二）：使用纯css增加网站Logo扫光效果--洞五洞洞幺
今日主题: 使用纯css增加网站Logo扫光效果声明:本篇有违"魔改"这个标题:本篇只为增加收录.并且复习使用纯css给logo加上扫光效果. 效果: 可以目测洞五洞洞幺导航 ...
OneNav一为主题魔改教程（四）：自定义网址内容页的Tag标签到任意位置--洞五洞洞幺
今日主题: 自定义网址内容页的Tag标签到任意位置声明:本篇有违"魔改"这个标题:修改之前做好笔记或备份. 在原WebStackPro的版本中, 内容页中的Tag标签块紧帖着简介 ...
OneNav一为主题魔改教程（三）：给底部加上当前页面的消耗时间--洞五洞洞幺
今日主题: 给底部加上当前页面的消耗时间.数据库查询数次 wordpress如何优化, 不论是首页.列表页.内容页,他们的加载时间是多少, 经历了什么,这些如果想要一目了然的话, 可以在网站的底部加上 ...
OneNav一为主题魔改教程（一）：优化后台新增网站时调用API却没有赋好值的BUG，以减少复制编辑工作量--一梦
今日主题: 优化后台新增网站时ajax调用API后却没有赋好值的BUG,以减少复制编辑工作量导航网站在刚建站时, 有大量的内容编辑工作, 要添加数千条网址内容, 为了保证洞五洞洞幺导航的独特性和可用 ...
OneNav一为主题魔改教程（七）：继续完善本地网址功能，重复的网址不让保存--洞五洞洞幺
自定义网址的功能,刚一不留神, 我添加了几个重复相同的自定义网址, 看作者的源码,在addsite方法并没有判断是否重复添加的网址, 这是一个bug, 所以, 我们来加上判断,修复这个bug. 效果: ...
handsome对应php文件,handsome主题魔改教程
!> 魔改效果详见本站,CSS由神代綺凜原创编写,已获得作者转载授权. 魔改效果有没有觉得很酷炫? 那么我们快搞起! 魔改教程第一步下载CSS [button icon="g ...
小米android系统分享,重温的手机分享篇一：90hz高刷？45w快充？双扬声器？你不知道的酷安重制版小米9魔改教程...
重温的手机分享篇一:90hz高刷?45w快充?双扬声器?你不知道的酷安重制版小米9魔改教程 2021-05-14 14:47:30 6点赞 13收藏 10评论大家上午好啊,我是重温,有幸能拿到这款 ...
关于Typecho的主题魔改记录
本站使用handsome主题魔改的折腾过程本文记录博主在使用该款主题时进行的一系列魔改,也就是你现在看到的一系列效果本站[http://www.cyz4531.top]使用的是handsome主题 ...
JavaScript网页制作--五秒后自动跳转页面
JavaScript网页制作–五秒后自动跳转页面通常在浏览一些网站时,会出现网页不存在的情况,网页不存在之后,有些网站会在5秒后自动跳转到一个新的网页,比如网站的首页.可以利用定时器和locatio ...

OneNav一为主题魔改教程（五）：点赞后自动加入到首页“我的导航”--洞五洞洞幺

OneNav一为主题魔改教程（五）：点赞后自动加入到首页“我的导航”--洞五洞洞幺相关推荐

最新文章

热门文章