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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(言語間リンク・原文リンク挿入、UI Link カテゴリ追加、リンク微調整。未翻訳)
(テーマのウィジェット化の訳)
1行目: 1行目:
{{NeedTrans}}
 
 
{{Rename|W|2008-11-24}}
 
{{Rename|W|2008-11-24}}
  
==I’m a theme author. What’s with all this email asking me to update my theme?==
+
==私はテーマを作成しています。私のテーマをアップデートしてほしいとのメールを受け取りましたが、これはどういうことですか ?==
  
You should be happy they like your theme well enough to contact you rather than switch to somebody else’s themes. Well done on making users happy! We’re sorry if that seems threatening. It hurt us more than it hurt you. Please fix up your theme. Widgets are now a standard part of the WordPress install so to reach the broadest audience your theme should support them, as well as supporting old style sidebars.
+
これは、だれか別のひとのテーマに切り替えるよりはむしろあなたにコンタクトを取るほど、あなたのテーマが気に入っているということなので喜んでください。ユーザーをハッピーにしてるんですよ!もしそれが恐ろしいなら、ゴメンナサイ。私たちよりあなたの方が困ってるんですよね。どうかご自分のテーマを修正してください。ウィジェットはもはや WordPress の標準的なパーツなので、なるべく多くの人に自分のテーマを使ってほしいなら、以前のスタイルのようなサイドバーとともにウィジェットもサポートするべきです。
  
==I give in. How do I fix up my theme?==
+
==なるほど。ではどうやって修正するのですか ?==
  
First you have to ask yourself, “Do I know anything about my theme? Does it use an unordered list to create the sidebar?(If you can’t answer that, you’ll need in-depth help on this task and that usually means paying somebody a lot of money or asking very nicely at the forums. Better yet, you can learn HTML. Sorry, we don’t teach that here.)
+
まず、「自分のテーマについて知ってるのか ? サイドバーに順序なしリストを使用しているのか ?」を自分に聞いてみてください。 (もし答えることができないなら、この作業には大きな助けが必要です。それはつまり、誰かに大金を払って助けてもらうか、フォーラムのものすごく優しい人にお願いすることを通常は意味します。HTML を学ぶことができればもっとよいのですが、ここでは教えることはできません)
  
Here is an example of good sidebar markup:
+
以下はサイドバーのマークアップの良い例です:
  
 
<pre>
 
<pre>
27行目: 26行目:
 
</pre>
 
</pre>
  
Notice that the entire sidebar is an unordered list and the titles are in &lt;h2&gt; tags. Not every theme is built this way and it’s not necessary to do so, but it’s currently the most common sidebar markup in the themes we surveyed so we adopted it. The element with id=”links” is the equivalent of one basic widget.
+
サイドバー全体が順序なしリストでタイトルがタグで囲まれていることに注目してください。すべてのテーマがこのように作られているわけではなく、こうようにする必要があるわけでもありませんが、調査したところ、このサイドバーのマークアップが現在最も一般的なので採用しました。 id=”links” を持つ要素が基本的にひとつのウィジェットに相当します。
  
The [[プラグイン/WordPress Widgets API|Widget API]]/[[:en:Plugins/WordPress Widgets Api|en]] offers a few functions to use in your template just like template tags. These functions let WordPress replace your theme’s sidebar with a dynamic one while still falling back on the old sidebar in case you remove all the widgets.
+
[[プラグイン/WordPress Widgets API|Widget API]]/[[:en:Plugins/WordPress Widgets Api|en]] はテンプレートタグのようにテンプレートで使用するための関数をいくつか提供します。これらの関数により WordPress はテーマのサイドバーを動的なサイドバーに置き換えます。すべてのウィジェットが取り除かれたら以前のサイドバーを表示します。
  
Here is an example of a basic sidebar upgrade using the same markup as above:
+
次に上記と同じマークアップを使用した基本的なサイドバーのアップグレードの例を示します:
  
 
<pre>
 
<pre>
51行目: 50行目:
 
</pre>
 
</pre>
  
See? We just added two lines to the template and now it’ll display a dynamic sidebar if possible, otherwise display the old sidebar. Removing all the widgets from the sidebar in the admin interface will cause the old sidebar to be displayed.
+
分かりますか ? たった 2 行をテンプレートに追加しただけで、利用可能であれば動的サイドバーを表示し、利用できなければ以前のサイドバーを表示します。管理画面でサイドバーからすべてのウィジェットを取り除くと以前のサイドバーが表示されます。
  
