web-dev-qa-db-ja.com

管理ウィジェットでタブを使用する

更新日：私は私がプラグイン/テーマオプションのページで以下の方法をテストし、それが完璧に働いたことを指摘する必要があります。実際、私はページ読み込みの間の現在のタブ選択を保持するためにjQuery cookie Pluginを含めることもできました（いいね！）.

複数のウィジェットオプションがあるときにフォームのフットプリントを減らすために、管理ウィジェットにタブを追加しようとしていました。私はWordPressに含まれているjQuery UIタブを使っています。これが私がこれまでにプラグインにコーディングしたものです。

http://Pastebin.com/fe4wdBcp

ウィジェットがウィジェット領域にドラッグされると、タブは正しく表示されますが、クリックして2番目のタブを表示することはできません。さらに悪いことに、ウィジェットページを更新してもタブのフォーマットが完全に失われ、タブがクリックイベントに応答しなくなります。

何が問題なのかわからない。任意の助けをいただければ幸いです。

widgetsadmintabs
2
dgwyer

問題は、あなたがユニークなID（#tabs、＃tabs-1 ...）を使っていないということです。なぜなら、ウィジェットは複数のインスタンスを持っているからです（同じIDが "Available Widgets"領域のインスタンスによって使われます）。

そのため、それらを一意にするために、ウィジェットインスタンスIDをあなたの識別子の前に追加または追加するだけです。

...
<div id="tabs-<?php echo $this->id; ?>">
    <ul>
        <li><a href="#tabs-<?php echo $this->id; ?>-1">Tab One</a></li>
        <li><a href="#tabs-<?php echo $this->id; ?>-2">Tab Two</a></li>
    </ul>
    <div id="tabs-<?php echo $this->id; ?>-1">
        <p><?php _e('Textbox 1') ?>: <input class="widefat" name="<?php echo $this->get_field_name('text1'); ?>" type="text" value="<?php echo esc_attr($text1); ?>" /></p>
        <p><?php _e('Textarea 1') ?>: <textarea class="widefat" name="<?php echo $this->get_field_name('textarea1'); ?>" rows="8" cols="12"><?php echo esc_attr($textarea1); ?></textarea></p>
    </div>
    <div id="tabs-<?php echo $this->id; ?>-2">
        <p><?php _e('Textbox 2') ?>: <input class="widefat" name="<?php echo $this->get_field_name('text2'); ?>" type="text" value="<?php echo esc_attr($text2); ?>" /></p>
        <p><?php _e('Textarea 2') ?>: <textarea class="widefat" name="<?php echo $this->get_field_name('textarea2'); ?>" rows="8" cols="12"><?php echo esc_attr($textarea2); ?></textarea></p>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function($){
        $("#tabs-<?php echo $this->id; ?>").tabs();
    });
</script>
...

また、WP 3.3 fixed this issueかどうかはわかりませんが、サイドバー内での最初のドラッグ後に、ウィジェット保存アクションを手動でトリガーする必要がありますidプロパティがform（）関数内で利用可能になるため。

1
onetrickpony