WordPress中使用Timber：不同浏览器文章显示异常问题求助

以下是针对该问题的排查思路，结合你提供的代码逐一分析：

1. 确认后端查询是否真的获取到最新文章 #

首先排除后端查询逻辑问题，而非前端渲染故障：

• 在控制器的查询方法（比如archiveAction或loadMorePostsAjax）中添加调试代码，输出查询结果：

  $posts_query = new Timber\PostQuery(array('posts_per_page' => 9, 'orderby' => 'date', 'order' => 'DESC'));
  var_dump($posts_query->posts); // 查看返回结果是否包含最新文章
  die;
  

• 显式指定排序参数：你的代码中PostQuery未声明orderby和order，虽然默认是按日期降序，但可能被插件/主题修改。在所有PostQuery实例中补充：

  array(
      'posts_per_page' => 9,
      'orderby' => 'date',
      'order' => 'DESC'
  )
  

2. 解决AJAX请求的浏览器缓存差异 #

Firefox/Safari默认会缓存GET类型的AJAX响应，而Chrome的缓存策略更宽松：

• 前端发起AJAX请求时，在URL后追加随机参数（如时间戳）避免缓存：

  // 示例：添加时间戳
  fetch(`/ajax/load-more?offset=${offset}&t=${Date.now()}`)
  

• 后端AJAX方法中添加禁止缓存的响应头：

  public function loadMorePostsAjax($offset){
      // 禁止浏览器缓存
      header("Cache-Control: no-cache, no-store, must-revalidate");
      header("Pragma: no-cache");
      header("Expires: 0");
      
      // 原有逻辑...
  }
  

3. 修复offset参数的类型问题 #

loadMorePostsAjax方法中的$offset是字符串类型，而WP_Query的offset要求整数，可能导致查询异常：

public function loadMorePostsAjax($offset){
    // 强制转换为整数
    $offset = (int) $offset;
    
    $args = array(
        'offset' => $offset,
        'posts_per_page' => 9
    );
    
    // 原有逻辑...
}

4. 检查浏览器端的错误和响应 #

在Firefox/Safari中打开开发者工具（F12）：

• 控制台标签：查看是否有JS语法错误、DOM操作错误，导致文章无法渲染。
• 网络标签：查看AJAX请求的状态码（是否为200），以及响应内容是否包含最新文章的HTML。

5. 验证Timber模板变量的正确性 #

• 在Twig模板news-list.twig中添加调试输出，确认posts变量的内容：

  {{ dump(posts) }} {# 查看posts的结构和内容 #}
  {% for key, value in posts %}
      {# 原有循环逻辑 #}
  {% endfor %}
  

• 替换日期字段：Timber中推荐使用value.date而非value.post_date，修改为：

  'date': value.date|date('d.m.Y'),
  

6. 排除缓存插件/CDN的干扰 #

• 临时禁用所有缓存插件（页面缓存、对象缓存），测试不同浏览器的显示效果。
• 若使用CDN，暂停CDN缓存，确认是否是CDN返回了旧的缓存内容。

你提供的代码参考（已优化关键部分） #

news-list.twig

{% import '_macros/global.twig' as global %}

{% for key, value in posts %}
    <div data-kira-timeline>
        {{ global.actu({
        'cta': options.read_more,
        'title': value.title,
        'link': value.link,
        'date': value.date|date('d.m.Y'),
        'content': value.content|truncate(10, true, '??')
        }) }}
    </div>
{% endfor %}
{% if limit | length < 1 %}
    <div>
        <div class="no-more-post"></div>
    </div>
{% endif %}

NewsController.php

<?php
/**
* Class name: NewsController()
*
* A controller class is composed of methods suffixed with "Action", and responsibles for the following tasks:
* - Render the correct Twig/Timber template for the current page
* - Do the business logic associated to the current page
* - Provide the datas to the Twig/Timber templates
*
*/

namespace Controllers;

use \Timber;
use \Timber\PostQuery;
use \TimberPost;

class NewsController extends AppController
{
    public function __construct(){
        parent::__construct();
    }

    public function archiveAction(){
        $this->render('news/archive.twig', array(
            'post' => new TimberPost(),
            'posts' => new Timber\PostQuery(array(
                'posts_per_page' => 9,
                'orderby' => 'date',
                'order' => 'DESC'
            ))
        ));
    }

    public function singleAction(){
        $this->render('news/single.twig', array(
            'post' => new TimberPost()
        ));
    }

    public function categoryAction(){
        $this->render('news/category.twig', array(
            'posts' => new Timber\PostQuery(array(
                'orderby' => 'date',
                'order' => 'DESC'
            )),
            'title' => single_cat_title('', false)
        ));
    }

    public function tagAction(){
        $this->render('news/tag.twig', array(
            'posts' => Timber::get_posts(array(
                'orderby' => 'date',
                'order' => 'DESC'
            )),
            'title' => single_tag_title('', false)
        ));
    }

    public function findAllAjax(){
        header("Cache-Control: no-cache, no-store, must-revalidate");
        header("Pragma: no-cache");
        header("Expires: 0");
        
        $this->ajaxRender('news/render/news-list.twig', array(
                'posts' => new Timber\PostQuery(array(
                'post_type' => 'post',
                'orderby' => 'date',
                'order' => 'DESC'
            ))
        ));
    }

    public function findOneAjax($id){
        $this->ajaxRender('news/render/news-list.twig', array(
                'posts' => new Timber\PostQuery(array(
                'post_type' => 'post',
                'p' => $id
            ))
        ));
    }

    public function findByCategoryAjax($category){
        header("Cache-Control: no-cache, no-store, must-revalidate");
        header("Pragma: no-cache");
        header("Expires: 0");
        
        $this->ajaxRender('news/render/news-list.twig', array(
                'posts' => new Timber\PostQuery(array(
                'post_type' => 'post',
                'category_name' => $category,
                'orderby' => 'date',
                'order' => 'DESC'
            ))
        ));
    }

    public function loadMorePostsAjax($offset){
        header("Cache-Control: no-cache, no-store, must-revalidate");
        header("Pragma: no-cache");
        header("Expires: 0");
        
        $offset = (int) $offset;

        $args = array(
            'offset' => $offset,
            'posts_per_page' => 9,
            'orderby' => 'date',
            'order' => 'DESC'
        );

        $argsLimit = array(
            'offset' => $offset + 9 + 1,
            'posts_per_page' => 1,
            'orderby' => 'date',
            'order' => 'DESC'
        );

        $this->ajaxRender('news/render/news-list.twig', array(
            'posts' => new Timber\PostQuery($args),
            'limit' => new Timber\PostQuery($argsLimit)
        ));
    }
}

内容的提问来源于stack exchange，提问作者Fvie