当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「テーマのウィジェット対応」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(テーマに複数のサイドバーがあります。すべてを動的にするにはどうすればいいですか?)
(新しいウィジェット領域を表示するには: en link修正)
 
(3人の利用者による、間の9版が非表示)
1行目: 1行目:
{{Rename|W|2008-11-24}}
 
  
==私はテーマを作成しています。私のテーマをアップデートしてほしいとのメールを受け取りましたが、これはどういうことですか ?==
+
__TOC__
 +
<br style="clear:both;" />
 +
==テーマのウィジェット対応とは==
  
これは、だれか別のひとのテーマに切り替えるよりはむしろあなたにコンタクトを取るほど、あなたのテーマが気に入っているということなので喜んでください。ユーザーをハッピーにしてるんですよ!もしそれが恐ろしいなら、ゴメンナサイ。私たちよりあなたの方が困ってるんですよね。どうかご自分のテーマを修正してください。ウィジェットはもはや WordPress の標準的なパーツなので、なるべく多くの人に自分のテーマを使ってほしいなら、以前のスタイルのようなサイドバーとともにウィジェットもサポートするべきです。
+
ウィジェット対応(Widgetizing)とは、テーマ内に[http://codex.wordpress.org/Glossary#Widget ウィジェット]やウィジェット領域を実装するプロセスのことです。
  
==なるほど。ではどうやって修正するのですか ?==
+
==ウィジェットの登録==
  
まず、「自分のテーマについて知ってるのか ? サイドバーに順序なしリストを使用しているのか ?」を自分に聞いてみてください。 (もし答えることができないなら、この作業には大きな助けが必要です。それはつまり、誰かに大金を払って助けてもらうか、フォーラムのものすごく優しい人にお願いすることを通常は意味します。HTML を学ぶことができればもっとよいのですが、ここでは教えることはできません)
+
以下をテーマの functions.php ファイルに追加してください。
  
以下はサイドバーのマークアップの良い例です:
+
<pre id="how-to-register-a-widget-area">
 +
<?php
 +
/**
 +
* Register our sidebars and widgetized areas.
 +
*
 +
*/
 +
function arphabet_widgets_init() {
  
<pre>
+
register_sidebar( array(
<ul id="sidebar">
+
'name' => 'Home right sidebar',
<li id="about">
+
'id' => 'home_right_1',
  <h2>About</h2>
+
'before_widget' => '<div>',
  <p>This is my blog.</p>
+
'after_widget' => '</div>',
</li>
+
'before_title' => '<h2 class="rounded">',
<li id="links">
+
'after_title' => '</h2>',
  <h2>Links</h2>
+
) );
  <ul>
+
}
  <li><a href="http://example.com">Example</a></li>
+
add_action( 'widgets_init', 'arphabet_widgets_init' );
  </ul>
+
?>
</li>
+
</ul>
+
 
</pre>
 
</pre>
  
サイドバー全体が順序なしリストでタイトルがタグで囲まれていることに注目してください。すべてのテーマがこのように作られているわけではなく、こうようにする必要があるわけでもありませんが、調査したところ、このサイドバーのマークアップが現在最も一般的なので採用しました。 id=”links” を持つ要素が基本的にひとつのウィジェットに相当します。
+
=== 新しいウィジェット領域を表示するには ===
  
[[WordPress_ウィジェット_API|Widget API]]/[[:en:Plugins/WordPress Widgets Api|en]] はテンプレートタグのようにテンプレートで使用するための関数をいくつか提供します。これらの関数により WordPress はテーマのサイドバーを動的なサイドバーに置き換えます。すべてのウィジェットが取り除かれたら以前のサイドバーを表示します。
 
  
次に上記と同じマークアップを使用した基本的なサイドバーのアップグレードの例を示します:
+
sidebar.phpファイルなどのテーマファイルにコードを直接追加するか、
 +
functions.phpファイル内のフックでカスタム関数を使用することで、
 +
新しいウィジェット領域を表示することができます。
 +
 
 +
 
 +
以下は、親テーマまたは子テーマにあなたの新しいウィジェット領域を追加する一般的な方法のサンプルコードです。
  
 
<pre>
 
<pre>
<ul id="sidebar">
+
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<?php if ( !function_exists('dynamic_sidebar')
+
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
        || !dynamic_sidebar() ) : ?>
+
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<li id="about">
+
</div><!-- #primary-sidebar -->
  <h2>About</h2>
+
  <p>This is my blog.</p>
+
</li>
+
<li id="links">
+
  <h2>Links</h2>
+
  <ul>
+
  <li><a href="http://example.com">Example</a></li>
+
  </ul>
+
</li>
+
 
<?php endif; ?>
 
<?php endif; ?>
</ul>
 
 
</pre>
 
</pre>
  
分かりますか ? たった 2 行をテンプレートに追加しただけで、利用可能であれば動的サイドバーを表示し、利用できなければ以前のサイドバーを表示します。管理画面でサイドバーからすべてのウィジェットを取り除くと以前のサイドバーが表示されます。
+
上記のコードは、あなたのsidebar.phpファイルに追加できます。有効化されている場合、ウィジェットの内容を表示します。
 
+
もうひとつテーマを修正する必要があります。WordPress 2.0 以上をお使いなら、テーマディレクトリの functions.php にこの修正を施してください。
+
 
+
次は functions.php がまだないテーマ用の例です (ファイルの最初や最後に空の行を入れないでください):
+
  
 +
ウィジェットを出力する関数。
 
<pre>
 
<pre>
<?php
+
<?php dynamic_sidebar( 'sidebar-1' ); ?>
if ( function_exists('register_sidebar') )
+
    register_sidebar();
+
?>
+
 
</pre>
 
</pre>
  
たった 4 行です。このコードはテーマがひとつだけの動的サイドバーを必要としていることをプラグインに伝えます。この時点で、管理画面のテーマ(バージョンによっては「外観」、「表示」)に「サイドバーウィジェット」の項目が追加されているはずです。WordPress 2.5 以前では、ウィジェットの管理画面で左側のパレットからいくつかのウィジェットをサイドバー 1 と表示されたボックスにドラッグし、保存してみてください。WordPress 2.5 以降では、各ウィジェット「追加」リンクをクリックすると実際にサイドバー表示されるウィジェットが右側に追加されます。動作してますか ? それはよかった。
+
上記のコードは、'sidebar-1'のID値で登録されたウィジェットを表示します。あなたのサイトにウィジェットを表示する場合、ウィジェットを登録したときに指定したID値と’sidebar-1'を置き換えることを忘れないでください。
  
===私のテーマのサイドバーはリストでマークアップされていません。どうすればいいですか ?===
+
ウィジェットとウィジェット領域を表示するようプログラムする方法については[WordPress_ウィジェット_API ウィジェット API] ページを参照してください。
  
そのことは聞かれると思っていました。まず、サイドバーのデザインパターンを見つけなくてはなりません。そしていくつか追加のパラメータを使用し、どのようにフォーマットすればそのテーマと使用できるようになるかプラグインに伝えます。次に例をあげましょう。
+
プログラマーでない方は、[[WordPress ウィジェット]]/[[:en:WordPress_Widgets|en]]ページをご覧ください。
  
オリジナルのマークアップです:
+
=== カスタム関数を使用して新しいウィジェット領域を作成するには ===
  
<pre>
+
WordPressやテーマ特定のフックを使用すると、親または子テーマ関数ファイルから直接あなたのテーマに新しいウィジェット領域を表示できます。
<div id="sidebar">
+
<div class="title">About</div>
+
<p>This is my blog.</p>
+
<div class="title">Links</div>
+
<ul>
+
  <li><a href="http://example.com">Example</a></li>
+
</ul>
+
</div>
+
</pre>
+
 
+
このようなマークアップを見たことがあると思います。サイドバーのデザインパターンとしては2番目に多いもので、そのためこの例に選びました。最初の違いはサイドバーが &lt;ul&gt; タグに囲まれていないことです。これはつまり、ウィジェットを &lt;ul&gt; タグで囲ってはいけないということです。2つ目の違いはタイトルが &lt;div class=”title”&gt; instead of &lt;h2&gt; タグで囲まれているということです。
+
 
+
マークアップを標準の ul/li/h2 へ変更する方が望ましいのですが、この API はじゅうぶん強力なのでかならずしも変更が必要なわけではありません。その代わりに function.php のコードにパラメータをいくつか追加してこの問題を解決します:
+
  
 
<pre>
 
<pre>
<?php
+
function wpsites_before_post_widget( $content ) {
if ( function_exists('register_sidebar') )
+
if ( is_singular( array( 'post', 'page' ) ) && is_active_sidebar( 'before-post' ) && is_main_query() ) {
    register_sidebar(array(
+
dynamic_sidebar('before-post');
        'before_widget' => '',
+
}
        'after_widget' => '',
+
return $content;
        'before_title' => '<div class="title">',
+
}
        'after_title' => '</div>',
+
add_filter( 'the_content', 'wpsites_before_post_widget' );
    ));
+
?>
+
 
</pre>
 
</pre>
  
そして以下が特別なテンプレートタグを挿入した sidebar.php のマークアップです:
 
  
<pre>
+
上記のコードはすべて投稿ページや固定ページのthe_contentタグ[http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_content] より前に新しいウィジェットの領域を表示しますが、あなたのテーマにフィルターが含まれている場合、テーマ固有のフックを使用するお勧めします。
<div id="sidebar">
+
<?php if ( !function_exists('dynamic_sidebar')
+
        || !dynamic_sidebar() ) : ?>
+
<div class="title">About</div>
+
<p>This is my blog.</p>
+
<div class="title">Links</div>
+
<ul>
+
  <li><a href="http://example.com">Example</a></li>
+
</ul>
+
<?php endif; ?>
+
</div>
+
</pre>
+
  
以上です。これであなたの HTML マークアップは解決されました。
 
  
えーっと、実はほとんど解決されたというべきですね。デフォルトの before_widget は &lt;li&gt; にもう少し追加されています。id と class を含んでいるのです。えーなんというか、しかしこれは複雑になります。デフォルトの before_widget には sprintf ディレクティブの %1$s と %2$s が含まれていて、これがそれぞれ id と class に置き換わります。id はウィジェット名をサニタイズして生成され (なのでウィジェットの命名には気を付けてください。同一 HTML ドキュメント内で id を重複させたくはないでしょうから !)、class はウィジェットのコールバックから生成されます。これにより例えばすべてのテキストウィジェットや RSS ウィジェットが一意の id と似たような class を持つことができるのです。またさらに、各ウィジェットには “widget”  class もあります。
+
Note: この例では投稿する前に動的サイドバーで使用する同じIDを使用して新しいウィジェット領域を登録する必要があります。
 
+
なので、もしテーマをもっと柔軟にしたいのなら上記の空の文字列の代わりに次を使用してください:
+
  
 
<pre>
 
<pre>
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
+
register_sidebar( array(
    'after_widget' => '</div>',
+
'id'         => 'before-post',
 +
'name'        => 'Before Posts Widget',
 +
'description' => __( 'Your Widget Description.', 'text_domain' ),
 +
) );
 
</pre>
 
</pre>
  
これであなたの HTML マークアップが本当に解決しました。
+
== リソース ==
 
+
* [http://generatewp.com/sidebar/ WordPress Sidebar Generator]
===HTML は問題なさそうに見えるのですがブラウザではひどく見えます !===
+
 
+
ええ、これは起こりうると思ってました。そのテーマはおそらくウィジェットができる前に作られたもので、その作者はサイドバーで新しいマークアップを扱えるほど柔軟なスタイルシートの作り方を知らなかったのでしょう。CSS をいくらか知っているのならスタイルシートの最後に新しいルールをいくつか加えてこの問題を解決することができます。ブログのマークアップで、スタイルを修正したい各ウィジェットに属しているでセレクター (id と/もしくは class) を調べてください。
+
 
+
もし CSS がまったく分からないのなら、残念ながら私たちではどうしようもありません。助けてあげたいのはやまやまなのですが、テーマは非常にバリエーションがあるので不可能です。テーマ作者に連絡をとり、ウィジェットに対応するようにお願いしてみてください。
+
 
+
===検索ウィジェットが醜いです。テーマ付属の検索ボックスをウィジェットとして使用したいです。===
+
 
+
ウィジェットは CSS を設定できるので入念なスタイルを施せます。とはいえ、そのマークアップが気に入らない場合もあるでしょう。多くのテーマでは、検索やメタなどの基本ウィジェットを置き換える独自のウィジェットが提供されればより良い外観になるでしょう。通常は、sidebar.php から既存のマークアップを functions.php の新しいウィジェットにコピーするのが一番いいでしょう。そして登録関数を使用して標準のウィジェットとカスタムなウィジェットを置き換えます。
+
 
+
テーマサイドバーのどの部分、あるいはすべてでこれを行なうことができます。以下に例を示します:
+
 
+
<pre>
+
function widget_mytheme_search() {
+
?>
+
    <<検索フォームをここに入れる >>
+
<?php
+
}
+
if ( function_exists('register_sidebar_widget') )
+
    register_sidebar_widget(__('Search'), 'widget_mytheme_search');
+
</pre>
+
  
==テーマに複数のサイドバーがあります。すべてを動的にするにはどうすればいいですか?==
 
  
ああ、これは簡単です。register_sidebar() の代わりに register_sidebars(n) を使用してください。n はサイドバーの数です。そして 1 から始まる適切な数字を dynamic_sidebar() 関数にいれます。(こうした関数の使い方は他にもいくつかあります。[[WordPress_ウィジェット_API|API]]/[[:en:Plugins/WordPress Widgets Api|en]]を参照してください)
+
== 関連資料 ==
  
数字ではなくサイドバー名を与えることもできます。各テーマ用に保存した別々のセットをメンテナンスできます。プラグインについてもっと知りたければ API をお読みください。
+
{{Sidebar Tags}}
  
{{原文|Widgetizing Themes|61224}}<!-- 12:50, September 5, 2008 Lambic 版 -->
+
{{Widget Tags}}
  
 +
{{原文|Widgetizing_Themes|149166}}<!-- 2015-01-20T22:02 Ramily 版 -->
 +
{{DEFAULTSORT:てえまのういしえつとたいおう}}
 
[[Category:UI Link]]
 
[[Category:UI Link]]
  
 
[[en:Widgetizing Themes]]
 
[[en:Widgetizing Themes]]
 +
[[fr:Widgetiser les Themes]]
 +
[[pt-br:Widgets em Temas]]
 +
[[zh-cn:令主题支持小工具]]
 +
[[mk:Виџетизирање]]

2015年6月9日 (火) 12:48時点における最新版


テーマのウィジェット対応とは

ウィジェット対応(Widgetizing)とは、テーマ内にウィジェットやウィジェット領域を実装するプロセスのことです。

ウィジェットの登録

以下をテーマの functions.php ファイルに追加してください。

<?php
/**
 * Register our sidebars and widgetized areas.
 *
 */
function arphabet_widgets_init() {

	register_sidebar( array(
		'name' => 'Home right sidebar',
		'id' => 'home_right_1',
		'before_widget' => '<div>',
		'after_widget' => '</div>',
		'before_title' => '<h2 class="rounded">',
		'after_title' => '</h2>',
	) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

新しいウィジェット領域を表示するには

sidebar.phpファイルなどのテーマファイルにコードを直接追加するか、 functions.phpファイル内のフックでカスタム関数を使用することで、 新しいウィジェット領域を表示することができます。


以下は、親テーマまたは子テーマにあなたの新しいウィジェット領域を追加する一般的な方法のサンプルコードです。

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
	<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
		<?php dynamic_sidebar( 'sidebar-1' ); ?>
	</div><!-- #primary-sidebar -->
<?php endif; ?>

上記のコードは、あなたのsidebar.phpファイルに追加できます。有効化されている場合、ウィジェットの内容を表示します。

ウィジェットを出力する関数。

<?php dynamic_sidebar( 'sidebar-1' ); ?>

上記のコードは、'sidebar-1'のID値で登録されたウィジェットを表示します。あなたのサイトにウィジェットを表示する場合、ウィジェットを登録したときに指定したID値と’sidebar-1'を置き換えることを忘れないでください。

ウィジェットとウィジェット領域を表示するようプログラムする方法については[WordPress_ウィジェット_API ウィジェット API] ページを参照してください。

プログラマーでない方は、WordPress ウィジェット/enページをご覧ください。

カスタム関数を使用して新しいウィジェット領域を作成するには

WordPressやテーマ特定のフックを使用すると、親または子テーマ関数ファイルから直接あなたのテーマに新しいウィジェット領域を表示できます。

function wpsites_before_post_widget( $content ) {
	if ( is_singular( array( 'post', 'page' ) ) && is_active_sidebar( 'before-post' ) && is_main_query() ) {
		dynamic_sidebar('before-post');
	}
	return $content;
}
add_filter( 'the_content', 'wpsites_before_post_widget' );


上記のコードはすべて投稿ページや固定ページのthe_contentタグ[1] より前に新しいウィジェットの領域を表示しますが、あなたのテーマにフィルターが含まれている場合、テーマ固有のフックを使用するお勧めします。


Note: この例では投稿する前に動的サイドバーで使用する同じIDを使用して新しいウィジェット領域を登録する必要があります。

register_sidebar( array(
	'id'          => 'before-post',
	'name'        => 'Before Posts Widget',
	'description' => __( 'Your Widget Description.', 'text_domain' ),
) );

リソース


関連資料

サイドバー: is_active_sidebar(), is_dynamic_sidebar(), dynamic_sidebar(), register_sidebars(), register_sidebar(), unregister_sidebar(), wp_register_sidebar_widget() / en, wp_unregister_sidebar_widget() / en, wp_get_sidebars_widgets() / en, wp_set_sidebars_widgets() / en,
ウィジェット API: is_active_widget(), the_widget(), register_widget(), unregister_widget() / en, wp_register_widget_control() / en, wp_unregister_widget_control() / en, wp_convert_widget_settings() / en, wp_get_widget_defaults() / en, wp_widget_description() / en


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