Tilpasning av WordPress admin: Utviklerguiden 2026

Når du leverer en WordPress-side til en kunde, er standard kontrollpanel ofte overveldende. Det er fullt av oppsalgsvarsler, menyer kunden aldri skal bruke, og teknisk sjargong som skaper support-tickets i stedet for innholdsarbeid.

Et generisk dashbord sier at du installerte et tema. Et tilpasset dashbord sier at du bygde et arbeidsverktøy under rollene som faktisk logger inn.

Denne guiden er skrevet for utviklere som leverer til redaktører, shop managers og klientroller i Norge og EU. Vi går gjennom enqueue av admin-CSS og JS, opprydding av menyer, capability-sjekker, isolering i must-use-plugin, og hvordan du unngår å ødelegge kjerne-skjermer. Offisiell referanse for enqueue og menybygging ligger på admin_enqueue_scripts og admin_menu.

#Hvorfor admin-tilpasning reduserer support

Etter overlevering av en WooCommerce-butikk med page builder ser klienten ofte førti menypunkter og bruker tre. Resten genererer spørsmål: «kan jeg klikke på Temaer?», «hva er ACF?», «hvorfor ser jeg WooCommerce → Status?».

På et redaksjonsoppsett med fire redaktører og én byråadministrator i Oslo falt «jeg har ødelagt noe»-mailene merkbart etter at Verktøy, Innstillinger og filredigerere ble fjernet for alle uten manage_options. Det handlet ikke om penere farger. Farlige stier forsvant fra synsfeltet til folk uten full tilgang.

Andre gevinst: onboarding. I stedet for en times «ikke klikk her» viser du én Support-side med dokumentasjon, kontakt og en kort publiseringsjekkliste. Det er white-label som produkt, ikke bare bytte av logo.

#Isoler koden i en must-use-plugin

Ikke legg admin-tilpasning i functions.php på barne-temaet. Når kunden bytter skin, forsvinner menyregler, enqueue og capability-sjekker. Byråkode som skal overleve temabytte hører hjemme i en must-use-plugin under wp-content/mu-plugins/.

En typisk struktur:

wp-content/mu-plugins/
  wppoland-admin-ux.php          # bootstrap (laster katalog)
  wppoland-admin-ux/
    menu.php
    enqueue.php
    capabilities.php
    dashboard.php

Bootstrap-filen i rot av mu-plugins/ lastes automatisk. Den krever bare filene under mappen. Fordelen er at koden alltid kjører, uavhengig av aktive vanlige plugins, og at du kan versjonskontrollere hele mappen uten at redaktører kan deaktivere den i Plugins-skjermen.

<?php
/**
 * Plugin Name: WPPoland Admin UX
 * Description: Menyopprydding, enqueue og support-sider for klientroller.
 * Author: wppoland.com
 */

declare(strict_types=1);

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$dir = __DIR__ . '/wppoland-admin-ux';
require_once $dir . '/menu.php';
require_once $dir . '/enqueue.php';
require_once $dir . '/capabilities.php';
require_once $dir . '/dashboard.php';

Test alltid med en egen brukerkonto som har klientrollen (Editor, Shop Manager, eller en custom rolle). Innlogging som Super Admin på staging skjuler bugene du nettopp «fikset» for kunden.

Hvis prosjektet allerede har en byrå-plugin med Composer-autoloading, kan mu-plugin-bootstrap bare kalle inn den pakken. Poenget er det samme: admin-UX skal ikke dø når et Elementor-child-tema byttes ut under en redesign. På flere norske hostingoppsett (SiteGround, Loopia, egen VPS med Bedrock) ligger mu-plugins utenfor det redaktører ser i Plugins-listen, og det er nettopp derfor den plasseringen passer til hard rules.

Hold filene små. Én fil for meny, én for enqueue, én for blokkering. Når en senere utvikler skal finne «hvorfor forsvant ACF-menyen», skal de ikke grave i en 800-linjers functions.php.

#Capability-sjekker før du rører menyen

remove_menu_page og add_menu_page er synlighets-API-er. De erstatter ikke tilgangskontroll. En bruker som kjenner URL-en kan fortsatt åpne tools.php eller options-general.php hvis capability tillater det.

Regler som holder i produksjon:

1. Sjekk current_user_can( 'manage_options' ) (eller en mer spesifikk capability) før du skjuler menyer for klientroller.
2. Skjul aldri menyer for den som skal feilsøke. Administrator uten synlig meny koster mer tid enn den sparer.
3. Når du virkelig skal blokkere, bruk admin_init eller map_meta_cap og returner wp_die() / redirect med forklaring - ikke bare CSS display: none.

