Skip to content

Instantly share code, notes, and snippets.

@westonruter
Last active Nov 30, 2019
Embed
What would you like to do?
Forked twentytwenty template-parts/pagination.php to support amp-next-page: https://wordpress.org/support/topic/infinite-scroll-feature-in-amp/
<?php
// Add this code to the theme's functions.php.
add_action(
'wp_head',
static function () {
if ( mytheme_is_amp() ) {
echo '<meta name="amp-experiments-opt-in" content="amp-next-page">';
}
},
1
);
function mytheme_is_amp() {
return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
}
<?php
/**
* A template partial to output pagination for the Twenty Twenty default theme.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since 1.0.0
*/
/**
* Translators:
* This text contains HTML to allow the text to be shorter on small screens.
* The text inside the span with the class nav-short will be hidden on small screens.
*/
$prev_text = sprintf(
'%s <span class="nav-prev-text">%s</span>',
'<span aria-hidden="true">&larr;</span>',
__( 'Newer <span class="nav-short">Posts</span>', 'twentytwenty' )
);
$next_text = sprintf(
'<span class="nav-next-text">%s</span> %s',
__( 'Older <span class="nav-short">Posts</span>', 'twentytwenty' ),
'<span aria-hidden="true">&rarr;</span>'
);
$posts_pagination = get_the_posts_pagination(
array(
'mid_size' => 1,
'prev_text' => $prev_text,
'next_text' => $next_text,
)
);
// If we're not outputting the previous page link, prepend a placeholder with visibility: hidden to take its place.
if ( strpos( $posts_pagination, 'prev page-numbers' ) === false ) {
$posts_pagination = str_replace( '<div class="nav-links">', '<div class="nav-links"><span class="prev page-numbers placeholder" aria-hidden="true">' . $prev_text . '</span>', $posts_pagination );
}
// If we're not outputting the next page link, append a placeholder with visibility: hidden to take its place.
if ( strpos( $posts_pagination, 'next page-numbers' ) === false ) {
$posts_pagination = str_replace( '</div>', '<span class="next page-numbers placeholder" aria-hidden="true">' . $next_text . '</span></div>', $posts_pagination );
}
if ( $posts_pagination ) { ?>
<?php if ( mytheme_is_amp() && ! is_paged() ) : ?>
<?php
// @todo This is not the ideal way to obtain the subsequent pages, but WordPress doesn't provide such a way.
// @todo The page titles aren't ideal.
$pages = array_filter( array_map(
static function( $link ) {
if ( preg_match( '#<a.+?href="(.+?)">(.+?)</a>#s', $link, $matches ) ) {
$amp_url = html_entity_decode( $matches[1] );
$title = html_entity_decode( $matches[2] );
return [
'title' => $title,
'ampUrl' => $amp_url,
'image' => get_site_icon_url(),
];
}
return null;
},
paginate_links( [ 'type' => 'array' ] )
) );
$amp_next_page = [
'pages' => array_values( $pages ),
'hideSelectors' => [
'#site-header',
'.header-footer-group',
'#site-footer',
'#wpadminbar',
],
];
?>
<amp-next-page>
<script type="application/json"><?php echo wp_json_encode( $amp_next_page ); ?></script>
</amp-next-page>
<?php else : ?>
<div class="pagination-wrapper section-inner">
<hr class="styled-separator pagination-separator is-style-wide" aria-hidden="true" />
<?php echo $posts_pagination; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already escaped during generation. ?>
</div><!-- .pagination-wrapper -->
<?php
endif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment