4980円のDVDを0円でプレゼント中!

CTAや人気記事の設置に!WordPressのウィジェットを追加する方法を1から解説。

こんにちは。このは屋意匠の野沢(@nozawa_ya )です。

[wc_row][wc_column size=”one-fourth” position=”first”]
[/wc_column][wc_column size=”three-fourth” position=”last”] 野沢屋(このは屋意匠)
このは屋の意匠さん。意匠とは現代風にいうとデザイナーのこと。以前は茨城県で工場員だったが、プログラミングを学びたいと思い上京。このは屋では、主にWebデザインを担当。

[/wc_column][/wc_row]

今回は、WordPressでサイドバーを設置できるウィジェットの設定方法について解説いたします。

このウィジェットの設定により、サイドバーの設置ができるようになります。

サイドバーに主に設置する内容といえば、

・プロフィール
・検索窓
・最新記事
・CTA…etc

です。

テーマによるのですが、フッターや記事下のCTAも設置ができます。
また、WordPressプラグインWordPress Popular Postsをインストールして設定すれば、人気記事一覧も簡単に設置することが可能です。

設置内容(プロフィールやCTA)によっては、HTMLやCSSの基礎知識が必要となる場合があります。
記事の後半に補足として、私たちも参照している記事をご紹介しますので、合わせてご参考にしてください。

ウィジェットの設定場所

WordPress管理画面 → 外観 → ウィジェットをクリック

ウィジェット01

ウィジェットの設定方法

ウィジェットを追加

左側にある利用できるウィジェットから、追加したい項目を右側のボックスにドラッグ&ドロップして追加していきます。右側のボックスは、テーマによって違いますが、ボックスの項目がわかりやすく表示されていますので、よく確認して設置しましょう。

ウィジェット02

ウィジェットの編集

ボックス名の右側に▼ボタンがあるかと思います。これをクリックすると編集画面を開くことができます。編集画面が開いていなかった時は、こちらを確認して下さい。

ウィジェット03

項目やHTMLを打ち込んだら、必ず保存をクリックしましょう。

よく使うウィジェット項目

左側に多数のウィジェット項目があるのですが、よく使う項目をご紹介します。

テキスト

テキストでは、主にHTMLを打ち込むことが多いです。HTMLとSimple Custom CSSをインストールし、CSSで、ご自身で柔軟にサイドバーのデザインを施すことが可能となります。

ウィジェット04

検索ウィジェット

こちらは、サイトに欠かせない検索窓を設置することができるウィジェットです。タイトルを入力するのみですので簡単に設定できますね!

ウィジェット05

最近の投稿ウィジェット

こちらは、最新の投稿をサイドバーに設置することができるウィジェットです。タイトルと表示する投稿数を入力して下さい。投稿日を表示するかしないをチェックして選択できます。

ウィジェット06

ウィジェットの並べかえ方

並びかえも非常に簡単にできます。ドラッグしながら、表示したい順番に入れ替えるだけです。

ウィジェット07

ウィジェットを削除する方法

ウィジェットの削除はいたって簡単で、削除をクリックするだけです。

ウィジェット08

ウィジェットの停止したい場合

ウィジェットを一時的に停止したい場合は、削除しなくても保存おくことができます。

ウィジェット09

補足: HTML・CSSの基礎知識がわかる記事一覧

HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】
HTMLとCSSの基本がわかりやすく解説されている記事です。

HTMLクイックリファレンス
HTMLのリファレンスになります。すべてのタグを覚える必要はないので、こちらのサイトでそのつど参照します。

CSSの基本-HTMLクイックリファレンス
CSSをすべて覚える必要はないので、このリファレンスを参照しながらコーディングしています。

WordPress超初心者のためのHTMLとCSSの基礎知識
WordPress初心者のためにHTMLとCSSをわかりやすく解説しています。

WordPress初心者必見!HTML・CSSが面白いほど身につく最強コンテンツ7選
HTMLとCSSを学ぶことができるWebサービスを多数ご紹介しています。

CSSレイアウトを学ぶ
複雑なレイアウトをつくるには、positionプロパティについて理解する必要になります。この記事では、CSSのpositionプロパティについて解説されています。

見ながら覚えよう!positionプロパティ「absolute」と「relative」についてのお話
こちらもpositionプロパティの解説記事になります。画像や要素の微調整に必要な知識ですので、ご参照くださいね!

編集後記

今回は、「CTAや人気記事の設置に!WordPressのウィジェットを追加する方法を1から解説。」について解説いたしました。

サイドバーにプロフィールを設置すると、サイト訪問者に人感が伝わりますね(^^)
CTAやメルマガ登録フォームの設置なども、リスト取得に効率的になりますので、ぜひHTML・CSSの知識も取り入れて設定してみてくださいね!