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

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

WordPressphp获取的文章标题如何传递给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。

立即学习PHP免费学习笔记(深入)”;

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

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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享