在无限滚动的WordPress帖子中包含脚本 _网站开发

我们当前正在使用Ajax无限滚动来撰写博客文章。但是我们希望在每个博客文章中都包含脚本(javascript)。一切工作正常, 除了脚本仅在博客文章的顶部显示一次。
这是针对Ajax无限滚动标准修改的singles.php循环的代码段：

< ?php while ( have_posts() ) : the_post(); ?> < ?php if (et_get_option('divi_integration_single_top') < > '' & & et_get_option('divi_integrate_singletop_enable') == 'on') echo(et_get_option('divi_integration_single_top')); ?> < ?phpecho do_shortcode('[ajax_load_more cache="true" cache_id="2869844236" cta="true" cta_position="after:1" css_classes="call-to-actions call-to-actions-js" images_loaded="true" post_type="post" repeater="default" previous_post="true" previous_post_id="'. get_the_ID() .'" posts_per_page="1" button_label="Previous Post"]'); ?> < ?php endwhile; ?>

这是中继器模板的代码段, 其中包括一个简单的脚本代码。

< article id="post-< ?php the_ID(); ?> " < ?php post_class( 'et_pb_post' ); ?> > < script> document.write("This text is displayed using a simple javascript."); < /script> < div class="et_post_meta_wrapper"> < h1> < ?php the_title(); ?> < /h1> < ?php the_post_thumbnail('hero', array('alt' => get_the_title())); ?> < /div> < div class="entry-content"> < ?phpdo_action( 'et_before_content' ); the_content(); wp_link_pages( array( 'before' => '< div class="page-links"> ' . esc_html__( 'Pages:', 'Divi' ), 'after' => '< /div> ' ) ); ?> < /div> < /article>

不知道为什么脚本只显示一次。当我将其放置在每个博客文章标题的顶部时。
#1当你的ajax请求转发器模板时, document.write()将间接调用document.open()以打开新的输出流。下次滚动时, write()方法将不起作用, 因为当前打开了先前的输出流。你应该关闭流。
你可以这样尝试：

document.open(); document.write("This text is displayed using a simple javascript."); document.close();

document.write()对生产而言是一种不良做法。你只能将其用于测试。
更好的解决方案：

< p id="output"> < /p> < script> document.getElementById("output").innerHTML = "This text is displayed using a simple javascript."; < /script>

编辑：
为了在ajax请求完成后每次显示文本, 我们将需要一个唯一的ID将文本附加到元素上。
在我上面的建议中
id必须唯一, 才能重复JavaScript中的文本。
解：
我们将使用WordPress来提供一些帮助。 WordPress对你创建的所有帖子都有唯一的ID。
the_ID(); WordPress While循环内的方法返回帖子ID。因此, 将相同的id附加到我们的P元素中, 并通过使用其新的id获取该元素来附加我们的文本。

< p id="output-< ?php the_ID(); ?> "> < /p> < script> var idname = document.getElementById("output-< ?php the_ID(); ?> "); idname.innerHTML = "This text is displayed using a simple javascript."; < /script>

【在无限滚动的WordPress帖子中包含脚本】这会将文本附加在每个帖子中。