Formatieren Sie benutzerdefinierte Spalten in Admin-Bedienfeldern (insbesondere zum Anpassen der Spaltenbreiten).


14

Ich verwende Wordpress als CMS für ein Projekt, bei dem benutzerdefinierte Beitragstypen in großem Umfang verwendet werden. Ich muss Spalten in Admin-Bedienfeldern für jeden benutzerdefinierten Beitragstyp auf unterschiedliche Weise anzeigen.

Ich habe bereits die erforderlichen Spalten erstellt und diese ausgefüllt. Was ich tun muss, ist, das CSS ein wenig anzupassen. Vor allem versuche ich, die Breite bestimmter Spalten zu optimieren. Zum Beispiel brauche ich keine Spalte, in der die Beitrags-ID so breit ist wie der Beitragsname.

Ich habe ein Stylesheet in den Admin-Bedienfeldern für meine benutzerdefinierten Beitragstypen in die Warteschlange gestellt, kann die Spaltenbreiten jedoch nicht richtig formatieren.

Ich habe versucht, die maximale Breite der Elemente th oder td anzupassen, aber dies ist unwirksam. Aus Firebug kann ich sehen, dass der CSS-Stil vorhanden ist, aber er tut nichts.

Obwohl ich viele Tutorials zum Hinzufügen / Bearbeiten von benutzerdefinierten Spalten finden konnte, habe ich nicht wirklich viele Informationen zum Stylen solcher Spalten gesammelt. Irgendein Hinweis?

Vielen Dank!

Antworten:


25

Ich habe eine Lösung gefunden, die für mich funktioniert!

Ich habe diesen Code in functions.php abgelegt:

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>';
}

7

Danke Nicusor: Funktioniert super. Ich konnte die Breite der ausgewählten Spalten im Bereich "Beiträge" (z. B. Titel, Autor, Kategorien) mit Ihrer Lösung wie folgt ändern:

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>';
}

4

Sie sollten in der Lage sein, die Spaltenbreite ganz einfach mit CSS einzustellen. Mit der .column-{name}Klasse können Sie Stile auf die Spaltenzellen anwenden (sowohl thals auch td). Beispielsweise:

.column-mycolumn { width:20%; }

Stellen Sie sicher, dass keine anderen Stile Ihre Spaltenbreite aufgrund von CSS-Spezifitätsregeln überschreiben . Auch lange Wörter ohne Leerzeichen oder große Bilder können dazu führen, dass die Spalte breiter als in einigen Browsern angegeben ist.


es funktionierte! ich danke dir sehr! Ich war overcomplicating meine css offenbar
unfulvio

Ich habe eine Spalte mit dem Namen "clicks" und dieser Code in meiner childtheme styles.css-Datei hat keine Auswirkung auf die Liste der Administratorbeiträge! .column-clicks {width: 60px; }
Nicusor Dumbrava

4

Sie können dies versuchen, um Ihre Probleme zu lösen:

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

Kein Semikolon in jeder CSS-Zeile.
Northtree

Das war sehr nützlich. Um es hinzuzufügen, Wordpress wird von einigen unserer Editorbenutzer auch auf Mobilgeräten mit großem Bildschirm verwendet. Daher haben wir Medienabfragen hinzugefügt, da die !importantoben genannten Regeln das Standarddesign der Administratorliste von WP verletzt haben. Dies ist jedoch ein sehr nützlicher Vorschlag. Vielen Dank!
PKHunter

Standardmäßig haben einige Spalten eine Klasse, .fixeddie zu führt width: 15%; . Dies stellt sicher, dass diesen Spalten mehr Platz zugewiesen wird als anderen (die wahrscheinlich mehrere Zeilen unterbrechen). In der Praxis kann dies jedoch dazu führen, dass Spalten mehr Platz erhalten, als sie benötigen! Sie können die obige Funktion von Gaurang anpassen, um nicht mehr Platz für Ihre weniger wichtigen Spalten zu schaffen. zB: .column-tags { width: initial !important; }.
Fabien Snauwaert,
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.