WordPress中PHP标题如何传给JS？

本文介绍如何在WordPress主题开发中，将PHP获取的文章标题高效地传递给JavaScript。通过`get_the_title()`函数获取文章标题后，利用`wp_localize_script()`函数将数据传递到自定义的JavaScript文件中。 该方法结合`WP_Query`获取所有文章标题，并使用`wp_enqueue_script()`加载JS文件，最终在JS中通过`myAjax.titles`访问这些标题，实现前后端数据交互。 此方法不仅适用于文章标题，也适用于其他PHP变量，方便灵活地进行前后端数据交互。

WordPress中PHP获取的文章标题如何传递给JavaScript？

在WordPress主题开发中，经常需要将后端PHP获取的数据传递到前端JavaScript中使用，例如将文章标题作为参数发送到外部API。本文介绍如何高效地将WordPress文章标题从PHP传递到JavaScript。

WordPress提供了get_the_title()函数获取文章标题，前端通常使用$.ajax()或fetch()进行数据请求。为了实现PHP到JavaScript的数据传递，我们可以利用wp_localize_script()函数。

以下代码演示了如何实现：

$titles = [];
$args = [
    'post_type' => 'post',
    'posts_per_page' => -1, // 获取所有文章
];
$query = new WP_Query($args);
if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        $titles[] = get_the_title();
    }
    wp_reset_postdata();
}

// 将标题数组传递给JavaScript
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', ['jquery'], '1.0', true);
wp_localize_script('my-script', 'myAjax', ['titles' => $titles]);

这段代码首先使用WP_Query获取所有文章标题，然后使用wp_enqueue_script()加载自定义JavaScript文件my-script.js，并通过wp_localize_script()函数将$titles数组以myAjax.titles的形式传递给JavaScript。

在my-script.js文件中，您可以通过myAjax.titles访问这些文章标题：

jQuery(document).ready(function($) {
    console.log(myAjax.titles); // 输出文章标题数组
    // 使用myAjax.titles发送请求等操作
});

这种方法不仅限于传递文章标题，还可以传递其他任何PHP变量到JavaScript，方便灵活地进行前后端数据交互。 记住将/js/my-script.js替换成你实际的JavaScript文件路径。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《WordPress中PHP标题如何传给JS？》文章吧，也可关注golang学习网公众号了解相关技术文章。