【THE THORタグランキングのカスタマイズ】初心者向けに画像付きで解説

タグランキング
the thor タグランキング

 

Chiharu
Chiharu
今回は、THE THOR(ザ・トール)のタグランキングのカスタマイズ方法についてお伝えします。

 

タグランキング以外のTHE THORのカスタマイズ方法は、こちらにまとめてありますので参考になさってください。

関連記事

初心者さん・THE THORのTOPページをカスタマイズをしたいけど、ここの名前ってなに?・THE THORのTOPページは、なにからカスタマイズすればいい? Chi[…]

トップページカスタマイズ

 

THE THORのタグランキングとは

 

the thor タグランキング

THE THORのタグは、洋服など買うときについているタグをイメージしてもらえればわかりやすいと思います。

タグには、商品の値段や商品の情報が記載されていますよね。そのタグのブログ版です。

the thor タグランキング

実際の商品はタグにバーコードが記載されていますが、THE THORのタグはショートコードになります。

ショートコードは[a1111]のように [ ] で囲まれた数字やアルファベットで表示され、タグを作成すると自動で生成されます。

the thor タグランキング
生成されたショートコードをTOPページや投稿記事、固定ページの必要なところに入力するだけで商品画像や商品情報が表示されるようになります。

 

THE THORはタグを使ってランキングを作成できるので、ランキング用のショートコードを使って好きなところにランキングを表示することも可能です。

 

表示方法によってレイアウトが異なりますで下記の画像を参考にしてください。

 

the thor タグランキングタグランキングウィジェット
the thor タグランキングスタイルテキストウィジェット・投稿ページのランキング

 

THE THORのランキングのカスタマイズ手順

 

  • STEP1
    タグを作成
  • STEP2
    タグランキングを作成
  • STEP3
    好きなところに貼り付ける
    ・ウィジェットを使って貼り付ける
    (タグランキングウィジェット・スタイルテキストウィジェット)
    ・投稿・固定ページにショートコードを貼り付ける

 

THE THORサポート

当ブログでは、THE THORを購入したけれど「使い方がわからない…」という方のためにカスタマイズサポート・カスタマイズ代行をお受けしています。

これからブログをはじめる方のお悩み相談や、WordPressの相談・設定代行もお気軽にお問い合わせください。

 

【STEP1-1】THE THORのタグを作成

 

THE THORのタグは、カスタマイザーから作成できませんのでダッシュボードで作成します。

 

タグ
  1. ダッシュボード
  2. タグ管理
  3. 新規追加
タグ管理タイトル
タイトルに商品名やサービス名を入力します。
タグ管理中身

必要に応じて、口コミやレビューなどのプリセットパーツを入力

タグ
ページの下部のタグ管理オリジナルフォーマットを入力

the thor タグランキング

  1. 表示スタイル:利用する(全項目表示)を選択
    他の設定が反映されないことがありますので、利用する(全項目表示)を選択するようにしてください。
  2. おすすめ度:なし〜5をクリック、または数値を直接入力
    数値を選択する場合は、「4.8」など小数も入力できます。
  3. バナー広告ASP(アフィリエイト・サービス・プロバイダ)で発行されたアフィリエイト用のURLやバナー用リンクURLを貼り付け
  4. バナー横テキスト商品紹介やサービスの紹介などのテキストを入力
  5. 独自項目の見出しを入力
    (独自項目の見出しについては、下記で説明)
  6. 詳細ページボタン:リンクさせたいページの選択と、ボタンに表示させる文字を入力
    (商品やサービスについてのレビューなどブログ内リンク用のボタン)
  7.  AFページボタン:リンク先のURLとボタンに表示させる文字を入力
    (商品・サービスの公式ホームページや販売元のホームページなどへのリンク用のボタン)

詳細ページボタン・AFボタンは、リンクを設定しないとボタンは表示されません。

最後に 公開 をクリック

 

THE THORのタグの独自項目を追加することで、商品やサービスの比較をわかりやすく表示することができます。

 

見出しに単位や項目を入力して使います。具体的には、見出しに成分や内容量と入力して独自項目に成分名や100gと入力するということです。

 

見出しを設定してしまうと、すべてのタグに反映されてしまいアイテムごとの変更ができないのが難点です。ですので、個人的な意見ですが、この部分は空欄のままでいいかなと思っています。

 

独自項目の見出しのみ、カスタマイザーからカスタマイズします。

 

ダッシュボード カスタマイズ
  1. ダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー タグランク
  1. 基本設定
  2. タグ管理設定
  3. 独自項目の見出し設定

見出しを入力して 、カスタマイザー公開 をクリック

 

【STEP1-2】THE THORのタグのリンクボタンの色変更

 

THE THORのタグ・タグランキングに表示できるのは、サイト内リンクボタン・サイト外リンクボタンの2種類です。

 

サイト内リンクボタン(詳細ページ):ブログ内のページ移動する
サイト外リンクボタン(AFリンクページ):メーカーやショップのページなどの外部へ移動する

 

