• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

WordPress ウィジェット

提供: WordPress Codex 日本語版
WordPress Widgetsから転送)
移動先: 案内検索

WordPress ウィジェットはサイドバーにコンテンツや機能を追加します。WordPress にはデフォルトで「カテゴリー」「タグクラウド」「検索」などのウィジェットがあります。ウィジェットを追加するプラグインもあります。

もともとウィジェットはユーザーに、WordPress テーマのデザインや構造を管理するシンプルで使いやすい方法を提供する目的で設計されました。現在では適切に「ウィジェット化」された WordPress テーマであれば、ヘッダーやフッターを始め、WordPress デザインや構造の多くでウィジェットを使用します。 ウィジェットにプログラミングの経験やスキルは必要はありません。「テーマカスタマイザー」またはWordPress 管理画面の 「外観」> 「ウィジェット」から追加、削除、並べ替えできます。

カスタマイズをサポートする WordPres ウィジェットでは入力用のフォーム、データや情報の追加と削除、オプションの画像、その他のカスタマイズ機能などのオプションがあります。

管理画面/外観/ウィジェット」では WordPress に同梱されたさまざまなウィジェットの使い方が説明されています。

ウィジェットがバンドルされたプラグインは WordPress プラグインディレクトリで検索できます。

ウィジェットのインストール

WordPress にはさまざまな Glossary#Widget ウィジェット が同梱されていますが、不足の場合は管理画面の 「プラグイン」>「新規追加」 から WordPress プラグインディレクトリ にアクセスし、新しいウィジェットを検索、追加できます。

ウィジェットの表示

既存ウィジェットエリア内の既存ウィジェット

ウィジェットを追加する前に、使用中のテーマがウィジェットをサポートするかどうか、正確には Glossary#Widget_Area ウィジェットエリア をサポートするかどうかを確認する必要があります。と言っても方法は単純で管理画面の「外観」メニューの下に「ウィジェット」サブメニューがあればサポートされています。

テーマが「テーマカスタマイザー」をサポートしていれば次の手順でウィジェットを追加できます。「テーマカスタマイザー」では変更をすぐにプレビューできます。


外観 カスタマイザー ウィジェット画面


  1. 管理画面で 「外観」> 「カスタマイズ」 にアクセスします。
  2. テーマカスタマイザーで ウィジェット をクリックします。ウィジェットカスタマイズ用画面に移動します。
  3. ウィジェットエリア 右側の下向き矢印をクリックします。登録済みのウィジェット一覧が表示されます。
  4. サイドバー下部の「ウィジェットを追加」ボタンをクリックしてください。利用可能なウィジェットの一覧が表示されます。
  5. 追加するウィジェットをクリックしてください。ウィジェットがサイドバーに追加されます。
  6. プレビューで確認します。新しいウィジェットでコンテンツが表示されます。
  7. サイドバー内でウィジェットを並べ替えるには、ウィジェットをドラッグアンドドロップして希望の順番に並べるか、「並べ替え」リンクをクリックして、各ウィジェットの上向き矢印、下向き矢印をクリックし、最後に「完了」をクリックします。
  8. ウィジェットの機能をカスタマイズするには、右側の 下向き矢印 をクリックし、ウィジェットインターフェースを開きます。
  9. ウィジェットを削除するには、上の手順のウィジェットインターフェースで 削除 をクリックします。


テーマが「カスタマイザー」をサポートしていなければ、次の従来の手順でウィジェットを追加できます。


外観 ウィジェット画面


  1. 管理画面で 「外観」> 「ウィジェット」 にアクセスします。
  2. ウィジェットを選択し、サイドバーの希望の位置にドラッグするか、ウィジェットをクリックし、テーマが複数のサイドバーをサポートしている場合はサイドバーを選択し、「ウィジェットを追加」ボタンをクリックします。複数のサイドバーオプションがある場合は、最初のサイドバーから始めてください。ウィジェットを配置するたびに、WordPress はテーマを更新します。
  3. サイトをプレビューします。「デフォルト」のサイドバーの内容が、新しく追加したウィジェットで置き換わっているはずです。
  4. 「ウィジェット」画面に戻り、ウィジェットを追加します。
  5. サイドバー、またはウィジェットエリア内でウィジェットを並べ替えるには、ウィジェットをクリックし、希望の位置へドラッグします。
  6. ウィジェットの機能をカスタマイズするには、左上隅の下向き矢印をクリックし、ウィジェットインターフェースを開きます。
  7. ウィジェットのカスタマイズを保存するには「保存」をクリックします。
  8. ウィジェットを削除するには「削除」をクリックします。

ウィジェットを取り除く際に将来使うときのため設定を残しておきたい場合は、そのウィジェットを「使用停止中のウィジェット」エリアにドラックしましょう。これは、ウィジェットエリアの数が種類が違うテーマに変更するときに特に便利です。

テーマを変更する場合、ウィジェットエリア・サイドバーの数や位置が異なるため移行がスムーズに行かない場合があります。テーマを変更した際にウィジェットがなくなってしまった場合、画面をスクロールして「使用停止中のウィジェット」で過去に利用した設定が保存済みのウィジェットを見つけてください。

表示オプションタブからアクセシビリティモードを有効化することで、ドラッグアンドドロップの代わりに「追加」「編集」ボタンを使うことができます。

ウィジェットエリア

