009-wordpress改写文章或页面代码实现Javascript动态加载并渲染防止爬虫

2024-07-28 16:05 已关闭评论

将WordPress文章的主要内容（通常是通过the_content()函数输出）转换为使用JavaScript动态加载的形式，需要wordpress代码做如下调整：

创建一个空的<div>用于存放动态加载的内容:
- 在WordPress文章模板中，将原本使用the_content()的地方替换为一个空的<div>。
编写JavaScript代码:
- 使用JavaScript（通常会涉及到AJAX技术），从服务器获取文章的内容，并将其填充到上述<div>中。

步骤1: 替换`the_content()`为一个空的`<div>`

在你的WordPress文章模板文件（通常是single.php）中，找到the_content()函数的位置，将其替换为一个空的<div>，并给它一个ID或类名，以便之后的JavaScript代码能够找到它。

// single.php
<div id="post-content" class="single-content"></div>

步骤2: 编写JavaScript代码

接下来，需要编写JavaScript代码来使用AJAX从服务器端获取文章内容。这可以通过在WordPress的主题文件中加入一个.js文件或者直接在文章模板中加入内联JavaScript来完成。

假设你选择使用一个外部的.js文件，你可以将其放置在主题目录下的某个位置，并在single.php文件中引入。

// single.php
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/dz-content-ajax.js"></script>

在dz-content-ajax.js文件中，编写以下JavaScript代码来获取文章内容：

document.addEventListener('DOMContentLoaded', function() {
    // 获取文章ID
    const postId = getPostId();

    // AJAX请求获取文章内容
    fetch(`/wp-json/wp/v2/posts/${postId}`)
        .then(response => response.json())
        .then(postData => {
            // 提取文章内容
            const content = postData.content.rendered;

            // 找到存放内容的div
            const postContentDiv = document.getElementById('post-content');

            // 渲染内容
            postContentDiv.innerHTML = content;

            // 处理其他需要的初始化操作，例如插件或样式
            initializePlugins();
        })
        .catch(error => console.error('Error fetching post content:', error));
});

function getPostId() {
    url =window.location.pathname
    // 通过正则表达式匹配文章ID
    const regex = /\/wordpress\/(\d+)\.html$/;
    // 使用match方法获取匹配结果
    const match = url.match(regex);
    // 如果匹配成功，返回文章ID，否则返回null
    return match ? match[1] : null;
}

function initializePlugins() {
    // 初始化任何需要的插件，例如图库、视频播放器等
}

注意事项:

WordPress REST API: 实例使用了WordPress的REST API来获取文章内容。确保你的WordPress版本支持REST API（从4.7版本开始默认支持）。
安全性: 当从服务器获取数据时，确保正确处理响应数据，避免跨站脚本攻击(XSS)。
SEO: 动态加载的内容可能会影响SEO，因为搜索引擎可能无法抓取这些动态加载的内容。考虑使用服务器端渲染或预渲染技术来改善SEO。

当前文章价值3.89元，扫一扫支付后添加微信提供帮助！（如不能解决您的问题，可以申请退款）