网站技术

在Wordpress上利用链接制作自定义导航/收藏的链接分类展示

2019/07/12 8,490 暂无评论 GoaKay小狼
这也是个突如其来的想法。

在自己的电脑上,浏览器如果登陆了账号,收藏的链接/网址就可以同步备份。但等你用别人的电脑,或公司的电脑,不方便登陆账号,没有科学手段登陆时,那一些平时用惯的网站就废了。网址是记不住了啦,翻手机上面的收藏栏也麻烦。这时,把你的链接保存在你自己的网站上,那样就方便好多了。

把自己收藏的链接做成导航是很有必要的。

既然要求有了,那接下来就是如何实现。想法很简单,wordpress自带链接收藏,把你的收藏网址输入进去,最后在页面读取。如果你的wp后台没有链接模块,请在functions.php添加以下这段。

add_filter('pre_option_link_manager_enabled','__return_true');

接下来就在链接模块里面添加你的网址,这是个漫长的工作,建议把需要用到的网址输入进去,平时很少用到的就忽略吧。建好链接分类,把网址归类好。

等链接全输入好了,就开始着手代码吧。建议新建一个页面来放,同时给他制作一个新的页面模板,如我的是page-link.php。重要的是导入链接,引用链接的代码是:

<?php wp_list_bookmarks(''); ?>

这个代码会把你的所有链接都显示在一起,这时右键查看网页源代码,你会发现每个链接都有固定id,如id="linkcat-56"。有了固定id,你就可以自由的把它的的顺序安排好。

<div class="linkblock">
    <h2>常用</h2>
    <?php wp_list_bookmarks('category=52&show_description=1&show_images=0&class=linkone'); ?>
    <?php wp_list_bookmarks('category=53&show_description=1&show_images=0&class=linkone'); ?>
</div>
<div class="linkblock">
    <h2>设计</h2>
    <?php wp_list_bookmarks('category=54&show_description=1&show_images=0&class=linkone'); ?>
    <?php wp_list_bookmarks('category=56&show_description=1&show_images=0&class=linkone'); ?>
    <?php wp_list_bookmarks('category=57&show_description=1&show_images=0&class=linkone'); ?>
    <?php wp_list_bookmarks('category=55&show_description=1&show_images=0&class=linkone'); ?>
    <?php wp_list_bookmarks('category=71&show_description=1&show_images=0&class=linkone'); ?>
    <?php wp_list_bookmarks('category=58&show_description=1&show_images=0&class=linkone'); ?>
    <?php wp_list_bookmarks('category=59&show_description=1&show_images=0&class=linkone'); ?>
    <?php wp_list_bookmarks('category=72&show_description=1&show_images=0&class=linkone'); ?>
</div>

比如我的,我把他们这样归类。category=54是id,show_description=1是显示图像描述,show_images=o为不显示图片,(重点:默认是显示图片,如果你放了图片,会替换链接标题的!),class=linkone是修改元素名称。其实可以修改的元素还有很多,搜索一下“wp_list_bookmarks”就有了。

剩下的就参照网页源代码添加css了。

但是,问题来了,我的链接很多,往下翻耗时间怎么办?

可以用a标签定位,每一个分类都有固定的id,如<li id="linkcat-53" class="linkone"><h2>常用</h2></li>,我们可以用<a href="#linkcat-53">常用</a>来定位。我在左侧做了个菜单。

最后成品请查看:goakay.com/link

因为是自用的,样式弄个大概就好,也没想过自适应,毕竟也只会在电脑浏览器上用得到。

不过,缺少了网页的logo图标,识别性还是差很多,找链接的时候还是要费点时间。我也试过用

<?php wp_list_bookmarks('category=52&&show_images=1&class=linkone-img'); ?><br>

来单独显示图片,但是这动态代码里面的框架定的太死,不能给每一个元素单独加class名称,很难把每一个都准确的定位在网址名称之前,所以放弃了。

大家有没有好的解决办法,可以告诉我。

最后还是把我的导航源代码分享出来给大家参考吧。

领取

订阅
提醒
guest

0 评论
Inline Feedbacks
View all comments