Membuat tabel dengan gaya admin?

44

Apa cara yang disarankan untuk membuat halaman dengan tabel, dengan gaya tabel yang menunjukkan posting atau pengguna di area admin?

Saya memperluas plugin Gambar Tembolok , dan berisi tabel dengan domain dan sejumlah gambar dari domain itu. Jadi tidak ada tabel setara yang ada yang bisa saya bangun (dalam versi pertama dari pertanyaan ini, saya bertanya tentang tabel dengan posting, tetapi di sana saya dapat (mungkin) memperluas tabel posting yang ada ).

Haruskah saya mendasarkan diri pada halaman ikhtisar posting , dan mulai dengan <table class="widefat">, atau ada fungsi yang lebih baik yang menangani ini sekarang? Apakah Anda tahu contoh meja yang bersih dan kosong dengan paging yang bisa dijadikan dasar pekerjaan saya?

plugin-development admin Jan Fabry
sumber
3
Ada blog baru untuk panduan gaya WordPress UI, Anda mungkin merasa terbantu. dotorgstyleguide.wordpress.com/outline
sorich87
2
Catatan untuk diri sendiri: scribu menambahkan sistem tabel ajaxified baru di WP 3.1 , dengan kelas dasar WP_List_Table. Pertanyaan ini mungkin dapat diperbarui dengan informasi tentang cara menggunakannya.
Jan Fabry

Jawaban:

29

Inilah yang biasanya saya gunakan:

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

Semoga itu bisa membantu.

sorich87
sumber
apakah juga memiliki pagination otomatis dimasukkan seperti ini? (mis. menunjukkan pos 1-20)
Michiel Standaert
@MichielStandaert No.
kaiser
@MichielStandaert jika Anda menginginkan hasil paginasi, Anda dapat menggunakan paginate_links
tiltdown
Terima kasih! (Tapi saya masih bertanya mengapa mereka tidak menggunakan :oddbaris alih-alih mari kita tambahkan satu kelas setiap dua baris ...)
Zachary Dahan
Jelas ada solusi yang "lebih baik" (seperti jawaban lain di sini), tetapi untuk tabel dasar yang cepat, inilah yang saya cari. Terima kasih!
rinogo
26

Gunakan Core API, tidak hanya CSS-nya

Biasanya Anda hanya menggunakan instance WP_List_Tablekelas.

Panduan:

  • Lebih lanjut tentang itu di Codex di sini .
  • Berikut ini juga panduan dari WP Engineer - terlalu banyak untuk menyalinnya.
  • Dan panduan lain tentang Smashing Magazine online.

Manfaat?

IYA NIH!

Anda dapat menambahkan pagination, kotak pencarian, aksi, dan keajaiban apa pun yang dapat Anda bayangkan (dan mampu membuat kode).

kaisar
sumber
1
Petunjuk kecil sebagai tautan untuk melihat markup, kelas untuk antarmuka admin, tanpa hanya tujuan untuk membuat tabel: github.com/bueltge/WordPress-Admin-Style
bueltge
1
> Akses kelas ini ditandai sebagai pribadi. Itu berarti itu tidak dimaksudkan untuk digunakan oleh plugin dan pengembang tema karena dapat berubah tanpa peringatan dalam rilis WordPress berikutnya. Jika Anda masih ingin memanfaatkan kelas, Anda harus membuat salinan untuk digunakan dan didistribusikan dengan proyek Anda sendiri, atau menggunakannya dengan risiko Anda sendiri.
Austin Pray
@AustinPray Salinan ? Tidak, tolong jangan lakukan itu. Ada beta, RC, dan pra-rilis WP lainnya yang tersedia. Cukup perbarui implementasi / ekstensi Anda. Jika Anda benar-benar harus menyamping, cukup tulis sesuatu yang lebih baik sendiri. Kode inti tidak begitu bagus.
kaiser
@iser jangan menembak utusan itu, itu bukan kata-kataku. Saya mengutip dari WP Codex. Meskipun mendaftar sendiri untuk pengujian regresi abadi dengan setiap beta dan RC tidak terdengar jauh lebih baik daripada menyalin kelas. Saya setuju menulis kelas sederhana Anda sendiri adalah cara yang lebih baik ke depan.
Austin Berdoa
@AustinPray Tidak ada perasaan sulit :) Codex ditulis oleh orang-orang seperti Anda dan saya. Bahkan, Anda bisa pergi sekarang dan mengembalikan pernyataan itu dan orang akan mengutipnya.
kaiser
0

Anda mungkin ingin mempertimbangkan untuk menambahkan filter ke daftar jenis posting khusus Anda di admin? Jawaban yang ditautkan di bawah ini menunjukkan bagaimana melakukannya dengan taksonomi tetapi Anda dapat dengan mudah menggunakan kriteria lain di restrict_manage_postshook Anda :

Beritahu saya jika Anda memiliki pertanyaan lebih lanjut.

MikeSchinkel
sumber
Saya minta maaf atas pertanyaan yang tidak jelas. Dalam contoh pertama saya itu adalah tabel posting, dan memang, saya bisa mencoba menggunakan tabel posting yang ada untuk itu (bahkan jika saya hanya ingin menunjukkan judul posting dan kemudian semua kolom khusus?). Tetapi sekarang saya telah mengedit pertanyaan saya dengan contoh konkret: Saya memiliki tabel domain, sehingga tidak ada tabel setara yang ada yang dapat saya kembangkan.
Jan Fabry
@ Jan : Ah. Ya, saya pikir Anda telah menemukan kebenaran, bahwa tidak ada cara enkapsulasi yang baik untuk melakukan ini selain menulis (digandakan) HTML. Saya sering mengalami masalah yang sama. Mungkin buat tiket on trac yang meminta peningkatan ini dan tautkan URL / tiket # di sini agar kami dapat mendukungnya.
MikeSchinkel