臻享优惠价：每满999元再减99元（追格小程序模块、小程序、主题） → 查看优惠

WordPress主题开发教程 17_详情页

江河/ 07月22日/ WordPress/ 浏览 242

大家好啊！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


下周见，朋友们！



WordPress主题开发教程 详情页

发表评论

暂无评论，抢个沙发...

客服 工单