THE THORでショートコードを使ってみたいけど、たくさんあってすぐに作成できずにいませんか？
わたしも使いこなせるようになるために、ここではTHE THORのショートコードについてアウトプットして、忘れたらまた見るようしたいと思います！ほんとすぐ忘れちゃうので…
もしあなたが初心者さんでも、THE THORのショートコードさえ覚えてしまえば、短いコードを呼び出すだけで、複雑な処理でもかんたんに効率化できて非常に便利です。
ということで、今回はTHE THORのショートコードを紹介しながら使い方も解説していきますよ。
THE THORのショートコードを使うには？
THE THORのショートコードを使うには、投稿画面に装備されている「ショートコード」のプルダウンをクリックして出てくる項目から選択します。
使うときの操作はとてもかんたんですが、ほとんどのショートコードは、前もってカスタマイズする必要があります。
THE THORのショートコードは全部で12種類あります！
THE THORショートコード一覧
- 目次
- 記事内広告
- カテゴリー指定記事一覧 （新着順）
- カテゴリー指定記事一覧 （ランダム順）
- カテゴリー指定記事一覧 （ランク順）
- ブログカード（外部サイトリンク）
- サイトカード（内部記事リンク）
- カスタムメニュー
- 年指定
- 月指定
- 日指定
- 「スターリスト」
THE THORのショートコードをくわしく解説
ではさっそく、THE THORのショートコード12種類についてくわしく解説していきますね。
THE THORショートコード 「目次」
目次はショートコードを使わない場合、最初の見出しのすぐ前に表示されるのが一般的ですが、別の場所に表示したいときに使います。
好きな場所にカーソルをあわせて、【ショートコード】→【目次】をクリックすれば、目次の表示場所を変えることができます。
THE THORショートコード 「記事内広告」
記事内に広告を表示したいときに使いますが、ショートコードを使うためには、事前に「個別ページ用広告設定」をしておかなければなりません。
「個別ページ用広告」を設定する
【外観】→【カスタマイズ】→【広告設定[THE]】→【個別ページ用広告設】へすすみ、記事内広告タグを入力する欄に広告のコードを入力しておきましょう。
【最初のhタグの手前に表示する〜5番目のhタグの手前に表示する】は自由にえらび、【背景スタイルを無効にする】はチェックを入れて、最後に「公開」を押してください。
「背景スタイルを無効にする」とは、広告の背景にあるストライプを消すことだね♪
個別ページに記事内広告を設置する
個別ページ内で記事内広告を貼りつけたい場所にカーソルをあわせたら、【ショートコード】→【記事内広告】をクリックして、ショートコードを挿入します。
すると以下のような感じで、設定済みの広告が表示されますよ。
THE THORショートコード 「カテゴリー指定記事一覧」
ブログ内で、読者にとりわけ読んでほしい記事が複数ある場合、カテゴリ指定記事一覧を入れるといいでしょう。
[ archivelist cat=1 num=5 ] カテゴリ指定記事一覧（新着順）
[ randlist cat=1 num=5 ] カテゴリ指定記事一覧（ランダム順）
[ ranklist cat=1 num=5 ] カテゴリ指定記事一覧（ランク順）
設定方法ですが、記事内の好きな場所にカーソルをあわせて、【ショートコード】→【カテゴリ指定記事一覧（新着順）か（ランダム順）か（ランク順）】をそれぞれクリックしたら、次にショートコード内の数字を指定していきます。
archivelist cat、randlist cat、ranklist cat =表示したいカテゴリのカテゴリーidナンバーを入力します。（idをコンマで区切って複数指定もできます。）
num =表示する記事数を自由に入力します。
例えばランク順のショートコードで、表示したいカテゴリのカテゴリーidナンバーが5、表示する記事数が3だった場合、以下のようになります。
[ ranklist cat=5 num=3 ]
実際の表示はこんな感じ↓
オフラインのためランキングが表示できません
THE THORショートコード 「ブログカード（外部サイトリンク）」
ブログカード（外部サイトリンク）とは、外部サイト向けのカード型リンクのことですが、テキストリンクよりも際立つのが特徴です。
挿入方法ですが、まずは記事内の好きな場所にカーソルをあわせて、【ショートコード】→【ブログカード（外部サイトリンク）】をクリックします。
次にブログカードを生成しますが、外部サイトのURLをショートコードの後ろに入力するだけなので、とてもかんたんですよ。
blogcard url = 外部サイトURL
例として、外部サイトのURLを入力すると以下のようになります。
[ blogcard url=https://note.com/bo_zu/n/n808f8e84252d ]
実際にはこんな感じで表示されます↓
はじめまして！キャナ子です。 登録してから数年放置状態だったnoteを、この度引っ張り出してみました。 まともに記事…
THE THORショートコード 「サイトカード（内部記事リンク）」
サイトカード（内部記事リンク）は、投稿記事の好きな場所に、自分のブログ内の記事を表示したいときに使います。
挿入方法ですが、投稿記事の好きな場所にカーソルをあわせて、【ショートコード】→【サイトカード（内部記事リンク）】をクリックしてください。
続いてサイトカードを生成しますが、自由に設定できる部分もあるので、必要であれば変更してみましょう。
例えば、わたしのブログ内の記事を、別ウィンドウで開く設定にした場合のショートコードは以下のようになります。
[ sitecard subtitle=関連記事 url=https://good-sun-biz.com/the-thor-balloon-function/ target=blank ]
前半url=https:〜の部分 →httpsの前はスペースが入らないように注意。
後半targetの部分 → targetの前は半角のスペースが必要です。
sitecard subtitle =関連記事
デフォルトは「関連記事」となっており、このままでもOKですが「あわせて読みたい」などに変更できます。
url =
内部記事のURLを入力します。
target =
リンク先をどのウィンドウに表示するかを指定できます。
デフォルトは現在のタブで開くようになっていますが、新しいタブで開くようにしたいなら「blank」を入力して変更しましょう。
ショートコードを挿入すると実際はこんな感じ↓
THE THORの吹き出し機能を使ってみたいけど、使い方や画像の設定をどうやるのかわからず、迷っていませんか？ わたしも吹き出しをよく使っていますが、記事が一気ににぎやかになりますし、アイコンにアバターを作って設定[…]
「THE THOR無料サポート」受付中！質問、疑問etc…どんな些細なことでもOK！お問い合わせはこちらからお気軽にどうぞ！
THE THORショートコード 「カスタムメニュー」
事前に作成したメニューを、投稿記事内に表示したいときに使用します。
メニューの作成は、ダッシュボートの【外観】→【カスタマイズ 】→【メニュー】で自由に作成しておきましょう。
メニュー作成方法をくわしく知りたい方はこちらを参考にしてください↓
THE THORのグローバルメニューをカスタマイズしたいけど、すぐにできるのかな？大事な部分ってよく聞くけど絶対に必要？そんな疑問を抱えていませんか？ トップページを見た読者に対して、ブログ内をサクサク閲覧してもら[…]
挿入方法は、こちらも記事内の好きな場所にカーソルをあわせて、【ショートコード】→【カスタムメニュー】をえらび、ショートコードの後ろ「”」と「”」の間に作成したメニュー名を入力すればOKです。
例えば、フッターメニューであれば → [ customenu menu=“フッターメニュー” ]
ショートコードを挿入すると実際はこんな感じ↓
THE THORショートコード 「年指定」「月指定」「日指定」
続いて、「年指定」「月指定」「日指定」ですが、記事内に挿入することで、読者は訪問日を見ることができます。
[ date-year number=0 ] 「年指定」
[ date-month number=0] 「月指定」
[ date-day number=0 ] 「日指定」
3つとも使い方は同じで、投稿記事の好きな場所にカーソルをあわせてたら、【ショートコード】→【年指定】【月指定】【日指定】をそれぞれクリックしてください。
デフォルトは「０」になっていますが、そのまま何もいじらなくてOKです。
例えば、ショートコードを以下のように年月日順でならべると↓
[ date-year number=0 ] [ date-month number=0] [ date-day number=0 ]
実際はこんな感じ↓
2024 11 21THE THORショートコード 「スターリスト」
最後にスターリストですが、これは「星評価」を表示したいときに使います。
一般的に、比較記事やレビュー記事で使うと便利なのではないでしょうか。
挿入方法ですが、記事内の好きな場所にカーソルをあわせて、【ショートコード】→【スターリスト】をクリックします。
デフォルトは数字が「3.5」になっていますが、数字を変えると評価が変更できます。
0 , 0.5 , 1 , 1.5 , 2 , 2.5 , 3 , 3.5 , 4 , 4.5 , 5 から選択してください。
例えば、数字を「４」に変えてみると↓
[ star-list number=４ ]
実際はこんな感じ↓
こんなかんたんに星評価を使えて便利ですね！
まとめ
THE THORのショートコード全12種類の紹介と使い方を解説してきましたが、たくさんあって全部を覚えるのは大変だと感じたかもしれませんね。
わたしはまず、よく使いそうなサイトカードから覚えていきましたよ。
ショートコードを使いこなすまでは少々時間がかかりそうなので、忘れたらまたこのページを参考にしてくださいね。（わたし自身もそうしてます！）
今回の記事でなにかわからないことはありませんでしたか？質問や相談、感想や雑談などなんでも受け付けているので、どうぞお気軽にメールくださいね↓
