Gaya kolom khusus di panel admin (terutama untuk menyesuaikan lebar sel kolom)

14

Saya menggunakan Wordpress sebagai CMS untuk proyek yang banyak menggunakan jenis posting khusus. Saya perlu menampilkan kolom di panel admin untuk setiap jenis posting kustom dengan cara yang berbeda.

Saya sudah membuat kolom yang diperlukan dan mengisinya. Yang perlu saya lakukan adalah menyesuaikan sedikit CSS. Yang paling penting saya mencoba mengubah lebar kolom tertentu. Misalnya saya tidak perlu kolom yang mencantumkan ID kiriman selebar nama kiriman.

Saya mendapatkan lembar stylesheet di panel admin untuk jenis posting kustom saya, tetapi saya tidak bisa melakukannya dengan benar untuk gaya lebar kolom.

Saya mencoba untuk menyesuaikan lebar maksimum elemen th atau td, tetapi tidak efektif. Dari pembakar saya bisa melihat gaya css ada di sana, tetapi tidak melakukan apa-apa.

Meskipun saya bisa menemukan banyak tutorial untuk menambah / mengedit kolom khusus, saya tidak benar-benar mengumpulkan banyak informasi tentang cara menata kolom seperti itu. Ada petunjuk?

Terima kasih!

custom-post-types css cms columns wp-enqueue-style unfulvio
sumber

Jawaban:

25

Saya menemukan solusi yang berfungsi untuk saya!

Saya menjatuhkan kode ini di functions.php:

add_action('admin_head', 'my_column_width');

function my_column_width() {
    echo '<style type="text/css">';
    echo '.column-mycolumn { text-align: center; width:60px !important; overflow:hidden }';
    echo '</style>';
}
Nicusor Dumbrava
sumber
7

Terima kasih, Nicusor: Bekerja dengan baik. Saya dapat mengubah lebar kolom yang dipilih pada panel Posting (mis. Judul, Penulis, Kategori) dengan solusi Anda sebagai berikut:

add_action('admin_head', 'my_admin_column_width');
function my_admin_column_width() {
    echo '<style type="text/css">
        .column-title { text-align: left; width:200px !important; overflow:hidden }
        .column-author { text-align: left; width:100px !important; overflow:hidden }
        .column-categories { text-align: left; width:100px !important; overflow:hidden }
    </style>';
}
Charles Borden
sumber
4

Anda harus dapat mengatur lebar kolom menggunakan CSS dengan mudah. Anda bisa menggunakan .column-{name}kelas untuk menerapkan gaya ke sel kolom (keduanya thdan td). Sebagai contoh:

.column-mycolumn { width:20%; }

Pastikan Anda tidak memiliki gaya lain yang mengabaikan lebar kolom Anda karena aturan kekhususan CSS . Juga, kata-kata panjang tanpa spasi atau gambar besar dapat memaksa kolom menjadi lebih luas dari yang ditentukan di beberapa browser.

Geert
sumber
itu berhasil! Terima kasih banyak! Saya terlalu rumit css saya jelas
unfulvio
Saya memiliki kolom bernama "klik" dan kode ini ditempatkan di file childtheme styles.css saya tidak berpengaruh dalam daftar posting admin! .column-klik {width: 60px; }
Nicusor Dumbrava
4

Anda dapat mencoba ini menyelesaikan masalah Anda:

add_action('admin_head', 'my_admin_custom_styles');
function my_admin_custom_styles() {
    $output_css = '<style type="text/css">
        .column-date { display: none }
        .column-tags { display: none }
        .column-author { width:30px !important; overflow:hidden }
        .column-categories { width:30px !important; overflow:hidden }
        .column-title a { font-size:30px !important }
    </style>';
    echo $output_css;
}
Gaurang P
sumber
tidak ada titik koma di setiap baris CSS.
northtree
Ini sangat berguna. Sebagai tambahan, Wordpress juga digunakan pada ponsel layar besar oleh beberapa pengguna editor kami, jadi kami menambahkan pertanyaan media karena !importantaturan di atas melanggar desain default daftar admin WP. Ini adalah saran yang sangat berguna. Terima kasih!
PKHunter
Secara default, beberapa kolom memiliki kelas .fixedyang menghasilkan width: 15%; . Ini memastikan kolom-kolom tersebut memiliki lebih banyak ruang yang dialokasikan untuk mereka daripada yang lain (yang kemungkinan akan memecah beberapa baris.) Namun dalam praktiknya, ini dapat menyebabkan kolom mendapatkan lebih banyak ruang daripada yang mereka butuhkan! Anda dapat menyesuaikan fungsi Gaurang di atas untuk menghindari memberi ruang ekstra untuk kolom yang kurang penting. misalnya: .column-tags { width: initial !important; }.
Fabien Snauwaert