diff options
Diffstat (limited to 'srcs/wordpress/wp-content/themes/twentytwenty/template-parts')
10 files changed, 847 insertions, 0 deletions
diff --git a/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/content-cover.php b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/content-cover.php new file mode 100644 index 0000000..f9b480f --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/content-cover.php @@ -0,0 +1,182 @@ +<?php +/** + * Displays the content when the cover template is used. + * + * @package WordPress + * @subpackage Twenty_Twenty + * @since 1.0.0 + */ + +?> + +<article <?php post_class(); ?> id="post-<?php the_ID(); ?>"> + <?php + // On the cover page template, output the cover header. + $cover_header_style = ''; + $cover_header_classes = ''; + + $color_overlay_style = ''; + $color_overlay_classes = ''; + + $image_url = ! post_password_required() ? get_the_post_thumbnail_url( get_the_ID(), 'twentytwenty-fullscreen' ) : ''; + + if ( $image_url ) { + $cover_header_style = ' style="background-image: url( ' . esc_url( $image_url ) . ' );"'; + $cover_header_classes = ' bg-image'; + } + + // Get the color used for the color overlay. + $color_overlay_color = get_theme_mod( 'cover_template_overlay_background_color' ); + if ( $color_overlay_color ) { + $color_overlay_style = ' style="color: ' . esc_attr( $color_overlay_color ) . ';"'; + } else { + $color_overlay_style = ''; + } + + // Get the fixed background attachment option. + if ( get_theme_mod( 'cover_template_fixed_background', true ) ) { + $cover_header_classes .= ' bg-attachment-fixed'; + } + + // Get the opacity of the color overlay. + $color_overlay_opacity = get_theme_mod( 'cover_template_overlay_opacity' ); + $color_overlay_opacity = ( false === $color_overlay_opacity ) ? 80 : $color_overlay_opacity; + $color_overlay_classes .= ' opacity-' . $color_overlay_opacity; + ?> + + <div class="cover-header <?php echo $cover_header_classes; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>"<?php echo $cover_header_style; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- We need to double check this, but for now, we want to pass PHPCS ;) ?>> + <div class="cover-header-inner-wrapper screen-height"> + <div class="cover-header-inner"> + <div class="cover-color-overlay color-accent<?php echo esc_attr( $color_overlay_classes ); ?>"<?php echo $color_overlay_style; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- We need to double check this, but for now, we want to pass PHPCS ;) ?>></div> + + <header class="entry-header has-text-align-center"> + <div class="entry-header-inner section-inner medium"> + + <?php + + /** + * Allow child themes and plugins to filter the display of the categories in the article header. + * + * @since 1.0.0 + * + * @param bool Whether to show the categories in article header, Default true. + */ + $show_categories = apply_filters( 'twentytwenty_show_categories_in_entry_header', true ); + + if ( true === $show_categories && has_category() ) { + ?> + + <div class="entry-categories"> + <span class="screen-reader-text"><?php _e( 'Categories', 'twentytwenty' ); ?></span> + <div class="entry-categories-inner"> + <?php the_category( ' ' ); ?> + </div><!-- .entry-categories-inner --> + </div><!-- .entry-categories --> + + <?php + } + + the_title( '<h1 class="entry-title">', '</h1>' ); + + if ( is_page() ) { + ?> + + <div class="to-the-content-wrapper"> + + <a href="#post-inner" class="to-the-content fill-children-current-color"> + <?php twentytwenty_the_theme_svg( 'arrow-down' ); ?> + <div class="screen-reader-text"><?php _e( 'Scroll Down', 'twentytwenty' ); ?></div> + </a><!-- .to-the-content --> + + </div><!-- .to-the-content-wrapper --> + + <?php + } else { + + $intro_text_width = ''; + + if ( is_singular() ) { + $intro_text_width = ' small'; + } else { + $intro_text_width = ' thin'; + } + + if ( has_excerpt() ) { + ?> + + <div class="intro-text section-inner max-percentage<?php echo esc_attr( $intro_text_width ); ?>"> + <?php the_excerpt(); ?> + </div> + + <?php + } + + twentytwenty_the_post_meta( get_the_ID(), 'single-top' ); + + } + ?> + + </div><!-- .entry-header-inner --> + </header><!-- .entry-header --> + + </div><!-- .cover-header-inner --> + </div><!-- .cover-header-inner-wrapper --> + </div><!-- .cover-header --> + + <div class="post-inner" id="post-inner"> + + <div class="entry-content"> + + <?php + the_content(); + ?> + + </div><!-- .entry-content --> + <?php + wp_link_pages( + array( + 'before' => '<nav class="post-nav-links bg-light-background" aria-label="' . esc_attr__( 'Page', 'twentytwenty' ) . '"><span class="label">' . __( 'Pages:', 'twentytwenty' ) . '</span>', + 'after' => '</nav>', + 'link_before' => '<span class="page-number">', + 'link_after' => '</span>', + ) + ); + + edit_post_link(); + // Single bottom post meta. + twentytwenty_the_post_meta( get_the_ID(), 'single-bottom' ); + + if ( is_single() ) { + + get_template_part( 'template-parts/entry-author-bio' ); + + } + ?> + + </div><!-- .post-inner --> + + <?php + + if ( is_single() ) { + + get_template_part( 'template-parts/navigation' ); + } + + /** + * Output comments wrapper if it's a post, or if comments are open, + * or if there's a comment number – and check for password. + * */ + if ( ( is_single() || is_page() ) && ( comments_open() || get_comments_number() ) && ! post_password_required() ) { + ?> + + <div class="comments-wrapper section-inner"> + + <?php comments_template(); ?> + + </div><!-- .comments-wrapper --> + + <?php + } + ?> + +</article><!-- .post --> diff --git a/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/content.php b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/content.php new file mode 100644 index 0000000..4b745fa --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/content.php @@ -0,0 +1,94 @@ +<?php +/** + * The default template for displaying content + * + * Used for both singular and index. + * + * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ + * + * @package WordPress + * @subpackage Twenty_Twenty + * @since 1.0.0 + */ + +?> + +<article <?php post_class(); ?> id="post-<?php the_ID(); ?>"> + + <?php + + get_template_part( 'template-parts/entry-header' ); + + if ( ! is_search() ) { + get_template_part( 'template-parts/featured-image' ); + } + + ?> + + <div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> "> + + <div class="entry-content"> + + <?php + if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) { + the_excerpt(); + } else { + the_content( __( 'Continue reading', 'twentytwenty' ) ); + } + ?> + + </div><!-- .entry-content --> + + </div><!-- .post-inner --> + + <div class="section-inner"> + <?php + wp_link_pages( + array( + 'before' => '<nav class="post-nav-links bg-light-background" aria-label="' . esc_attr__( 'Page', 'twentytwenty' ) . '"><span class="label">' . __( 'Pages:', 'twentytwenty' ) . '</span>', + 'after' => '</nav>', + 'link_before' => '<span class="page-number">', + 'link_after' => '</span>', + ) + ); + + edit_post_link(); + + // Single bottom post meta. + twentytwenty_the_post_meta( get_the_ID(), 'single-bottom' ); + + if ( is_single() ) { + + get_template_part( 'template-parts/entry-author-bio' ); + + } + ?> + + </div><!-- .section-inner --> + + <?php + + if ( is_single() ) { + + get_template_part( 'template-parts/navigation' ); + + } + + /** + * Output comments wrapper if it's a post, or if comments are open, + * or if there's a comment number – and check for password. + * */ + if ( ( is_single() || is_page() ) && ( comments_open() || get_comments_number() ) && ! post_password_required() ) { + ?> + + <div class="comments-wrapper section-inner"> + + <?php comments_template(); ?> + + </div><!-- .comments-wrapper --> + + <?php + } + ?> + +</article><!-- .post --> diff --git a/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/entry-author-bio.php b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/entry-author-bio.php new file mode 100644 index 0000000..14553c6 --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/entry-author-bio.php @@ -0,0 +1,33 @@ +<?php +/** + * The template for displaying Author info + * + * @package WordPress + * @subpackage Twenty_Twenty + * @since 1.0.0 + */ + +if ( (bool) get_the_author_meta( 'description' ) && (bool) get_theme_mod( 'show_author_bio', true ) ) : ?> +<div class="author-bio"> + <div class="author-title-wrapper"> + <div class="author-avatar vcard"> + <?php echo get_avatar( get_the_author_meta( 'ID' ), 160 ); ?> + </div> + <h2 class="author-title heading-size-4"> + <?php + printf( + /* translators: %s: Author name */ + __( 'By %s', 'twentytwenty' ), + esc_html( get_the_author() ) + ); + ?> + </h2> + </div><!-- .author-name --> + <div class="author-description"> + <?php echo wp_kses_post( wpautop( get_the_author_meta( 'description' ) ) ); ?> + <a class="author-link" href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author"> + <?php _e( 'View Archive <span aria-hidden="true">→</span>', 'twentytwenty' ); ?> + </a> + </div><!-- .author-description --> +</div><!-- .author-bio --> +<?php endif; ?> diff --git a/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/entry-header.php b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/entry-header.php new file mode 100644 index 0000000..1f68550 --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/entry-header.php @@ -0,0 +1,75 @@ +<?php +/** + * Displays the post header + * + * @package WordPress + * @subpackage Twenty_Twenty + * @since 1.0.0 + */ + +$entry_header_classes = ''; + +if ( is_singular() ) { + $entry_header_classes .= ' header-footer-group'; +} + +?> + +<header class="entry-header has-text-align-center<?php echo esc_attr( $entry_header_classes ); ?>"> + + <div class="entry-header-inner section-inner medium"> + + <?php + /** + * Allow child themes and plugins to filter the display of the categories in the entry header. + * + * @since 1.0.0 + * + * @param bool Whether to show the categories in header, Default true. + */ + $show_categories = apply_filters( 'twentytwenty_show_categories_in_entry_header', true ); + + if ( true === $show_categories && has_category() ) { + ?> + + <div class="entry-categories"> + <span class="screen-reader-text"><?php _e( 'Categories', 'twentytwenty' ); ?></span> + <div class="entry-categories-inner"> + <?php the_category( ' ' ); ?> + </div><!-- .entry-categories-inner --> + </div><!-- .entry-categories --> + + <?php + } + + if ( is_singular() ) { + the_title( '<h1 class="entry-title">', '</h1>' ); + } else { + the_title( '<h2 class="entry-title heading-size-1"><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); + } + + $intro_text_width = ''; + + if ( is_singular() ) { + $intro_text_width = ' small'; + } else { + $intro_text_width = ' thin'; + } + + if ( has_excerpt() && is_singular() ) { + ?> + + <div class="intro-text section-inner max-percentage<?php echo $intro_text_width; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>"> + <?php the_excerpt(); ?> + </div> + + <?php + } + + // Default to displaying the post meta. + twentytwenty_the_post_meta( get_the_ID(), 'single-top' ); + ?> + + </div><!-- .entry-header-inner --> + +</header><!-- .entry-header --> diff --git a/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/featured-image.php b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/featured-image.php new file mode 100644 index 0000000..03e48df --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/featured-image.php @@ -0,0 +1,43 @@ +<?php +/** + * Displays the featured image + * + * @package WordPress + * @subpackage Twenty_Twenty + * @since 1.0.0 + */ + +if ( has_post_thumbnail() && ! post_password_required() ) { + + $featured_media_inner_classes = ''; + + // Make the featured media thinner on archive pages. + if ( ! is_singular() ) { + $featured_media_inner_classes .= ' medium'; + } + ?> + + <figure class="featured-media"> + + <div class="featured-media-inner section-inner<?php echo $featured_media_inner_classes; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>"> + + <?php + the_post_thumbnail(); + + $caption = get_the_post_thumbnail_caption(); + + if ( $caption ) { + ?> + + <figcaption class="wp-caption-text"><?php echo esc_html( $caption ); ?></figcaption> + + <?php + } + ?> + + </div><!-- .featured-media-inner --> + + </figure><!-- .featured-media --> + + <?php +} diff --git a/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/footer-menus-widgets.php b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/footer-menus-widgets.php new file mode 100644 index 0000000..fe89d64 --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/footer-menus-widgets.php @@ -0,0 +1,119 @@ +<?php +/** + * Displays the menus and widgets at the end of the main element. + * Visually, this output is presented as part of the footer element. + * + * @package WordPress + * @subpackage Twenty_Twenty + * @since 1.0.0 + */ + +$has_footer_menu = has_nav_menu( 'footer' ); +$has_social_menu = has_nav_menu( 'social' ); + +$has_sidebar_1 = is_active_sidebar( 'sidebar-1' ); +$has_sidebar_2 = is_active_sidebar( 'sidebar-2' ); + +// Only output the container if there are elements to display. +if ( $has_footer_menu || $has_social_menu || $has_sidebar_1 || $has_sidebar_2 ) { + ?> + + <div class="footer-nav-widgets-wrapper header-footer-group"> + + <div class="footer-inner section-inner"> + + <?php + + $footer_top_classes = ''; + + $footer_top_classes .= $has_footer_menu ? ' has-footer-menu' : ''; + $footer_top_classes .= $has_social_menu ? ' has-social-menu' : ''; + + if ( $has_footer_menu || $has_social_menu ) { + ?> + <div class="footer-top<?php echo $footer_top_classes; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- static output ?>"> + <?php if ( $has_footer_menu ) { ?> + + <nav aria-label="<?php esc_attr_e( 'Footer', 'twentytwenty' ); ?>" role="navigation" class="footer-menu-wrapper"> + + <ul class="footer-menu reset-list-style"> + <?php + wp_nav_menu( + array( + 'container' => '', + 'depth' => 1, + 'items_wrap' => '%3$s', + 'theme_location' => 'footer', + ) + ); + ?> + </ul> + + </nav><!-- .site-nav --> + + <?php } ?> + <?php if ( $has_social_menu ) { ?> + + <nav aria-label="<?php esc_attr_e( 'Social links', 'twentytwenty' ); ?>" class="footer-social-wrapper"> + + <ul class="social-menu footer-social reset-list-style social-icons fill-children-current-color"> + + <?php + wp_nav_menu( + array( + 'theme_location' => 'social', + 'container' => '', + 'container_class' => '', + 'items_wrap' => '%3$s', + 'menu_id' => '', + 'menu_class' => '', + 'depth' => 1, + 'link_before' => '<span class="screen-reader-text">', + 'link_after' => '</span>', + 'fallback_cb' => '', + ) + ); + ?> + + </ul><!-- .footer-social --> + + </nav><!-- .footer-social-wrapper --> + + <?php } ?> + </div><!-- .footer-top --> + + <?php } ?> + + <?php if ( $has_sidebar_1 || $has_sidebar_2 ) { ?> + + <aside class="footer-widgets-outer-wrapper" role="complementary"> + + <div class="footer-widgets-wrapper"> + + <?php if ( $has_sidebar_1 ) { ?> + + <div class="footer-widgets column-one grid-item"> + <?php dynamic_sidebar( 'sidebar-1' ); ?> + </div> + + <?php } ?> + + <?php if ( $has_sidebar_2 ) { ?> + + <div class="footer-widgets column-two grid-item"> + <?php dynamic_sidebar( 'sidebar-2' ); ?> + </div> + + <?php } ?> + + </div><!-- .footer-widgets-wrapper --> + + </aside><!-- .footer-widgets-outer-wrapper --> + + <?php } ?> + + </div><!-- .footer-inner --> + + </div><!-- .footer-nav-widgets-wrapper --> + +<?php } ?> diff --git a/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/modal-menu.php b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/modal-menu.php new file mode 100644 index 0000000..20b9628 --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/modal-menu.php @@ -0,0 +1,148 @@ +<?php +/** + * Displays the menu icon and modal + * + * @package WordPress + * @subpackage Twenty_Twenty + * @since 1.0.0 + */ + +?> + +<div class="menu-modal cover-modal header-footer-group" data-modal-target-string=".menu-modal"> + + <div class="menu-modal-inner modal-inner"> + + <div class="menu-wrapper section-inner"> + + <div class="menu-top"> + + <button class="toggle close-nav-toggle fill-children-current-color" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".menu-modal"> + <span class="toggle-text"><?php _e( 'Close Menu', 'twentytwenty' ); ?></span> + <?php twentytwenty_the_theme_svg( 'cross' ); ?> + </button><!-- .nav-toggle --> + + <?php + + $mobile_menu_location = ''; + + // If the mobile menu location is not set, use the primary and expanded locations as fallbacks, in that order. + if ( has_nav_menu( 'mobile' ) ) { + $mobile_menu_location = 'mobile'; + } elseif ( has_nav_menu( 'primary' ) ) { + $mobile_menu_location = 'primary'; + } elseif ( has_nav_menu( 'expanded' ) ) { + $mobile_menu_location = 'expanded'; + } + + if ( has_nav_menu( 'expanded' ) ) { + + $expanded_nav_classes = ''; + + if ( 'expanded' === $mobile_menu_location ) { + $expanded_nav_classes .= ' mobile-menu'; + } + + ?> + + <nav class="expanded-menu<?php echo esc_attr( $expanded_nav_classes ); ?>" aria-label="<?php esc_attr_e( 'Expanded', 'twentytwenty' ); ?>" role="navigation"> + + <ul class="modal-menu reset-list-style"> + <?php + if ( has_nav_menu( 'expanded' ) ) { + wp_nav_menu( + array( + 'container' => '', + 'items_wrap' => '%3$s', + 'show_toggles' => true, + 'theme_location' => 'expanded', + ) + ); + } + ?> + </ul> + + </nav> + + <?php + } + + if ( 'expanded' !== $mobile_menu_location ) { + ?> + + <nav class="mobile-menu" aria-label="<?php esc_attr_e( 'Mobile', 'twentytwenty' ); ?>" role="navigation"> + + <ul class="modal-menu reset-list-style"> + + <?php + if ( $mobile_menu_location ) { + + wp_nav_menu( + array( + 'container' => '', + 'items_wrap' => '%3$s', + 'show_toggles' => true, + 'theme_location' => $mobile_menu_location, + ) + ); + + } else { + + wp_list_pages( + array( + 'match_menu_classes' => true, + 'show_toggles' => true, + 'title_li' => false, + 'walker' => new TwentyTwenty_Walker_Page(), + ) + ); + + } + ?> + + </ul> + + </nav> + + <?php + } + ?> + + </div><!-- .menu-top --> + + <div class="menu-bottom"> + + <?php if ( has_nav_menu( 'social' ) ) { ?> + + <nav aria-label="<?php esc_attr_e( 'Expanded Social links', 'twentytwenty' ); ?>" role="navigation"> + <ul class="social-menu reset-list-style social-icons fill-children-current-color"> + + <?php + wp_nav_menu( + array( + 'theme_location' => 'social', + 'container' => '', + 'container_class' => '', + 'items_wrap' => '%3$s', + 'menu_id' => '', + 'menu_class' => '', + 'depth' => 1, + 'link_before' => '<span class="screen-reader-text">', + 'link_after' => '</span>', + 'fallback_cb' => '', + ) + ); + ?> + + </ul> + </nav><!-- .social-menu --> + + <?php } ?> + + </div><!-- .menu-bottom --> + + </div><!-- .menu-wrapper --> + + </div><!-- .menu-modal-inner --> + +</div><!-- .menu-modal --> diff --git a/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/modal-search.php b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/modal-search.php new file mode 100644 index 0000000..e01090a --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/modal-search.php @@ -0,0 +1,34 @@ +<?php +/** + * Displays the search icon and modal + * + * @package WordPress + * @subpackage Twenty_Twenty + * @since 1.0.0 + */ + +?> +<div class="search-modal cover-modal header-footer-group" data-modal-target-string=".search-modal"> + + <div class="search-modal-inner modal-inner"> + + <div class="section-inner"> + + <?php + get_search_form( + array( + 'label' => __( 'Search for:', 'twentytwenty' ), + ) + ); + ?> + + <button class="toggle search-untoggle close-search-toggle fill-children-current-color" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false"> + <span class="screen-reader-text"><?php _e( 'Close search', 'twentytwenty' ); ?></span> + <?php twentytwenty_the_theme_svg( 'cross' ); ?> + </button><!-- .search-toggle --> + + </div><!-- .section-inner --> + + </div><!-- .search-modal-inner --> + +</div><!-- .menu-modal --> diff --git a/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/navigation.php b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/navigation.php new file mode 100644 index 0000000..ca4eff6 --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/navigation.php @@ -0,0 +1,61 @@ +<?php +/** + * Displays the next and previous post navigation in single posts. + * + * @package WordPress + * @subpackage Twenty_Twenty + * @since 1.0.0 + */ + +$next_post = get_next_post(); +$prev_post = get_previous_post(); + +if ( $next_post || $prev_post ) { + + $pagination_classes = ''; + + if ( ! $next_post ) { + $pagination_classes = ' only-one only-prev'; + } elseif ( ! $prev_post ) { + $pagination_classes = ' only-one only-next'; + } + + ?> + + <nav class="pagination-single section-inner<?php echo esc_attr( $pagination_classes ); ?>" aria-label="<?php esc_attr_e( 'Post', 'twentytwenty' ); ?>" role="navigation"> + + <hr class="styled-separator is-style-wide" aria-hidden="true" /> + + <div class="pagination-single-inner"> + + <?php + if ( $prev_post ) { + ?> + + <a class="previous-post" href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>"> + <span class="arrow" aria-hidden="true">←</span> + <span class="title"><span class="title-inner"><?php echo wp_kses_post( get_the_title( $prev_post->ID ) ); ?></span></span> + </a> + + <?php + } + + if ( $next_post ) { + ?> + + <a class="next-post" href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>"> + <span class="arrow" aria-hidden="true">→</span> + <span class="title"><span class="title-inner"><?php echo wp_kses_post( get_the_title( $next_post->ID ) ); ?></span></span> + </a> + <?php + } + ?> + + </div><!-- .pagination-single-inner --> + + <hr class="styled-separator is-style-wide" aria-hidden="true" /> + + </nav><!-- .pagination-single --> + + <?php +} diff --git a/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/pagination.php b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/pagination.php new file mode 100644 index 0000000..b2a6aca --- /dev/null +++ b/srcs/wordpress/wp-content/themes/twentytwenty/template-parts/pagination.php @@ -0,0 +1,58 @@ +<?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">←</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">→</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 ) { ?> + + <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 +} |