【SWELL】投稿リストの使い方をおすすめ記事の作り方を例に解説

当ページのリンクには広告が含まれています。
初心者ブロガー

利用できるウィジェットに「[SWELL]人気記事」や「[SWELL]新着記事」はあるけど「おすすめ記事」がないので設置する方法があれば教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • ブログパーツの使い方(おすすめ記事の作り方を例に解説)
  • 投稿リストの使い方(おすすめ記事の作り方を例に解説)
  • 「おすすめ記事」のサイドバーへの設置方法
本記事の内容

SWELLの投稿リストで作ったおすすめ記事をサイドバーに設置した例

サイドバーに「おすすめ記事」が設置されています。

今回の記事では上記画像の完成を目指して解説していきます。

SWELLの投稿リストの使い方をおすすめ記事の作り方を例に解説

管理画面メニューから、「ブログパーツ」>「新規追加」を選択します。

投稿画面から、「ブロック挿入ツールを切り替え」>「ブロック」>「SWELLブロック」>「投稿リスト」を選択します。

投稿画面から、「設定」>「ブロック」>「Pickup」を選択します。

  • 投稿IDを直接指定:管理画面メニューの「投稿」>「投稿一覧」の記事ごとに割り当てられているIDを入力します。

投稿IDの表示場所

タブを「ブロック」から「ブログパーツ」へ切り替えます。

  • 用途:(今回は)「ブロックパターン」にチェックを入れます。 ※用途は追加することができます。

これでブログパーツに「おすすめ記事」を追加できました。

ブログパーツ一覧に「おすすめ記事」が追加されています。

SWELLの投稿リストとブログパーツで作成したおすすめ記事の表示のさせ方

  • 方法①:ショートコードで表示させる。
  • 方法②:SWELLブロックのブログパーツで表示させる。
  • 方法③:[SWELL]カスタムパターンで表示させる。

方法①:ショートコードで表示させる。

投稿画面の段落に「ショートコード」をコピペするだけです。

ショートコードとは:ブログパーツ一覧に掲載されている「呼び出しコード」のことです。

方法②:SWELLブロックのブログパーツで表示させる。

投稿画面から、「ブロック挿入ツールを切り替え」>「ブロック」>「SWELLブロック」>「ブログパーツ」を選択します。

「– ブログパーツを選択 –」からおすすめ記事を選択で完了です。

方法③:[SWELL]カスタムパターンで表示させる。

投稿画面から、「ブロック挿入ツールを切り替え」>「パターン」>「カスタムパターン」>「おすすめ記事」を選択で完了です。

方法①〜③を表示させてみる。

特に違いはありません。

方法①〜③の違いを確認してみる。

ブログパーツのおすすめ記事数を3件から2件に変更します。

再度、表示させてみます。

「[SWELL]カスタムパーツ」のみ変更が反映されていません。

以上より、方法①〜③の使い所としては、

  • ショートコード:ウィジェットで使用 ※そもそもブログパーツは使用できない。
  • ブログパーツ:投稿で使用 ※挿入したブログパーツを視覚的に確認できる。
  • [SWELL]カスタムパーツ:投稿で使用 ※ただし、編集することを想定。例えば、H 2見出しの見た目をカスタムパーツとして追加しておきタイトルのみ後で入力するなど。

SWELLブロックの投稿リストで作成したおすすめ記事をサイドバーに設置

下記画像をご覧の通り、ウィジェットには「おすすめ記事」がないのでブログパーツ一覧のショートコードを利用してサイドバーに「おすすめ記事」を設置させていきたいと思います。

管理画面メニューから、「外観」>「ウィジェット」を選択します。

ウィジェットが表示されました。

カスタムHTMLをトップページ専用サイドバーにドラッグ&ドロップします。

トップページ専用サイドバーの役割:トップページ専用サイドバー内のウィジェットは「共通サイドバー」の上部に表示されます。

  • タイトル:「おすすめ記事」と入力します。
  • 内容:「ショートコード」をコピペします。

トップページを表示させます。

サイドバーに「おすすめ記事」が設置されています。

以上で解説を終わります。

本記事が読者の疑問を解決する役に立つと幸いです。

最後まで読んで頂きありがとうございました。

おわり。

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

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容