WordPress 最新の投稿ウィジェットにサムネイルを追加する Recent Posts Widget With Thumbnails

Last Updated: 2024 年 11 月 23 日 19のコメント

WordPressが提供するデフォルトの「最新の投稿」ウィジェットは、サムネイルなしで単純な記事のリストを表示するのに役立ちます。 最新の記事のリストにサムネイルとサマリーを表示したい場合は、Recent Posts Widget With Thumbnailsというプラグインを使用できます。

[この記事は、2024年11月21日に最後に更新されました。 ]

WordPress 最新の投稿にサムネイルを追加する Recent Posts Widget With Thumbnails

Recent Posts Widget With Thumbnailsは、投稿のタイトル、サムネイル、サマリー、作成者、カテゴリ、日付などの情報で最新の記事を一覧表示します WordPress プラグインです。このプラグインは2024年11月現在、20万を超えるサイトにインストールされ使用されています。 (1年間のユーザー数は増えませんでした。)

似たようなプラグインに 最近の投稿ウィジェット拡張というプラグインがあります。 このプラグインはショートコードをサポートしているので、ショートコードを使って最新の記事を表示したい場合に便利に使えます。

Recent Posts Widget With Thumbnails プラグインのインストールと設定方法

WordPress 管理者ページで プラグイン » プラグインを追加するに行き、Recent Posts Widget With Thumbnails「で検索してこのプラグインをインストールできます。このプラグインの韓国語名称は」サムネイル付きの最近の投稿ウィジェット「です。韓国語 WordPress バージョンを使用している場合は、プラグインリストにハングル名で表示されます。

インストールして有効にした場合 外観 » ウィジェット (또는 ルックス » ウィジェット)に移動して、「Recent Posts Widget With Thumbnails」ウィジェットをサイドバーまたは目的のウィジェット領域に追加できます。

最新 WordPress バージョンを使用する場合は、 ブロックインサータの切り替え アイコンをクリックします。

WordPress ウィジェットの追加

下にスクロールして Recent Posts With Thumbnails ウィジェットを好きな場所にドラッグしても高いです。

あるいは、単に検索ボックスに「recent」と入力してこのウィジェットを検索してから、このウィジェットをドラッグして目的の場所に配置することもできます。

WordPress ウィジェットの追加

これで、Recent Posts With Thumbnailsウィジェットに表示する項目などを設定できます。

最新の投稿ウィジェットの設定

表示する記事の数に加えて、タイトルの最大長、サマリーの表示の有無、サマリーの長さ、サムネイルの表示の有無、サムネイルのサイズ(幅と高さ)、表示するカテゴリの選択など、さまざまな設定を詳細にできます。

最新の投稿ウィジェットの日付、要約文の設定
サマリーの長さを設定します。
最新投稿リストウィジェットサムネイルサイズ設定
サムネイルサイズ設定。

参考までに Autoptimize などの最適化プラグインがインストールされている場合、最適化プラグインの設定が間違っていると、最新の記事ウィジェットの概要など、一部の要素が表示されないことがあります。 サマリーやサムネイルなどが表示されない場合は、キャッシュプラグインまたは最適化プラグインを無効にして問題が解決するかどうかを確認してください。

WordPress 最新記事ウィジェット

実際のサイトで正しく機能していることを確認してください。

アストラテーマの最新記事のリスト

アストラテーマでテストしてみました。 ほとんどのテーマで問題なく動作します。 要約文などの部分が気に入らないように設定を変更するようにします。

必要に応じて CSSを使用してレイアウトを調整できます。上の図に示すように、スタイルを変更する方法とCSSコードは次の記事に記載されています。

ブロックウィジェット対。 クラシックウィジェット

WordPress 5.8バージョンでは、ブロックウィジェットが導入されました。 この記事を初めて作成したときは、クラシックウィジェット(クラシックウィジェット)環境でしたが、現在はブロックウィジェットがデフォルトのウィジェット形式です。 このプラグインは古典的なウィジェットとブロックウィジェットの両方でうまく機能します。

ただし、古典的なウィジェットを使用するには別のプラグインをインストールする必要があります。

古典的なウィジェットを使用している場合は、可能な限りブロックウィジェットに切り替えることを検討してください。

投稿本文に最新の投稿を追加する

投稿本文に最新の投稿リストを表示したい場合 WordPress それ自体が提供する最新の記事ウィジェットを使用できます。

