Beitragsnavigation

In der single.php des Kindthemas wird folgende Funktion eingefügt:

function getPrevNext() {

	$pfeil_links = '';
	$prev_post   = get_adjacent_post(false, '', true);
	if (is_a($prev_post, 'WP_Post'))
	{
		$prev_Title  = $prev_post->post_title;
		$prev_Link   = get_permalink($prev_post->ID);
		$pfeil_links = <<<ENDE

        <!-- $prev_Link -->
         <div class="zitNav-pfeil-links">
            <a href="$prev_Link" class="zitNav-link-text">
                <strong>«</strong>
            </a>
        </div>
        <div class="zitNav-prev-inhalt">
            <a href="$prev_Link">
                <div class="zitNav-titel">
                    $prev_Title
                </div>
            </a>
        </div>

ENDE;

	}

	$pfeil_rechts = '';
	$next_post    = get_adjacent_post(false, '', false);
	if (is_a($next_post, 'WP_Post'))
	{
		$next_Title   = $next_post->post_title;
		$next_Link    = get_permalink($next_post->ID);
		$pfeil_rechts = <<<ENDE

        <!-- $next_Link -->
       <div class="zitNav-next-inhalt">
            <a href="$next_Link">
                <div class="zitNav-titel">
                    $next_Title
                </div>
            </a>
        </div>
         <div class="zitNav-pfeil-rechts">
            <a href="$next_Link" class="zitNav-link-text">
                <strong>»</strong>
            </a>
        </div>


ENDE;

	}
	print <<<ENDE

    <div class="zitNav-container">
        $pfeil_links

        $pfeil_rechts
    </div>

ENDE;

}

Passendes CSS dazu:


/*  --------- Vorwärts-/Rückwärtsnavigation bei den Beiträgen ----------------- */
.zitNav-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
    margin-top: 35px;
}

.zitNav-titel {
    font-size: 0.9em;
    font-style: italic;
}

.zitNav-link-text {
    color: white;
}

.zitNav-pfeil-links {
    order: 0;
    flex: 0 0 50px;
    align-self: center;
    font-size: 2em;
    background-color: #EA766E;
    padding: 10px 15px 15px 15px;
    border-radius: 100%;
    margin-right: 8px;
}

.zitNav-prev-inhalt {
    order: 0;
    flex: 1 1 auto;
    align-self: stretch;
    padding-right: 10px;
    margin: auto 0;
}

.zitNav-next-inhalt {
    order: 0;
    flex: 1 1 auto;
    align-self: stretch;
    text-align: right;
    padding-left: 10px;
    margin: auto 0;
}

.zitNav-pfeil-rechts {
    order: 0;
    flex: 0 0 50px;
    align-self: center;
    font-size: 2em;
    background-color: #EA766E;
    padding: 10px 15px 15px 15px;
    border-radius: 100%;
    margin-left: 8px;
}

Mögliche Alternative (ungetestet):

<?php
$args = array (
    'before'            => '<div class="page-links-XXX"><span class="page-link-text">' . __( 'More pages: ', 'textdomain' ) . '</span>',
    'after'             => '</div>',
    'link_before'       => '<span class="page-link">',
    'link_after'        => '</span>',
    'next_or_number'    => 'next',
    'separator'         => ' | ',
    'nextpagelink'      => __( 'Next »', 'textdomain' ),
    'previouspagelink'  => __( '« Previous', 'textdomain' ),
);
 
wp_link_pages( $args );
?>

Interessanter Artikel dazu:

https://www.internetkurse-koeln.de/wenn-die-wordpress-beitragsnavigation-nicht-ins-konzept-passt/