给你的WordPress网站添加一个友情链接页面（仿掘金）

<?php

/**

 * Template Name: 友情链接

 * Template Post Type: page

 * 功能介绍：https://www.dzw6.com/35198.html

 */

get_header();

?>

<style>

.wrap{display:flex;flex-direction:column;min-height:100%}

.main{flex:1 1 auto;margin:0 auto;max-width:980px}

.main .title{margin:60px 0 30px 0;font-size:32px;font-weight:100;text-align:center;color:#000}

.main .link-list{margin:30px auto 60px auto;padding:0;line-height:0;list-style:none}

@media (max-width:1000px){.main .link-list{text-align:center}}

.main .link-list .item{display:inline-block;position:relative;margin:0 8px 16px 8px;width:180px;height:74px;background-color:#fff;box-shadow:inset 0 0 0 1px #f1f1f1;overflow:hidden;box-sizing:border-box}

.main .link-list .item:hover{box-shadow:inset 0 0 0 2px #45b4ff}

@media (max-width:600px){.main .link-list .item{width:80%}}

.main .link-list .item .link{display:flex;align-items:center;justify-content:center;height:100%}

.main .link-list .item .link.no-logo .name{display:block}

.main .link-list .item .link:hover .name,.main .link-list .item .link:hover .logo{transition:opacity .3s}

.main .link-list .item .link:hover .name{width:auto;height:auto;opacity:1}

.main .link-list .item .link:hover .logo{width:0;height:0;opacity:0}

.main .link-list .item .link .name{padding:0 5px;width:0;height:0;font-size:14px;line-height:1.5;color:#333;opacity:0}

.main .link-list .item .link .logo{height:60px;width:80%;background-position:center;background-repeat:no-repeat;background-size:contain}

@media (max-width:600px){.main .link-list .item .link .logo{height:50px;width:85%}}

</style>

<div class="wrap">

  <main class="main">

    <h1 class="title"><?php the_title(); ?></h1>

    <ul class="link-list">

      <?php

      $bookmarks = get_bookmarks([

        'orderby' => 'name',

        'order' => 'ASC'

      ]);

      foreach ($bookmarks as $bm) {

        $url = $bm->link_url;

        $name = $bm->link_name;

        $img = $bm->link_image;

        $target = $bm->link_target ? $bm->link_target : '_blank';

        $rel = $bm->link_rel ? $bm->link_rel : 'noopener';

        $classes = empty($img) ? 'link no-logo' : 'link';

        echo '<li class="item">';

        echo '<a class="' . esc_attr($classes) . '" href="' . esc_url($url) . '" target="' . esc_attr($target) . '" rel="' . esc_attr($rel) . '">';

        echo '<div class="name">' . esc_html($name) . '</div>';

        if (!empty($img)) {

          echo '<div class="logo" style="background-image:url(' . esc_url($img) . ')"></div>';

        }

        echo '</a>';

        echo '</li>';

      }

      ?>

    </ul>

  </main>

</div>

<?php get_footer(); ?>