どうも、そらです！
今回はサイト運営に欠かせない、WordPress に搭載されているウィジェット機能について、まとめていきます。
WordPress のウィジェット機能は、サイトの外観を整えるのに非常に便利な機能です。
ウィジェット機能を用いることで、サイトバーの編集や記事の設定を簡単に行うことができるようになります。
この記事では、そんなサイトの運営に便利なウィジェット機能の内容や使い方を紹介したいと思います！
WordPress を始めたばかりの方やウィジェット機能をまだあまり使っていないという方は、ぜひ試してみてください！
またウィジェット機能と合わせて使うと便利な html コードの利用例も挙げているので、そちらも良かったら参考にしてみてください。
この記事で分かること
・WordPress のウィジェット機能について
・ウィジェット機能の使い方
・参考 html コード紹介
WordPress のウィジェット機能とは
WordPress のウィジェットでは、主にヘッダー、フッター、サイドバーのエリアの編集を行うことができます。
使用する際はサイトに配置したいエリアを指定し、ウィジェットを配置することで、簡単にサイトの外観を整えることができます。
それぞれのウィジェットには、直接文字を書き込むことも、html コードで記述することも可能です。
ウィジェットを配置することで追加できるものとして、こんなものが挙げられます↓
・プロフィール
（サイドバーなどに自分のアイコンやプロフィールを掲載）
・テキスト
（全記事に共通の文言を張り付けることも可能）
・カレンダー
（サイドバーなどに張り付けられる）
・ナビゲーションメニュー
（サイドバーにカテゴリー一覧を追加可能）
他にも様々な用途のウィジェットがあります。
ぜひウィジェット機能を活用して、サイトを整えてみてください！
ウィジェットの使い方
ウィジェットの使う際の手順はこちら↓
①WordPress の画面を開く。
②”外観”の”ウィジェット”を選択する。
③”利用できるウィジェット”の中から使いたいウィジェットを選択し、配置するエリア（ヘッダーやサイドバーなど）を選択して保存する。
④エリアの配置が完了したら、ウィジェット内に書き込みたい文言やhtml コードを書き入れて保存する。
⑤サイトに反映されているかを確認して完了！
ウィジェットには、”ビジュアル”と”テキスト”入力欄があり、”テキスト”入力ではhtml コードを打ち込むことができるようになっています。
囲いなどの装飾を利用したい場合は、html コードを用いると便利です。
html コードの利用例を以下にまとめているので、良かったら参考にしてみてください！
htmlコード利用例
プロフィール
サイドバーにプロフィールを追加する際の利用例です。
ウィジェットは”テキスト”を選択します。
※”テキスト”のウィジェットはモバイル用とPC用の両方を用いると、どちらにの機種にも対応させられると思います。
ウィジェットが選択出来たら、以下のコードを張り付けて①～③の項目を埋めていきましょう！
<center>
<img src=”①写真のURL” width=”300″ height=”150″ class=”profileimg”>
</center>
<p style=”text-align: center;”>②名前の入力</p>
<p>
③説明文
</p>
①写真のURL
利用したい写真をWordPressにアップロードし、写真のURLをコピーしてここへ張り付けましょう。
写真のサイズは、”width”、”height”の数字を変えると自由に変更可能です。
②名前の入力
サイト運営者の名前を記入しましょう。
③説明文
運営者の情報やサイトの内容を簡単に紹介しましょう。
こちらのコードを張り付けて文章を記入し保存すると、このような感じになります！
全記事共通の文、囲い付き
全記事共通の文章を書き込む際の利用例です。
ウィジェットを”投稿本文上”や”投稿タイトル下”などのエリアに配置し、書き込んでみましょう！
利用するコードはこちらです↓
<div style=”border: solid 1px #454545; text-align: center; font-size: 13px;”>
文章を記入
</div>
記事に入れたい文章を記入し、保存すると囲い付きの文章が表示されるようになります。
囲いを外したい場合は、” border: solid 1px #454545; ”の部分を削除すればOKです。
終わりに
今回はWordPressのウィジェット機能について、その内容と使い方をまとめました。
ウィジェットはサイトの外観を整える上で、とても便利な機能です。
皆さんもぜひ色々な機能を試し、自分に合わせてカスタマイズしてみてくださいね！
今後も、WordPressの使い方などを利用例と合わせて公開していきたいなと思っています！
それではまた、次の記事で！
