标签: wordpress

  • wordpress 获取某分类下的文章列表

    可以直接使用WP_Query函数进行查询,代码如下:

    <?php
    $query = new WP_Query([
        'post_type' => 'product',
        'posts_per_page' => 999,
        'order' => 'ASC',
        'tax_query' => [
            [
                'taxonomy' => 'product_category',
                'field' => 'term_id',
                'terms' => $sub->term_id,
            ]
        ],
    ]);
    
    if ($query->have_posts()) :
        while ($query->have_posts()) :
            $query->the_post();
    ?>
    
            <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
    
    <?php
        endwhile;
    endif;
    wp_reset_query();
    ?>
    

    除了使用WP_Query方法外,还可以使用`query_posts`函数,如下:

    <?php
    $paged = 1;
    if (get_query_var('page')) {
        $paged = get_query_var('page');
    }
    query_posts(array(
        'post_type'      => 'case',  // post type
        'paged'          => $paged,  // 当前是第几页
        'posts_per_page' => 9        // 每页几条
    ));
    while (have_posts()) :
        the_post();
    ?>
        <a href="<?php the_permalink() ?>"> <?php the_title() ?> </a>
    <?php endwhile; ?>

    查询wordpress自带的默认文章类型(post):

    <?php
    query_posts(array(
        'category_name' => 'news', // 分类slug
        'posts_per_page' => 6, // 查询几条
    ));
    while (have_posts()) :
        the_post();
    ?>
        <a href="<?php the_permalink() ?>"> <?php the_title() ?> </a>
    <?php endwhile; ?>

    该查询默认是按发布时间倒序排序。

  • wordpress 查询多少天内发布的文章

    该功能通过添加一个posts_where过滤器来完成:

    <?php
    function filter_where($where = '') {
        $where .= " AND post_date > '" . date('Y-m-d', strtotime('-60 days')) . "'";
        return $where;
    }
    add_filter('posts_where', 'filter_where');
    query_posts($query_string);
    ?>
    

    默认是60天内的文章,可更根据需要调整。

    将代码添加到主循环的上面。

    项目中的具体代码如下:

    <?php
    // 查询多少天内的文章
    if (isset($_GET['arttime'])) {
        function filter_where($where = '') {
            $arttime = $_GET['arttime'];
            $where .= " AND post_date > '" . date('Y-m-d', strtotime('-' . $arttime . 'days')) . "'";
            return $where;
        }
        add_filter('posts_where', 'filter_where');
    }
    
    $paged = 1;
    if (get_query_var('page')) {
        $paged = get_query_var('page');
    }
    $term = get_queried_object();
    query_posts(array(
        'category_name'     => $term->slug, // 分类slug
        'posts_per_page'    => 10, // 每页几条
        'paged'             => $paged,  // 当前是第几页
    ));
    while (have_posts()) :
        the_post();
    ?>
        <a href="<?php the_permalink() ?>" class="news-item">
            <div class="left-newlist-left">
                <span> <?php single_cat_title() ?> <i></i><?php echo get_the_date('Y-m-d'); ?></span>
                <h1><?php the_title() ?></h1>
    
            </div>
            <div class="right-newlist-img">
                <img src="<?php echo catch_that_image(); ?>" alt="">
            </div>
        </a>
    <?php endwhile; ?>
    

  • 替换WordPress的Gravatar服务

    最近发现博客的 Gravatar 头像显示不出来了,顺手做了个小插件,用于替换 WordPress 的默认头像服务。

    if ( ! function_exists( 'get_mirror_avatar' ) ) {
        function get_mirror_avatar( $avatar ) {
            // 新 Gravatar 头像源,可自行修改
    
            //$new_gravatar_sever = 'gravatar.loli.net/avatar/';
            //$new_gravatar_sever = 'sdn.geekzu.org/avatar/';  
            //$new_gravatar_sever = 'gravatar.zunhuyun.com/avatar/';  
            $new_gravatar_sever = 'gravatar.kuibu.net/avatar/';  
    
            // 如果实在不行,就换cravatar.cn吧 文档:https://cravatar.com/developer/for-wordpress#more-53
    
            $sources = array(
                'www.gravatar.com/avatar/',
                '0.gravatar.com/avatar/',
                '1.gravatar.com/avatar/',
                '2.gravatar.com/avatar/',
                'secure.gravatar.com/avatar/',
                'cn.gravatar.com/avatar/',
                'gravatar.com/avatar/',
            );
            return str_replace( $sources, $new_gravatar_sever, $avatar );
        }
        add_filter( 'get_avatar', 'get_mirror_avatar' );
    }
    
  • WordPress 代码高亮插件

    一直想做这个事情,但又觉得可有可无,就一直拖到现在。这几天事情不多,今天下午突然想起来这事,不如把它实现了。

    在 plugins 目录新建文件夹 MyHighlight ,然后在 MyHighlight 文件夹下新建文件 MyHighlight .php ,代码如下:

    <?php 
    /*
    Plugin Name: MyHighlight 
    Plugin URI: https://lwbj.cn
    Description:代码高亮插件
    Version: 1.1
    Author: wujie
    Author URI: https://wujie.me
    License: GPL
    */
    
    function add_my_plugin_stylesheet() {
        wp_register_style('highlight', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/atom-one-light.min.css');
        wp_enqueue_style('highlight');
    }
    add_action( 'wp_print_styles', 'add_my_plugin_stylesheet' );
    
    function add_my_plugin_script() {
        wp_register_script('highlight','//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js');
        wp_enqueue_script('highlight');
    }
    add_action( 'wp_enqueue_scripts', 'add_my_plugin_script' );
    
    function init_highlighting() { ?>
        <style>
            @import url('https://fonts.googleapis.com/css?family=Fira+Code&display=swap');
            .hljs{ background:transparent; }
            code {
                font-family: 'Fira Code', consolas,'Microsoft YaHei', monospace;
                background: #dcd7ca;
                border-radius: 0.2rem;     
                padding: 0.3rem 0.4rem 0.3rem 0.4rem;
                font-size: 0.8em;
            }
            
            .wp-block-code code, kbd, pre, samp {
                font-family: 'Fira Code', consolas,'Microsoft YaHei', monospace;
                font-size: 0.5em;
                padding: 0.4rem 0.6rem;
                white-space: pre-wrap;
            }     
        </style>
        <script>
            hljs.initHighlightingOnLoad();
        </script>
    <?php
    }
    add_action('wp_head', 'init_highlighting');

    保存后,到后台启用该插件即可看到效果。

    备注:2025.3.1已改为prismjs实现代码高亮。

  • WordPress的最佳固定链接

    WordPress提供了六种固定链接结构,前五种是固定结构,最后一种是可以自定义的结构。既然提供了不同的选择,自然就有不同的适用场景,这两天我一直在思考这个问题。

    第一种类型,朴素型,https://example.com/?p=123,这种类型以前是WordPress的默认类型。这种结构的固定链接,没有任何语义性,人类和搜索引擎都无法理解链接中包含的信息,所以不建议使用。

    第二种类型,日期和名称型,链接结构如下https://example.com/2019/12/28/sample-post/,这种类型强调日期。一天发布多篇文章的网站可以使用这种,比如新闻性质的网站或企业博客等,可以通过日期来判断文章的时效性。WordPress目前默认的固定链接就是这种类型。使用这种链接类型的企业博客网站之一微软官方博客(用的是WordPress),因为一天可能发布多篇文章,所以使用了这种类型。

    第三种类型, 月份和名称型 ,https://example.com/2019/12/sample-post/,这种类型的固定链接和第二种差不多,强调月份,用于发布不是特别频繁并且需要明确大体日期的站点,例如个人博客、技术网站等。WordPress创始人Matt Mullenweg的博客就是使用的这种类型。

    第四种是数字型,即https://example.com/archives/123,这种类型如同第一种,不过把URL参数变成了目录结构的形式。由于链接没有任何语义,不推荐这种。

    第五种是文章名型,即https://example.com/sample-post/,链接只有postname一种元素,这种类型不强调时间,不强调时效性,只注重文章的关键信息。而且修改文章的发布时间、目录等属性不影响固定链接的构成,同时由于只有一个层级,对搜索引擎的权重相对高,方便提取关键信息,对于人类也很容易读懂。注重SEO和营销类型的网站可以使用这种

    第六种,自定义类型,通过使用不同的标记来自定义链接的结构。

    总体来说,对于个人博客,比较适合的类型是第五种和第三种。个人博客,适合使用年月进行归档,就像按年份和月份建立文件夹一样,把某年某月的文章整理到一起。在做外链或者做记录的时候,看到链接就能知道文章的发布年月和标题,做到心中有数,虽然有时候并不希望这样。 第五种也不错,简单纯粹,除了post-name,再无其它干扰,并且URL更短,层级最小,更利于搜索引擎抓取,修改文章的一些属性不会影响固定链接。

    最后一点,固定链接一旦确定下来,就不要换来换去。一但更改,对于站内链接和站外链接的修复都很麻烦,如果注重SEO的话,对于SEO也是灾难。当然这些问题都有应对的办法,不过为了不折腾,选择了就坚持下去,只管写文章,再不用考虑这个问题。

  • 修改wordpress twentytwenty主题的中文显示效果

    今天没什么事,把博客主题的文字显示效果做了修改。之前默认的字体和行距是为英文优化的,显示英文很完美,但是显示中文就不怎么好看,字体粗行距小,看起来糊成了一片。

    修改样式有三种方式,一种是直接修改主题的样式文件style.css,但这种方式有缺点,在主题更新后,自己所做的修改就被覆盖了,每次更新都要改一次,麻烦了点。好处是在后台编辑器里面也能实现和前台看到的相同的文字效果。

    第二种方式是使用“自定义—额外CSS”功能,把自定义样式写进额外CSS里就能实现想要的效果了,而且更新主题无影响。缺点是后台编辑器还是默认字体,无法实现和前台一致的效果。不过这也无所谓,后台只有自己在看,前台阅读体验好就行了。

    还有另外一种方式是使用子主题功能,既能做到更新无影响又能实现前后台文字显示效果一致,但我感觉,这个还是有点过于麻烦了,不想折腾,就没有尝试。