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

技术文摘4年前 (2021)更新 8KMM
8K 0 0

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

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

嫌“我的导航”没内容, 在网站中发现了常用的网站不能快速的到达。 所以我们来改进这一块, 这款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这一块完整代码如下:

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

 

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

找到并打开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 魔改起航!每日一篇修改教程, 记录修改点滴!

 

 

© 版权声明

相关文章

文章目录

    暂无评论

    暂无评论...