WP导航主题WebStack Pro魔改优化教程（五）：点赞后自动加入到首页“我的导航”

 今日主题： 点赞后自动加入到首页“我的导航”

声明：修改之前做好笔记或备份。

嫌“我的导航”没内容， 在网站中发现了常用的网站不能快速的到达。 所以我们来改进这一块， 这款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， 然后刷新，重新点赞试试效果。 

Webstack Pro 魔改起航！每日一篇修改教程， 记录修改点滴！