wordpress创建自己独立的友情链接页面

   最近一段时间一直在折腾wordpress,自己使用的DUX主题虽然有友情链接添加接口,但是很多新手站长却找不到该怎么添加。而且友链越来越多,就希望有个单独页面展现出来,那么就涉及到page页面的自由开发了,其实在page页面的开发有很多教程,操作起来也十分简单,那么我就创建独立友情页面分享出来!
一、首先进行分类目录添加为“友情链接”
在全部链接中添加友情链接。

二、复制一份自用主题的pages.php(也可以是现用主题里面的其他独立页面),命名为links.php。

接下来,我们就要页面设置里,新建页面,右边模板选择,选择我们开始创建的links.php模板。

以上内容友情链接就算添加成功了,接下来就创建页面调用出来,其实在dux主题设置里有项设置是“友情链接分类选择”勾选上我们创建的友情链接分类目录,打开你的友情页面就显示出来了。其他主题也适用需自行测试,其实在page模板里php代码中就已经有友情链接的调用,这时候友情页面已经算是成功了。那么接下来则是将默认的样式修改。前期看了龙砚庭博主的友情链接样式,非常不错,感谢分享。所以果断 借鉴。在他的基础上做了一些小修改。

如果新建的links.php页面没有友链调用的,添加以下php代码添加即可调用。DUX主题可以直接下载使用!

三、部署php代码,找到links.php文件里面的<?php the_content(); ?>,在其后面添加如下代码:
<!---友情链接---调用添加-xc-show-https://www.xcshow.cn-->
<div class="lyt_links">
<ul class="links_lyt">
    <li style="list-style-type: none;">
<ul class="links_lyt"><!--?php &lt;br ?--> $bookmarks = get_bookmarks('title_li=&amp;orderby=rating&amp;order=asc');</ul>
</li>
</ul>
<ul class="links_lyt">
    <li style="list-style-type: none;">
<ul class="links_lyt">$default_ico = "'get_template_directory_uri().'/img/linkimg/'.rand(1,10).'.png";</ul>
</li>
</ul>
<ul class="links_lyt">
    <li style="list-style-type: none;">
<ul class="links_lyt">if ( !empty($bookmarks) ) {</ul>
</li>
</ul>
<ul class="links_lyt">
    <li style="list-style-type: none;">
<ul class="links_lyt">foreach ($bookmarks as $bookmark) {</ul>
</li>
</ul>
<ul class="links_lyt">
    <li style="list-style-type: none;">
<ul class="links_lyt">echo '
    <li class="link_lyt"><img src="https://api.byi.pw/favicon/?url='
. $bookmark-&gt;link_url. '" /><a class="link_lyt_inner" title="' . $bookmark-&gt;link_description . '" href="' . $bookmark-&gt;link_url . '" target="_blank" rel="noopener"><span class="link_lyt_name">'. $bookmark-&gt;link_name .'</span>
</a>
<div class="link_lyt_desc">'
. $bookmark-&gt;link_notes .'</div>
&nbsp;</li>
</ul>
</li>
</ul>
'
;
}}?&gt;

</div>
<!---结束--->

上述代码中,友情链接调用的是该友链的ico图标,如果没有就会在主题根目录/img/(新建文件夹)linkimg里面随机调用名为1~10的png图片。

四、部署css样式,打开自用主题style.css,扔进以下代码:
/*--友情链接css样式-xc-show--https://www.xcshow.cn--*/
.lyt_links {
margin-bottom: 80px;
}
.lyt_links img {
position: absolute;
display: inline-block;
margin: 1px 0 -10px 0px;
padding: 1px;
width: 24px;
height: 24px;
border: 1px solid #eee;
border-radius: 50%;
background: #fff;
vertical-align: bottom;
}
.link_lyt a ,.link_lyt_inner{text-decoration:none;}
/*站点图标样式,自行DIY*/
.lyt_links ul {
margin: 0;
list-style: none;
padding: 0;
width: 100%;
display: inline-block;
}
.lyt_links ul li {
width: 32.60%;
float: left;
border: 1px solid #eee;
padding: 10px 30px;
margin: 4px 4px;
position: relative;
overflow: hidden;
border-left: 3px #0089fa solid;
box-shadow: 2px 2px 0 rgba(0,0,0,.05);
}
.links_lyt li {
width: 50%
}
/*li自定义颜色 dux--https://www.xcshow.cn*/
.lyt_links ul li:nth-child(5n+1) {
border-left-color: #ff002b
}
.lyt_links ul li:nth-child(5n+2) {
border-left-color: #ffa900
}
.lyt_links ul li:nth-child(5n+3) {
border-left-color: #0c0
}
.lyt_links ul li:nth-child(5n+4) {
border-left-color: #0cf
}
/*li自定义颜色 end*/
span.link_lyt_name {
color: #000000;
padding-bottom: 10px;
display: block;
margin-left:28px;
-webkit-transition: all .3s;
transition: all .3s;
}.link_lyt_desc {
color: #949494;
font-size: 13px;
padding: 10px 0;
border-top: 1px dashed #ddd;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 25px;
}.lyt_links ul li:hover {
color: #ffffff;
background-image: linear-gradient(to right,#eae0e0,#cabdbd);
}
.lyt_links ul li:hover:before {
width: 180%;
}
.lyt_links ul li:hover .link_lyt_name {
color: #000;
}
.lyt_links ul li:hover .link_lyt_desc {
color: #000;
border-top: 1px dashed #cec8c8;
}
@media screen and (max-width:480px) {
.lyt_links ul li {
margin: 4px 0px;
}
.lyt_links ul li {
width: 100%;
}
}

以上的css样式,可以根据class类名自行修改创建属于自己的样式!

网盘密码:yj35


非著名均为来自网络,不代表一点新作立场,若为著名原创,转载请注明出处:https://ydxinzuo.cn/archives/618

作者: xinyuan7630

发表评论

邮箱地址不会被公开。 必填项已用*标注

1条评论

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 303817524@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部