For redaksjoner som deler innlogging mellom frilansskribenter og faste redaktører, er det verd å lage en egen rolle med edit_posts og upload_files, uten install_plugins og edit_themes. Da blir menyoppryddingen en speiling av den rollen, ikke en lang liste med unntak på bruker-ID. get_role( 'editor' )->remove_cap( '...' ) hører hjemme i en engangs-migreringsrutine eller CLI-kommando, ikke i en request-hook som kjører på hver admin-side.

/**
 * Blokker direkte URL-tilgang til Verktøy for ikke-administratorer.
 */
function wppoland_block_tools_screen(): void {
	if ( ! is_admin() || wp_doing_ajax() ) {
		return;
	}

	if ( current_user_can( 'manage_options' ) ) {
		return;
	}

	$screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
	if ( ! $screen || 'tools' !== $screen->id ) {
		return;
	}

	wp_die(
		esc_html__( 'Du har ikke tilgang til denne skjermen.', 'wppoland-admin-ux' ),
		esc_html__( 'Tilgang nektet', 'wppoland-admin-ux' ),
		[ 'response' => 403 ]
	);
}
add_action( 'current_screen', 'wppoland_block_tools_screen' );

Capability-navn er kontrakten. Brukerne endrer ID, men «Shop Manager» beholder manage_woocommerce. Bygg regler rundt capabilities, ikke rundt bruker-ID 12.

#Opprydding av admin-menyen for klienter

Første synlige steg er remove_menu_page på admin_menu med sen prioritet, slik at plugins har registrert sine menyer før du fjerner dem. Dokumentasjonen for hooken er admin_menu.

/**
 * Rydd opp i admin-menyen for ikke-administratorer.
 */
function wppoland_clean_admin_menu(): void {
	if ( current_user_can( 'manage_options' ) ) {
		return;
	}

	remove_menu_page( 'tools.php' );
	remove_menu_page( 'options-general.php' );
	remove_menu_page( 'edit-comments.php' );
	remove_menu_page( 'edit.php?post_type=acf-field-group' );

	remove_submenu_page( 'themes.php', 'theme-editor.php' );
	remove_submenu_page( 'plugins.php', 'plugin-editor.php' );
}
add_action( 'admin_menu', 'wppoland_clean_admin_menu', 999 );

Advarsel: remove_menu_page skjuler bare lenken. Kombiner alltid med capability-blokk der stien er farlig (filredigerere, ACF-feltgrupper, plugin-installasjon).

For WooCommerce-butikker er det vanlig å la Shop Manager beholde Produkter, Ordrer og Kuponger, men fjerne Status, Utvidelser og Systemstatus-undermenyer. Det reduserer «kan jeg oppdatere denne pluginen?»-spørsmål uten å ta bort det som trengs for daglig drift.

Prioritet 999 er bevisst. Mange plugins registrerer menyer på admin_menu med standard prioritet 10. Hvis du kjører cleanup for tidlig, finnes ikke sluggen ennå, og remove_menu_page blir en no-op. Logg $GLOBALS['menu'] midlertidig på staging hvis du er usikker på hvilken slug et plugin bruker - ACF, Yoast og WooCommerce har alle ikke-opplagte stier.

Ikke fjern «Mediebibliotek» for redaktører som faktisk laster opp bilder. Det er en klassisk over-cleanup: panelet ser ryddig ut, og neste dag kommer ticket om at «Last opp» mangler. Rydd tekniske verktøy først; innholdsstier sist.

#Legge til egne meny-sider

Unngå tunge options-frameworks hvis du bare trenger én supportsiden. Kjerne-API-et er raskt og forutsigbart.

function wppoland_register_support_page(): void {
	add_menu_page(
		'Kundesupport',
		'Support',
		'edit_posts',
		'wppoland-support',
		'wppoland_render_support',
		'dashicons-sos',
		90
	);
}
add_action( 'admin_menu', 'wppoland_register_support_page' );

function wppoland_render_support(): void {
	if ( ! current_user_can( 'edit_posts' ) ) {
		wp_die( esc_html__( 'Tilgang nektet', 'wppoland-admin-ux' ) );
	}
	?>
	<div class="wrap">
		<h1><?php echo esc_html__( 'Trenger du hjelp?', 'wppoland-admin-ux' ); ?></h1>
		<div class="card">
			<h2><?php echo esc_html__( 'Kontakt utvikleren din', 'wppoland-admin-ux' ); ?></h2>
			<p>
				<?php echo esc_html__( 'E-post:', 'wppoland-admin-ux' ); ?>
				<a href="mailto:[email protected]">dev@wppoland.com</a>
			</p>
		</div>
	</div>
	<?php
}