投稿編集画面で /最新と入力すると、関連ブロックが表示されます。 最新記事 ブロックを選択します。 (このように /ブロック_名前を入力して簡単にブロックを追加できます。 ブロックエディタキーボードショートカットを学ぶと、書き込み時間を節約できます。)

これにより、最新の投稿ブロックが表示され、右側のパネルの最新の投稿ブロック設定で、投稿数、カテゴリ、サムネイル、要約文などを指定できます。

GeneratePress テーマで「特性画像の表示」を有効にすると、画像が望む方法で表示されないようです。そのような場合 CSSを使用してスタイルを制御できます。

例:

参照


19のコメント

コメント

  1. 見つかりましたㅠㅠ

    /*最新の投稿サムネイルサイズ*/

    .rpwwt-widget ul li img {
    幅:120px。
    高さ:80px。
    }

    応答
  2. タブレットやモバイルでは、サムネイルのサイズ変更が適用されていますが、なぜPCでしかできないのですか? 珍しいですね。

    応答
  3. もしかしたら開発者モードに出ているCSSコードを修正すればい​​いかと思って追加してみましたが、これも適用できませんね。

    .rpwwt-widget ul li img {
    幅:90px。
    高さ:60px。
    }

    応答
  4. もしかしたらサムネイルのサイズ変更がジェネレートプレス無料版では適用できないのでしょうか?

    応答
  5. タブレットサイドバーの固定も同様に解決されました! ページレイアウトを調整するCSSコードがさまざまな部分に影響します。

    応答
  6. Read Moreは解決しました! 下のページレイアウト変更するコードで最後に}これが一つ消されていて追加したら再び正常に出ますね。

    /* メインページレイアウトの変更 */

    @media(min-width:1025px){
    .wp-post-image {
    表示:インラインブロック;
    幅:300ピクセル。 /*画像の幅*/
    height: 200px; /*画像の高さ*/
    オブジェクトフィット: カバー;
    margin-right: 15px; /* イメージと要約文の間の間隔 */
    フロート:左;
    }.entry-summary {
    オーバーフロー:隠されました;
    }
    }

    応答
  7. Read More CSSコードもプラグインに関係なくPCでのみ適用され、突然タブレットやモバイルでは適用できませんㅠㅠ

    応答
  8. プラグインをインストールするので、下のCSSコードもPCでのみ適用され、タブレットやモバイルでは突然適用できません。

    /* GeneratePress テーマのRead Moreフレーズをボタンで表示する*/

    .read-more {
    color:white; background-color: #4f4f4f;
    パディング:5px 7px。
    border-radius:10px;
    margin-top: 10px; margin-left: auto;
    margin-right: auto; 幅:100%; display: block;
    text-align: center; font-weight: bold;
    テキスト装飾:なし;
    &:hover{color:#eee; background-color: darkgray;}
    $:active{position:relative; top:2px;}
    }

    応答
  9. そしてプラグインをインストールして有効にするので、PCではなるのにタブレットでサイドバー固定ができません。 下のCSSコードを使用しています。

    /* GeneratePress テーマサイドバー固定*/
    /* Make the sidebar sticky in GeneratePress */

    @media(min-width:769px){
    .site-content {
    ディスプレイ:フレックス;
    justify-content: space-around;
    align-items: flex-start;
    }

    #right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    bottom: 2rem; /* Change this value as you wish */
    align-self:フレックスエンド;
    }
    }

    応答
    • 対応するCSSは、解像度が769ピクセル以上のデバイスで動作します。
      タブレットの画面解像度が769ピクセル以上の状況で動作しませんか?
      このプラグインを無効にすると正常に動作しますか?

      応答
      • プラグインを無効にしてもタブレットでは固定できません。

        @media(min-width:769px){

        この部分を消してみましたが、それでもPCでのみ固定になり、タブレットで突然固定できませんね。

    • 本文にも示されているように、Autoptimizeなどの最適化プラグインをインストールすると、正しく機能しない可能性があります。 キャッシュプラグインと最適化プラグインを無効にしてテストしてください。

      応答
  10. Thumbnail Settings で Show thumbnail をチェックし、Size of thumbnail を Specified width and height に設定した後、下に Width of thumbnail と Height of thumbnail サイズを指定してもなぜ適用できないのですか?

    応答