ウィジェットエリアは通常 Web ページのサイドバーに位置しますが、テーマはページ内のどの位置にでもウィジェットエリアを配置できます。たとえば Twenty Fourteen テーマでは通常のサイドバーの位置以外に、すべてのページのフッターにもウィジェットエリアがあります。

事前に定義されたウィジェットエリア以外の、テーマ内の任意の場所にウィジェットを配置するにはプログラミングの知識が必要です。「Widgets API」の「Displaying Widgets and Widget Areas (英文)」を参照してください。

「テキスト」ウィジェットを使う

「テキスト」ウィジェットはもっともよく使用される WordPress ウィジェットの一つで、すべての WordPress インストールに付属します。「テキスト」ウィジェットを使用して WordPress サイトにテキスト、動画、画像、カスタムリストなどを追加できます。

WordPress「テキスト」ウィジェットを使用するには

  1. 管理画面で 「外観」> 「カスタマイズ」 にアクセスし、ウィジェット をクリックします。または管理画面で 「外観」> 「ウィジェット」 にアクセスします。
  2. 「テキスト」ウィジェットを追加するサイドバーを開きます。
  3. 「利用できるウィジェット」リストで「テキスト」ウィジェットを探します。
  4. ウィジェットを選択して希望の位置にドラッグします。

「テキスト」ウィジェットを開き、編集するには

  1. 「テキスト」ウィジェットの右側の下向き矢印をクリックします。
  2. 「テキスト」ウィジェットのタイトルを入力します(オプション)。
  3. テキストボックスにテキスト、または HTML を入力するか、既存の内容を編集します。
  4. 「自動的に段落追加する」オプションをオンにすると、テキストの各ブロックが HTML の <p> タグで囲まれます (テキストの場合、推奨)
  5. 「保存」をクリックして、「テキスト」ウィジェットを保存します。
  6. 「閉じる」をクリックして、「テキスト」ウィジェットを閉じます。
  7. ブラウザで変更結果を確認し、必要であれば修正します。

「テキスト」ウィジェットにはさまざまな HTML、XHTML、マルチメディアリンク、動画や埋め込みオブジェクトのプレイヤーを挿入できます。

テキストウィジェットのスタイル

WordPress「テキスト」ウィジェットの様々なデフォルトスタイルを変更するには、次の例を参照してください。2番目の「テキスト」ウィジェットでは、「自動的に段落追加する」オプションがオンです。

<div id="widget-area" class="widget-area" role="complementary">
	<aside id="text-1" class="widget widget_text"><h2 class="widget-title">最初の「テキスト」ウィジェットのウィジェットタイトル</h2>
		<div class="textwidget">「テキスト」ウィジェットエリア内のテキスト</div>
	</aside>	
	<aside id="text-2" class="widget widget_text"><h2 class="widget-title">2番目の「テキスト」ウィジェットのウィジェットタイトル</h2>			
		<div class="textwidget"><p>2番目の「テキスト」ウィジェットエリア内のテキスト</p></div>
	</aside>			
</div><!-- .widget-area -->

テキストウィジェットにコードを追加する

基本的な HTML、埋め込みオブジェクト、JavaScript は簡単に WordPress「テキスト」ウィジェットへ追加できます。マルチメディアコンテンツのソーシャル共有サイト用埋め込みコードも WordPress「テキスト」ウィジェット内で動作します。ただしアクティブなコードや PHP のようなプログラミング言語は、ウィジェットが表示できないコードを取り除くため動作しません。

「テキスト」ウィジェットにアクティブなコードを追加するには、WordPress プラグインディレクトリ から、投稿内での PHP 使用に関する WordPress の制限を上書きする、多くのプラグインのどれかを使用してください。ただしウィジェットでは動作しないものもあるため確認が必要です。

RSS ウィジェットを使う

「RSS」ウィジェットでは外部のフィードソースからサイトのウィジェットエリアに、Twitter アカウント、Fecebook の投稿、Google+ の投稿、その他のブログなどのコンテンツを統合できます。

「RSS」ウィジェットはアクティブなフィードを使用して任意のソースで最近公開されたコンテンツを表示します。これはサイトと外部コンテンツを統合する理想的な方法です。

デフォルトでは WordPress「RSS」ウィジェットは投稿のタイトル、ツイートの最初の 100文字、長いタイトルのない投稿を表示します。表示はフィードのデザインや構造により、リンク形式か、オリジナルのソースへのリンクとなります。

  1. 最初のボックスに サイドバーや他のウィジェット用領域に表示するコンテンツの RSS フィード URL を入力します。RSS フィード URL はコンテンツのソースページからコピーします。
  2. このフィードにタイトルをつける: オプションです。コンテンツのソースを紹介できます。
  3. フィード内の項目をいくつ表示しますか?: デフォルトでは 10件の投稿が表示されますが、1 から 20 の間で指定できます。
  4. 項目の内容を表示しますか?: タイトル以外にコンテンツの抜粋を表示できます。
  5. もしあれば項目の作成者を表示しますか? : オリジナルのコンテンツの作成者を明記する場合は、このオプションをオンにして作者名を表示します。
  6. 項目の日付を表示しますか?: 可能であれば、コンテンツのオリジナルの日付が表示されます。

WordPress サイトのサイドバーや他のウィジェット領域には、複数の RSS フィード用に複数の「RSS」ウィジェットを追加できます。

リソース


最新英語版: WordPress Codex » WordPress_Widgets最新版との差分