Now there is one more thing to be done to the theme. Assuming you are using WordPress 2.0 or higher, this change will be made within functions.php in your theme’s directory.
+
もうひとつテーマを修正する必要があります。WordPress 2.0 以上をお使いなら、テーマディレクトリの functions.php にこの修正を施してください。
  
Here is an example of functions.php for a theme that does not yet have such a file (no blank lines at the beginning or end of the file, please):
+
次は functions.php がまだないテーマ用の例です (ファイルの最初や最後に空の行を入れないでください):
  
 
<pre>
 
<pre>
64行目: 63行目:
 
</pre>
 
</pre>
  
That’s it, just four lines. This code tells the plugin that your theme will need exactly one dynamic sidebar. At this point, your admin interface should have an extra item in the Presentation menu: Sidebar Widgets. Try dragging some widgets from the palette on the left into the box marked Sidebar 1 and saving your changes. Got it working? Fantastic.
+
たった 4 行です。このコードはテーマがひとつだけの動的サイドバーを必要としていることをプラグインに伝えます。この時点で、管理画面のテーマ(バージョンによっては「外観」、「表示」)に「サイドバーウィジェット」の項目が追加されているはずです。WordPress 2.5 以前では、ウィジェットの管理画面で左側のパレットからいくつかのウィジェットをサイドバー 1 と表示されたボックスにドラッグし、保存してみてください。WordPress 2.5 以降では、各ウィジェット「追加」リンクをクリックすると実際にサイドバー表示されるウィジェットが右側に追加されます。動作してますか ? それはよかった。
  
===My sidebar isn’t a list. What do I do?===
+
===私のテーマのサイドバーはリストでマークアップされていません。どうすればいいですか ?===
  
We knew you’d ask that. You’ll have to discover your sidebar’s design pattern, then use some extra parameters to tell the plugin how to format them to work with your theme. We’ll work through one example.
+
そのことは聞かれると思っていました。まず、サイドバーのデザインパターンを見つけなくてはなりません。そしていくつか追加のパラメータを使用し、どのようにフォーマットすればそのテーマと使用できるようになるかプラグインに伝えます。次に例をあげましょう。
  
Here’s the original markup:
+
オリジナルのマークアップです:
  
 
<pre>
 
<pre>
83行目: 82行目:
 
</pre>
 
</pre>
  
Yes, we’ve seen markup like this. It’s the second most common sidebar design pattern, which is why we chose it for the example. The first difference is that the sidebar is not built inside a &lt;ul&gt; tag. That means we should not be wrapping any of our widgets in &lt;li&gt; tags. The second difference is that our titles are wrapped in &lt;div class=”title”&gt; instead of &lt;h2&gt; tags.
+
このようなマークアップを見たことがあると思います。サイドバーのデザインパターンとしては2番目に多いもので、そのためこの例に選びました。最初の違いはサイドバーが &lt;ul&gt; タグに囲まれていないことです。これはつまり、ウィジェットを &lt;ul&gt; タグで囲ってはいけないということです。2つ目の違いはタイトルが &lt;div class=”title”&gt; instead of &lt;h2&gt; タグで囲まれているということです。
  
We prefer to change the markup to our ul/li/h2 standard, but the API is powerful enough that we don’t have to. Instead, we fix these issues by adding some parameters to the code in functions.php:
+
マークアップを標準の ul/li/h2 へ変更する方が望ましいのですが、この API はじゅうぶん強力なのでかならずしも変更が必要なわけではありません。その代わりに function.php のコードにパラメータをいくつか追加してこの問題を解決します:
  
 
<pre>
 
<pre>
99行目: 98行目:
 
</pre>
 
</pre>
  
And here is the sidebar.php markup with our special template tags inserted:
+
そして以下が特別なテンプレートタグを挿入した sidebar.php のマークアップです:
  
 
<pre>
 
<pre>
115行目: 114行目:
 
</pre>
 
</pre>
  
That’s it. Your HTML markup is taken care of.
+
以上です。これであなたの HTML マークアップは解決されました。
  
