子比美化功能 – 悬浮文章推荐榜单

子比主题中轻松实现美观的悬浮文章推荐榜单,点击榜单即可展开显示推荐文章,再次点击会折叠,让你的网站内容展示更加个性化和高效,提升网站用户粘性与阅读体验,是站长和内容创作者不可错过的美化技巧。

效果预览

本站所发布的小工具&代码均在子比主题上进行测试使用,其他主题未做测试,理应 WordPress 主题都可使用。自行测试!

子比美化功能 – 悬浮文章推荐榜单-狐狸资源网

简介

  1. 首页按钮只在首页以外页面才显示(既首页不显示该按钮)
  2. 可自定义选择显示文章数量、文章分类、排序方式。

代码部署

主题目录下新建文件,以 zbfox_float_ranking.php 为例,添加如下代码。

  • 'posts_per_page' => '6', 修改数字为需要显示的文章数量。
  • 'orderby' => 'date', 为排序方式,具体修改自行百度,不再叙述。
  • 'cat' => '1', 修改数字为需要显示的文章分类,如有多个分类用英文逗号隔开。
<?php
function display_sidebar_posts($query) {
    if ($query->have_posts()) {
        echo '<div data-v-3b17862b="" class="rank-box">';
        while ($query->have_posts()) {/*URL:www.foxccs.com QQ:706307600*/
            $query->the_post();
            echo '<ul data-v-3b17862b="">';
            echo '<a class="class-items js-ranks" href="' . get_permalink() . '" target="_blank" data-type="2" data-tab="推荐榜" data-title="" data-cid="643" data-level="排行榜" data-position="1">';
            echo zib_post_thumbnail($img_src, 'class-picture');
            echo '<div class="class-information">';
            echo '<div class="name-title">' . get_the_title() . '</div>';
            echo '<span class="badg b-blue badg-sm">浏览 [' . get_post_meta(get_the_ID(), 'views', true) . ']</span>';
            echo '<span class="badg b-theme badg-sm" style="margin-left: 5px;">评论 ['.get_post_comment_count($user_id).'</span>';
            echo '</div>';
            echo '</a></ul>';
        }
        echo '</div>';
    } else {
        echo zib_get_null('暂无文章', 40, 'null.svg', 'home-rank');
    }
    wp_reset_postdata();
}

function get_activity_rank($time_range) {

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $zbfox_sidebar_post_sz['assort'],
        'orderby' => 'date',
        'order' => 'DESC',
        'cat' => $zbfox_sidebar_post_sz['number'],
        'date_query' => array(
            array(
                'after' => $time_range
            )
        )
    );

    $query = new WP_Query($args);
    display_sidebar_posts($query);
}

?>


<div data-v-3b17862b="" class="fix-left">
    <div id="macgf_cb_ht" data-v-3b17862b="" class="fix-item" style="display: block;">
        <div data-v-3b17862b="" class="item-title">
            <img data-v-3b17862b="" src="<?php echo get_theme_file_uri(); ?>/img/huo.webp" >
            <span data-v-3b17862b="">首页</span>
        </div>
    </div>
    <div id="macgf_cb_bd" data-v-3b17862b="" class="fix-item">
        <div data-v-3b17862b="" class="item-title">
            <img data-v-3b17862b="" src="<?php echo get_theme_file_uri(); ?>/img/rank.png" >
            <span id="macgf_bd_wz" data-v-3b17862b="">榜单</span>
        </div>
        <div data-v-3b17862b="" class="rank-box">
            <?php get_activity_rank('365 days ago'); ?>
        </div>
    </div>
</div>

图标就自行替换自己喜欢的吧,不重要!

调用

下列代码中 get_theme_file_path 为你的主题路径,即是:/wp-content/themes/zibll

将文件 /zbfox_float_ranking.php 修改为你的实际PHP文件目录。

在你需要展示的地方添加如下代码,如 functions.php 、footer.phpheader.php 都是可以的。

require_once get_theme_file_path('/zbfox_float_ranking.php');

例如:我存放在子比主题/themes/zibll/pages/zbfox_float_ranking.php 目录下,那么代码应该修改为:

require_once get_theme_file_path('/pages/zbfox_float_ranking.php');

这样应该好理解了吧?

CSS代码自行选择部署位置,也可放置在子比主题的自定义CSS代码中

zibll主题设置->全局功能->自定义代码->自定义CSS样式,或在PHP代码中内置或外联,灵活运用。

JS代码自行选择部署位置,也可放置在子比主题的自定义JS代码中

zibll主题设置->全局功能->自定义代码->自定义javascript代码,或在PHP代码中内置或外联,灵活运用。

温馨提示:本文最后更新于2024-07-20 04:51:44,若文章内容或图片失效,请留言反馈!
如果觉得本文有用就按Ctrl+D收藏,方便以后随时翻看,免得想看时又找不着 或 发现更多
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
子比美化功能 – 悬浮文章推荐榜单-狐狸资源网
子比美化功能 – 悬浮文章推荐榜单
此内容为付费阅读,请付费后查看
5
立即购买
您当前未登录!建议登陆后购买,可保存购买订单
网络搜集
虚拟资源
自动发货
永久使用
付费阅读
© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容