SWELLで用意されているショートコードの使い方【大全】

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

SWELLで用意されているショートコードの種類やその使い方を教えてほしいです。

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

本記事で学べること

  • ブロック化されていないショートコードの使い方
  • ブロック化もされているショートコードの使い方
  • アイコン用ショートコードの使い方
本記事の内容

【SWELL】ブロック化されていないショートコードの使い方

ここでは以下の順に解説していきます。

  • 記事内広告
  • 目次
  • 5段階スター
  • デバイス別改行コード
  • ログイン制限コンテンツ

記事内広告

[ad]

ショートコード表示例
[ad]

目次

[swell_toc]

ショートコードなしの場合

目次(本記事の内容)はショートコードで呼び出さなければ最初のH2見出しの上に表示されます。

ショートコードありの場合

H2見出しの下に[swell_toc]で目次を表示させました。

5段階スター

[review_stars 評価の点数]

ショートコード(記入例)表示例
[review_stars 4.5]

自由な段階で表示が可能に!

[review_stars 評価の点数/何段階か]

ショートコード(記入例)表示例
[review_stars 2.5/3]

デバイス別改行コード

PCサイズでのみ改行

[pcbr]

ショートコードそれほど昔のことではありません。[pcbr]その名は忘れましたが、ラ・マンチャ地方のある村に、槍立て台に槍、古い盾、痩せ馬と猟犬と住むような型通りの郷士がおりました。
表示例それほど昔のことではありません。
その名は忘れましたが、ラ・マンチャ地方のある村に、槍立て台に槍、古い盾、痩せ馬と猟犬と住むような型通りの郷士がおりました。

SPサイズで閲覧した時には改行されていませんが、PCサイズで閲覧した時には「それほど昔のことではありません。」の後で改行されています。

SPサイズでのみ改行

[spbr]

ショートコードそれほど昔のことではありません。[spbr]その名は忘れましたが、ラ・マンチャ地方のある村に、槍立て台に槍、古い盾、痩せ馬と猟犬と住むような型通りの郷士がおりました。
表示例それほど昔のことではありません。
その名は忘れましたが、ラ・マンチャ地方のある村に、槍立て台に槍、古い盾、痩せ馬と猟犬と住むような型通りの郷士がおりました。

PCサイズで閲覧した時には改行されていませんが、SPサイズで閲覧した時には「それほど昔のことではありません。」の後で改行されています。

ログイン制限コンテンツ

ログインしている人にだけ(運営者)

[only_login]
ログイン中ユーザーにだけ表示したいコンテンツをここに
[/only_login]

ログインしていない人にだけ(読者)

[only_logout]
非ログインユーザーにだけ表示したいコンテンツをここ
に[/only_logout]

表示例

ログインしている人にだけ(運営者)※読者の方は空欄になっていると思います。
ログインしていない人にだけ(読者)※読者の方には文章が表示されていると思います。
それほど昔のことではありません。その名は忘れましたが、ラ・マンチャ地方のある村に、槍立て台に槍、古い盾、痩せ馬と猟犬と住むような型通りの郷士がおりました。

ちなみに、ログインしている場合は、下記画像の通り文章が表示されていません。

【SWELL】ブロック化もされているショートコードの使い方

ここでは、以下のSWELLブロックについて順に解説していきます。

  • ブログパーツ
  • カスタムバナー
  • 関連記事ブログカード
  • ふきだし
  • フルワイドコンテンツ
  • 投稿リスト

※上記のブロックは編集画面上で設定の変化を確認しながら作業することができます。

ブログパーツ

公式サイトの記事はこちら

SWELL
登録したコンテンツを自由に呼び出せる「ブログパーツ」機能 | WordPressテーマ SWELL ここでは、WordPressテーマ「SWELL」で使用可能な「ブログパーツ」機能について解説していきます。 SWELLでは「ブログパーツ」として登録したコンテンツを、ショートコード...

IDから呼び出す場合

[blog_parts id="投稿ID"]

または

[ブログパーツ id="投稿ID"]

呼び出し例

下記は[blog_parts id="8264"]で呼び出しました。

この記事を書いた人
HINO Hikari(ヒノ ヒカリ)のアバター HINO Hikari ヒノ ヒカリ

