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

自定义WordPress友情链接样式

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

找到主题模板函数(functions.php)文件,在最后一行?>上面添加以下内容,调用友情链接工具:
add_filter( 'code_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友情链接样式

关于 荣耀博客

好记性,不如烂笔头。

随机推荐

Centos根目录100%解决思路

Centos 7 根目录(爆满 …

发表评论

');})();