In meinem letzten Beitrag habe ich gezeigt, wie man ein spezifisches Block-CSS in einem anderen Block laden kann und habe versprochen, dass ich zeige, wie genau ich das im Block „Neueste Beiträge“ verwendet habe. Da der „Weiterlesen“-Link standardmäßig ein einfacher Textlink ist, wollte ich in anpassen, damit er aussieht wie ein richtiger Button, ohne dass ich zusätzliches CSS dafür benötige.

Ich bin ein Fan von DOMDocument, wenn es darum geht, spezifisches HTML an einer spezifischen Stelle hinzuzufügen. Daher habe ich es auch hier verwendet. Zuerst wähle ich jedes Listenelement, da jeder neueste Beitrag in einem eigenen Listenelement sitzt. Innerhalb dieses Listenelements gibt es möglicherweise mehrere Links, durch die ich iteriere. In meinem Fall habe ich nur die Verlinkung des Titels noch aktiviert, deshalb prüfe ich explizit auf die Existenz der Klasse wp-block-latest-posts__post-title und ignoriere dieses Linkelement. Wenn du auch deine Vorschaubilder verlinkt hast, musst du diese Prüfung vermutlich erweitern.

Danach verwende ich den Link des ursprünglichen „Weiterlesen“-Link und ersetze dessen Markup mit meinem individuellen Button(s)-Block.

Und zu guter Letzt, wie in meinem vorherigen Beitrag gesehen, füge ich das Button-Block-CSS hinzu, um sicherzustellen, dass der individuell hinzugefügte „Weiterlesen“-Button auch korrekt dargestellt wird.

So sieht der Code am Ende aus:

/**
 * Add a read more link as button and remove possibly existing ones.
 * 
 * @param	string	$block_content Block content
 * @return	string Updated block content
 */
function my_set_read_more_link( string $block_content ): string {
	\libxml_use_internal_errors( true );
	
	$dom = new \DOMDocument();
	$dom->loadHTML(
		'<html><meta charset="utf-8">' . $block_content . '</html>',
		LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD
	);
	
	foreach ( $dom->getElementsByTagName( 'li' ) as $list_element ) {
		$link = '';
		
		foreach ( $list_element->getElementsByTagName( 'a' ) as $anchor ) {
			if ( ! \str_contains( $anchor->getAttribute( 'class' ), 'wp-block-latest-posts__post-title' ) ) {
				continue;
			}
			
			$link = $anchor->getAttribute( 'href' );
			break;
		}
		
		if ( ! empty( $link ) ) {
			$template = \sprintf(
				'<div class="wp-block-buttons">
					<div class="wp-block-button is-read-more-button"><a class="wp-block-button__link wp-element-button" href="%1$s">%2$s</a></div>
				</div>',
				$link,
				\esc_html__( 'Read more', 'my-textdomain' )
			);
			$read_more_dom = new DOMDocument();
			$read_more_dom->loadHTML(
				'<html><meta charset="utf-8">' . $template . '</html>',
				LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD
			);
			
			foreach ( $list_element->getElementsByTagName( 'div' ) as $div ) {
				if ( ! \str_contains( $div->getAttribute( 'class' ), 'wp-block-latest-posts__post-excerpt' ) ) {
					continue;
				}
				
				foreach ( $div->getElementsByTagName( 'a' ) as $anchor ) {
					$div->removeChild( $anchor );
				}
				
				$read_more_node = $dom->importNode( $read_more_dom->documentElement->firstChild->nextSibling, true ); // phpcs:ignore WordPress.NamingConventions.ValidVariableName.UsedPropertyNotSnakeCase
				$div->appendChild( $read_more_node );
			}
		}
	}
	
	$block_content = $dom->saveHTML( $dom->documentElement->firstChild->nextSibling ); // phpcs:ignore WordPress.NamingConventions.ValidVariableName.UsedPropertyNotSnakeCase
	
	\wp_enqueue_style( 'wp-block-button' );
	\libxml_use_internal_errors( false );
	
	return $block_content;
}

\add_filter( 'render_block_core/latest-posts', 'my_set_read_more_link' );
Code-Sprache: PHP (php)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert