大家好啊！WordPress 主题开发教程如约而至。你还在坚持吗？
这周我们来完善一下文章详情页。
如上图所示，面包屑，作者，浏览数量，点赞数量，评论数量，时间，标签，文末说明，点赞，打赏，上一篇，下一篇等等，都是一些小功能。
面包屑是很常见的一个小功能，不难，但是“碎”。
is_single，is_page，is_category，is_tag，is_404…… 这些函数就又用上了，在详情页，面包屑的相关代码如下：
echo '<div class="base-list-nav" itemscope="">' . __('', 'cmp');
$homeLink = home_url() . '/';
echo '<a itemprop="breadcrumb" href="' . $homeLink . '">' . __('首页', 'cmp') . '</a> ' . $delimiter . ' ';
$cat = get_the_category();
$cat = $cat[0];
$cat_code = get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo $cat_code = str_replace('<a', '<a itemprop="breadcrumb"', $cat_code);
echo $before . '正文' . $after;详细的代码，函数：the_first_breadcrumbs()，放在 functions.php 中了，感兴趣的朋友可以仔细读一下。
详情页的这些功能，都有开关可以控制是否显示：
作者，浏览数量，点赞数量，评论数量，时间……这些小功能都封装了小函数，这样代码整洁点。
作者相关代码：
<?php
//作者头像和名称
$detail_switch_author_avatar = the_first_option('detail_switch_author_avatar');
$detail_switch_author_name = the_first_option('detail_switch_author_name');
if ($detail_switch_author_avatar || $detail_switch_author_name) : ?>
<a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" title="<?php the_author() ?>">
<?php if ($detail_switch_author_avatar) :
the_first_avatar(get_the_author_meta('ID'));
endif; ?>
<?php if ($detail_switch_author_name) : ?>
<em><?php the_author() ?></em>
<?php endif; ?>
</a> ·
<?php endif; ?>浏览数量的函数：
function the_first_post_detail_view_count()
{
global $post;
if (the_first_option('detail_switch_view_count')) {
$count = get_post_meta($post->ID, "views", true);
if (!$count) {
$count = 0;
}
echo '<cite>浏览 ' . $count . '</cite> ·';
}
echo '';
}点赞数量的函数：
/**
* 详情-点赞数
*/
function the_first_post_detail_thumbup_count()
{
global $post;
if (the_first_option('detail_switch_thumbup_count')) {
$count = get_post_meta($post->ID, "jaingqie_thumbup", true);
if (!$count) {
$count = 0;
}
echo '<cite>点赞 ' . $count . '</cite> ·';
}
echo '';
}评论数量的函数：
/**
* 详情-评论数
*/
function the_first_post_detail_comment_count()
{
if (the_first_option('detail_switch_comment_count')) {
echo '<cite>评论 ' . get_comments_number() . '</cite> ·';
}
echo '';
}时间相关代码：
/**
* 美化时间
*/
function the_first_time_ago($ptime)
{
$ptime = strtotime($ptime);
$etime = time() - $ptime;
if ($etime < 1) return '刚刚';
$interval = array(
12 * 30 * 24 * 60 * 60 => '年前 (' . wp_date('Y-m-d', $ptime) . ')',
30 * 24 * 60 * 60 => '个月前 (' . wp_date('m-d', $ptime) . ')',
7 * 24 * 60 * 60 => '周前 (' . wp_date('m-d', $ptime) . ')',
24 * 60 * 60 => '天前',
60 * 60 => '小时前',
60 => '分钟前',
1 => '秒前'
);
foreach ($interval as $secs => $str) {
$d = $etime / $secs;
if ($d >= 1) {
$r = round($d);
return $r . $str;
}
};
}
echo the_first_time_ago(get_the_time('Y-m-d G:i:s'));标签相关代码：
<?php
//标签信息
$detail_switch_tag = the_first_option('detail_switch_tag');
if ($detail_switch_tag) : ?>
<div class="content-tag mb-20">
<div class="tag-list">
<?php the_tags('', '', '') ?>
</div>
</div>
<?php endif; ?>上一篇、下一篇功能相关代码：
<?php
//上一篇 下一篇
$detail_switch_pre_next = the_first_option('detail_switch_pre_next');
if ($detail_switch_pre_next) : ?>
<div class="content-nav row d-flex flex-wrap mb-20">
<div class="content-block column md-6">
<h6>
<?php if (get_previous_post()) {
previous_post_link('%link', '上一篇');
} else {
echo '<a href="javascript:void(0)">上一篇</a>';
} ?>
</h6>
<p>
<?php if (get_previous_post()) {
previous_post_link('%link');
} else {
echo "没有了";
} ?>
</p>
</div>
<div class="content-block column md-6">
<h6>
<?php if (get_next_post()) {
next_post_link('%link', '下一篇');
} else {
echo '<a href="javascript:void(0)">下一篇</a>';
} ?>
</h6>
<p>
<?php if (get_next_post()) {
next_post_link('%link');
} else {
echo "没有了";
} ?>
</p>
</div>
</div>
<?php endif; ?>点赞和打赏功能。点赞功能是AJAX做的，需要先注册一个AJAX回调函数，再使用Javascript调用。相关代码如下：
//点赞和打赏
$detail_switch_thumbup = the_first_option('detail_switch_thumbup');
$detail_switch_reward = the_first_option('detail_switch_reward');
if ($detail_switch_thumbup || $detail_switch_reward) : ?>
<div class="content-opt mb-20">
<div class="content-opt-wap">
<?php if ($detail_switch_thumbup) : ?>
<div>
<a href="javascript:;" data-action="the_first_thumbup" data-id="<?php the_ID(); ?>" class="btn-thumbup <?php if (isset($_COOKIE['the_first_thumbup_' . $post->ID])) echo ' done'; ?>">
<img alt="picture loss" src="<?php echo get_stylesheet_directory_uri() . '/images/zan.png'; ?>" />
<?php $thumbup = get_post_meta($post->ID, 'the_first_thumbup', true); ?>
<p>已有<cite class="count"><?php echo $thumbup ? $thumbup : '0'; ?></cite>人点赞</p>
</a>
</div>
<?php endif; ?>
<?php if ($detail_switch_reward) : ?>
<div>
<a href="javascript:;" class="btn-reward">
<img alt="picture loss" src="<?php echo get_stylesheet_directory_uri() . '/images/shang.png'; ?>" />
<p>打赏一下作者</p>
</a>
</div>
<?php endif; ?>
</div>
</div>
<div id="reward-div" style="display: none;">
<?php the_first_reward_image() ?>
</div>
<?php endif; ?>/**
* 点赞功能
*/
add_action('wp_ajax_nopriv_the_first_thumbup', 'the_first_thumbup');
add_action('wp_ajax_the_first_thumbup', 'the_first_thumbup');
function the_first_thumbup()
{
$id = isset($_POST["um_id"]) ? (int)($_POST["um_id"]) : 0;
$action = isset($_POST["um_action"]) ? sanitize_text_field(wp_unslash($_POST["um_action"])) : '';
if ($action == 'the_first_thumbup') {
$specs_raters = get_post_meta($id, 'the_first_thumbup', true);
$expire = time() + 99999999;
$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
setcookie('the_first_thumbup_' . $id, $id, $expire, '/', $domain, false);
if (!$specs_raters || !is_numeric($specs_raters)) {
update_post_meta($id, 'the_first_thumbup', 1);
} else {
update_post_meta($id, 'the_first_thumbup', ($specs_raters + 1));
}
echo get_post_meta($id, 'the_first_thumbup', true);
}
die;
}/** -- 点赞 -- start -- */
$('.btn-thumbup').click(function () {
if ($(this).hasClass('done')) {
alert('已赞过');
return false;
} else {
$(this).addClass('done');
let id = $(this).data("id");
let action = $(this).data('action');
var ajax_data = {
action: "the_first_thumbup",
um_id: id,
um_action: action
};
$.post("/wp-admin/admin-ajax.php", ajax_data, function (data) {
$('.count').html(data);
});
return false;
}
});
/** -- 点赞 -- end -- */打赏功能就是把在后台设置的打赏图片弹框显示。相关代码如下：
/** -- 打赏 -- start -- */
$('.btn-reward').click(function () {
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: ['auto'],
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: $('#reward-div')
});
});
/** -- 打赏 -- end -- */这次的文章还真是枯燥啊。事实上是因为我们已经掌握了大多数的 WordPress 主题开发知识，新鲜的东西越来越少了。如果没有之前文章的基础，这次文章的内容起码要分三次才能说完。
人生若只如初见，何事秋风悲画扇。
新鲜感越来越少，能力却越来越强啦！
最新的代码依旧上传在：
https://gitee.com/zhuige_com/course_jiangqie_theme
https://github.com/zhuige-com/course_jiangqie_theme
下周见，朋友们！
暂无评论，抢个沙发...