Well, mostly taken care of. The default before_widget is a little bit more than just &lt;li&gt;. It includes an id and class. Well, sort of, but this is where it gets complicated. The default before_widget includes sprintf directives %1$s and %2$s, which are replaced by the id and class, respectively. The id is generated by sanitizing the widget name (which is why you should name your widget carefully: you don’t want duplicate id’s in one HTML document!) and the class is generated from the widget’s callback. This ensures all Text and RSS widgets, for instance, have unique id’s and similar classnames. Additionally, there is a “widget” class for each widget.
+
えーっと、実はほとんど解決されたというべきですね。デフォルトの 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 もあります。
  
So, if you want your theme to be most flexible you should use this instead of
+
なので、もしテーマをもっと柔軟にしたいのなら上記の空の文字列の代わりに次を使用してください:
the empty strings shown above:
+
  
 
<pre>
 
<pre>
127行目: 125行目:
 
</pre>
 
</pre>
  
Now your HTML markup is REALLY taken care of.
+
これであなたの HTML マークアップが本当に解決しました。
  
===The HTML looks good but the page looks awful in the browser!===
+
===HTML は問題なさそうに見えるのですがブラウザではひどく見えます !===
  
Yeah, we knew that would happen. Your theme was probably written before widgets were born so the author didn’t know she should make the stylesheet flexible enough to handle new markup in the sidebar. If you know some CSS, you should be able to handle the problems with a few new rules at the end of your stylesheet. Look in your blog’s markup for the selectors (id and/or class) belonging to each widget you want to style.
+
ええ、これは起こりうると思ってました。そのテーマはおそらくウィジェットができる前に作られたもので、その作者はサイドバーで新しいマークアップを扱えるほど柔軟なスタイルシートの作り方を知らなかったのでしょう。CSS をいくらか知っているのならスタイルシートの最後に新しいルールをいくつか加えてこの問題を解決することができます。ブログのマークアップで、スタイルを修正したい各ウィジェットに属しているでセレクター (id /もしくは class) を調べてください。
  
If CSS is a mystery to you, we regret that we can’t offer you any help. As much as we’d like to help you with this, it just isn’t possible due to the wild variations of themes. Contact your theme’s author and ask her to update the theme for better compatibility with widgets.
+
もし CSS がまったく分からないのなら、残念ながら私たちではどうしようもありません。助けてあげたいのはやまやまなのですが、テーマは非常にバリエーションがあるので不可能です。テーマ作者に連絡をとり、ウィジェットに対応するようにお願いしてみてください。
  
===The search widget is still ugly. I want my theme’s original search box as a widget.===
+
===検索ウィジェットが醜いです。テーマ付属の検索ボックスをウィジェットとして使用したいです。===
  
The widgets are CSS-selectable so that you can style them very specifically. However, the markup might not be to your liking. Many themes will look better if they supply their own widgets to replace some of the basic widgets, such as Search and Meta. It’s usually best to copy the existing markup from sidebar.php into a new widget in functions.php, then use the registration functions to replace the standard widget with the custom one.
+
ウィジェットは CSS を設定できるので入念なスタイルを施せます。とはいえ、そのマークアップが気に入らない場合もあるでしょう。多くのテーマでは、検索やメタなどの基本ウィジェットを置き換える独自のウィジェットが提供されればより良い外観になるでしょう。通常は、sidebar.php から既存のマークアップを functions.php の新しいウィジェットにコピーするのが一番いいでしょう。そして登録関数を使用して標準のウィジェットとカスタムなウィジェットを置き換えます。
  
You can do this with any part of the theme’s sidebar, or all of them. Here’s an example of how to do this:
+
テーマサイドバーのどの部分、あるいはすべてでこれを行なうことができます。以下に例を示します:
  
 
<pre>
 
<pre>
 
function widget_mytheme_search() {
 
function widget_mytheme_search() {
 
?>
 
?>
     << PASTE YOUR SEARCH FORM HERE >>
+
     <<検索フォームをここに入れる >>
 
<?php
 
<?php
 
}
 
}
151行目: 149行目:
 
</pre>
 
</pre>
  
==I have a theme with more than one sidebar. How do I make them all dynamic?==
+
==テーマに複数のサイドバーがあります。すべてを動的にするにはどうすればいいですか?==
  