Hold callbacken enkel: dokumentasjonslenker, publiseringsjekkliste, status for sikkerhetskopi hvis du allerede har den dataen. Ikke bygg et mini-CMS inne i Support-siden.

Bruk add_submenu_page under eksisterende CPT-menyer når støtten gjelder ett innholdstype (for eksempel «Arrangementer → Hjelp»). Toppnivå-menyer bør reserveres for ting kunden åpner ukentlig. For mange toppnivå-ikoner gir samme kaos som du nettopp ryddet bort.

#Enqueue av admin-CSS og JS (ikke admin_head)

admin_head med inline <style> fungerer i demos, men skalerer dårlig: ingen versjonering, vanskelig cache-busting, og du blander presentasjon med PHP. Bruk admin_enqueue_scripts, last egne filer, og begrens til skjermer der de trengs. Hook-referanse: admin_enqueue_scripts.

function wppoland_admin_assets( string $hook_suffix ): void {
	// Begrens til egne sider og dashbord - ikke last på alle kjerne-skjermer.
	$allowed = [
		'index.php',
		'toplevel_page_wppoland-support',
	];

	if ( ! in_array( $hook_suffix, $allowed, true ) ) {
		return;
	}

	$base = plugin_dir_url( __FILE__ );
	$ver  = '2026.09.21';

	wp_enqueue_style(
		'wppoland-admin-ux',
		$base . 'assets/admin.css',
		[],
		$ver
	);

	wp_enqueue_script(
		'wppoland-admin-ux',
		$base . 'assets/admin.js',
		[ 'jquery' ],
		$ver,
		true
	);

	wp_localize_script(
		'wppoland-admin-ux',
		'wppolandAdminUx',
		[
			'ajaxUrl' => admin_url( 'admin-ajax.php' ),
			'nonce'   => wp_create_nonce( 'wppoland_admin_ux' ),
		]
	);
}
add_action( 'admin_enqueue_scripts', 'wppoland_admin_assets' );

$hook_suffix er nøkkelen til å ikke bryte kjerne-skjermer. En global CSS som skjuler .notice på alle admin-sider fjerner også WordPress-kjernevarsler om kritiske sikkerhetsoppdateringer. Begrens selektorer til egne wrappers (.wppoland-support-wrap) eller egne hook-suffixer.

For merkevarefarger i admin-baren: overstyr få, dokumenterte selektorer, og test både classic og block editor. Gutenberg laster egen UI; bred #wpadminbar { background } er greit, mens !important på .components-button er en oppskrift på ødelagt editor.

/* assets/admin.css - hold omfanget smalt */
#wpadminbar {
	background: #1f2937;
}

#toplevel_page_wppoland-support .wp-menu-image::before {
	color: #059669;
}

.wppoland-support-wrap .card {
	max-width: 40rem;
}

Når du trenger script bare på én skjerm, er wp_enqueue_script inne i admin_enqueue_scripts med tidlig return den sikreste modellen. Unngå wp_print_scripts direkte i callbacken til add_menu_page - det bryter rekkefølgen på avhengigheter og gjør det vanskeligere å deaktivere scriptet senere.

Hvis admin.js snakker med REST, bruk wp_create_nonce( 'wp_rest' ) og wpApiSettings der det allerede finnes, eller lokaliser din egen nonce som i eksempelet over. Aldri stol på at «bare innloggede brukere» er nok uten nonce-sjekk på serveren.

#Ikke ødelegg kjerne-skjermer

Tre feil som går igjen i produksjon:

1. Global notice-hiding. .notice { display: none } fjerner både plugin-spam og kritiske kjernevarsler. Filtrer per plugin-klasse eller bruk admin_notices-callbacks med remove_action på kjente callbacks i stedet for blank hiding.
2. Fjerning av Plugins / Updates for alle. Klientroller skal ikke installere plugins. Administrator må. Hvis du skjuler Updates for manage_options, mister du synlighet på sikkerhetsreleases.
3. Omskriving av Settings API-skjermer. Ikke erstatt options-general.php med egen «forenklet» side med mindre du også speiler alle nødvendige options og validering. Mangelfull kopi bryter permalinks, siteurl og språk.

Når du tilpasser block editor, bruk enqueue_block_editor_assets separat fra admin_enqueue_scripts, og last bare det editoren trenger. Bland aldri store jQuery-UI-pakker inn på post.php uten behov.

