本站 CSS

友链模板

代码

我不清楚原来的代码的 apache licence 是不是认真的……暂且无视它了
下文的代码就当发布到公有领域了（

File links.php

<?php
/**
 * Template Name: 友情链接 by Felicity
 */
get_header(); ?>

<main class="container">
    <div class="page-friends page-common row">
        <?php if (have_posts()): ?>
            <?php while (have_posts()) : the_post(); ?>
                <h1 class="page-title" style="margin-top:100px;text-align:center;font-size:2rem;font-style:normal"><?php the_title(); ?></h1>
                <article class="page-content" style="text-align:center;">
                    <?php the_content(); ?>
                </article>
            <?php endwhile; ?>
        <?php endif; ?>

        <style>
			* {
				margin: 0;
				padding: 0;
				outline: none;
				/* border: 1px solid cyan;
				box-sizing: border-box; */
			}
			
			.mA {
				margin: 0 auto;
			}
			
            #wrapper {
                width: 50rem;
                max-width: 100vw;
                padding-top: 2rem;
                padding-bottom: 2rem;
            }

            a.friend {
                width: 33vw;
                max-width: 10rem;
                display: inline-block;
            }

            .friend-avatar {
                height: 5rem;
                width: auto;
                border-radius: 100%;
                -webkit-transition: -webkit-transform .3s;
                transition: -webkit-transform .3s;
                -o-transition: transform .3s;
                transition: transform .3s;
                transition: transform .3s, -webkit-transform .3s;
            }

            .friend-avatar:hover {
                -webkit-transform: scale(1.2) rotate(12deg);
                    -ms-transform: scale(1.2) rotate(12deg);
                        transform: scale(1.2) rotate(12deg);
            }

            .friend-name {
                font-family: JetBrains;
                font-weight: lighter;
                padding-top: 0.3rem;
                padding-bottom: 1rem;
                color: #249ffd;
            }
			
			@font-face {
    			font-family: JetBrains;
    			src: url("https://cdn.xecades.xyz/fonts/JetBrainsMono.ttf")
}

        </style>
        <div>
            <?php
                global $wpdb;
                $qlink="select link_url,link_notes,link_name,link_image from wp_links where link_visible='Y' order by link_id";
                $links = $wpdb->get_results($qlink);
                if(empty($links)) {
                    echo '<p>暂无友链数据！</p>';
                } else {
                    function retain_key_shuffle(array &$arr){
                        if (!empty($arr)) {
                            $key = array_keys($arr);
                            shuffle($key);
                            foreach ($key as $value) {
                                $arr2[$value] = $arr[$value];
                            }
                            $arr = $arr2;
                        }
                    }
                retain_key_shuffle($links);
                $output1 = "";
                foreach ($links as $comment) {
                    $tmp = "<li style=\"display: inline-block\">
                                <a rel=\"nofollow\" class=\"friend\" href=\"$comment->link_url\" target=\"_blank\">
                                    <img class=\"friend-avatar\" alt=\"$comment->link_notes\" src=\"$comment->link_image\">
                                    <div class=\"friend-name\">$comment->link_name</div>
                                </a>
                            </li>";

                    $output1 .= $tmp;
                }
                $output1 = "<ul id=\"wrapper\" style=\"list-style:none; text-align: center;\" class=\"no-select mA\">".$output1."</ul>";
                echo $output1;
                }
            ?>
        </div>
    </div>
	<?php if (comments_open() || get_comments_number() ) {comments_template();}?>
</main>

<?php get_footer(); ?>

使用方法

无需插件！

只需要开启仪表盘中“链接”功能，把上述代码加入主题文件夹，创建友链页面时选择友链模板即可。

我做出的改动……基本就是用 Xecades 的 CSS 换掉了原来的，然后在最下面加上了评论。（虽然当时对于没有任何基础的我还是太困难了）

参见

1. WordPress友情链接模板 | 青空之蓝
2. 本站的友链页面以及链接的 Github 仓库（懒

额外 CSS

用户 css 无法覆盖主题 css，即使加上了 !important 标记。相当匪夷所思的事情。（虚心求教，知道的请在评论区告诉我）
于是我暴力改了 style.css，尽管这不是官方推荐的方式。用 JetBrains 代替了默认的等线字体，去掉了背景色。（但是没有修改代码字体大小，管他的）