ワードプレス初心者向け情報サイト『webcode』WordPress初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。2018年5月16日webcode編集部FacebookTwitterはてブPocketFeedlyWordPressの「ウィジェット」という言葉を耳にしたことはあるでしょうか?実は、Wordpressではウィジェットを使うことで、コードを書き直さなくても簡単に機能を追加することができます。そこで今回は、ウィジェットの作成方法や編集方法、おすすめのウィジェットをご紹介します。WordPressのウィジェットに関するまとめWordPressで登場するウィジェットとは?まず、ウィジェットとは、日本語に訳すと「部品」や「小型装置」という意味を指します。WordPressにおいては、「Webサイトのサイドバーなどを簡単に編集できる便利な機能」を指します。カテゴリなどを表示できるようになります。PHPの知識があれば、独自のウィジェットエリアを作成できます。管理画面から「どんなウィジェットを追加するのか」、「どこにウィジェットを表示するか」設定できます。ウィジェットを使う3つのメリットウィジェットを使うメリットは以下の3つがあります。ソースコードを書き直す必要がない管理画面から簡単に設定できる同じウィジェットを別のエリアに設置することができる「どのエリアにどのウィジェットを追加するのか」ということもドラッグアンドドロップで簡単に設定することができます。続いて、ウィジェットの自作方法についてお伝えします。ウィジェットを自作するためには、自分で「functions.php」にソースコードを記述する必要があります。PHPの知識が必要になるので、初心者の方は少し難しく感じるかもしれません。実際、「functions.php」に1つでも間違いがあると、正しく動作しなかったり、管理画面にログインできなくなったりするので注意しましょう。そのため、ファイルを変更する前に必ずバックアップを取っておきましょう。続いて、ウィジェットを作成するために最低限記述しておくべきコードを紹介します。ウィジェットを作成するために必要なコード(コピペOK)以下のコードをひな形として使ってみましょう。ウィジェットオプションの保存処理}}(ちなみに「/*~*/」や「//~~」は、コメントアウトです。メモ書きのようなものだと思ってもらって大丈夫です。)この中に処理を書き加えてウィジェットを作ることができます。ウィジェットの名前はわかりやすい名前になっていれば、どんな名前を付けてもOKです。ウィジェットを作るための関数などは細かく決められています。使う関数はコピペすれば大丈夫です。このサンプルコードは以下のサイトを参考にしています。続いて、ウィジェットの追加は簡単です。左側のメニュー→「外観」→「ウィジェット」をクリックしましょう。すると、以下のような画面が表示されます。その後、追加したいウィジェットをドラッグアンドドロップすると、ウィジェットが追加されます。逆に、使用を停止したいウィジェットを左側にドラッグアンドドロップすると、使用を停止することができます。投稿ページや固定ページにウィジェットを追加できるようなプラグインがあります。プラグインによっては自分でレイアウトを設定できることもあります。Builder」は、ウィジェットを固定ページに追加できるプラグインです。投稿ページ上でレイアウトやウィジェットタイトルの設定もできるので、わざわざ別のページに移動して設定する必要もありません。Builder」というタブが新たに追加されます。この画面からウィジェットの設定を行うことができます。使用するテーマによっては、ウィジェットを設置したい場所にウィジェットがないことがあります。そんなときは「functions.php」を編集してウィジェットを追加しましょう。手順としては以下のようになります。「functions.php」にコードを記述するテーマのファイルにショートコードを記述する管理画面からウィジェットの設定をする1「functions.php」にコードを記述する「functions.php」に以下のコードを記述することによって、ウィジェットが使えるようになる関数を設定できます。コードを記述する前に必ずバックアップを取っておきましょう。){register_sidebar();}実際にコードを書くと、以下のようになります。'</h3>'));}さらに、ウィジェットを追加したい場合は、「id」を別の名前に変えて記述することで追加できます。テーマのファイルにショートコードを記述するこのままの状態では、設定画面からウィジェットを追加できません。テーマ内のファイルにウィジェットを呼び出すためのコードを記述しましょう。管理画面からウィジェットの設定をする最後に、管理画面からどのウィジェットをどのエリアに追加するのか設定しましょう。実際にWebサイト上で確認して正しくウィジェットを設置できているかチェックしておいてくださいね。管理画面でウィジェットを任意の場所にドラッグアンドドロップすると、追加したいウィジェットの編集ができるようになります。ウィジェットの右側にある▼をクリックすると、ボックスが開いて編集ができる状態になります。「最近の投稿を何記事表示するのか」や「投稿日を表示するのか」といったように細かな設定ができます。ウィジェットで画像を表示したいときはリンク付きの画像をウィジェットに使いたいと思ったことはありませんか?ウィジェットの設定で直接HTMLの記述をすれば表示することはできます。(少し強引なやり方ではありますが...)しかし、この方法は少し面倒だと感じる方も多いでしょう。Widget」というプラグインを使うと、ウィジェットに画像を表示できるようになります。Widget」は、インストールして有効化するだけですぐに使えるようになります。ウィジェットの編集画面では、「画像ウィジェット」と表示されます。事前にウィジェットで表示させたい画像をアップロードしておきましょう。必要な設定項目に入力を行い、「保存」をクリックしてください。すると、ウィジェットエリアに画像付きのリンクが表示されます。WordPressでウィジェットが表示されないときは...稀にウィジェットの設定をしても正しく表示されないことがあります。そんな時は、以下の項目のチェックをしてみましょう。「functions.php」の記述は正しいか?ウィジェットエリアを自分で新たに追加した場合は、要注意です。PHPファイルは記述ミスがあってもエラー表示されることはありません。そのため、自分で記述した部分を確認してみましょう。スペルミスは見落としやすいので注意しましょう。見落としやすい記述ミスは以下の3つが挙げられます。’(シングルクォーテーション)」が抜けていないか単語のスペルミスがないか「id」に大文字が含まれていないか(大文字が含まれている場合は表示されません)設定したウィジェットが保存されているか?次に「設定したウィジェットが正しく保存されているか」確認してみましょう。最後に「変更を保存」をクリックしなかったため、設定が保存されていない場合もあります。「それぞれのウィジェットの設定が正しく保存されているか」確認してみましょう。WordPressでおすすめのウィジェット最後に、おすすめのウィジェットや定番のウィジェットを紹介します。「最近の投稿」を表示しておくと、1ページだけでなく複数のページを見てもらえる可能性も上がります。用意されているウィジェットも多数あるので、あなた好みのウィジェットを組み合わせて使ってみても良いでしょう。WordPressのウィジェットに関するまとめ以上、いかがでしたか?今回はWordPressのウィジェット機能についてお伝えしました。ソースコードをいじらなくても、追加できるウィジェットは多いです。おすすめのウィジェットとして紹介したウィジェットを使って、オリジナルサイトを作ってみてはいかがでしょうか?最後まで読んでいただき、ありがとうございました。FacebookTwitterはてブPocketFeedly関連キーワードwordpressWordPress(ワードプレス)の関連記事wordpressテーマは有料と無料どっちがおすすめ?初心者が迷った時の選び方2020年1月10日ワードプレスのレンタルサーバー移行でデータベースを移動する方法2020年1月4日ヘテムルでワードプレス複数サイト運営はおすすめ?費用を他社サーバーと比較2020年1月4日wordpressのビジュアルエディタで改行できない時の4パターンの対処法2020年1月4日wordpressとは?CMSとは?初心者が分かるように簡単解説!WordPressとMovableTypeの違いは?メリット・デメリットを比較してみたおすすめの記事Goope(グーペ)グーペ(Goope)の評判は悪いの?他社のHP作成ツールと比較してみたグーペは上場企業のGMOペパポ株式会社が提供する、初心者向けのホームページ作成サービスです。月々1,000円〜3,500円程度で利用できる...WordPress(ワードプレス)ムームードメインとロリポップでワードプレスを始める方法を初心者に簡単解説こちらの記事ではサイト運営の初心者向けに、ワードプレスの始め方をわかりやすく解説します。ウェブサイトを始めるためには、まず大手レンタルサー...Webデザインバナーの作り方!簡単4ステップをデザイン経験ゼロの初心者に解説Webデザインの仕事の中では、バナーを作る作業が起こることがあります。今回はワードプレスの導入を依頼する際の金額の相場...レンタルサーバーロリポップのエンタープライズプランの口コミ!スタンダードプランとの違いやメリット・デメリットレンタルサーバーのロリポップ!には、4つのプランがあります。webcodezeroRANKINGShopify(ショピファイ)の評判は?カラーミーショップやリピートとの比較エックスサーバーの使い方をワードプレス初心者にわかりやすく画像で解説【経験談付き】ロリポップはライトプランで十分?ワードプレスを複数するならどのlolipopのプランが良い?バインドアップ(BiNDup)の評判は?料金比較やメリット・デメリットを解説ヘテムルとエックスサーバーの比較!wordpress初心者におすすめはどっち?CATEGORYWordPress(ワードプレス)初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope(グーペ)初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。Jimdo(ジンドゥー)初心者向けにjimdoに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、jimdoの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。WIX(ウィックス)初心者向けにWIX(ウィックス)に関するお役立ち情報が掲載されています。口コミや評判、メリット・デメリット、WIXの利用がおすすめな人や、他のCMSやホームページ作成ツールとの比較情報などもご紹介しています。RentalServer(レンタルサーバー)レンタルサーバーに関する口コミや評判、メリット・デメリット・料金比較などが掲載されています。ワードプレス(wordpress)運用におすすめのレンタルサーバーもご紹介しております。