WordPressデザインカスタマイズ、ウィジェットの追加・変更

WordPressデザインカスタマイズ、ウィジェットの追加・変更
WordPressデザインカスタマイズ、ウィジェットの追加・変更

WordPressデザインカスタマイズ、ウィジェットの追加・変更

WordPressデザインカスタマイズ、ウィジェットの追加・変更
最終更新日:2018.08.01

ウィジェットの追加・変更をしてワードプレスのデザインをカスタマイズする方法を紹介します。
今更聞けないWordPressの特徴や魅力ってなに?まずは基本を知ろうで紹介している通り、本来ならHTMLファイルを書き換えてコンテンツの場所を移動させたりする作業が必要になりますが、WordPressだと簡単なマウス操作でウェブページのデザイン(構成)に変化を加える事ができます。

ウェブページに表示されているウィジェットの変更方法

初期設定のテーマの場合、ウィジェットが導入されているのはこの部分。
WordPressデザインカスタマイズ、ウィジェットの追加・変更2

デフォルト状態では、検索ボックス、最近の投稿、最近のコメント、アーカイブ、カテゴリー、メタ情報となっています。ウィジェット機能を使いこのコンテンツの変更をしてみたいと思います。

024
まずは管理メニューの「外観」→「ウィジェット」を選択

WordPressデザインカスタマイズ、ウィジェットの追加・変更1

下記画像がウィジェットの管理画面になります。

024
使用できるウィジェット①と現在どの箇所にどのウィジェットを使用しているか②の二つが表示されています。

WordPressデザインカスタマイズ、ウィジェットの追加・変更3

②の箇所と現在ウェブページに表示されているコンテンツを見比べてみてみると、上から順番に同じウィジェットが並んでいるのがわかります。
この②の箇所に設定したウィジェットがウェブサイトのコンテンツとして表示されているんですね。

024
では実際に「検索」と「最近の投稿」をドラッグしてウィジェットを入れ替えてみましょう。

WordPressデザインカスタマイズ、ウィジェットの追加・変更4

024
するとウェブページに表示されているウィジェットコンテンツが変更されます。

WordPressデザインカスタマイズ、ウィジェットの追加・変更5

このようにウィジェットをドロップ&ドラッグする事が簡単に変更ができ、表示させたいコンテンツをあっという間に変更ができちゃいます。

ウィジェットの追加方法

次はウィジェットの追加方法です。先程のウィジェット管理画面のキャプチャの①が使用できるウィジェットとなっています。
追加したいウィジェットがある場合は①から②へドロップ&ドラッグで新しいウィジェットの追加ができるので実際にやってみましょう。

024
①の使用できるウィジェットから「テキスト」というウィジェットをドロップ&ドラッグで②の現在使用しているウィジェットの箇所へ移動させてください。

WordPressデザインカスタマイズ、ウィジェットの追加・変更6

ウィジェット機能の「テキスト」を移動させると、下記のようにウィジェットが展開します。

024
①にはタイトル②には表示させたい内容を入力し「保存」を押せばウィジェットの新規追加は完了です。

WordPressデザインカスタマイズ、ウィジェットの追加・変更7

024
ウィジェットが埋め込まれているウェブページを更新すると…しっかり入力した内容が反映されていますね。

WordPressデザインカスタマイズ、ウィジェットの追加・変更8

WordPressデザインカスタマイズ、ウィジェットの追加・変更まとめ

これでウィジェットの追加・変更は完了となります。
ワードプレスのテーマによってはウィジェット機能が埋め込まれている箇所が違ったり、ウィジェット機能がないものも存在したりします。

また今更聞けないWordPressプラグインの簡単な導入方法で紹介した「プラグイン」を導入する事で新しいウィジェットを使用する事もできちゃいます。

直観でコンテンツを変更・追加できる「ウィジェット」機能、とっても便利ですね。さっそくコンテンツのカスタマイズに挑戦してみてください。

最後までお読みいただきありがとうございました。