管理スタイルでテーブルを作成しますか?


44

管理領域で投稿またはユーザーを表示するテーブルのスタイルで、テーブルを含むページを作成する推奨される方法は何ですか?

Cache Imagesプラグインを拡張しています。このプラグインには、ドメインとそのドメインの多数の画像を含むテーブルが含まれています。そのため、作成できる同等の既存のテーブルはありません(この質問の最初のバージョンでは、投稿があるテーブルについて尋ねましたが、既存の投稿テーブルを(おそらく)拡張できました)。

投稿の概要ページに基づい、から始める<table class="widefat">必要がありますか、それとも今これを処理するより良い機能がありますか?作業の基礎となるページングのあるテーブルのクリーンで空の例を知っていますか?


3
WordPress UIスタイルガイド用の新しいブログがあります。役立つかもしれません。dotorgstyleguide.wordpress.com/outline
sorich87

2
自己への注意:scribu は、WP 3.1新しいajaxifiedテーブルシステムを追加し、基本クラスを追加しましWP_List_Table。この質問は、おそらく使用方法に関する情報で更新できます。
ヤンファブリ

回答:


29

これは私が一般的に使用するものです:

<table class="widefat fixed" cellspacing="0">
    <thead>
    <tr>

            <th id="cb" class="manage-column column-cb check-column" scope="col"></th> // this column contains checkboxes
            <th id="columnname" class="manage-column column-columnname" scope="col"></th>
            <th id="columnname" class="manage-column column-columnname num" scope="col"></th> // "num" added because the column contains numbers

    </tr>
    </thead>

    <tfoot>
    <tr>

            <th class="manage-column column-cb check-column" scope="col"></th>
            <th class="manage-column column-columnname" scope="col"></th>
            <th class="manage-column column-columnname num" scope="col"></th>

    </tr>
    </tfoot>

    <tbody>
        <tr class="alternate">
            <th class="check-column" scope="row"></th>
            <td class="column-columnname"></td>
            <td class="column-columnname"></td>
        </tr>
        <tr>
            <th class="check-column" scope="row"></th>
            <td class="column-columnname"></td>
            <td class="column-columnname"></td>
        </tr>
        <tr class="alternate" valign="top"> // this row contains actions
            <th class="check-column" scope="row"></th>
            <td class="column-columnname">
                <div class="row-actions">
                    <span><a href="#">Action</a> |</span>
                    <span><a href="#">Action</a></span>
                </div>
            </td>
            <td class="column-columnname"></td>
        </tr>
        <tr valign="top"> // this row contains actions
            <th class="check-column" scope="row"></th>
            <td class="column-columnname">
                <div class="row-actions">
                    <span><a href="#">Action</a> |</span>
                    <span><a href="#">Action</a></span>
                </div>
            </td>
            <td class="column-columnname"></td>
        </tr>
    </tbody>
</table>

お役に立てば幸いです。


このように自動ページネーションを挿入することもありますか?(例:ポスト1-20を表示)
Michiel Standaert

@MichielStandaert番号
kaiser

あなたがページ分割結果をしたい場合は、使用することができます@MichielStandaert paginate_linksを
tiltdown

ありがとう!(しかし:odd、2行ごとにクラスを追加する代わりに、なぜ行に使用しなかったのかまだ質問しています...)
ザカリーダハン

明らかに「より良い」解決策があります(他の回答と同様)が、簡単で基本的な表については、これがまさに私が求めていたものです。ありがとうございました!
rinogo

26

CSSだけでなく、Core APIを使用します

通常、WP_List_Tableクラスのインスタンスを使用します。

ガイド:

利点?

はい!

ページネーション、検索ボックス、アクションなど、想像できるすべての魔法を追加できます(コーディングも可能です)。


1
:マークアップ、管理インタフェースのためのクラス、テーブルを作成するための唯一の目標なしで参照するには、リンクのような小さなヒントgithub.com/bueltge/WordPress-Admin-Style
bueltge

1
>このクラスのアクセスはプライベートとしてマークされます。つまり、WordPressの今後のリリースで警告なしに変更される可能性があるため、プラグインおよびテーマの開発者による使用を意図していません。それでもクラスを使用したい場合は、コピーを作成して、自分のプロジェクトで使用および配布するか、自分の責任で使用する必要があります。
オースティンプレイ

@AustinPray コピー?いいえ、しないでください。ベータ版、RC、およびその他のWPのプレリリース版が利用可能です。実装/拡張を更新するだけです。本当に横に行かなければならない場合は、自分でもっと良いものを書いてください。コアコードではありませんように良いです。
カイザー

@kaiserメッセンジャーを撃たないでください、それらは私の言葉ではありません。WP Codexから引用していました。すべてのベータ版とRC版を使用した永続的な回帰テストにサインアップすることは、クラスをコピーすることほど優れているとは言えません。私はあなた自身の単純なクラスを書くことがより良い方法であることに同意します。
オースティンプレイ

@AustinPray難しい気持ちはありません:) Codexはあなたや私のような人々によって書かれています。実際、今すぐその文を元に戻せば、人々はそれを引用するでしょう。
カイザー



0

管理者のカスタム投稿タイプリストにフィルターを追加することを検討したいですか?以下のリンクされた回答は、分類法でそれを行う方法を示していますが、restrict_manage_postsフックで他の基準を簡単に使用できます。

さらに質問がある場合はお知らせください。


不明な質問をおaびします。最初の例では、投稿のテーブルでした。実際、既存の投稿テーブルを使用することができます(投稿タイトルとすべてのカスタム列のみを表示したい場合でも)。しかし、今では具体的な例で質問を編集しました。ドメインのテーブルがあるので、拡張できる同等の既存のテーブルはありません。
ヤンファブリ

@Jan:ああ。はい、あなたは真実を見つけたと思います、(複製された)HTMLを書くこと以外にこれを行うための良いカプセル化された方法はありません。私はしばしば同じ問題を抱えてきました。たぶん、この機能強化を求めてtracでチケットを作成し、サポートできるようにここにURL /チケット番号をリンクしてください。
-MikeSchinkel
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.