ボタンの色をそれぞれ指定することができるので、下記の画像でボタンの位置を確認して色を変更するようにしてください。

 

リンクボタン位置

 

ダッシュボード カスタマイズ
  1. ダッシュボード
  2. 外観
  3. カスタマイズ
カスタマイザー タグランク
  1. 基本設定
  2. タグ管理設定
  3. ボタンカラー設定

色の指定は「色を選択」をクリックしてカラーパネルが表示されたら、白い丸や白い四角をクリックしながら動かして色を選択、または、カラーコードを直接入力する

最後に 公開 をクリック

 

【STEP2】THE THORのタグランキングを作成

 

THE THORのタグランキングを作成するには、ランキングに表示する数と同じ数のタグ(3位までならタグが3つ)が必要になりますので、まずはタグを作成するようにしてください。

 

タグの準備ができましたら、ダッシュボードでタグランキングを作成します。

 

タグランキング
  1. ダッシュボード
  2. タグランキング
  3. 新規追加

ダッシュボード タグランキング

  1.  タイトル:ランキングのタイトルを入力
  2. 表示スタイル:他の設定が反映されないことがありますので、利用する(全項目表示)を選択
  3. ランクマーク:下記の画像から選択
    (ランキングに表示するときの順位につけるマークのこと)
    タグランキングスター
  4. タグを指定ダッシュボード タグランキング①▲▼をクリックして、ランキングで1位にするタグを選択
    行を追加をクリックして、2位、3位とタグを増やす
    タグの順位変える:↑↓をクリック
    タグを削除:削除ボタンで削除

最後に 公開 をクリック

 

【STEP3】THE THORタグランキングを表示

 

THE THORタグランキングを表示する方法は、3つあります。

 

・タグランキングウィジェットを使う
・スタイルテキストウィジェットを使う
・ショートコードを貼り付ける

 

投稿ページ・固定ページにランキングを表示するには、ショートコードを記事内に貼り付けます。TOPページ・サイドカラム・フッターにランキングを表示するには、ウィジェットを使って表示します。

 

ウィジェットとは、Webサイトにさまざまな情報やメニュー、機能を追加することのできるパーツのことです。THE THORのウィジェットでランキングを表示できるのは以下の2つのウィジェットです。

 

タグランキング:ランキングのタイトル、商品名・サービス名など表示できるものが限られる
スタイルテキスト:口コミなどのプリセットパーツや独自項目など、項目を増やして表示することが可能

 

スタイルテキストウィジェットとショートコードを使った表示はレイアウトが同じですが、タグランキングウィジェットを使うとレイアウトが変わりますので、下記の画像で確認するようにしてください。

 

the thor タグランキングタグランキング
the thor タグランキングスタイルテキスト
the thor タグランキングショートコード

 

ウィジェットの設定は、ダッシュボード・カスタマイザーどちらからも設定ができますが、今回はダッシュボードから設定する方法をお伝えします。

 

【STEP3-1】タグランキングウィジェットを使って表示

 

ダッシュボード ウィジェット
  1. ダッシュボード
  2. 外観
  3. ウィジェット
タグランキングウィジェット
[THE]タグランキングをクリック

タグランキングウィジェット

好きな位置を選択して、ウィジェットを追加をクリック

ダッシュボード タグランキング

  1. Topページに表示したいランキングのタイトルを入力
  2. Topページに表示したいランキングを、▲▼をクリックして選択
  3. 最後に 保存 をクリック

 

【STEP3-2】スタイルテキストウィジェットで表示

 

ダッシュボード タグランキング
  1. ダッシュボード
  2. タグランキング
  3. タグランキング一覧
ダッシュボード タグランキング
表示したいランキングのショートコードをコピー
スタイルテキストウィジェット
  1. ダッシュボード
  2. 外観
  3. ウィジェット
  4. スタイルテキスト
スタイルテキストウィジェット

好きな位置を選択して、ウィジェットを追加をクリック

ダッシュボード タグランキング
  1. タグランキングでコピーしたショートコードを貼り付け
  2.  保存 をクリック

 

【STEP3-3】ショートコードで表示

 

ダッシュボード タグランキング
  1. ダッシュボード
  2. タグランキング
  3. タグランキング一覧
ダッシュボード タグランキング
表示したいランキングのショートコードをコピー
ダッシュボード 投稿新規追加
  1. ダッシュボード
  2. 投稿または固定ページ
  3. 新規追加
ダッシュボード 投稿ページ

ショートコードを貼り付け 公開 をクリック

記事の前後・記事の途中に貼り付けることが可能です。

 

タグランキングの表示のカスタマイズは完了です。

 


 

おつかれさまでした。

 

以上、【THE THORタグランキングのカスタマイズ】初心者向けに画像付きで解説でした。

 

ランキングって、なんだか無意識に目がいってしまいますし、ランキングをきっかけに商品やサービスを詳しく知りたくなることもありますので、ぜひお試しください。

 

わからないことや、ご相談は、お気軽にお声がけくださいね。

 

お問い合わせはこちら

 

お読みいただき、ありがとうございました。

Chiharu