存档:Add your linkpage

先打开 WordPress 默认屏蔽的链接管理器。只需在 function.php 里添加一行:

add_filter( 'pre_option_link_manager_enabled', '__return_true' );

然后刷新。在仪表盘-链接里添加自己的友情链接,在高级-备注一栏里填上对方的邮箱,这样才能正确显示其 gravatar 头像。

之后仍需在 function.php 里添加以下代码:

function get_the_link_items($id = null){
    $bookmarks = get_bookmarks('orderby=date&category=' . $id);
    $output    = '';
    if (!empty($bookmarks)) {
        $output .= '<div class="catalog-share">' . count($bookmarks) . ' items in collection</div><div class="userItems">';
        foreach ($bookmarks as $bookmark) {
            $output .= '<div class="userItem"><div class="userItem--inner"><div class="userItem-content">'. get_avatar($bookmark->link_notes,64) . '
            <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><div class="catalog-description">' . $linkcat->description . '</div>
            ';
            $result .= get_the_link_items($linkcat->term_id);
        }
    } else {
        $result = get_the_link_items();
    }
    return $result;
}

function shortcode_link(){
    return get_link_items();
}
add_shortcode('link', 'shortcode_link');

在 style.css 里添加以下代码(推荐在主题自定义的额外CSS里添加,方便省事):

.catalog-title {
    font-size: 24px;
    color: #000;
    font-weight: 700
}

.catalog-share {
    font-size: 14px;
    color: rgba(0,0,0,.44);
    margin-bottom: 20px
}

.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 {
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    border-radius: 3px;
    position: relative;
    padding-bottom: 100%;
    height: 0
}

.userItem-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    -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-content .avatar {
    border-radius: 100%
}

.userItem-name {
    margin-top: 8px;
    text-align: center
}

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

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

新建页面添加短代码 ‘link’ 即可,效果参照:Click here

原出处在此:Click here

P.S. 原文的短代码是bigfalink,我写了之后文章页显示友情链接页了,转义有问题遂改成了link。如果按步骤没显示成功,请把 function.php 需要添加的最后一行的 ‘link’ 换成 ‘bigfalink’,最后添加的短代码也相应改回来即可。

发表评论

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