一直在找WordPress友情链接的页面设置方法,网上大多都是带头像的友情链接设置方法,没有找到分类链接设置的方法,像我们这些爱搞WordPress和前端的,素材网站太多太多,懒得存到浏览器书签处,就只好记在自己博客里,不至于是公司里写代码时因为一个素材而要找好久。如果你只是为了弄一个互相串博客的页面就不必往下看了,因为网上好多这样的设置方法,简单粗暴。话不多说,进入主题吧。

实现方法

本来原代码是大发_BigFa写在他博客里的,他那个links大头像样式的,对于WordPress博客还好说,有avatar头像就能正常显示,当你收藏了一堆素材网站的网址后,你会发现那些大头像就是个多余的。于是为了实用性,我就自己稍微精简了下代码和修改了样式。大发写的样式很是不错,自适应的样式。

自适应正方型的原理是利用padding-bottom:100%来实现的,为什么padding-bottom:100%等于容器宽度而不是高度呢,因为padding和margin的百分比都是按照文档方向算的,正常的文档方式是左右,自然也就是宽度了。

垂直居中利用了flex的justify-content,具体可以搜索相关资料。

css代码:

/** 友情链接页面 **/
.catalog-title {
    font-size: 24px;
    color: #000;
    font-weight: 700;
}

.userItems {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.userItem {
    width: 25%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.userItem--inner {
    padding-bottom: 15%;
    height: 0;
}

.userItem-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
    background: #f9f9f9;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.userItem-name {
    text-align: center;
}

.userItem-name a{
    color: #707070;
}

@media (max-width:900px) {
    .userItem {
        width: 33.33333%;
    }
}

@media (max-width:600px) {
    .userItem {
        width: 50%;
    }
}

PHP代码:

把下面的代码添加到functions.php

// 友情链接
    function get_the_link_items($id = null) {
        $bookmarks = get_bookmarks('orderby=date&category=' . $id);
        $output = '';
        if (!empty($bookmarks)) {
            $output .= '<div class="userItems">';
            foreach ($bookmarks as $bookmark) {
                $output .= '<div class="userItem"><div class="userItem--inner"><div class="userItem-content">
            <div class="userItem-name"><a class="link link--primary" href="' . $bookmark->link_url . '" target="_blank" >' . $bookmark->link_name . '</a></div></div></div></div>';
            }
            $output .= '</div>';
        }
        return $output;
    }

    function get_link_items() {
        $linkcats = get_terms('link_category');
        if (!empty($linkcats)) {
            foreach ($linkcats as $linkcat) {
                $result .= '
            <h3 class="catalog-title">' . $linkcat->name . '</h3>
            ';
                $result .= get_the_link_items($linkcat->term_id);
            }
        } else {
            $result = get_the_link_items();
        }
        return $result;
    }

具体实现方法

网上一大堆这样的实现方法,我就丢一个链接给你们,你们自己看吧。
WordPress 友情链接页面终极版