Oh, that’s easy. Instead of register_sidebar() you should use register_sidebars(n) where n is the number of sidebars. Then place the appropriate number in the dynamic_sidebar() function, starting with 1. (There are several other ways to use these function. See the [[プラグイン/WordPress Widgets API|API]]/[[:en:Plugins/WordPress Widgets Api|en]]).
+
ああ、これは簡単です。register_sidebar() の代わりに register_sidebars(n) を使用してください。n はサイドバーの数です。そして 1 から始まる適切な数字を dynamic_sidebar() 関数にいれます。(こうした関数の使い方は他にもいくつかあります。[[プラグイン/WordPress Widgets API|API]]/[[:en:Plugins/WordPress Widgets Api|en]]を参照してください)
  
You can even give your sidebars names rather than numbers, which lets you maintain a different set of saved sidebars for each theme. But if you need to know so much about the plugin, why aren’t you reading the API?
+
数字ではなくサイドバー名を与えることもできます。各テーマ用に保存した別々のセットをメンテナンスできます。プラグインについてもっと知りたければ API をお読みください。
  
 
{{原文|Widgetizing Themes|61224}}<!-- 12:50, September 5, 2008 Lambic 版 -->
 
{{原文|Widgetizing Themes|61224}}<!-- 12:50, September 5, 2008 Lambic 版 -->

2008年12月29日 (月) 13:03時点における版

ページ名検討中: このページ名「テーマのウィジェット対応」について改名が提案されています。ご意見をお寄せください。(2008-11-24)

私はテーマを作成しています。私のテーマをアップデートしてほしいとのメールを受け取りましたが、これはどういうことですか ?

これは、だれか別のひとのテーマに切り替えるよりはむしろあなたにコンタクトを取るほど、あなたのテーマが気に入っているということなので喜んでください。ユーザーをハッピーにしてるんですよ!もしそれが恐ろしいなら、ゴメンナサイ。私たちよりあなたの方が困ってるんですよね。どうかご自分のテーマを修正してください。ウィジェットはもはや WordPress の標準的なパーツなので、なるべく多くの人に自分のテーマを使ってほしいなら、以前のスタイルのようなサイドバーとともにウィジェットもサポートするべきです。

なるほど。ではどうやって修正するのですか ?

まず、「自分のテーマについて知ってるのか ? サイドバーに順序なしリストを使用しているのか ?」を自分に聞いてみてください。 (もし答えることができないなら、この作業には大きな助けが必要です。それはつまり、誰かに大金を払って助けてもらうか、フォーラムのものすごく優しい人にお願いすることを通常は意味します。HTML を学ぶことができればもっとよいのですが、ここでは教えることはできません)

以下はサイドバーのマークアップの良い例です:

<ul id="sidebar">
 <li id="about">
  <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>
</ul>

サイドバー全体が順序なしリストでタイトルがタグで囲まれていることに注目してください。すべてのテーマがこのように作られているわけではなく、こうようにする必要があるわけでもありませんが、調査したところ、このサイドバーのマークアップが現在最も一般的なので採用しました。 id=”links” を持つ要素が基本的にひとつのウィジェットに相当します。

Widget API/en はテンプレートタグのようにテンプレートで使用するための関数をいくつか提供します。これらの関数により WordPress はテーマのサイドバーを動的なサイドバーに置き換えます。すべてのウィジェットが取り除かれたら以前のサイドバーを表示します。

次に上記と同じマークアップを使用した基本的なサイドバーのアップグレードの例を示します:

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
 <li id="about">
  <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; ?>
</ul>

分かりますか ? たった 2 行をテンプレートに追加しただけで、利用可能であれば動的サイドバーを表示し、利用できなければ以前のサイドバーを表示します。管理画面でサイドバーからすべてのウィジェットを取り除くと以前のサイドバーが表示されます。

もうひとつテーマを修正する必要があります。WordPress 2.0 以上をお使いなら、テーマディレクトリの functions.php にこの修正を施してください。

次は functions.php がまだないテーマ用の例です (ファイルの最初や最後に空の行を入れないでください):

<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>

たった 4 行です。このコードはテーマがひとつだけの動的サイドバーを必要としていることをプラグインに伝えます。この時点で、管理画面のテーマ(バージョンによっては「外観」、「表示」)に「サイドバーウィジェット」の項目が追加されているはずです。WordPress 2.5 以前では、ウィジェットの管理画面で左側のパレットからいくつかのウィジェットをサイドバー 1 と表示されたボックスにドラッグし、保存してみてください。WordPress 2.5 以降では、各ウィジェット「追加」リンクをクリックすると実際にサイドバー表示されるウィジェットが右側に追加されます。動作してますか ? それはよかった。

私のテーマのサイドバーはリストでマークアップされていません。どうすればいいですか ?

