【SWELLブロック】関連記事ブロックで簡単にブログカード作成!

2020 1/03
【SWELLブロック】関連記事ブロックで簡単にブログカード作成!
記事上のウィジェットエリア

SWELLでは、関連記事へのリンクをブログカードとして表示するためのショートコードを用意しています。

このショートコードを簡単に利用できるように、ブロックエディター(Gutenberg)では専用ブロックの「関連記事ブロック」を用意しています。

このページでは、その「関連記事ブロック」の使い方を解説していきます。

記事のタイトルから検索して自動でショートコードを作成してくれる機能を用意しています。

ちなみに関連記事のブログカードとは、これのことです

目次前広告表示エリア
目次

「関連記事ブロック」の使い方

SWELLブロック」パネルの中に「関連記事」と書かれたブロックを用意していますので、こちらを使います。

関連記事ブロック

このブロックを選択すると、以下のようなブロックが挿入されます。

画像

左側に「投稿IDを直接入力するエリア」、右側には「タイトルから記事を検索できる入力エリア」があります。

お好きな方で記事を指定してください。

URLをペーストするか入力して検索」と書かれてしまっていますが、URLはペーストしても記事は検索できませんのでご注意ください。

記事タイトルから検索する様子です

関連記事の検索

「関連記事ブロック」の少し特殊な設定項目

ver. 1.2.4より、「関連記事ブロック」を選択している間、エディターの右側に次のような設定パネルが表示されるようになりました。

関連記事ブロックの設定パネル
関連記事ブロックの設定パネル

この「関連記事設定」パネルから設定できる項目についても解説していきます。

「あわせて読みたい」の文字を変更する

キャプション」と書かれた入力エリアに任意の文字列を入力すると、「あわせて読みたい」と表示されている部分の内容を変更できます。

例えば、「参考にどうぞ」と入力して保存すると、以下のような表示になります。

キャプションを編集した時の表示
キャプションを編集した時の表示

リンクを別窓で展開する

新しいタブで開く」のスイッチをオンにすると、そのブログカードのリンクは別窓で表示されます。

ただし、この設定は内部リンクのみ有効です。次に紹介する外部サイトへのブログカードの場合、強制的に「別窓表示」がオンとなります。

外部サイトへのリンクをブログカード化する

エディター側に設置されている入力エリアは「投稿ID」と「投稿タイトルの検索」でしたが、これらは内部リンク先を指定・検索するためのものです。

当初は内部リンクにのみ対応していたブログカード化機能ですが、ver. 1.2.4から、外部サイトへのリンクにも対応できるようになりました。

そこで、「関連記事ブロック」でも、外部サイトのURLを指定することができるようになっています。

パネルにある「外部サイトのURL」と書かれた入力エリアに、URLを設定するだけです。

この項目が有効になっている場合、IDの指定などは無効になり、URLへのリンクが優先されます。

記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次