【WordPress】カスタム投稿も人気記事一覧に表示させるにはどうする？
実装方法教えます。

Jetpackの設定手順

①管理画面からJetpackを開く。

②画面右上にある「設定」をクリックする。

③「執筆」をクリックする。

④下部のウィジェット欄の
「購読フォームや Twitter ストリームなどの追加ウィジェットがサイトで使用可能に」を有効にする。

⑤管理画面から「外観」＞「ウィジェット」を開く。

⑥ウィジェットの利用できるウィジェット内にJetpackのウィジェットがいくつか表示されており、
その中に「人気の投稿とページ（Jetpack）」が追加される。

「amr shortcode any widget」のインストール＆有効化手順

①管理画面からプラグインを開く。

②「新規追加」ボタンをクリックする。

③プラグインの検索欄に「amr shortcode any widget」と書き、Enterキーを押す。

④「amr shortcode any widget」の「今すぐインストール」ボタンをクリックする。

⑤インストール完了後表示される「有効化」ボタンをクリックする。

⑥管理画面から「外観」＞「ウィジェット」を開く。

⑦ウィジェットの表示位置の欄に「Widgets for Shortcodes」が追加される。

ウィジェットの設定手順

①管理画面から「外観」＞「ウィジェット」を開く。

②ウィジェットの利用できるウィジェット内の「人気の投稿とページ（Jetpack）」の▼をクリックする。

③ウィジェットを追加する位置として「Widgets for Shortcodes」を選択し、
「ウィジェットを追加」ボタンをクリックする。

④ウィジェットの表示内容、表示方法を設定し、「保存」ボタンをクリックする。
※⑦は保存後、設定可能になる。

⑤①～⑥の設定保存後、表示／非表示にするカテゴリーやページ、記事IDを指定し、「保存」ボタンをクリックする。

⑥「To use as shortcode with id:」後ろに表示されたショートコードをコピーする。

記事の編集手順

①人気記事一覧を表示させたい記事の編集画面を開く。

②コピーしたショートコードを表示させたい任意の位置に入力する。

[do_widget id=<ウィジェットID>]

functions.php編集手順

①管理画面から「外観」＞「テーマエディター」を開く。

②「編集するテーマを選択」箇所が現在利用中のテーマであることを確認し、
「テーマのための関数 (functions.php)」をクリックする。

③以下コードを追記する。
※サイズの単位は「px」です。pxを記入する必要はありません。

// 引数に指定したイメージのサイズを変更する関数
function jeherve_custom_thumb_size( $get_image_options ) {
        // サイズを指定して変更
        $get_image_options['avatar_size'] = <任意のサイズを数字で記入>;
        // 変更した結果を返す 
        return $get_image_options;
}
// Jetpackのウィジェットのサムネイルサイズを変更するフックが呼び出されたときに、当関数を呼び出す。
add_filter( 'jetpack_top_posts_widget_image_options', 'jeherve_custom_thumb_size' );

④「ファイルを更新」ボタンをクリックする。

CSS編集手順

①管理画面から「外観」＞「テーマエディター」を開く。

②「編集するテーマを選択」箇所が現在利用中のテーマであることを確認し、
「スタイルシート (style.css)」をクリックする。

③以下コードを追記する。

/* ランキング表示 */
.widgets-list-layout .widgets-list-layout-blavatar {
    max-width: <任意のサイズを数字で記入>px!important;
    width: 100%!important;
    margin: 2px 8px 2px 0;
    padding: 3px 1px 3px 0;
}

④「ファイルを更新」ボタンをクリックする。

投稿日表示手順

①管理画面から「外観」＞「テーマエディター」を開く。

②「編集するテーマを選択」箇所が現在利用中のテーマであることを確認し、
「テーマのための関数 (functions.php)」をクリックする。

③以下コードを追記する。 ※「〈〉」は全角で書いてありますので、半角に変えてください。

// 表示する記事のIDを引数として設定
function jetpackme_add_date_top_posts( $post_id ) {
        $post_date = get_post_time(
                // WordPressの日付設定のフォーマット情報を取得し、設定
                get_option( 'date_format' ),
                // グリニッジ標準時で日付設定
                true,
                // 投稿記事のIDを設定
                $post_id,
                // 日付の文字列の翻訳
                true
        );
        // 右寄せで時間を表示するHTMLコードを出力。
        printf( '＜div class="top_posts_date" style="text-align:right;"＞%s＜/div＞', $post_date );
}
add_action( 'jetpack_widget_top_posts_after_post', 'jetpackme_add_date_top_posts' );

④「ファイルを更新」ボタンをクリックする。

投稿日文字サイズ変更手順

①管理画面から「外観」＞「テーマエディター」を開く。

②「編集するテーマを選択」箇所が現在利用中のテーマであることを確認し、
「スタイルシート (style.css)」をクリックする。

③以下コードを追記する。

/* 投稿日の日付サイズ */
.top_posts_date {
font-size: 0.6em; /* デフォルトの文字サイズに対する割合等で設定 */
}

④「ファイルを更新」ボタンをクリックする。

投稿日表示手順

①管理画面から「外観」＞「テーマエディター」を開く。

②「編集するテーマを選択」箇所が現在利用中のテーマであることを確認し、
「スタイルシート (style.css)」をクリックする。

③以下コードを追記する。

/*人気記事の投稿日のアイコン表示*/
.top_posts_date::before{ 
font-family: "FontAwesome"; /*FontAwesomeのバージョンによって書き方が異なります。*/
content: "\f017"; /*fa-clockアイコン*/
padding-right: 4px; /*右余白*/
font-weight: 400; /*アイコンの太さ*/
}

④「ファイルを更新」ボタンをクリックする。

記事タイトルの表示変更手順

①管理画面から「外観」＞「テーマエディター」を開く。

②「編集するテーマを選択」箇所が現在利用中のテーマであることを確認し、
「スタイルシート (style.css)」をクリックする。

③以下コードを追記する。

/* タイトルの表示の高さ等変更 */
.widgets-list-layout-links{
   margin-top: 2px; /* 上部からの距離 */
   font-size: 0.85em; /* 文字の大きさ */
   line-height: 1.3; /* 行高 */ 
   float: none!important;
   width: auto!important;
}

④「ファイルを更新」ボタンをクリックする。

記事タイトルの下線非表示等変更手順

①管理画面から「外観」＞「テーマエディター」を開く。

②「編集するテーマを選択」箇所が現在利用中のテーマであることを確認し、
「スタイルシート (style.css)」をクリックする。

③以下コードを追記する。

/* リンク下線の非表示等 */
.widgets-list-layout-links a{
padding: 7.2px;  /* リンク周辺の空白 */
color: #333; /* 文字色 */
text-decoration: none; /* 下線なし */
}

④「ファイルを更新」ボタンをクリックする。

区切り線表示手順

①管理画面から「外観」＞「テーマエディター」を開く。

②「編集するテーマを選択」箇所が現在利用中のテーマであることを確認し、
「スタイルシート (style.css)」をクリックする。

③以下コードを追記する。

.custom_sc ul li:after {
content: "";
border-bottom: solid 1px #cddee0!important;　/* 区切り線の太さや線の種類、色 */
width: 100%;
height: 10px;
}

④「ファイルを更新」ボタンをクリックする。