WordPressテーマ「THE THOR」の操作方法に関する記事です。
「THE THOR」のデザインに惹かれて購入し愛用していますが、標準搭載されている機能が多く、まだ使ったことがない機能もたくさんあります。
せっかくお気に入りのテーマを導入したものの、
- 何に使うか、わからない機能がある
- 使いたいけど操作方法がわからない機能がある
そんな「THE THORユーザー」さんも、多くいるのではないでしょうか？
今回は、私がずっと使ってみたかった「ある機能」について、使用方法を解説します！
その機能とは、
「タブコンテンツ」
です。
タブコンテンツとは、こういうやつです。
いつかは使ってみたい！と、思ってました。
こんな人にオススメ！
- これ、使ってみたかったんだよ！
- どうやったら使えるのか、誰か教えて！
- そもそも、こんな機能知らなかった！
むずかしい操作ではありません
一緒にチャレンジしてみましょう！
2020年6月からブログをはじめました。
昼間は個人商店を営んでいます。
私の経験談が「誰かの悩みのヒント」になれたらいいな。
そんな想いで記事を執筆しています。
目次から項目をクリックして移動できます
THE THORの「タブコンテンツ」とは？
設置方法を紹介する前に「タブコンテンツ」の説明をします。
複数のコンテンツを「タブ」で切り替えて表示できる機能
気を取り直して「タブコンテンツ」について解説していきます。
「タブ」を切り替えることで、表示されるコンテンツ（情報）を切り替えることができる機能です。
THE THORの公式サイトで紹介されている「デモサイト」も確認してみましょう！
タブコンテンツの見本は「THOR公式サイト」のデモ「01」で確認できる
「デモサイト01」を開いたら、ページを下へスクロールしてみてください。
画面右側の「サイドバーエリア」に「タブコンテンツ」は設置されています。
スマホでは、メインコンテンツのあとに表示されます。
「タブ」を切り替えると、中身の「コンテンツ」部分の表示が変わります。
デモサイトでは、コンテンツは3つあります。
サンプルなので、2枚目と3枚目は同じ画像ですが、タブが切り替わっているのを確認できます。
これが「タブコンテンツ」という「ウィジェット」のひとつです。
「タブコンテンツ」があると、サイトの雰囲気がお洒落になりますね。
どんな使い方をするの？
「タブコンテンツ」はサイトをお洒落なデザインにするだけの機能ではありません。
情報発信ツールとしてのメリットがあります。
「タブコンテンツ」のメリット
- 最小限のスペースで複数の情報を載せられる
- 読者のストレスを軽減できる
- 情報を整理して表示できる
「タブコンテンツ」のメリットを活かした利用方法を紹介します。
利用方法①「広告」を埋め込む
アフィリエイト広告を導入しているブロガーなら「広告」を並べる使い方は有効です。
アフィリエイト広告の数が多すぎると目障りに感じる読者（サイト訪問者）もいます。
「タブコンテンツ」なら、最小限のスペースに複数の広告を埋め込めるので、「広告ばかり」というマイナスな印象を軽減できます。
表示されない広告があるのはデメリット？
複数の広告を「タブコンテンツ」に埋め込んでしまうと「表示されない広告」が存在することになります。
読者がタブをクリックしない限り広告は表示されないので、広告効果が薄いように感じるかもしれませんが、見えないことは決して悪いことばかりではありません。
人間は「禁止されるほど気になってしまう」という心理現象が働きます。
タブコンテンツは「中身が見えない」ことで、読者の興味が膨らむ可能性があります。
利用方法②関連メディアを紹介する
個人のアフィリエイトブログではなく、お店や会社などの場合は「宣伝スペース」として活用できます。
実際に私も「店主のブログ」では「タブコンテンツ」を使って関連サイトをまとめて掲載しています。
- 公式ホームページ
- オウンドメディア
- ネット販売のページ
- 開催中のキャンペーン など
【使用例】お店や会社の宣伝
＊この見本はタブコンテンツのHTMLコードを「カスタムHTML」で入力して表示しています。
解説記事を出した理由
WordPressテーマ「THE THOR」は、デザインの着せ替え機能があります。
公式サイト内で紹介されている「おしゃれなデモサイト」と同じデザインを、ボタン一つで自分のサイトのデザインに適用することができます。（WordPressプラグイン「Customizer Export/Import」を使う方法）
タブコンテンツは着せ替えても実装されない
タブコンテンツの見本として紹介した「デモサイト01」は「タブコンテンツ」が実装されているレイアウトです。
「タブコンテンツ」を使うには、着せ替えたあとで中身のコンテンツを変更すればいいと思った私は、さっそく「デモサイト01」のデザインに着せ替えました。
ところが、着せ替えをしたのに「タブコンテンツ」が表示されていない…！
「なぜ？これだけセットされないの？」とショックを受けました。
とにかく「自力で設置する」以外の手段はなさそうです。
せっかくなので、設置方法を記事にしてみました。
THE THORの「タブコンテンツ」を設置する手順
ここから具体的な「タブコンテンツ」の設置方法を紹介します。
「タブコンテンツ」自体は、「ウィジェット」と呼ばれる部品パーツで、サイト内の表示させたい場所に自由に設置できます。
サイト内の任意の場所に設置ができる
まずは「ウィジェット」として「部品」を好きな場所に設置をして、その後で中身となる「コンテンツ」を作っていく流れになります。
小さい目次（リンク付き）
タブコンテンツを設置する手順について
① サイト内にウィジェットを配置する
まずは「タブコンテンツ」の「ウィジェット」をサイト内に設置します。
基礎：ウィジェットを設置できる場所
ウィジェットを設置できる場所を確認しておきましょう。
ただしWordPressテーマによって、設置できる場所も「ウィジェットの種類」も異なります。
この記事で紹介するのは「THE THOR」についての解説です。
ウィジェットが設置できる場所は10ヶ所
- トップページの上部
- トップページの下部
- 投稿ページの上部
- 投稿ページの下部
- メニューパネル
- サイドバーエリア
- 追従サイドバーエリア
- フッターエリア [左]
- フッターエリア [中央]
- フッターエリア [右]
ウィジェットを設置する方法は2つあります。
どちらの方法でもサイトでの表示は同じです。
操作がなれている方でいいよ。
方法①：カスタマイザーから設定する
「THE THOR」の機能である「カスタマイザー」から設置する方法です。
カスタマイザーからウィジェットを設置する
- 「外観」から「カスタマイズ」を選択
- ウィジェットをクリック
- 設置する場所を選ぶ
- ウィジェットを追加
- タブコンテンツを選ぶ
- 「公開」ボタンを押して完了
1.「外観」から「カスタマイズ」を選択
WordPressダッシュボードの項目から「外観」→「カスタマイズ」とすすみます。
カスタマイザー画面へ移動します
2.「ウィジェット」をクリック
3.「設置する場所」を選ぶ
今回は「トップページ下部」を選択
4.「+」ボタンでウィジェットを追加する
5.「タブコンテンツ」を選ぶ
追加する「ウィジェット」を選択する
一覧に目的のウィジェットが見つからない場合は「すべて表示」をクリックして、すべての項目から選択できます。
「公開」ボタンを押して設置完了！
編集した内容が保存されます。
コンテンツの中身が何もないので「プレビューは利用できません。」と表示されますが、気にせず、そのまま「X」ボタンでカスタマイザーを閉じて問題ないです。
これでサイト内に「タブコンテンツ」の「ウィジェット」が設置できました。
次の「コンテンツの中身（素材）を埋め込む」行程へ行きましょう。
方法②：WordPressダッシュボードから設定する
もう一つの設置方法、WordPressのダッシュボード（管理画面）からの設置手順です。
ダッシュボードからウィジェットを設置する
- 「外観」から「ウィジェット」を選択
- 設置する場所を選ぶ
- ウィジェットを追加
- 「更新」ボタンを押して完了
1.「外観」から「ウィジェット」を選択
2.「設置する場所」を選ぶ
今回は「トップページ下部」を選択
3.「+」ボタンでウィジェットを追加する
4.「タブコンテンツ」を選ぶ
追加する「ウィジェット」を選択する
一覧に目的のウィジェットが見つからない場合は「すべて表示」をクリック」して、すべての項目から選択できます。
「更新」ボタンを押して設置完了！
編集した内容が保存されます。
これでサイト内に「タブコンテンツ」の「ウィジェット」が設置できました。
次の「コンテンツの中身（素材）を埋め込む」行程へ行きましょう。
② コンテンツの中身（素材）を埋め込む
ウィジェット「タブコンテンツ」の配置はできましたか？
配置しただけなので、中身はまだ空白の状態だと思います。
これからコンテンツの中身を埋め込んで「タブコンテンツ」を完成させていきましょう！
「コンテンツ作り」の目次
基礎：編集画面の見方と注意事項
まずは、編集画面と実際の表示が、どう対応しているか？確認しておきましょう。
タイトル → ウィジェットの見出し
タブタイトル → タブに表示されるテキスト
タブ本文 → コンテンツの部分
「タイトル」（見出し）と「タブタイトル」はテキストを入力します。
これから紹介する「コンテンツ作り」は、「タブ本文」の部分（赤色の部分）を作っていく解説になります。
注意事項
入力後は「更新」ボタンを必ずクリックすること！
コンテンツの中身を入力した後は「更新ボタン」を押して保存することを忘れずに。
初級：「テキスト」を入力してみよう！
まずはシンプルに「テキスト（文字）」だけを入力して操作を覚えましょう！
初級：「テキスト」の埋め込み手順
- 各項目にテキスト（文字）を入力する
- 「更新」ボタンをおして保存する
操作はこれだけです。
操作方法に慣れるのと、実際の表示状況を確認するのが目的だね。
中級：HTMLコード（広告タグなど）をコピーして貼り付けてみよう！
ここからが実用的な使い方になります。
主に、リンクコード（<a href=>～</a>）を併用することで、内部リンク、外部リンクを設定できます。
簡潔に言えば「アフィリエイト広告の載せ方」です。
ASPのサイトから取得できる「広告用のタグ＝HTMLコード」をコピーして、タブコンテンツ内「タブ本文」欄にペーストするだけで「広告バナー」の表示ができます。
アフィリエイトコード以外にも、自分で作成したHTMLコードの入力もできます。
広告コードをそのままコピペすればOK
中級：「HTMLコード」の埋め込み手順
- 表示させたい「HTMLコード」をコピーする
- 「タブ本文」欄にペーストする
- 「更新」ボタンを押して保存する
上級：自分で用意したバナー素材を表示してみよう！
中級では用意されている素材（HTMLコード）を使って広告を表示させました。
上級編は「素材がない場合の方法」です。
自分で用意したバナー画像にリンクを付与して表示させる方法です。
上級編では、主に「リンク付き画像ファイル」を「HTMLコード」に変換させる方法を紹介します。
WordPressの投稿エディタを使って「リンク付き画像ファイル」を「HTMLコード」に表示変換します。
上級と紹介しましたが、WordPressを扱える人なら、だれでも操作できる方法です。
上級：リンク付き画像ファイルをHTMLコードに変換して埋め込む手順
- WordPressの「投稿」→「新規追加」を選択
- 本文欄に「画像」ブロックを挿入
- 使う画像（素材）を選択する（追加する）
- 中央揃えにしておく（センタリング）
- リンクを設定する
- 「HTMLとして編集」をクリック
- 表示された「HTMLコード」をコピーする
- タブコンテンツの「タブ本文」欄にペーストする
- 「更新」ボタンを押して保存する
・投稿エディタで「リンク付き画像」を作る
・表示をHTMLに変換する
➀ WordPressで「新規の投稿」を開く
② 本文に「画像」ブロックを挿入
この記事は公開せず「下書き保存」にしておきます。素材編集用として「HTMLコード作成用」などのタイトルを付けておくと便利です。
➂ 使う画像（素材）を追加する
④ 「中央揃え」にしておく
（センタリング）
- 理由➀…完成した時の見栄えが良くなる
- 理由②…「HTMLコード」に変換した際のコードにも影響する
⑤ 画像にリンクを設定する
⑥ 「HTMLとして編集」をクリック
ブロックのメニューを開き「HTMLとして編集」の項目をクリックします。
⑦ 変換された「HTMLコード」をコピーする。
⑧「タブ本文」欄に、コピーした「HTMLコード」を張り付ける
⑩ 「更新」ボタンを押して完了
これで「リンク付きの画像バナー」をタブコンテンツに表示できました。
画像をコードに変換したものをコピペするだけなので、「HTMLコード」を覚える必要がありません。
また、自分で一文字ずつ入力する必要もありません。
ひとつの「タブコンテンツ」で、最大5つまでの「コンテンツ」を埋め込むことができます。
- 実際は、どんなものになるんだろ？
初級編～上級編までの3つのタブコンテンツは、当サイトのトップページに実際に表示しています。
そちらと合わせて、設置方法の習得にお役立てください。
タブコンテンツの設置に挑戦してみよう！
THE THORで標準搭載されているウィジェット「タブコンテンツ」の設置方法を紹介しました。
「タブコンテンツ」は、ウィジェットとしてサイト内のあらゆる場所に設置することができます。
また中身のコンテンツは、投稿エディタを応用することで簡単に埋め込むことができます。
むずかしいHTMLコードを自分で入力する必要はありません。
埋め込みたいコンテンツを作ってから、表示をHTMLに変換し、コピー＆ペーストする方法が使えます。
使い方次第で、ブログ運営に役立つはずです。
THE THORのユーザーで「タブコンテンツ」を使ってみたい人は、ぜひ挑戦してみてください！
