WordPressのカスタマイズ方法【初心者向け】サイドバー

WordPressのカスタマイズ サイドバー編ブログ

こんにちは!

てつごろう(@Te256g)です。

 

てつこ
てつこ

WordPressをカスタマイズする時まず何からやればいい?
サイドバーに人気記事を表示したい。

カテゴリーやアーカイブに投稿数を表示するを知りたい。

 

WordPressでブログを始めた時、僕が最初に実施したカスタマイズ方法をまとめました。

 

初心者の方向けに、まずはサイドバー編として以下の方法を解説していきますね。

 

記事の内容

  1. サイドバーに人気記事を表示する(Cocoonの例)
  2. カテゴリーやアーカイブに投稿数を表示する
  3. Twitterを埋め込む

 

また難易度は少し上がりますが、プロフィールを自由に作る方法もご紹介しています。

 

てつごろう
てつごろう

これで脱・初心者なんだよ!

 

1. サイドバーに人気記事を表示する(Cocoonの例)

WordPressカスタマイズ 人気記事を追加する方法

まずは、サイドバーに人気記事を表示する方法を解説します。

 

完成イメージは上図の通り。

※ここでは僕が利用している無料テーマCocoonの場合を例に紹介しています。

 

(1) WordPressの管理画面にログインします。

 

(2)「外観」→「カスタマイズ」→「ウィジェット」→「サイドバー」の順にクリックします。

WordPressカスタマイズ 人気記事を追加する方法

ウィジェットとは?

ウィジェットとは、簡単に言うと検索機能やリンクバナーなどの部品のことを指します。
WordPressにはたくさんのウィジェットがあって、部品を直感的に追加、変更、削除することができます。

 

(3)下の方にある「ウィジェットを追加」ボタンをクリックして右に表示された「[C]人気記事」をクリックします。

WordPressカスタマイズ 人気記事を追加する方法

 

(4)下記の通りそれぞれ入力・選択します。

WordPressカスタマイズ 人気記事を追加する方法

① 人気記事を表示する対象(全ての記事か、カテゴリー別か)を選びます。

② タイトルを入れます。
「よく読まれる記事」など、お好きなタイトルでOK。空欄のままだと「人気記事」と表示されます。

③ 表示する数を変更できます。

④ 見せ方を選べます。
それぞれのイメージはこんな感じです。設定を変更すると、画面の右側でこのようにプレビューが表示されます。
※下図はCocoonの例です。

WordPressカスタマイズ 人気記事を追加する方法

⑤ 人気記事の集計期間を変更できます。

⑥ ランキングやPV数(表示回数)などの表示切り替えができます。
チェックを入れるとプレビューされます。イメージは下記の通り。

WordPressカスタマイズ 人気記事を追加する方法

てつごろう
てつごろう

ごちゃごちゃするので「全部盛り」はおすすめしないんだよ…

⑦ 人気記事に入れたくない記事がある場合は、その投稿IDを入力します。

⑧ カテゴリー単位で除外したい場合、対象のカテゴリーにチェックを入れます。

⑨ ウィジェット(ここでは人気記事)の表示・非表示の切り替えができます。
ここをクリックすると設定できるようになります。
特にこだわりがなければ、設定する必要はありません。

⑩ ウィジェットを非表示・表示どちらかを選択します。

11 非表示・表示したい対象にチェックを入れます。

12 最後に「完了」をクリックします。

人気記事を消したい場合は「削除」をクリックしてください。

 

これで人気記事の追加は完了です!

 

投稿IDとは?

WordPressでは投稿(記事)を公開すると投稿毎に個別のIDが割り振られますIDを確認するには、投稿一覧もしくは投稿の編集画面でアドレスバーを見ると分かります。

 

WordPressカスタマイズ 投稿IDを調べる

 

投稿一覧でIDが表示されていない場合は「表示オプション」をクリックして出てくるメニューから「ID」にチェックを入れて、最後に「適用」をクリックしましょう。

 

WordPressカスタマイズ 投稿IDを調べる

 

2. カテゴリーやアーカイブに投稿数を表示する

WordPressのカスタマイズ 投稿数を表示

サイドバーにあるカテゴリーやアーカイブに記事数や階層を表示したり、ドロップダウン形式にする方法を解説します。

 

(1)WordPress管理画面で「外観」→「カスタマイズ」→「ウィジェット」→「サイドバー」の順にクリックして「カテゴリー」のメニューを開きます。
※アーカイブの場合も同じ手順です。

 

WordPressカスタマイズ カテゴリーに投稿数を表示する

 

(2)下記の通り変更できます。
※以下、カテゴリーの例です。

 

WordPressカスタマイズ カテゴリーに投稿数を表示する

 

タイトルを変更できます。何も入力しなければ「カテゴリー」と表示されます。

ドロップダウン(クリックするとメニューが下にペロッと出てくる)に変更できます。

③ カテゴリー毎の投稿数を表示できます。

④ カテゴリーに階層がある場合は階層を表示できます。
当ブログの場合「Web」の下に「Webディレクション」などのサブカテゴリーがあるので、このように段差が付きます。

設定が終わったら「完了」、カテゴリーを消したい場合は「削除」をクリックします。

 

以上でカテゴリーに投稿数、階層の表示、ドロップダウンへの変更は完了です!

アーカイブについては「階層の表示」はありませんが、その他は同じ手順です。

 

3. Twitterを埋め込む

WordPressカスタマイズ Twitterを埋め込む

Twitterを運用している場合、ブログと連動して運営すると集客効果を見込めます。

 

ここではブログのサイドバーに自分のTwitterアカウントのタイムラインを埋め込む方法を解説します。

 

(1)Twitterで自分のプロフィール画面にアクセスしてURLをコピーします。

 

