Simple GA4 Ranking プラグインの記事ランキングをSnow Monkeyにて”リッチメディア”形式で表示する

2023年7月16日

大東信仁（ものくろ）

Simple GA4 Ranking プラグインを使って、ランキング記事をSnow Monkeyに表示する時に、リッチメディア形式で表示したい。

そんなときに、下のPHPコードを、functions.phpもしくはmy-snow-monkey.phpに追加し、ショートコード

[my_sga_ranking]

を実行すると、リッチメディア形式で表示できる。

Snow MonkeyのCSSを活用するため、追加CSSは不要。

/** simple ga ranking **/
add_shortcode( 'my_sga_ranking', function ( $atts ) {

    if ( ! function_exists( 'sga_ranking_get_date' ) ) {
        return;
    }

    $ids = sga_ranking_get_date( $atts );
    if ( empty( $ids ) ) {
        return;
    }

    $output = '<div class="snow-monkey-posts snow-monkey-recent-posts sga4ranking">';
    $output .= '<ul class="c-entries c-entries--rich-media" data-has-infeed-ads="false" data-force-sm-1col="true">';

    foreach ( $ids as $id ) {
        if ( has_post_thumbnail( $id ) ) {
            $thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $id ) , ' large' );
            $thumb_url = $thumb[0];
            $thumb_alt = get_post_meta( get_post_thumbnail_id( $id ), '_wp_attachment_image_alt', true );
        } else {
            $thumb_url = 'https://mono96.jp/wp-content/uploads/2021/08/63eb47f8f0d0de8ce5be31a516df2bde.jpeg';
            $thumb_alt = '';
        }

        $output .= '<li class="c-entries__item">';
        $output .= '<a href="' . get_permalink( $id ) . '">';
        $output .= '<section class="c-entry-summary c-entry-summary--post c-entry-summary--type-post">';
        	$output .= '<div class="c-entry-summary__figure">';
        		$output .= '<img src="' . esc_url( $thumb_url ) . '" class="attachment-thumbnail size-thumbnail wp-post-image" alt="' . esc_attr( $thumb_alt ) . '">';
        
        		$category = get_the_category( $id );
        		if ( $category ) {
                             $output .= '<span class="c-entry-summary__term c-entry-summary__term--category-' . $category[0]->term_id . ' wpaw-ranking__term">' . esc_html( $category[0]->name ) . '</span>';
        		}
        	$output .= '</div>';
                
        	$output .= '<div class="c-entry-summary__body">';
				$output .= '<header class="c-entry-summary__header">';
						$output .= '<h3 class="c-entry-summary__title">';
        				$output .= get_the_title( $id ) . '</h3>';
        			$output .= '<div class="c-entry-summary__meta">';
        					$output .= '<ul class="c-meta">';
        				$output .= '<li class="c-meta__item c-meta__item--published">' . get_the_date( 'Y年n月j日', $id ) . '</li>';
						$output .= '</ul>';
					$output .= '</div>';
			$output .= '</div>';
		$output .= '</section>';
        $output .= '</a>';
        $output .= '</li>';
    }

    $output .= '</ul>';
    $output .= '</div>';

    return $output;
} );
/** end simple ga ranking **/