← Wszystkie wpisy

Poradniki

Popraw panel WordPressa (wp-admin) z JustZix — CSS i JS

Kokpit WordPressa potrafi być zaśmiecony: każda wtyczka dorzuca swoje powiadomienie, baner promocyjny albo prośbę o ocenę, edytor wpisów jest węższy niż mógłby być, a tabele list ciężko się czyta. Tego nie zmienisz w ustawieniach — ale możesz nałożyć własny CSS i JS regułą JustZix przypiętą do /wp-admin/. Poniżej kilka gotowych poprawek, które robią panel czytelnym i spokojnym.

Ukryj powiadomienia i prośby wtyczek

Największy hałas w wp-admin to .notice — pasek powiadomień nad treścią. Wtyczki wrzucają tam reklamy płatnych wersji, prośby o recenzję i komunikaty o aktualizacjach. WordPress nie daje globalnego wyłącznika, więc ukrywamy je CSS-em:

/* Ukryj banery promocyjne i prosby wtyczek */
#wpbody-content .notice,
#wpbody-content .updated,
#wpbody-content .update-nag,
#wpbody-content .notice-info,
.wp-pointer {
  display: none !important;
}

/* ...ale zostaw realne ostrzezenia o bledach */
#wpbody-content .notice-error,
#wpbody-content .notice-warning {
  display: block !important;
}

Zostawiamy .notice-error i .notice-warning, bo to one niosą istotne komunikaty — krytyczna aktualizacja, problem z bazą. Promocyjny szum znika, ważne sprawy zostają.

Odchudź menu kokpitu

Lewe menu (#adminmenu) z czasem puchnie — co wtyczka, to nowa pozycja. Jeśli pewnych sekcji nigdy nie używasz, możesz je schować. Każda pozycja menu ma stabilny identyfikator CSS:

/* Schowaj pozycje menu, ktorych nie uzywasz */
#adminmenu #menu-comments,
#adminmenu #menu-tools,
#adminmenu li#menu-dashboard ul li:nth-child(2) {
  display: none !important;
}

/* Węższe menu = więcej miejsca na treść */
#adminmenu .wp-menu-name {
  font-size: 13px;
}

Identyfikator pozycji znajdziesz w DevTools — najedź na element <li> w #adminmenu i odczytaj jego id (np. menu-plugins, menu-users).

Szerszy edytor i przyklejony przycisk Opublikuj

W edytorze klasycznym kolumna treści jest węższa, niż musi. Poszerz ją kosztem prawej kolumny z metaboksami, a sam panel publikacji przyklej, żeby przycisk Opublikuj był zawsze pod ręką:

/* Szersza kolumna tresci w edytorze klasycznym */
#post-body-content {
  margin-right: 300px;
}
#postbox-container-1 {
  width: 280px;
}

/* Przyklejony panel Opublikuj */
#postbox-container-1 #submitdiv {
  position: sticky;
  top: 50px;
  z-index: 10;
}

Czytelne tabele list

Tabele wpisów, stron i komentarzy (.wp-list-table) są dość rozstrzelone. Zagęść je i podkreśl wiersze, żeby wzrok się nie gubił:

/* Gestsze, czytelniejsze tabele list */
.wp-list-table td,
.wp-list-table th {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.wp-list-table tbody tr:hover {
  background: #f0f6fc !important;
}
.wp-list-table .check-column {
  width: 2.2em !important;
}

Ciemniejszy, spokojniejszy panel

Jeśli pracujesz w wp-admin wieczorami, jasne tło męczy. WordPress ma schematy kolorów, ale nie obejmują one całego panelu. Lekka warstwa CSS przyciemnia tło treści:

/* Lekko przyciemnione tlo panelu */
#wpbody-content,
.wrap {
  background: #1e1e1e !important;
  color: #e4e4e4 !important;
}
#wpbody-content .wp-list-table {
  background: #2a2a2a !important;
}
#wpbody-content a {
  color: #6cb6ff !important;
}

To uproszczony tryb ciemny — pełny wymaga dopracowania pól formularzy. Trzymaj go jako osobną regułę i włączaj wieczorem jednym kliknięciem z paska akcji.

Ukryj Pomoc, Opcje ekranu i poprawki Gutenberga

Górne zakładki Pomoc i Opcje ekranu rzadko są potrzebne. W edytorze blokowym warto z kolei poszerzyć obszar pisania:

// Ukryj zakladki Pomoc / Opcje ekranu (JS, document_idle)
['#contextual-help-link-wrap', '#screen-options-link-wrap']
  .forEach(sel => {
    const el = document.querySelector(sel);
    if (el) el.style.display = 'none';
  });

// Gutenberg: szerszy obszar tresci
const css = document.createElement('style');
css.textContent =
  '.editor-styles-wrapper .wp-block { max-width: 900px; }';
document.head.appendChild(css);

Złóż własny zestaw

Trzymaj każdą poprawkę jako osobną, nazwaną regułę — "wp-admin: bez powiadomień", "wp-admin: szerszy edytor", "wp-admin: ciemny" — każdą przypiętą do wzorca */wp-admin/*. Wtedy w kilka sekund dopasujesz panel do zadania: czysty kokpit rano, tryb ciemny wieczorem.

Gotowe reguły dla panelu WordPressa znajdziesz w katalogu — zobacz przykłady dla wp-admin i skopiuj, co pasuje. Zainstaluj JustZix i uporządkuj swój kokpit już dziś.

Oceń ten wpis

Brak ocen — oceń jako pierwszy.

Wypróbuj samodzielnie

Zainstaluj JustZix i wklej dowolny snippet z tego artykułu. Dwie minuty od zera do działającej reguły na wszystkich Twoich urządzeniach.

Pobierz JustZix

Funkcje · Jak to działa · Przykłady · Zastosowania