そのことは聞かれると思っていました。まず、サイドバーのデザインパターンを見つけなくてはなりません。そしていくつか追加のパラメータを使用し、どのようにフォーマットすればそのテーマと使用できるようになるかプラグインに伝えます。次に例をあげましょう。

オリジナルのマークアップです:

<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>

このようなマークアップを見たことがあると思います。サイドバーのデザインパターンとしては2番目に多いもので、そのためこの例に選びました。最初の違いはサイドバーが <ul> タグに囲まれていないことです。これはつまり、ウィジェットを <ul> タグで囲ってはいけないということです。2つ目の違いはタイトルが <div class=”title”> instead of <h2> タグで囲まれているということです。

マークアップを標準の ul/li/h2 へ変更する方が望ましいのですが、この API はじゅうぶん強力なのでかならずしも変更が必要なわけではありません。その代わりに function.php のコードにパラメータをいくつか追加してこの問題を解決します:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<div class="title">',
        'after_title' => '</div>',
    ));
?>

そして以下が特別なテンプレートタグを挿入した sidebar.php のマークアップです:

<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>

以上です。これであなたの HTML マークアップは解決されました。

えーっと、実はほとんど解決されたというべきですね。デフォルトの before_widget は <li> にもう少し追加されています。id と class を含んでいるのです。えーなんというか、しかしこれは複雑になります。デフォルトの before_widget には sprintf ディレクティブの %1$s と %2$s が含まれていて、これがそれぞれ id と class に置き換わります。id はウィジェット名をサニタイズして生成され (なのでウィジェットの命名には気を付けてください。同一 HTML ドキュメント内で id を重複させたくはないでしょうから !)、class はウィジェットのコールバックから生成されます。これにより例えばすべてのテキストウィジェットや RSS ウィジェットが一意の id と似たような class を持つことができるのです。またさらに、各ウィジェットには “widget” class もあります。

なので、もしテーマをもっと柔軟にしたいのなら上記の空の文字列の代わりに次を使用してください:

    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',

これであなたの HTML マークアップが本当に解決しました。

HTML は問題なさそうに見えるのですがブラウザではひどく見えます !

ええ、これは起こりうると思ってました。そのテーマはおそらくウィジェットができる前に作られたもので、その作者はサイドバーで新しいマークアップを扱えるほど柔軟なスタイルシートの作り方を知らなかったのでしょう。CSS をいくらか知っているのならスタイルシートの最後に新しいルールをいくつか加えてこの問題を解決することができます。ブログのマークアップで、スタイルを修正したい各ウィジェットに属しているでセレクター (id と/もしくは class) を調べてください。

もし CSS がまったく分からないのなら、残念ながら私たちではどうしようもありません。助けてあげたいのはやまやまなのですが、テーマは非常にバリエーションがあるので不可能です。テーマ作者に連絡をとり、ウィジェットに対応するようにお願いしてみてください。

検索ウィジェットが醜いです。テーマ付属の検索ボックスをウィジェットとして使用したいです。

ウィジェットは CSS を設定できるので入念なスタイルを施せます。とはいえ、そのマークアップが気に入らない場合もあるでしょう。多くのテーマでは、検索やメタなどの基本ウィジェットを置き換える独自のウィジェットが提供されればより良い外観になるでしょう。通常は、sidebar.php から既存のマークアップを functions.php の新しいウィジェットにコピーするのが一番いいでしょう。そして登録関数を使用して標準のウィジェットとカスタムなウィジェットを置き換えます。

テーマサイドバーのどの部分、あるいはすべてでこれを行なうことができます。以下に例を示します:

function widget_mytheme_search() {
?>
    <<検索フォームをここに入れる >>
<?php
}
if ( function_exists('register_sidebar_widget') )
    register_sidebar_widget(__('Search'), 'widget_mytheme_search');

テーマに複数のサイドバーがあります。すべてを動的にするにはどうすればいいですか?

ああ、これは簡単です。register_sidebar() の代わりに register_sidebars(n) を使用してください。n はサイドバーの数です。そして 1 から始まる適切な数字を dynamic_sidebar() 関数にいれます。(こうした関数の使い方は他にもいくつかあります。API/enを参照してください)

数字ではなくサイドバー名を与えることもできます。各テーマ用に保存した別々のセットをメンテナンスできます。プラグインについてもっと知りたければ API をお読みください。

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