Et praktisk regresjonstest-oppsett: åpne Listevisning for innlegg, Gutenberg for en side, Mediebiblioteket, WooCommerce → Ordrer, og din Support-side - med både Administrator og Editor. Hvis én av disse skjermene mister knapper, notices eller tastaturnavigasjon, rull tilbake CSS før du leverer. «White-label» som bryter kjerne-UI er ikke ferdig arbeid.

#Tilpasning av verktøylinjen (toolbar)

Verktøylinjen er synlig på frontend for innloggede brukere. Den egner seg til hurtighandlinger som «Tøm cache» - med nonce og capability, ikke bare en åpen GET-URL.

function wppoland_customize_toolbar( WP_Admin_Bar $wp_admin_bar ): void {
	$wp_admin_bar->remove_node( 'wp-logo' );

	if ( ! current_user_can( 'manage_options' ) ) {
		return;
	}

	$wp_admin_bar->add_node(
		[
			'id'    => 'wppoland-clear-cache',
			'title' => 'Tøm cache',
			'href'  => wp_nonce_url(
				admin_url( 'admin-post.php?action=wppoland_clear_cache' ),
				'wppoland_clear_cache'
			),
			'meta'  => [ 'title' => 'Tøm object cache' ],
		]
	);
}
add_action( 'admin_bar_menu', 'wppoland_customize_toolbar', 999 );

Håndter admin_post_wppoland_clear_cache med check_admin_referer og redirect tilbake. Uten nonce blir hurtigknappen et CSRF-mål.

#Dashbord-widgeter: velkomstskjermen

Når kunden logger inn, lander de på Dashbordet. Standardwidgeter som WordPress-arrangementer og Hurtigutkast er sjelden nyttige. Erstatt dem med status kunden faktisk spør om: backup, oppetid, «sist publisert».

function wppoland_dashboard_widgets(): void {
	remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );
	remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );

	wp_add_dashboard_widget(
		'wppoland_status_widget',
		'Nettstedstatus',
		'wppoland_render_status_widget'
	);
}
add_action( 'wp_dashboard_setup', 'wppoland_dashboard_widgets' );

function wppoland_render_status_widget(): void {
	echo '<p><strong>WordPress-kjerne</strong>: sjekk Oppdateringer for status</p>';
	echo '<p><strong>Sikkerhetskopier</strong>: bekreft siste jobb i backup-pluginen</p>';
	echo '<p><a href="' . esc_url( admin_url( 'admin.php?page=wppoland-support' ) ) . '">Åpne support</a></p>';
}

Unngå å hardkode «Oppdatert» med grønn hake hvis du ikke leser faktisk versjon. En løgnende statuswidget er verre enn ingen widget.

Widget-callbacks bør være billige. Ikke kall eksterne API-er synkront i wp_dashboard_setup-renderen. Hvis du trenger trafikk-tall, cache resultatet i en transient og vis «sist hentet»: ellers blir dashbordet tregt akkurat når kunden logger inn for å «bare sjekke raskt».

#Sjekkliste før overlevering

Kjør gjennom dette med en klientrolle-konto på staging:

1. Meny viser bare det som trengs for rollen; administrator ser fortsatt alt.
2. Direkte URL til Verktøy / Innstillinger / filredigerer blokkeres der det er meningen.
3. Admin-CSS og JS lastes bare på tillatte $hook_suffix.
4. Block editor og Media Library fungerer uten ødelagte knapper eller skjulte notices.
5. Toolbar-handlinger krever nonce og riktig capability.
6. Koden ligger i mu-plugin (eller dedikert byrå-plugin), ikke i temaet.
7. Ingen konkrete priser eller fake «99 % raskere»-påstander i support-teksten - bare kontakt og prosedyrer.

Dokumenter i README for prosjektet hvilke menyer som er skjult per rolle, og hvilken mu-plugin som eier reglene. Neste utvikler (eller du om seks måneder) skal ikke måtte reverse-engineere admin_menu-callbacks for å finne ut hvorfor Innstillinger mangler for Shop Manager.

#Oppsummering

Tilpasning av admin-området er UX og tilgangskontroll, ikke kosmetikk. Enqueue via admin_enqueue_scripts, bygg og rydd menyer på admin_menu, sjekk capabilities før du skjuler eller blokkerer, isoler i must-use-plugin, og hold CSS/JS unna kjerne-skjermer du ikke eier.

Et ryddig adminområde avgjør hvor ofte kunden ringer for å spørre hvor noe ligger. Skal panelet tilpasses rollene som faktisk bruker det, se WordPress-utvikling og admin-tilpasning.