,

[WP Plugin] Jetpack: 関連するポストの数を変更する

公開日: 2016/06/03
更新日: 2018/10/14

CSS の打ち消しに手間取ったのでまとめておく。

Change the number of Related Posts displayed under your posts

表示される関連ポストの数を4つに変更。

functions.php
/**
 * Jetpack Related Posts
 * Related Posts — Jetpack for WordPress https://jetpack.com/support/related-posts/
*/
function jetpackme_more_related_posts( $options ) {
    $options['size'] = 4;
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );
// その他の設定
function jetpackme_remove_rp() {
    if ( class_exists( 'Jetpack_RelatedPosts' ) ) {
        $jprp = Jetpack_RelatedPosts::init();
        $callback = array( $jprp, 'filter_add_target_to_dom' );
        remove_filter( 'the_content', $callback, 40 );
    }
}
add_filter( 'wp', 'jetpackme_remove_rp', 20 );
function jetpackme_related_posts_headline( $headline ) {
    $headline = sprintf(
        '<h3 class="jp-relatedposts-headline"><em>%s</em></h3>',
        esc_html( 'Related' )
    );
    return $headline;
}
add_filter( 'jetpack_relatedposts_filter_headline', 'jetpackme_related_posts_headline' );
  • カラム落ちするので、CSS でレイアウト。
  • 不要な装飾を削除。
  • フォントサイズを変更。
/*
 * [WP Plugin] Jetpack: 関連するポストの数を変更する | deadwood https://www.d-wood.com/blog/2016/06/03_8133.html
 */
#jp-relatedposts h3.jp-relatedposts-headline {
    font-size: 16px;
    text-align: center;
    em:before {
        content: none;
    }
}
#jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
    font-size: 12px;
}
#jp-relatedposts .jp-relatedposts-items {
    display: flex;
    flex-flow: column;
    .jp-relatedposts-post {
        float: none;
        flex: 1;
    }
}
@media all and (min-width: 480px) {
    #jp-relatedposts .jp-relatedposts-items { flex-flow: row; }
}
@media only screen and (max-width: 640px) {
    #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { width: 100%; }
}