人気の記事
【Diver図解マニュアル】TOPページにタブウィジェットを追加する方法

DiverのTOPページにタブウィジェットを追加する方法について解説します。タブウィジェットとは下記の赤枠で囲っているタブで選択できるものです。

 以前他のテーマを使っていましたが、そのテーマではこのような機能はなくHTMLの知識もない私は作成することが出来ませんでした!

初心者の方は設定したはずなのに記事が表示されない、というケースが多くあります。
その原因はカテゴリー設定の方法が間違っている可能性があります!
順を追って解説していきます。

Diverタブウィジェット作成方法 パーツを作る

タブウィジェットで必要なパーツを作っていきます。ここで作成するのは、下記画像の赤枠で囲っている部分になります。

ワードプレスにログインします。外観→ウィジェットをクリックします。

右にあるタブウィジェットエリアにカスタムHTMLを持ってきます。

ともにゃん
ドラッグしてくださいね!マウスの左クリックしてそのまま離さず移動させることです!

移動させたら「カスタムHTML」の横にある▼をクリックして開きます。タイトルと内容を入れます。タイトルに入れた文字が下記画像の赤枠に反映されます。


当ブログでは下記のように入力しています。


内容部分の1行目ですが、これはDiver公式マニュアルを参考にしています。

ショートコードを当ブログで表示する方法がわかりませんでしたので、下記公式サイトを参考にお願いします。なお、当ブログにて使用しているのは【カテゴリー記事一覧(グリッド)】になります。
ショートコードの注意点
カテゴリーIDcategoryに入れるのはカテゴリーの数字になります。まずは投稿→カテゴリーを選びます。

指定したいカテゴリーへマウスを持って行くと、画面下記に表示されるURLのこの数字になります。

これをcategory="●"の●の部分に入れます!

2行目はもっと見るボタンを入れる設定になります。こちらは下記コードをコピペしてURL部分を任意のリンク先に変更しましょう!

<div class="button shadow block blue"><a class="midium" href="https://entame.online/category/super-beginner/">もっと見る</a></div>

当ブログでは

  • 超初心者向け
  • 初心者向け
  • 中級者向け

と3つのタブを入れています。
上記の方法を3回繰り返すと作成できます!

ここまで行けばほぼ完成です。

スポンサーリンク

Diverタブウィジェット作成方法 ページに反映させる

タブウィジェットの作成したパーツを反映させていきましょう!
外観→ウィジェットに進み、トップページ上部のエリアに【Diver】タブウィジェットをドラッグします。

タイトルを入力します。ここに入力するタイトルは、下記画像の部分に反映されます。
表示タブウィジェットエリアは、ここでは1を選択しています。すると下記のように反映されます。

 これで一通り完成ですね!お疲れさまでした!

Diverタブウィジェット作成方法 複数作成時の注意点

Diverタブウィジェットを複数作成する際の注意点についてです。

 同じタブウィジェットを複数設置しないでください
との記載が公式サイトにあります。Diver公式サイト タブウィジェットの利用方法

この意味ですが、今はトップページ上部に設置していますが、同じものをサイドバーなどに使わないでください、ということです。
エラーなどで正しく動作しない可能性があるのかと思います。

その際にデフォルトでは1つのみになっていますが、これを複数にしないといけません。

タブウィジェットの増やし方

タブウィジェットの増やし方ですが、Diverオプション→基本設定 にあるタブウィジェット数を増やせばOKです。

Diverタブウィジェット作成方法 まとめ

タブウィジェット作成方法について理解頂けましたでしょうか。初心者だとカテゴリー設定などは躓くポイントですよね。
この記事を読んでもわからないという場合はコメントなど入れてもらえればと思います!
役に立ったな、と思ったら是非SNSへ拡散してもらえると嬉しいです!

 

スポンサーリンク
初心者でも上級者でも満足できるWordpressテーマ「Diver」

このブログのテーマは「Diver」です。これからブログを始める人は間違いなく長く愛用できるテーマです!他のテーマから変更をしたい中級者の方にも満足頂けるでしょう。私も別のテーマから移行しました。実際に使ってみると実感できると思いますが、デザインやレイアウトに関する悩みはなくなりました。操作性も抜群でもう他のテーマに変更は出来ません!

おすすめの記事