WordPressオリジナルテーマ制作まで経験する。その後、妻や周囲の反対を押し切り退職。営業支援コミュニティでノウハウを学んだ後、Web制作会社への営業を開始。しかし、営業のストレスに耐えきれず逃げ出す。現在は、前職の作業療法士(リハビリの専門職)として働く傍らブログでコーディングやWordPressに関する情報を発信中。

パーツ名から呼び出す場合

[blog_parts name="ブログパーツ名"]

または

[ブログパーツ name="ブログパーツ名"]

呼び出し例

※下記に[blog_parts name="この記事を書いた人"]で「この記事を書いた人」が呼び出されるはずですが呼び出されません、、、(呼び出し方を間違っていたらスミマセン🙇)。

ブログパーツから呼び出す場合

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

挿入後、「– ブログパーツを選択 –」から「この記事を書いた人」を選択します。

カスタムバナー

公式サイトの記事はこちら

SWELL
画像編集の必要なし!便利なカスタムバナー機能の使い方 | WordPressテーマ SWELL SWELLではショートコードを使って簡単にバナー画像を作成することができます。 こんな感じです カスタムバナーの使い方 使用できる基本的な属性値 title="":バナータイト...

ショートコードで呼び出す場合

[custom_banner title="タイトル" text="テキスト" link="リンク先" img_url="画像"]

または

[カスタムバナー title="タイトル" text="テキスト" link="リンク先" img_url="画像"]

呼び出し例

下記は[custom_banner title="カスタムバナーのタイトル" text="カスタムバナーのテキスト" link="https://hrdyuic.com/" img_url="https://hrdyuic.com/wp-content/uploads/kate-trysh-Dnkr_lmdKi8-unsplash.jpg"]で呼び出しました。

ショートコードなしで作成する場合

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「バナーリンク」から作成できます。

関連記事ブログカード

公式サイトの記事はこちら

SWELL
ブログカードを表示できるショートコードの使い方 | WordPressテーマ SWELL SWELLでは、関連する内部リンクをブログカードとして表示するためのショートコードを用意しています。 これのことです ブログカードを表示するショートコードの使い方 ショ...

ショートコードで呼び出す場合

[post_link id="投稿ID"]

呼び出し例

下記は[post_link id="11994"]で呼び出しました。

あわせて読みたい
【SWELL】投稿リストの使い方をおすすめ記事の作り方を例に解説 SWELLブロックの投稿リストの使い方を知りたいですか?本記事では、おすすめ記事の作成・設置を例にして投稿リストやブログパーツの使い方からサイドバーへの設置方法まで解説しています。SWELLブロックの投稿リストやブログパーツの使い方、サイドバーへの設置方法を知りたい方は是非ご覧ください。

ショートコードなしで作成する場合

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「関連記事」から作成できます。

ふきだし

公式サイトの記事はこちら

SWELL
管理も簡単!SWELLのふきだし機能の使い方 | WordPressテーマ SWELL このページでは、SWELLに標準搭載されている、「ふきだし機能」の使い方を紹介します。 ふきだしセットを追加する SWELLで使えるふきだしは、色や形、アイコン画像などの設...

ショートコードで呼び出す場合

[ふきだし set="セット名"]テキストをここに[/ふきだし]

または

[ふきだし id="セットID"]テキストをここに[/ふきだし]

呼び出し例

下記は[ふきだし set="初心者ブロガー"]テキストをここに[/ふきだし]で呼び出しました。

初心者ブロガー
テキストをここに

下記は[ふきだし id="1"]テキストをここに[/ふきだし]で呼び出しました。

初心者ブロガー
テキストをここに

セット名とセットIDの探し方

管理画面メニューから、「ふきだし」を選択します。

セット名は、下記画像の初心者ブロガーになります。

セットIDは、下記画像の「id=”1″」の1になります。

ショートコードなしで作成する場合

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「ふきだし」から作成できます。

  • 手順①:「ふきだし」を挿入します。
  • 手順②:「ふきだしセット」から吹き出しを選択します。

フルワイドコンテンツ

公式サイトの記事はこちら

