$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>customization - I want to customize the_posts_navigation function by replacing prev and next with images|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>customization - I want to customize the_posts_navigation function by replacing prev and next with images

    customization - I want to customize the_posts_navigation function by replacing prev and next with images

    matteradmin8PV0评论

    Hie,

    I am currently trying to customize the function 'the_posts_navigation' of Wordpress because I would like to let appear only "previous" and "next" (which I want to replace by icons of arrow in SVG), would you have a track to help me?

    Here is a piece of the code:

    the_posts_navigation( array(
                    'mid_size' => 1,
                    'prev_text' => __( '<<', 'textdomain' ),
                    'next_text' => __( '>>', 'textdomain' ),
                    'prev_next'          => true,
                    'in_same_term'       => true,
                    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'cm' ) . ' </span>',
                ) );

    Et voici le bout de code que j'aimerais intégrer à la fonction native "the_posts_pagination" de Wordpress pour remplacer le "previous" et le "next" par des icones en SVG:

    <a class="cover--nav-prev" href="<?php echo get_permalink($prevPostID); ?>">
                <span class="cover--nav-label"><?php _e('Recette précédente', 'marque'); ?></span>
                <svg class="icon icon-arrow-prev" role="presentation" focusable="false"><use xlink:href="<?php echo get_template_directory_uri(); ?>/images/symbol-defs.svg#icon-arrow-prev"></use></svg>
            </a>

    Hie,

    I am currently trying to customize the function 'the_posts_navigation' of Wordpress because I would like to let appear only "previous" and "next" (which I want to replace by icons of arrow in SVG), would you have a track to help me?

    Here is a piece of the code:

    the_posts_navigation( array(
                    'mid_size' => 1,
                    'prev_text' => __( '<<', 'textdomain' ),
                    'next_text' => __( '>>', 'textdomain' ),
                    'prev_next'          => true,
                    'in_same_term'       => true,
                    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'cm' ) . ' </span>',
                ) );

    Et voici le bout de code que j'aimerais intégrer à la fonction native "the_posts_pagination" de Wordpress pour remplacer le "previous" et le "next" par des icones en SVG:

    <a class="cover--nav-prev" href="<?php echo get_permalink($prevPostID); ?>">
                <span class="cover--nav-label"><?php _e('Recette précédente', 'marque'); ?></span>
                <svg class="icon icon-arrow-prev" role="presentation" focusable="false"><use xlink:href="<?php echo get_template_directory_uri(); ?>/images/symbol-defs.svg#icon-arrow-prev"></use></svg>
            </a>
    • functions
    • customization
    • pagination
    • terms
    Share Improve this question edited Feb 10, 2019 at 15:20 Frenchy_WP asked Feb 10, 2019 at 11:42 Frenchy_WPFrenchy_WP 191 silver badge6 bronze badges
    Add a comment  | 

    1 Answer 1

    Reset to default 0

    You can put svg text right in the prev_text and next_text.

    To make it a little more readable here I've broken it up and prepared the SVG markup first. I am only show you the "prev" link but the "next" would work the same way.

    $prev_label = "<span class='cover--nav-label'>" . _e('Recette précédente', 'marque') . "</span>";

$prev_arrow = "<svg class='icon icon-arrow-prev' role='presentation' focusable='false'><use xlink:href='" . get_template_directory_uri() . "/images/symbol-defs.svg#icon-arrow-prev'></use></svg>";

$prev_text = $prev_label . $prev_arrow;

the_post_navigation( array(
  'prev_text' => $prev_text
) );

    Note that the_post_navigation will be wrapping your prev_text (and next_text) within the tag and applying the appropriate link target, so you don't include that part here.

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far