POSTED:

WordPress記事内のRSSブロックの使い方とカスタマイズ方法

WordPress5.2で記事ブロックにRSSが追加されました。

これによって記事内に他のサイトのRSSを読み込ませることが非常に簡単にできるようになりました。プラグインなども必要ありません。

今回は、このRSSブロックの使い方と、デザインのカスタマイズについてまとめていきます。

RSSブロックの基本的な使い方

まずは普通にRSSブロックを使ってみます。

ブロックリストのウィジェット項目の中にRSSブロックがあるので選択します。

すると、URLの入力が出てくるので、読み込ませたいサイトのURLを入力して「URLを使用」を押します。

たったこれだけでRSSを読み込んでくれます。
入力画面ではこのような表示になります。(※サンプルとして読み込んだサイトは”ウェブクリエイターボックス”です。)

実際の表示とソースコードを確認しておきましょう。リストタグで構成された要素になっています。

RSSブロックに投稿者・日付・抜粋を付ける。

RSSブロックは以下のカスタマイズができます。

  • 項目数(いくつ読み込ませるか。1～10で選択。)
  • 投稿者の表示(表示or非表示)
  • 日付を表示(表示 or非表示 )
  • 抜粋を表示(表示 or非表示 )
  • 抜粋文の最大文字数(10～100で選択)

この操作はRSSブロックを選択すると画面右側のウィンドウに出てきます。

実際には以下のような画面で操作します。リアルタイムで表示内容が変化するのでとても使いやすいですね。

全て表示させるとこのようになります。日付・投稿者・抜粋文が追加されていることがわかります。

当然ソースコードも追加されています。time(日付)・span(投稿者)・div(抜粋)の3つのタグが追加されています。

RSSブロックのスタイルシートをカスタマイズ

さて、ここまではブラウザ上でできるカスタマイズでしたが、ここからCSSとjsを使ったカスタマイズをしていきましょう。

まずはRSSブロックで作られるHTMLを確認していきます。簡単に整理すると以下のようなHTML構造になっています。

<ul class='wp-block-rss'>
<li class='wp-block-rss__item'>
<div class='wp-block-rss__item-title'>
<a href='リンクURL'>記事タイトル</a>
</div>
<time datetime="" class="wp-block-rss__item-publish-date">日付</time>
<span class="wp-block-rss__item-author">投稿者</span>
<div class="wp-block-rss__item-excerpt">抜粋文章</div>
</li>
</ul>

HTML構造が判ったら、これに対応したCSSを書いていくだけです、今回はこのようなカスタマイズをしました。

/*リスト本体*/
ul.wp-block-rss{
    list-style: none;
    padding: 5px 15px 10px 15px;
    background-color: #fff;
    border: solid 2px #eaeaea;
}
ul.wp-block-rss::before{
    content: "RSS";
    color: #eaeaea;
    font-size: 24px;
}
/*リストアイテム*/
li.wp-block-rss__item{
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
    border-bottom: solid 1px #eaeaea;
}
/*記事タイトル*/
div.wp-block-rss__item-title a{

}
/*日付*/
time.wp-block-rss__item-publish-date{
    font-size: 10px;
    color: #6c7781;
}
/*投稿者*/
span.wp-block-rss__item-author{
    font-size: 10px;
    color: #6c7781;
}
/*抜粋*/
div.wp-block-rss__item-excerpt{
    font-size: 10px;
    color: #6c7781;
}

このCSSを読み込ませると以下のようなRSSブロックになります。

RSSのリンクを_blankにして別タブで表示させる

ここまでカスタマイズできれば満足ですが、1つだけ気になりました。

デフォルトだとRSSブロックのリンクはtarget=”_self”の状態になっています。

RSSは大抵の場合外部サイトになるので、できればtarget=”_blank”にして別タブで表示させたいですよね。

私はjsで以下のソースを書いてRSSブロックのリンクは全て_blankにしました。

$("div.wp-block-rss__item-title").find('a').each(function(){
    $(this).attr('target','_blank');
});

さぁこれで満足なカスタマイズができました。

プラグインを使わずにデフォルトの文章ブロックで簡単にRSSを使えるなんて便利ですね。カスタマイズも自由にできます。是非やってみてください。

この記事をシェアする

  • Twitterにシェア
  • facebookにシェア
  • LINEにシェア
  • POCKETにシェア

関連記事