WordPress文章标题链接怎么添加正在加载中提示

在WordPress中，当用户点击文章标题链接时，我们可能会希望显示一个“正在加载中”的提示，以改善用户体验，这种效果可以通过几种方法实现，这里我们将介绍一种使用jQuery和Ajax的方法来实现这个功能，下面是详细的步骤：

准备工作

1、确保您的WordPress主题已经包含了jQuery库，因为接下来我们将使用jQuery来处理点击事件和Ajax请求。

2、创建一个名为loader.gif的GIF图片作为加载动画，上传到您的网站目录中（例如上传到主题的/images文件夹）。

步骤一：添加加载动画

我们需要在每个文章标题链接旁边添加一个隐藏的加载动画，打开您主题中的single.php文件（或相应展示文章的主模板文件），在文章标题链接的HTML代码附近添加以下代码：

<span class="loader" style="display:none;">
    <img src="<?php echo get_template_directory_uri(); ?>/images/loader.gif" alt="Loading...">
</span>

此代码将创建一个包含加载图像的span元素。style="display:none;"确保默认情况下它是隐藏的。

步骤二：添加JavaScript代码

接下来，我们需要添加一些JavaScript代码来处理点击事件和显示加载动画，在functions.php文件中，您可以添加一个新的函数来输出所需的脚本，或者直接在适当的位置插入以下代码：

// 等待文档完全加载
jQuery(document).ready(function($) {
    // 选择所有的文章标题链接
    $('.entrytitle a').on('click', function(event) {
        event.preventDefault(); // 阻止默认行为
        var link = $(this).attr('href'); // 获取链接地址
        // 显示加载动画
        $(this).next('.loader').show();
        // 发起Ajax请求
        $.ajax({
            type: 'GET',
            url: link,
            success: function(data) {
                // 在成功后，重新定位页面内容
                window.location.href = link;
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 在错误发生时，隐藏加载动画并重定向到首页
                $('.loader').hide();
                window.location.href = home_url();
            }
        });
    });
});

这段代码监听所有文章标题链接的点击事件，当用户点击链接时，它会阻止链接的默认跳转行为，并显示与该链接关联的隐藏加载动画，然后它通过Ajax请求链接地址的内容，如果请求成功，它将导航到链接的地址；如果请求失败，它将隐藏加载动画并导航到网站的首页。

步骤三：测试功能

保存更改后，访问您的网站并点击文章标题链接进行测试，在每次点击后，您应该能看到加载动画出现，并在新页面加载完成后消失。

注意事项

确保您的Ajax请求符合服务器的安全策略，比如CORS（跨源资源共享）设置。

如果网站启用了缓存插件，可能需要对Ajax请求进行特殊处理，以避免缓存干扰。

上述代码仅作为一个基础示例，您可能需要根据实际需求进行调整和优化。

以上就是在WordPress中为文章标题链接添加“正在加载中”提示的详细步骤，希望这能帮助您改善网站用户的体验！