SWELL
フルワイドコンテンツ用ショートコードの使い方 | WordPressテーマ SWELL このページでは、WordPressテーマ『SWELL』でのフルワイドコンテンツ用ショートコードの使い方を解説していきます。 フルワイドコンテンツがどういうものかは、ブロックエ...

ショートコードで呼び出す場合

[full_wide_content bg="#000" color="#fff"]
ここにコンテンツを自由に配置
[/full_wide_content]

または

[full_wide_content bgimg="https://~画像URL~"]
ここにコンテンツを自由に配置
[/full_wide_content]

呼び出し例

ここにコンテンツを自由に配置

ショートコードなしで作成する場合

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「フルワイド」から作成できます。

投稿リスト

公式サイトの記事はこちら

SWELL
投稿リストを簡単に呼び出せるショートコードの使い方 | WordPressテーマ SWELL このページでは、WordPressテーマ『SWELL』で投稿リストを簡単に呼び出せるショートコードの使い方を解説していきます。 カテゴリーやタグ・表示件数・レイアウトなどを指...

ショートコードで呼び出す場合

[post_list]

呼び出し例

下記は[post_list type="card" count="3" col="3" col_sp="1"]で呼び出しました。

ショートコードなしで作成する場合

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「投稿リスト」から作成できます。

【SWELL】アイコン用ショートコードの使い方

ここでは、以下の順に解説します。

  • IcoMoon
  • Font Awesome

公式サイトの記事はこちら

SWELL
アイコンを簡単に呼び出せるショートコードの使い方 | WordPressテーマ SWELL SWELLでは、数種類のアイコンをフォントとして読み込んでいます。(例: / / ) このページでは、これらのアイコンを文中で簡単に呼び出すためのショートコードの使い方を...

IcoMoon

ショートコードでの呼び出し方

[icon ここにアイコンクラス名]

または

[アイコン ここにアイコンクラス名]

表示例

ショートコード(記述例)アイコン(表示例)
[icon icon-swell]

アイコンとクラス名一覧

icon-caret-downicon-caret-lefticon-caret-righticon-caret-up
icon-chevron-downicon-chevron-lefticon-chevron-righticon-chevron-up
icon-homeicon-tagicon-foldericon-file-empty
icon-bubbleicon-bubblesicon-eyeicon-link
icon-shareicon-filmicon-imageicon-heart
icon-star-emptyicon-star-fullicon-star-halficon-blocked
icon-infoicon-info-fillicon-alert-outlineicon-alert
icon-modifiedicon-postedicon-settingsicon-download
icon-lock-openicon-lock-closedicon-personicon-mail
icon-carticon-phoneicon-penicon-quill
icon-flagicon-bookmarkicon-bookicon-megaphone
icon-thumb_downicon-thumb_upicon-light-bulbicon-light-bulb-fill
icon-circleicon-xicon-triangleicon-check
icon-hatenaicon-minusicon-plusicon-toc
icon-searchicon-close-thinicon-menu-thinicon-more_arrow
icon-swellicon-tiktokicon-roomicon-amazon
icon-codepenicon-facebookicon-feedlyicon-github
icon-hatebuicon-instagramicon-lineicon-medium
icon-pinteresticon-pocketicon-rssicon-tumblr
icon-twittericon-wordpressicon-youtube

Font Awesome

SWELLでFont Awesomeを使えるようにする

管理画面メニューから、「SWELL設定」を選択します。

タブを「Font Awesome」に切り替えます。

  • 読み込み方:「CSSで読み込む」を選択します。
  • バージョン:「v6」を選択します。

これでSWELLで「Font Awesome」が使えるようになりました。

ショートコードでの呼び出し方

[icon class="ここにアイコンのクラス名"]

または

[アイコン class="ここにアイコンのクラス名"]

表示例

ショートコード(記述例)アイコン(表示例)
[アイコン class="fa-solid fa-house"]

クラス名の探し方

公式サイトにアクセスします。

あわせて読みたい
Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

トップページから、「Icons」を選択します。

その後、「2,025 free and open-source icons」を選択します。

アイコンの一覧ページが開いた後、表示させたいアイコンを選択します。

表示されたアイコンのクラス名をコピーします。

今回であればfa-solid fa-houseです。

以上がクラス名の探し方になります。

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

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

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

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

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

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