2018年6月18日 星期一
通知
主页 / 荣耀日志 / 自定义WordPress友情链接样式

自定义WordPress友情链接样式

先看实际效果(在线工具),自适应的哦,大家觉得好了,再继续往下看,免得浪费大家时间,本工具纯属娱乐,就是利用友情链接工具搭建的一个工具列表页面。没啥可说的了,进入主题吧。

找到主题模板函数(functions.php)文件,在最后一行?>上面添加以下内容,调用友情链接工具:

add_filter( 'pre_option_link_manager_enabled', '__return_true' );

在主题目录下复制其他页面模版文件另存为 template-tools.php
修改模板名称:

<?php
/*
Template Name: Tools Page
*/
?>

添加样式:

<style type="text/css">
.lists {padding:5px; margin:10px auto auto 0;}
.link-content li{float:left;text-align:center;width:33.3%;font-size:12px;margin-bottom:15px;list-style-type:none !important;}
.link-content li img{margin:8px;transition:0.6s;-webkit-transtion:0.6s;max-width:90%;height:auto;vertical-align: middle;}
.link-content li span{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display:block;}
.link-content li:hover img{transform:scale(1.5);-webkit-transform:scale(1.5);}
</style>

调用头部菜单:

<?php get_header(); ?>

页面内容代码开始

<div class="content">

调用友情链接代码:

<!-- links pages -->
<div class="lists"> 
<?php $bookmarks=get_bookmarks();
if ( !empty($bookmarks) ){
echo '<ul class="link-content clearfix">';
foreach ($bookmarks as $bookmark) {
echo '<li><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '" target="_blank" ><img src="'. $bookmark->link_image .'"><span class="sitename">'. $bookmark->link_name .'</span></a></li>';
}
echo '</ul>';
}
?>
</div>

页面内容代码结束:

</div><!-- .content -->

调用小工具:

<?php get_sidebar(); ?>

调用底部菜单:

<?php get_footer(); ?>

代码情况根据自己实际情况来修改,这里就说主要的代码。
最终代码是这样的:

<?php 
/*
Template Name: Tools Page
*/
?>
<style type="text/css">
.lists {padding:5px; margin:10px auto auto 0;}
.link-content li{float:left;text-align:center;width:33.3%;font-size:12px;margin-bottom:15px;list-style-type:none !important;}
.link-content li img{margin:8px;transition:0.6s;-webkit-transtion:0.6s;max-width:90%;height:auto;vertical-align: middle;}
.link-content li span{display:block;}
.link-content li:hover img{transform:scale(1.5);-webkit-transform:scale(1.5);}
</style>
<?php get_header(); ?>
<div class="content">
......其他代码省略......
            <!-- links pages -->
            <div class="lists">
            <?php $bookmarks=get_bookmarks();
                if ( !empty($bookmarks) ){
                    echo '<ul class="link-content clearfix">';
                    foreach ($bookmarks as $bookmark) {
                        echo '<li><a href="' . $bookmark->link_url . '" title="' . $bookmark->link_description . '" target="_blank" ><img src="'. $bookmark->link_image .'"><span class="sitename">'. $bookmark->link_name .'</span></a></li>';
                }
                    echo '</ul>';
                }
                ?>
            </div>
       ......其他代码省略......
       </div><!-- .content --> 
<?php get_sidebar(); ?> 
<?php get_footer(); ?>
原创文章,转载请注明: 转载自荣耀博客
本文链接地址: 自定义WordPress友情链接样式

关于 荣耀博客

好记性,不如烂笔头。

发表评论

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

请输入正确的验证码.

'); })();