WordPressカスタマイズ Twitterを埋め込む

 

(2)https://publish.twitter.com/ にアクセスして、下記の通り入力、操作します。

 

WordPressカスタマイズ Twitterを埋め込む

 

① 手順(1)でコピーしたプロフィールのURLを貼り付けます。

② ページをスクロールして「Embedded Timeline」をクリックします。

③ その下に埋め込みコードが表示されるので「Copy Code」をクリックします。

 

(3)WordPress管理画面で「外観」→「カスタマイズ」→「ウィジェット」→「サイドバー」を開いて下の方にある「ウィジェットを追加」をクリックします。

 

WordPressカスタマイズ Twitterを埋め込む

 

(4)「カスタムHTML」をクリックして下記のように入力、設定します。

 

WordPressカスタマイズ Twitterを埋め込む

 

① タイトルを入力します。
「ツイッター」「Twitter」「呟き」などお好きなタイトルを入れましょう。

② 手順(2)でコピーした埋め込みコードを貼り付けます。

③ 「完了」をクリックして埋め込み完了です。

 

おまけ|プロフィールを自分の好きな形で追加する【難易度中です】

Cocoonではプロフィールを簡単に追加するウィジェットもありますが、テーマによってはそういった機能がない場合もあります。

そこで難易度中ではありますが、HTMLを使ったプロフィールの作成方法をご紹介します。

 

手順3(3)(4)を参考に「カスタムHTML」を一つ追加しましょう。

以下の通り入力してみてください。

 

WordPressカスタマイズ プロフィール

 

① タイトルに「プロフィール」など分かりやすい名前をつけます。

② 「内容」の部分に下記のソースコードを貼り付けてください。
経歴や性格などの文章はお好きな文章に変更してください。

 

<div style="text-align:center">
<img src="(プロフィール画像URL)" alt="(画像の説明)" width="150">
<p style="font-size:.9rem">
・こんな経歴があります。<br>
・こんな性格です。<br>
・こんなスキルがあります。
</p>
</div>

少し簡素化していますが、僕と同じようなプロフィールを追加することができます。

 

画像のURLの調べ方
ちなみにプロフィール画像のURLは、以下の手順で調べることができます。WordPress管理画面の「メディア」からプロフィール画像をクリックすると「添付ファイルの詳細」画面が表示されます。
「リンクをコピー」をクリックすると、画像のURLをコピーすることができます。WordPressカスタマイズ プロフィールを作る

 

まとめ

WordPressのカスタマイズ方法第1弾として、サイドバーのカスタマイズ方法をご紹介しました。

 

記事の概要

  1. サイドバーに人気記事を表示する
  2. カテゴリーやアーカイブに記事数を表示する
  3. Twitterを埋め込む

 

「おまけ」でご紹介したように「カスタムHTML」を利用すれば、バナーを貼り付けたりすることもできて、活用方法が一気に広がります。

 

他にもウィジェットには様々な種類がありますが、今回ご紹介した手順を覚えれば、豊富な機能を使うことができるようになると思います。

 

まずはどんなウィジェットがあるのかを見ながら、色々な機能を試してみましょう!

 

■WordPressを使ったブログの始め方

必見
Wordpressを使ってブログを簡単に始める方法
WordPressを使ったブログの始め方【環境を作る】
(1)サーバーやドメイン、SSLなど難しい環境構築を簡単に。初心者の方にも分かりやすく手順を解説しています。
WordPress設定方法
WordPressの設定方法【初心者向け】
(2)ブログを立ち上げたらまずやるべき設定をまとめました。
Google アナリティクスの導入手順と基本的な使い方
ブログのアクセス解析をする方法【Google アナリティクスの基礎】
(3)Google アナリティクスの登録方法と基本的な使い方。専門用語の解説付きで解説します。
Google Search Consoleの登録方法と基礎
Google Search Consoleの登録方法と基本的な使い方【初心者向け】
(4)Google Search Consoleの登録手順と基本的な使い方。2020年版の最新の画像20枚を使っています。
Google AdSenseの始め方
ブログ収益化の方法と始め方①【Google AdSense】
(5)ブログを収益化する広告の一つGoogle AdSenseの概要と始め方を解説。
注目
アフィリエイトの始め方と心構え
ブログ収益化の方法と始め方②【アフィリエイトの始め方と心構え】
(6)ブログ収益化手段の一つ、アフィリエイトの始め方を解説。長続きする秘訣や、稼いでいくための心構えも。
WordPressのカスタマイズ サイドバー編
WordPressのカスタマイズ方法【初心者向け】サイドバー
(7)サイドバーに人気記事、カテゴリーの投稿数の表示、Twitterのタイムラインを埋め込む方法を解説。
WordPressのテーマCocoonでトップページをカスタマイズする方法
WordPressのトップページを1クリックでカスタマイズする方法【Cocoon版】
(8)Cocoonでトップページをカスタマイズする方法。1クリックでカテゴリーごとに表示できます。
Cocoonでグローバルメニューをカスタマイズする方法
【Cocoon】ブログのグローバルナビをかっこよくする方法【WordPressカスタマイズ】
(9)グローバルナビにアイコンや英語表記を追加したり背景をグラデーションにする方法
Cocoonでカテゴリーページをカスタマイズ
Cocoonでカテゴリーページに人気記事を表示する方法【WordPressカスタマイズ】
(10)カテゴリーページに人気記事、見出し、説明、アイキャッチなどを表示して”まとめページ”にする方法
新着
WordPressでフッターをカスタマイズ
WordPressでフッターをカスタマイズする方法【初心者向け】
(11)フッターにメニューを追加したり編集する方法

コメント

タイトルとURLをコピーしました