前言
本文主要介绍 WordPress 基于 CoreNext 增加 友情链接、网址收藏的方法以弥补原主题无此项功能的遗憾。具体步骤添加代码到主题或子主题文件中,创建文件并粘贴代码,修改文件并添加代码。最后,还提供了其中一种美化样式供用户参考。
25-1-11:已修改为支持
CoreNext-Child
子主题,使用本页面介绍的新方法,后续更新主题版本此部分修改不会丢失。
效果预览
修改步骤
注意事项
以下修改方法仅适用于 CoreNext 的子主题 CoreNext-Child,安装方法点此查看,此处不再赘述。
由于不同主题的代码结构、样式设定以及功能逻辑存在显著差异,此方法无法确保在其他主题上直接可用。
倘若你希望在其他主题中应用,务必依据对应主题的特性自行修改、适配代码,以实现预期效果。
在操作前,请务必备份好原文件,以免出现不可挽回的错误,导致网站显示异常或功能缺失。
1 创建page-friend-link.php
找到/CoreNext-Child/template/
文件夹,在此文件夹下创建page-friend-link.php
文件,将如下代码复制到刚刚创建的page-friend-link.php
文件内;
<?php
namespace core_next;
the_post(); ?>
<!doctype html>
<html lang="zh">
<?php get_template_part("template/views/header"); ?>
<body>
<div id="core-next-app">
<app-header ref="app_header" id="app-header"></app-header>
<main class="container">
<div class="main-warp">
<div class="post-warp">
<div class="title-warp">
<h1 class="post-title"><?php the_title()?></h1>
</div>
<div class="page-info-warp">
<?php if (WordPress::isAdmin()) { $post_id = get_the_ID(); $edit_post_link = get_edit_post_link($post_id); echo '<div><i class="czs-pen-write"></i> <a href="'. $edit_post_link. '">编辑</a></div>'; }?>
</div>
<div class="content-warp">
<h2>💖 朋友们</h2>
<div class="linkpage">
<ul>
<?php
// 检索书签,这里假设您想要按随机顺序显示分类ID为205的书签
$bookmarks = get_bookmarks(array(
'title_li' => '',
'categorize' => 0,
'category' => 205,
'orderby' => 'rand'
));
// 检查是否有书签可显示
if (!empty($bookmarks)) {
foreach ($bookmarks as $bookmark) {
// 获取书签的图片
$friendimg = $bookmark->link_image;
// 开始输出书签的HTML
echo '<li>';
echo '<a href="' . esc_url($bookmark->link_url) . '" target="_blank">';
// 如果有图片,则显示图片;否则显示默认图片
if (empty($friendimg)) {
echo '<img src="https://static.wmviv.com/www/theme/CoreNext/static/img/favicon.svg" alt="默认头像,若有变动,请评论区留言提醒我">';
} else {
echo '<img src="' . esc_url($friendimg) . '" alt="' . esc_attr($bookmark->link_name) . '">';
}
// 显示书签的名称和描述
echo '<h4>' . esc_html($bookmark->link_name) . '</h4>';
echo '<p>' . esc_html($bookmark->link_description) . '</p>';
echo '</a>';
echo '</li>';
}
} else {
// 如果没有书签,显示一条消息
echo '<p>该分类下暂无链接</p>';
}
?>
</ul>
</div>
<h2>❌ 无法访问</h2>
<p>如果恢复访问了,记得在下方评论区给我留言哦 🧐</p>
<div class="linkpage">
<ul>
<?php
// 检索书签,这里假设您想要按随机顺序显示分类ID为206的书签
$bookmarks = get_bookmarks(array(
'title_li' => '',
'categorize' => 0,
'category' => 206,
'orderby' => 'rand'
));
// 检查是否有书签可显示
if (!empty($bookmarks)) {
foreach ($bookmarks as $bookmark) {
// 获取书签的图片
$friendimg = $bookmark->link_image;
// 开始输出书签的HTML
echo '<li>';
echo '<a href="' . esc_url($bookmark->link_url) . '" target="_blank" rel="noopener noreferrer">';
// 如果有图片,则显示图片;否则显示默认图片
if (empty($friendimg)) {
echo '<img src="https://static.wmviv.com/www/theme/CoreNext/static/img/favicon.svg" alt="默认头像,若有变动,请评论区留言提醒我">';
} else {
echo '<img src="' . esc_url($friendimg) . '" alt="' . esc_attr($bookmark->link_name) . '">';
}
// 显示书签的名称和描述
echo '<h4>' . esc_html($bookmark->link_name) . '</h4>';
echo '<p>' . esc_html($bookmark->link_description) . '</p>';
echo '</a>';
echo '</li>';
}
} else {
// 如果没有书签,显示一条消息
echo '<p>该分类下暂无链接</p>';
}
?>
</ul>
</div>
<?php the_content(); ?>
</div>
</div>
<app-comment id="app-comment"></app-comment>
</div>
<aside>
<?php dynamic_sidebar("page_sidebar"); ?>
</aside>
</main>
<?php get_template_part("template/module/footer"); ?>
</div>
<?php get_template_part("template/module/body-end"); ?>
</body>
<?php wp_footer(); ?>
</html>
链接部分代码详细解释
以下以 💖 朋友们 部分代码切片作为示例
<h2>💖 朋友们</h2>
<!-- 这是一个二级标题,用于显示"朋友们"字样,可能是这部分内容的标题 -->
<div class="linkpage">
<!-- 这个 div 元素可能是用于对下面的链接列表部分进行样式控制或者作为一个逻辑分组 -->
<ul>
<!-- 无序列表开始,用于展示多个书签信息 -->
<?php
// 以下是PHP代码部分,用于从数据库等数据源检索书签信息并进行展示相关的操作
// 检索书签,这里假设您想要按随机顺序显示分类ID为205的书签
$bookmarks = get_bookmarks(array(
'title_li' => '',
// 设置'title_li'为空字符串,意味着不生成默认的列表标题元素,通常如果不设置为空,函数可能会生成一个默认的标题包裹列表内容
'categorize' => 0,
// 设置'categorize'为0,表示不按照分类进行额外的分组显示等操作,只是单纯获取指定分类下的书签数据,不做分类相关的特殊处理
'category' => 205,
// 明确指定要检索的书签所属的分类ID为205,也就是只获取这个分类下的书签
'orderby' => 'rand'
// 设置'orderby'为'rand',表示按照随机顺序来获取书签,这样每次页面加载展示的书签顺序可能都不一样,增加展示的随机性
));
// 检查是否有书签可显示
if (!empty($bookmarks)) {
// 如果获取到的书签数据数组不为空,说明有书签可以展示,进入循环进行每个书签的HTML构建和输出
foreach ($bookmarks as $bookmark) {
// 遍历$bookmarks数组,$bookmark变量代表数组中的每一个书签对象,下面开始处理单个书签的信息展示
// 获取书签的图片
$friendimg = $bookmark->link_image;
// 从当前遍历到的书签对象中获取其对应的图片链接,并赋值给$friendimg变量,用于后续判断是否显示该图片
// 开始输出书签的HTML
echo '<li>';
// 输出一个<li>列表项元素,用于包裹当前书签的所有展示内容,是无序列表中的一项
echo '<a href="'. esc_url($bookmark->link_url). '" target="_blank">';
// 输出一个<a>链接元素,其href属性通过esc_url函数安全地转义书签的网址(防止安全漏洞,如XSS攻击等)后进行设置,并且设置target="_blank",使得点击链接时会在新的浏览器标签页打开
// 如果有图片,则显示图片;否则显示默认图片
if (empty($friendimg)) {
// 判断$friendimg变量是否为空,如果为空,说明书签没有对应的图片,就显示默认图片
echo '<img src="https://static.wmviv.com/www/theme/CoreNext/static/img/favicon.svg" alt="默认头像,若有变动,请评论区留言提醒我">';
// 输出一个<img>元素,其src属性设置为默认图片的路径,alt属性设置为默认的提示文字,用于在图片无法显示等情况下提供说明信息
} else {
// 如果$friendimg变量不为空,说明书签有对应的图片,就显示该图片
echo '<img src="'. esc_url($friendimg). '" alt="'. esc_attr($bookmark->link_name). '">';
// 输出一个<img>元素,其src属性通过esc_url函数安全转义书签图片的链接后进行设置,alt属性通过esc_attr函数安全转义书签的名称后进行设置,用于图片的替代文本显示
}
// 显示书签的名称和描述
echo '<h4>'. esc_html($bookmark->link_name). '</h4>';
// 输出一个<h4>标题元素,用于显示书签的名称,通过esc_html函数对书签名称进行安全转义(防止HTML注入等安全问题)后输出
echo '<p>'. esc_html($bookmark->link_description). '</p>';
// 输出一个<p>段落元素,用于显示书签的描述内容,同样通过esc_html函数对书签描述进行安全转义后输出
echo '</a>';
// 关闭<a>链接元素,结束当前书签链接部分的构建
echo '</li>';
// 关闭<li>列表项元素,完成当前书签所有展示内容的包裹
}
} else {
// 如果$bookmarks数组为空,也就是没有找到指定分类下的书签,就执行下面的代码
echo '<p>该分类下暂无链接</p>';
// 输出一个<p>段落元素,显示一条提示消息告知用户该分类下暂无链接
}
?>
</ul>
<!-- 无序列表结束 -->
</div>
2 修改main.css
功能前端相关美化,将以下代码复制到CoreNext-Child/css/main.css
文件;
以下样式需根据自己网站进一步美化,不一定适用于所有场景;
/* 友情链接 */
.linkpage ul:after{content:" ";clear:both;display:block}
.linkpage li{float:left;width:50%;position:relative;transition:all .3s ease-out;border-radius:5px;height:90px;list-style:none;line-height:1.2!important}
.linkpage h3{margin:15px -25px;padding:0 25px;border-left:5px solid #51aded;background-color:#f7f7f7;font-size:25px;line-height:40px}
.linkpage li:hover{background:rgba(230,244,250,.5);cursor:pointer}
.linkpage li a{padding:0 10px 0 90px;text-decoration:none!important}
.linkpage li a img{width:60px;height:60px;border-radius:50%;position:absolute;top:15px;left:15px;cursor:pointer}
.linkpage li a h4{color:var(--a-color);font-size:18px;margin:0 0 7px 0;padding-left:90px;transition:.5s}
.linkpage li a h4,.linkpage li a p{cursor:pointer;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1}
.linkpage li a p{color:var(--single-copyright-color);padding-left:90px}
.linkpage ul li a h4,.linkpage ul li a p{overflow:hidden;white-space:nowrap!important;text-overflow:ellipsis}
- 复制如下代码添加到子主题的
functions.php
文件的末尾。 - 如果
functions.php
文件的最后是以?>
结尾的,则要把代码放在?>
的前面。 - 添加完代码后,在网站后台刷新页面,就可以看到【链接】选项出现在菜单中了。
/*-----------------------------------------------------------------------------------*/
// 后台链接菜单
/*-----------------------------------------------------------------------------------*/
add_filter('pre_option_link_manager_enabled','__return_true');
3 修改functions.php
3.1 添加链接功能
打开/CoreNext-Child/functions.php
文件,将如下代码复制到/CoreNext-Child/functions.php
文件<?php
;
/*-----------------------------------------------------------------------------------*/
// 后台链接菜单
/*-----------------------------------------------------------------------------------*/
add_filter('pre_option_link_manager_enabled','__return_true');
3.2 页面模板增加友情链接选项
/*-----------------------------------------------------------------------------------*/
// 页面增加友情链接模板页 [FriendLink]
/*-----------------------------------------------------------------------------------*/
function setup_friend_link_page() {
$post_templates = ["core_next_page_friend_link" => "[CoreNext]友情链接"];
add_filter('page_template', function ($page_template) {
$slug = get_page_template_slug();
return ($slug == "core_next_page_friend_link")? get_stylesheet_directory(). '/template/page-friend-link.php' : $page_template;
});
add_filter('theme_page_templates', function ($templates) use ($post_templates) {
$templates = array_merge($templates, $post_templates);
return $templates;
}, 10, 1);
}
add_action('init', 'setup_friend_link_page');
保存并上传
使用方法
登录后台页面,点击需要引用此模板的文章,选择快速编辑,在右下角模板选择[CoreNext]友情链接
,最后更新即可。
- 本文标题:美好的明天 - WordPress CoreNext 增加 友情链接 网址收藏 页面
- 本文地址:https://www.wmviv.com/archives/893.html
- 转载请保留本文标题、本文地址及链接
- 本站遵循 知识共享《署名—非商业性使用—相同方式共享 4.0 协议国际版》(CC BY-NC-SA 4.0)公共许可协议
- 部分文章来源于网络,仅作为学习展示之用,版权归原作者所有
- 若因文章多次网络流转无法追溯原作者,导致侵犯您的权益,请您 来信告知。
2025-01-02 14:12
•来自:未知
感谢大佬
2024-12-15 22:54
•来自:云南
感谢感谢……
2024-12-15 23:25
•来自:安徽
细节还没写细,后面再添了,完成上面的,添加链接要在第一步单独的链接页面里添加,链接分类id也是在这里面链接分类看,可以先试试
2024-12-15 23:27
•来自:云南
先这样,我友链少。