WordPressテーマ「THE THOR」の操作方法に関する記事です。
私は「THE THOR」のデザインに惹かれて購入して一年経ちますが、標準搭載されている機能が多く、まだ使ったことがない機能もあります。
せっかくお気に入りのテーマを導入したものの、
- 使い道がわからない機能がある
- 使いたいけど操作方法がわからない機能がある
そんな「THE THORユーザー」さんも、多くいるのではないでしょうか？
今回は、私がずっと使ってみたかった「ある機能」について、使用方法を解説します！
その機能とは、
「タブコンテンツ」
です。
タブコンテンツとは、こういうやつです。
詳しい内容は、記事で紹介します！
この記事はこんな人にオススメ
- これ、使ってみたかったんだよ！
- どうやったら使えるのか、誰か教えて！
- そもそも、こんな機能知らなかった！
WordPressのダッシュボードで編集できる機能
むずかしい操作ではありません
一緒にチャレンジしてみましょう！
2020年6月からブログをはじめました。
昼間は個人商店を営んでいます。
私の経験談が「誰かの悩みのヒント」になれたらいいな。
そんな想いで記事を執筆しています。
THE THORの「タブコンテンツ」とは？
設置方法を紹介する前に、全く知らない方のために説明をします。
すぐに手順を知りたい方は、こちらからジャンプしてください。
→「タブコンテンツ」を設置する方法
複数のコンテンツを「タブ」で切り替えて表示できる機能
とりあえず説明する言葉を並べましたが、わかりにくいですよね？
「百聞は一見にしかず」ということで、THE THORの公式サイトで実際に紹介されているデモサイトを覗いてみましょう！
参考にするデモサイトは「01」のサイト
デモサイトを開いたら、下へスクロールしてみましょう。
画面右側の「サイドバーエリア」にある「このサイトの管理者」の次に出てくるパーツが「タブコンテンツ」です。
スマホで見ている方は、下の方に表示されています。
「タブ」を切り替えると、中身の「コンテンツ」部分の表示が変わります。
コンテンツは3つ表示されています。
サンプルなので、2枚目と3枚目は同じ画像ですが、タブが切り替わっているのを確認できます。
１枚目
２枚目
３枚目
これが「タブコンテンツ」という「ウィジェット」のひとつです。
「タブコンテンツ」があると、サイトの雰囲気が「プロっぽく」なりますよね。
どんな使い方をするの？
クールな機能だということがお分かりいただけたと思いますが、デザインを良くするための機能ではなく、情報発信ツールとして有効な使い方があります。
「タブコンテンツ」のオススメの使い方を紹介します。
①「リンク付きのバナー広告」を埋め込む
アフィリエイト広告を導入しているブロガーなら、「画像付きのバナー広告」を並べる使い方が有効です。
常設したいアフィリエイト広告などをサイドバーにいくつか表示させたいとき、広告の数が多すぎると目障りに感じる読者（サイト訪問者）もいます。
「タブコンテンツ」なら、一つのスペースに複数の広告を埋め込めるので、「広告ばかり」というマイナスな印象を軽減できます。
表示されない広告があるのはデメリット？
しかし同時に、複数の広告を「タブコンテンツ」に埋め込んでしまうと、「バナー画像が表示されない広告」が存在することになります。
それらの広告は、読者がタブを操作して広告を表示させなければいけないので、広告効果が薄いように感じるかもしれません。でも、そこは発想を逆転して考えましょう。
2つ目以降のコンテンツが表示されるということは、読者が「わざわざクリックしている」ということです。
これは「興味がある」から起こす行動です。
そう考えれば、広告をクリックした後の行動として「成約する確立」が少し高くなる可能性があります。
他にも、読者が「何に反応し、何に興味があるのか」を知る手段にもなります。
「広告が見えないこと」は、かならずしも悪い事ではありません。
②複数のブログをまとめて紹介する
運営しているブログがひとつではなく、複数運営している人もいるでしょう。
せっかくなら、訪問してくれた読者を、自分が運営している他のブログにも誘導したいですよね？
そんなときには、「タブコンテンツ」で運営している複数のブログを一覧として掲載できます。
他にも、TwitterやInstagramといった「SNS」のアカウントリンクを掲載するなど、自分の宣伝のために使うといいでしょう。
➂お店や会社の関連メディアを紹介する
「②」と似ていますが、個人ブログではなく、お店や会社のブログで「THE THOR」を使っている場合を想定しています。
実際に私も「店主のブログ」を「THE THOR」を使って運営しています。
「タブコンテンツ」で、関連サイトをまとめて掲載しています。
- 公式ホームページ
- 店主のブログ
- ネット販売ページ
- 開催中のキャンペーン など
「タブコンテンツ」のメリット
- 情報をカテゴライズして表示できる
- 最小限のスペースで複数の情報を載せられる
- 読者のストレスを軽減できる
解説記事を出した理由
「THE THOR」は、公式サイト内で紹介されている「おしゃれなデモサイト」と同じデザインを、簡単に自分のサイトのデザインに適用することができます。
「9つ」のデザイン例から一つを選んで「着せ替える」機能です。
着せ替えた後は「画像」や「配色」の他、「ウィジット」のパーツも、そっくりに実装されています。
タブコンテンツは着せ替えても実装されない
先ほど例で紹介したデモサイトの「01」は、「タブコンテンツ」が実装されているレイアウトです。
「タブコンテンツ」が実装（セット）されたあとで、中身のコンテンツを作り直せばいいと思った私は、さっそく「01」のデザインに着せ替えてみたのです。
ところが、着せ替えをしたのに「タブコンテンツ」が表示されていない…！
「なぜ？」ってなりましたけど、「自力で設置する」以外の手段はなさそうです。
私と似たような経験をした人もいると思うので、記事にして共有しようと思いました。
「タブコンテンツ」を設置する方法
ここから具体的な「タブコンテンツ」の設置方法を紹介します。
「タブコンテンツ」自体は、「ウィジェット」と呼ばれる「機能を強化する部品」のようなもので、付け加えることも、取り外すことも自由に設定できます。
「THE THOR」には、たくさんの種類の「ウィジェット」があり、その中のひとつが「タブコンテンツ」です。
まずは「ウィジェット」として「部品」を好きな場所に設置をして、その後で中身となる「コンテンツ」を作っていく流れになります。
タブコンテンツを設置する手順
STEP➀「ウィジェット」を設置する
使用するウィジェットを選んで好きな場所に設置する
設置は簡単です。
「ウィジット」の中から「タブコンテンツ」を選んで、好きな場所に “ポンッ” と置くだけ！
手順は2通りあります。お好きな方法で構いません。
設置方法 ➀
「カスタマイザー画面」から設置する
WordPressダッシュボードのメニュー「外観」からスタート
1.「カスタマイズ」を選択
カスタマイザーの画面へ移動します
2.「ウィジェット」をクリック
3.「設置する場所」を選ぶ
今回は「追従サイドバーエリア」を選択
4.「ウィジェットを追加」をクリック
5.「タブコンテンツ」を選ぶ
追加する「ウィジェット」を選択する
これで設置は完了！
最後に「公開」のボタンを押すのを忘れずに！
「公開」を押すと編集した内容が保存されます。
コンテンツの中身は後から編集できます。
（空欄のままでOKです）
設置が完了したところで保存しておきましょう。
では、次の工程「コンテンツ作り」へ行きましょう。
→「コンテンツ作り」へジャンプ
設置方法 ②
ダッシュボード画面の「ウィジェット」メニューから設置する
WordPressダッシュボードのメニュー「外観」からスタート
1.「ウィジェット」を選択
2.「タブコンテンツ」をクリック
3.「設置する場所」を選ぶ
今回は「追従サイドバーエリア」を選択
4.「ウィジェットを追加」をクリック
これで設置は完了！
画像のように表示が出たらOKです。
では、次の工程「コンテンツ作り」へ進みましょう！
STEP②「コンテンツ」の中身を埋め込む
コンテンツの中身を作って埋め込む
さて「タブコンテンツ」の設置は、無事にできたでしょうか？
設置したときに気が付いたと思いますが、中身は空白になっています。
これを見た瞬間「お手上げ」と思った人も多いでしょう。
でも、安心してください。
私が紹介するとおりにやれば、誰でも「コンテンツ」を作って表示させることができます。
「コンテンツ作り」の目次
基礎
編集画面の見方
まずは、編集画面と実際の表示が、どう対応しているか？確認しておきましょう。
- タイトル → ウィジェットの見出し
- タブタイトル（01～05） → タグに表示されるテキスト
- タブ本文（01～05） → コンテンツの部分
「タイトル」（緑色の枠線）と「タブタイトル」（青色の枠線）はテキストを入力します。
これから紹介する「コンテンツ作り」は、「タブ本文」の部分（赤色の枠線）を作っていく解説になります。
注意事項
＼ 入力後の「保存」を忘れずに！ ／
初級編
「テキスト」を入力してみよう！
「コンテンツ」は、「画像バナー」である必要はありません。
文字（テキスト）のみを入力して、そのまま表示させることもできます。
2枚目のコンテンツの作成例
- 文字を入力する
- 「保存」をする
中級編
「コピーしたコード（タグ）」を張り付けよう！
簡潔に言えば「アフィリエイト広告の載せ方」です。
ASPのサイトから取得できる「広告用のHTMLコード（タグ）」をコピーして、そのまま「タブ本文」の欄に張り付ける（ペーストする）だけで「広告バナー」の表示ができます。
広告コード（タグ）をそのままコピペすればOK
- 表示させたい「HTMLコード（タグ）」をコピーする
- 「タブ本文」欄に張り付ける（ペーストする）
- 「保存」をする
「タブ本文」の欄には、文字（テキスト）以外に「HTMLコード（タグ）」も入力できます。
リンク用のコード（<a href=>～</a>）を入力することで、サイト内の別記事へつなげたり（内部リンク）、外部のサイトへ誘導する（外部リンク）ことができます。
上級編
「自作した画像バナー」を表示してリンクさせよう！
中級編では、用意されている素材「HTMLコード（タグ）」を使って広告を表示させました。
上級編は「素材がない場合の作り方」です。
自分で「HTMLコード（タグ）」を用意して貼り付ける流れになります。
WordPressの投稿エディタで作業していきます。
ちなみに「ブロックエディタ」です。
上級編としましたが、WordPressを扱える人なら、全員ができる操作です。
- WordPressで「新規の投稿」を開く
- 本文欄に「画像」ブロックを挿入
- 使う画像を追加する（選択する）
- 画像表示を「中央揃え」（センタリング）にしておくといい
- リンクを設定する
- ブロックを選択し「HTMLとして編集」をクリック
- 表示が「HTMLコード」になるので、それを全部コピーする。
- 「投稿編集」を閉じる（下書き保存しておくといい）
- 「タブコンテンツ」の編集画面で「タブ本文」欄に、先ほどコピーした「HTMLコード」を張り付ける
- 保存して終了
手数が多いですが、順を追って説明します。
➀ WordPressで「新規の投稿」を開く
② 本文に「画像」ブロックを挿入
➂ 使う画像を追加する（選択する）
④ 画像表示を「中央揃え」（センタリング）にしておく
- 理由➀…完成した時の見栄えが良くなる
- 理由②…「HTMLコード」に変換した際の内容が変わる
⑤ 画像にリンクを設定する
⑥ ブロックのオプションメニューから「HTMLとして編集」をクリック
⑦ 表示が「HTMLコード」になるので、それを全部コピーする。
⑧「投稿エディタ」を閉じる（下書き保存しておくといい）
⑨「タブ本文」欄に、先ほどコピーした「HTMLコード」を張り付ける
「保存」ボタンを押すのを忘れずに！
⑩ 保存して終了
これで「リンク付きの画像バナー」をタブコンテンツに表示できました。
以上が、中身となる「コンテンツ作り」の説明でした。
画像をコードに変換したものをコピペするだけなので、「HTMLコード」を覚える必要がありません。
また、自分で一文字ずつ入力する必要もありません。
2個目以降も、同様に設定することができます。
ひとつの「タブコンテンツ」で、最大5つまでの「コンテンツ」を埋め込むことができます。
初級編～上級編までの3つのタブコンテンツは、サイドバーエリアに実際に表示しています。
そちらと合わせて、設置方法の習得にお役立てください。
あれもこれもと説明を加えているうちに、つい長い記事になってしまいました。
ここまで読んでくれた「そこの、あなた！」
ありがとうございました。
ぜひ、私が紹介した方法で「タブコンテンツ」の設置に挑戦してみてください！
