JINの使い方

【WordPressテーマJIN】サイドバーをデザインしよう

この記事では、ワードプレスのテーマJINを使ってサイトのサイドバーを作る方法についてわかりやすくお伝えしていきます。

子育てママ
子育てママ
次はサイドバーですね!サイトがどんどんできあがってきて楽しいです!
マザー
マザー
サイドバーは人の目に触れる機会が多いとっても大切な場所よ!

 

サイドバーとはサイトのこの部分のことをいいます。

 

 

今回はこのサイドバーに

  • プロフィール
  • 検索
  • カテゴリー
  • 最近の投稿

の4つを設置してみようと思います。

マザー
マザー
はじめのうちはこの4つがあればOKよ!サイトが充実してきたらしっかり戦略をたてて作り込んでいくわよ!

それではさっそく作っていきましょう。

スポンサーリンク



 

STEP1. ウィジェットを開こう

 

ワードプレスの管理画面から[ダッシュボード]-[外観]-[ウィジェット]をクリックしてください。

STEP2. サイドバーに必要ないものを削除しよう

 

そうするとこのような画面がでてきます。

サイドバーのところに「検索」「最近の投稿」「最近のコメント」「アーカイブ」「カテゴリー」「メタ情報」の項目が並んでいますね。

この項目の中からサイバーに必要がないものを削除していきましょう。

 

 

まずは「最近のコメント」の右側にある矢印をクリックします。

 

 

そうすると「最近のコメント」の詳細設定画面が開きますので「削除」をクリックします。

 

 

サイドバーから「最近のコメント」の項目が削除されました。

続いて「アーカイブ」の右側にある矢印をクリックします。

 

 

「アーカイブ」の詳細設定画面が開いたら「削除」をクリックします。

 

 

サイドバーから「アーカイブ」が削除されました。

同じように「メタ情報」も削除していきましょう。

 

 

サイドバーに「検索」「最近の投稿」「カテゴリー」が残りましたね。

今度はここにプロフィールを追加していきましょう。

STEP3. サイドバーにプロフィールを追加しよう

 

画面左側を見ると「利用できるウィジェット」の一覧が並んでいます。

 

 

その中から「プロフィール」を見つけて右側にある矢印をクリックします。

 

 

このような画面がでてきたら「サイドバー」を選択し「ウィジェットを追加」ボタンをクリックします。

 

 

サイドバーに「プロフィール」が追加されました。

参考までにドラッグ・アンド・ドロップでも追加することができるので、そのやり方も教えておきますね。

 

 

「利用できるウィジェット」の一覧の中からサイドバーに追加したい項目を見つけたら、その項目を左クリックしたままドラッグし、サイドバーのところまで持っていったら左クリックをはなします。これがいわゆるドラッグ・アンド・ドロップですね。

このやり方でもサイドバーに項目を追加していくことができますよ。

子育てママ
子育てママ
なるほど。ドラッグ・アンド・ドロップでも追加することができるんですね!
マザー
マザー
自分がやりやすい方法でやってみてね!

STEP4. プロフィールの詳細設定をしよう

 

それではプロフィールの詳細設定をしていきます。

「プロフィール」の詳細設定画面が開かれている状態だと思いますので、そのまま設定をしていきましょう。

まず「プロフィール名」には自分がプロフィール欄で表示させたい名前を入力します。

「説明」には簡単なプロフィールを書きましょう。

そして画像を表示させたい方は「画像を選択」ボタンをクリックします。

 

 

「メディアライブラリ」タブの中からプロフィールに表示させたい画像を選択します。

もし「メディアライブラリ」の中にまだ画像が入っていない場合は「ファイルをアップロード」タブを選択し、お好きな画像をアップロードしてください。

 

 

選択できたら画面右下にある「この画像を選択する」ボタンをクリックします。

 

 

画像が選択できたら「この画像で確定」にチェックを入れます。

「SNSボタン」はプロフィール欄にSNSボタンを設置したい方のみ「表示」を選択してください。

すべての入力が終わったら「保存」ボタンをクリックします。

 

 

保存できたら「プロフィール」の右側にある矢印をクリックして「プロフィール」の詳細設定画面を閉じておきましょう。

STEP5. その他の詳細設定をしていこう

 

それでは「プロフィール」以外の項目の詳細設定をしていきましょう。

まずは「検索」の右側にある矢印をクリックして詳細設定画面を開きましょう。

 

 

タイトルにはプロフィール欄で表示させたい名前を入力します。

マザー
マザー
今回は「検索」にしたけど「search」でも何でもいいわよ!

入力したら「保存」ボタンをクリックします。

 

 

続いて「最近の投稿」の詳細設定画面を開いてください。

同じようにプロフィール欄に表示させたいタイトルをつけていきます。

「表示する投稿数」はプロフィール欄に表示させたい投稿数を入力してください。投稿日を表示させたい方は「投稿日を表示しますか?」にチェックを入れます。

すべての入力が終わったら「保存」ボタンをクリックします。

 

 

最後にカテゴリーの詳細設定をしましょう。

プロフィール欄に表示させたいタイトルを入力します。

「ドロップダウン表示」「投稿数を表示」「階層を表示」はお好きなものを選びましょう。

なお記事数が少ないうちは表示されませんので、ある程度記事数がたまってからいろいろ試してみてください。

すべての入力が終わったら「保存」ボタンをクリックします。

STEP6. サイドバーに表示させる順番を変えてみよう

 

すべての詳細設定が終わったら、一度画面で確認してみましょう。

画面左上にある家マークのところにカーソルを持っていくと「サイトを表示」とでてくるので、そちらをクリックします。

 

 

こんな感じのサイドバーになっているかと思います。

見栄えがあまりよくないので並び順を変えていきましょう。

 

 

画面左上にあるサイト名をクリックします。

 

 

ワードプレスの管理画面から[ダッシュボード]-[外観]-[ウィジェット]をクリックしてください。

 

 

サイドバーには、上から「検索」「最近の投稿」「カテゴリー」「プロフィール」の順番に項目が並んでいます。

これを「プロフィール」「検索」「カテゴリー」「最近の投稿」の順番に変更していきましょう。並び順はドラッグ・アンド・ドロップで変更することができますよ。

 

 

まずは「プロフィール」の項目を左クリックしたまま一番上までドラッグしていきます。

 

 

「プロフィール」が一番上まできたら左クリックをはなします。

 

 

「プロフィール」を一番上に持ってくることができました。

 

 

同じようにドラッグ・アンド・ドロップで「カテゴリー」を「最近の投稿」の上に持っていきましょう。

 

 

これで並べ替えが完了しました。

実際に画面で確認してみましょう。

 

 

画面左上にでてくる「サイトを表示」をクリックします。

 

 

無事に並び替えすることができました。

子育てママ
子育てママ
サイドバーはウィジェットを使えば簡単に作れてしまうんですね!
マザー
マザー
そうなの!サイトが充実してきたらもっとサイドバーを作り込んでいきましょうね!

 

以上、ワードプレスのテーマJINを使ってサイトのサイドバーを作る方法についてでした。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です