本站 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 换掉了原来的,然后在最下面加上了评论。(虽然当时对于没有任何基础的我还是太困难了)
参见
- WordPress友情链接模板 | 青空之蓝
- 本站的友链页面以及链接的 Github 仓库(懒
额外 CSS
用户 css 无法覆盖主题 css,即使加上了 !important
标记。相当匪夷所思的事情。(虚心求教,知道的请在评论区告诉我)
于是我暴力改了 style.css
,尽管这不是官方推荐的方式。用 JetBrains 代替了默认的等线字体,去掉了背景色。(但是没有修改代码字体大小,管他的)
钛巨了