Artisan Web tutorialJavascript: In-line activate on click of "More" link.
在我的例子中，由于使用了多个帖子块来显示，脚本必须知道单击了哪个链接。因此，我需要为post块设置一个命名区域，并相应地命名链接。此外，对于单击了“更多”的特定块，只增加下一页很重要。因此，我们在链接中设置了一个“数据页”属性，从第2页的默认值2开始。然后我们提取这个值并将其用作“页面”。然后我们增加这个，下次只增加这个。
WordPress function in functions.php
通过wp\\u ajax\\u load\\u posts\\u by\\u ajax和wp\\u ajax\\u nopriv\\u load\\u posts\\u by\\u ajax操作激发，它实际上复制了与我的模板文件中相同的wp查询设置，但巧妙地将单击链接的名称引入，以对应tax\\u查询数组中所需的分类术语值。Javascript: New results sent back to front-end
新帖子将附加到posts块。然后页面会增加。增强欢迎使用代码或此说明。
主题模板片段：
<?php
$organisation = get_query_var(\'organisation\');
$org_id_prefixed = get_query_var(\'org_id_prefixed\');
?>
<?php
/* ************************************************************************************************************** */
/* */
/* LIST POSTS BY FORMAT TERM, WITH DYNAMIC AJAX MORE-POST LOADING */
/* */
/* Outline: */
/* This will output posts in blocks for each "Format" taxonomy term. */
/* But we also want to use this loop to output posts *without* a "Format" taxonomy term. */
/* >> Method via Sajid @ Artisans Web, https://artisansweb.net/load-wordpress-post-ajax/ */
/* */
/* Dynamic: */
/* 1. Javascript: When "More" link is clicked */
/* 2. Send current "organisation", clicked "format" and "page" as variables to function */
/* 3. PHP: Do WP query for next page of posts, return to javascript */
/* 4. Javascript: Append results to the clicked container */
/* */
/* Dynamic method: */
/* $format used as ID for i) .row .my-posts container and ii) .loadmore link, so that we know: */
/* a) Which "Load more" link was clicked */
/* b) Which box to return new output to */
/* c) Employs data-page attribute in link - picks up this and increments page only for this */
/* >> Help via Antti Koskinen @ StackOverflow, https://wordpress.stackexchange.com/a/328760/39300 */
/* */
/* ************************************************************************************************************** */
// Specify which "Format" terms we want to display post blocks for
// ("reporting" here is a wildcard, used to accommodate posts without a "Format" term set)
$formats = array("interview","executive","analyst","oped","reporting","ma","earnings","financialanalysis","ipo","marketindicators","industrymoves");
// For each of them,
foreach ($formats as $format) {
// 1. Get actual term of the slug above
$format_term = get_term_by(\'slug\', $format, "format");
// 2. Formulate the secondary tax_query for "format" with some conditionality
/* *********************************** */
/* Posts by Format? */
/* *********************************** */
if ($format!="reporting") {
$posts_per_page = 8;
$tax_q_format_array = array(
\'taxonomy\' => \'format\', // from above, whatever this taxonomy is, eg. \'source\'
\'field\' => \'slug\',
\'terms\' => $format_term->slug,
\'include_children\' => false
);
// Oh, and set a title for output below
$section_title = $format_term->name;
/* *********************************** */
/* Posts without Format? */
/* *********************************** */
} elseif ($format=="reporting") {
$posts_per_page = 8;
$tax_q_format_array = array(
\'taxonomy\' => \'format\', // from above, whatever this taxonomy is, eg. \'source\'
\'operator\' => \'NOT EXISTS\', // or \'EXISTS\'
);
// Oh, and set a title for output below
$section_title = \'Reporting\';
}
// 3. Set query arguments
$paged = ( get_query_var( \'paged\' ) ) ? get_query_var( \'paged\' ) : 1;
$args = array(
// pagination
// \'nopaging\' => false,
\'posts_per_page\' => $posts_per_page,
// \'offset\' => \'4\',
\'paged\' => $paged,
// posts
\'post_type\' => array( \'article\', \'viewpoint\' ),
// order
\'orderby\' => \'date\',
\'order\' => \'DESC\',
// taxonomy
\'tax_query\' => array(
// #1 Organisation: the current one
array(
\'taxonomy\' => \'company\', // from above, whatever this taxonomy is, eg. \'source\'
\'field\' => \'slug\',
\'terms\' => $organisation->slug,
\'include_children\' => false
),
// #2 Format: as above
$tax_q_format_array
),
);
// 4. Query for posts
$posts_org = new WP_Query($args);
// 5. Output
if ( $posts_org->have_posts() ) { ?>
<h5 class="mt-0 pt-4 pb-3 text-secondary"><?php echo $section_title; ?> <span class="badge badge-secondary badge-pill"><?php echo $posts_org->found_posts; ?></span></h5>
<div class="row pb-0 my-posts" id="<?php echo $format; ?>">
<?php
while( $posts_org->have_posts() ) {
$posts_org->the_post();
get_template_part(\'partials/loops/col\', \'vertical\');
}
?>
</div>
<?php
// wp_reset_postdata(); // reset the query
// "More" posts link
if ($posts_org->found_posts > $posts_per_page) {
echo \'<p class="text-secondary pb-0" style="opacity: 0.6"><a href="javascript:;" class="loadmore" id="\'.$format.\'"><i class="fas fa-plus-circle"></i> <span class="moretext" data-page="2">More</span></a></p>\';
}
} else {
// echo \'<div class="col"><p>\'.__(\'Sorry, no posts matched your criteria.\').\'</p></div>\';
} // end if have_posts
}
?>
<script type="text/javascript">
// Set starting values which to send from Javascript to WP query function...
var ajaxurl = "<?php echo admin_url( \'admin-ajax.php\' ); ?>";
var page = 2; // Infer page #2 to start, then increment at end
var org_slug = "<?php echo $organisation->slug; ?>"; // Slug of this "organisation" term
jQuery(function($) {
// When this selector is clicked
$(\'body\').on(\'click\', \'.loadmore\', function() {
// Get ID of clicked link (corresponds to original $format value, eg. "executive"/"reporting")
var clicked_format = $(this).attr(\'id\');
// Temporarily change clicked-link text to provide feedback
$(\'a#\'+clicked_format+\' i\').attr(\'class\', \'fas fa-cog fa-spin\'); // Icon
$(\'a#\'+clicked_format+\' .moretext\').text(\'Loading...\'); // Text
// Pick up data-page attribute from the clicked link (defaults to 2 at load)
var clicked_page = $(\'a#\'+clicked_format).find(\'span\').data().page;
// console.log(clicked_page);
// 1. Send this package of variables to WP query function
var data = {
\'action\': \'load_posts_by_ajax\',
\'page\': clicked_page,
\'org_slug\': org_slug,
\'clicked_format\': clicked_format,
\'security\': \'<?php echo wp_create_nonce("load_more_posts"); ?>\'
};
// 2. Send to query function and get results
$.post(ajaxurl, data, function(response) {
// Append the returned output to this selector
$(response).appendTo(\'div#\'+clicked_format).hide().fadeIn(2000); // was: $(\'div#\'+clicked_format).append(response).fadeIn(4000); Reverse method, cf. https://stackoverflow.com/a/6534160/1375163
// Change link text back to original
$(\'a#\'+clicked_format+\' i\').attr(\'class\', \'fas fa-plus-circle\'); // Icon
$(\'a#\'+clicked_format+\' .moretext\').text(\'More\'); // Text
// Increment "data-page" attribute of clicked link for next click
// page++;
$(\'a#\'+clicked_format).find(\'span\').data().page++
});
});
});
</script>
函数中的函数。php： // Called from org_deck2_many.php
add_action(\'wp_ajax_load_posts_by_ajax\', \'load_posts_by_ajax_callback\');
add_action(\'wp_ajax_nopriv_load_posts_by_ajax\', \'load_posts_by_ajax_callback\');
function load_posts_by_ajax_callback() {
check_ajax_referer(\'load_more_posts\', \'security\');
// 1. Query values are passed from referring page, to Javascript and to this query...
$paged = $_POST[\'page\']; // Passed from page: Which page we are on
$org_slug = $_POST[\'org_slug\']; // Passed from page: Organisation taxonomy term slug
$clicked_format = $_POST[\'clicked_format\']; // ID of the clicked "More" link (corresponds to original $format value, eg. "executive"/"reporting")
// 2. Formulate the secondary tax_query for "format" with some conditionality
/* *********************************** */
/* Posts by Format? */
/* *********************************** */
if ($clicked_format!="reporting") {
$tax_q_format_array = array(
\'taxonomy\' => \'format\', // from above, whatever this taxonomy is, eg. \'source\'
\'field\' => \'slug\',
\'terms\' => $clicked_format,
\'include_children\' => false
);
// $offset = NULL;
/* *********************************** */
/* Posts without Format? */
/* *********************************** */
} elseif ($clicked_format=="reporting") {
$tax_q_format_array = array(
\'taxonomy\' => \'format\', // from above, whatever this taxonomy is, eg. \'source\'
\'operator\' => \'NOT EXISTS\', // or \'EXISTS\'
);
// $offset = \'12\'; // More articles shown in "Reporting"
}
// 3. Set query arguments
$args = array(
// posts
\'post_type\' => array( \'article\', \'viewpoint\' ),
\'post_status\' => \'publish\',
// \'offset\' => $offset,
// pages
\'posts_per_page\' => \'8\',
\'paged\' => $paged,
// taxonomy
\'tax_query\' => array(
// #1 Organisation: the current one
array(
\'taxonomy\' => \'company\', // from above, whatever this taxonomy is, eg. \'source\'
\'field\' => \'slug\',
\'terms\' => $org_slug,
\'include_children\' => false
),
// #2 Format: as above
$tax_q_format_array
),
);
// 4. Query for posts
$posts_org = new WP_Query( $args );
// 5. Send results to Javascript
if ( $posts_org->have_posts() ) :
?>
<?php while ( $posts_org->have_posts() ) : $posts_org->the_post(); ?>
<?php get_template_part(\'partials/loops/col\', \'vertical\'); ?>
<?php endwhile; ?>
<?php
endif;
wp_die();
}
编辑：如果所有帖子都被拉出来，不允许更多的轮询如果所有帖子/页面都被返回，我们应该如何停止允许更多的链接点击？在PHP中，此代码更新根据每页帖子数除以总帖子数，计算此查询的帖子总页数。
它使用data-page 属性，以指示预期要拉取的下一分页页面。
每次拉取一页结果时，该计数器都会递增。
如果计数器超过了查询的帖子总页数，这意味着我们已经用完了此查询的帖子/页面，没有了，因此我们应该停止。
“停止”是什么意思？这意味着使用jQuery选择器来查找和隐藏整个链接，否则可以单击该链接再次调用帖子。
<?php
$organisation = get_query_var(\'organisation\');
$org_id_prefixed = get_query_var(\'org_id_prefixed\');
?>
<?php
/* ************************************************************************************************************** */
/* */
/* LIST POSTS BY FORMAT TERM, WITH DYNAMIC AJAX MORE-POST LOADING */
/* */
/* Outline: */
/* This will output posts in blocks for each "Format" taxonomy term. */
/* But we also want to use this loop to output posts *without* a "Format" taxonomy term. */
/* >> Method via Sajid @ Artisans Web, https://artisansweb.net/load-wordpress-post-ajax/ */
/* */
/* Dynamic: */
/* 1. Javascript: When "More" link is clicked */
/* 2. Send current "organisation", clicked "format" and "page" as variables to function */
/* 3. PHP: Do WP query for next page of posts, return to javascript */
/* 4. Javascript: Append results to the clicked container */
/* */
/* Dynamic method: */
/* $format used as ID for i) .row .my-posts container and ii) .loadmore link, so that we know: */
/* a) Which "Load more" link was clicked */
/* b) Which box to return new output to */
/* c) Employs data-page attribute in link - picks up this and increments page only for this */
/* >> Help via Antti Koskinen @ StackOverflow, https://wordpress.stackexchange.com/a/328760/39300 */
/* */
/* ************************************************************************************************************** */
// Specify which "Format" terms we want to display post blocks for
// ("reporting" here is a wildcard, used to accommodate posts without a "Format" term set)
$formats = array("interview","executive","analyst","oped","reporting","ma","earnings","financialanalysis","ipo","marketindicators","industrymoves");
// For each of them,
foreach ($formats as $format) {
// 1. Get actual term of the slug above
$format_term = get_term_by(\'slug\', $format, "format");
// 2. Formulate the secondary tax_query for "format" with some conditionality
/* *********************************** */
/* Posts by Format? */
/* *********************************** */
if ($format!="reporting") {
$posts_per_page = 8;
$tax_q_format_array = array(
\'taxonomy\' => \'format\', // from above, whatever this taxonomy is, eg. \'source\'
\'field\' => \'slug\',
\'terms\' => $format_term->slug,
\'include_children\' => false
);
// Oh, and set a title for output below
$section_title = $format_term->name;
/* *********************************** */
/* Posts without Format? */
/* *********************************** */
} elseif ($format=="reporting") {
$posts_per_page = 8;
$tax_q_format_array = array(
\'taxonomy\' => \'format\', // from above, whatever this taxonomy is, eg. \'source\'
\'operator\' => \'NOT EXISTS\', // or \'EXISTS\'
);
// Oh, and set a title for output below
$section_title = \'Reporting\';
}
// 3. Set query arguments
$paged = ( get_query_var( \'paged\' ) ) ? get_query_var( \'paged\' ) : 1;
$args = array(
// pagination
// \'nopaging\' => false,
\'posts_per_page\' => $posts_per_page,
// \'offset\' => \'4\',
\'paged\' => $paged,
// posts
\'post_type\' => array( \'article\', \'viewpoint\' ),
// order
\'orderby\' => \'date\',
\'order\' => \'DESC\',
// taxonomy
\'tax_query\' => array(
// #1 Organisation: the current one
array(
\'taxonomy\' => \'company\', // from above, whatever this taxonomy is, eg. \'source\'
\'field\' => \'slug\',
\'terms\' => $organisation->slug,
\'include_children\' => false
),
// #2 Format: as above
$tax_q_format_array
),
);
// 4. Query for posts
$posts_org = new WP_Query($args);
// 5. Output
if ( $posts_org->have_posts() ) { ?>
<?php
$total_posts = $posts_org->found_posts;
$total_pages = $total_posts / $posts_per_page;
?>
<h5 class="mt-0 pt-4 pb-3 text-secondary"><?php echo $section_title; ?> <span class="badge badge-secondary badge-pill"><?php echo $total_posts; ?></span></h5>
<div class="row pb-0 my-posts" id="<?php echo $format; ?>" data-totalpages="<?php echo $total_pages; ?>">
<?php
while( $posts_org->have_posts() ) {
$posts_org->the_post();
get_template_part(\'partials/loops/col\', \'vertical\');
}
?>
</div>
<?php
// wp_reset_postdata(); // reset the query
// "More" posts link
if ($posts_org->found_posts > $posts_per_page) {
echo \'<p class="text-secondary pb-0" style="opacity: 0.6"><a href="javascript:;" class="loadmore" id="\'.$format.\'"><i class="fas fa-plus-circle"></i> <span class="moretext" data-page="2">More</span></a></p>\';
}
} else {
// echo \'<div class="col"><p>\'.__(\'Sorry, no posts matched your criteria.\').\'</p></div>\';
} // end if have_posts
}
?>
<script type="text/javascript">
// Set starting values which to send from Javascript to WP query function...
var ajaxurl = "<?php echo admin_url( \'admin-ajax.php\' ); ?>";
var page = 2; // Infer page #2 to start, then increment at end
var org_slug = "<?php echo $organisation->slug; ?>"; // Slug of this "organisation" term
jQuery(function($) {
// When this selector is clicked
$(\'body\').on(\'click\', \'.loadmore\', function() {
// Get ID of clicked link (corresponds to original $format value, eg. "executive"/"reporting")
var clicked_format = $(this).attr(\'id\');
// Get total pagination pages for this section
var total_pages_for_section = $(\'div .row #\'+clicked_format).data().totalpages;
// alert(total_pages_for_section);
// Temporarily change clicked-link text to provide feedback
$(\'a#\'+clicked_format+\' i\').attr(\'class\', \'fas fa-cog fa-spin\'); // Icon
$(\'a#\'+clicked_format+\' .moretext\').text(\'Loading...\'); // Text
// Pick up data-page attribute from the clicked link (defaults to 2 at load)
var clicked_page = $(\'a#\'+clicked_format).find(\'span\').data().page;
// console.log(clicked_page);
// 1. Send this package of variables to WP query function
var data = {
\'action\': \'load_posts_by_ajax\',
\'page\': clicked_page, // page of posts to get is the number set in data-page attribute
\'org_slug\': org_slug,
\'clicked_format\': clicked_format,
\'security\': \'<?php echo wp_create_nonce("load_more_posts"); ?>\'
};
// 2. Send to query function and get results
$.post(ajaxurl, data, function(response) {
// Append the returned output to this selector
$(response).appendTo(\'div#\'+clicked_format).hide().fadeIn(2000); // was: $(\'div#\'+clicked_format).append(response).fadeIn(4000); Reverse method, cf. https://stackoverflow.com/a/6534160/1375163
// If we have exhausted all post pages, hide the whole "More" link <p>
if (clicked_page >= total_pages_for_section) {
$(\'p a#\'+clicked_format).hide();
// Otherwise, restore it and increment counter
} else {
// Change link text back to original
$(\'a#\'+clicked_format+\' i\').attr(\'class\', \'fas fa-plus-circle\'); // Icon
$(\'a#\'+clicked_format+\' .moretext\').text(\'More\'); // Text
// Increment "data-page" attribute of clicked link for next click
$(\'a#\'+clicked_format).find(\'span\').data().page++; // was page++;
}
});
});
});
</script>
