Wat is de admin bar en hoe kan het beter?

De admin bar is een horizontale balk die bovenaan op elke pagina van je WordPress-website staat. Je krijgt hem te zien krijgt eens je ingelogd bent op jouw knaller van een website. De balk tracht snel toegang te bieden tot verschillende functies en instellingen van je website, waardoor het beheren van je site eenvoudiger wordt. Helaas is het vaak een geval van bossen en bomen. De een die de ander niet ziet. Een boeltje dus.

Je website gebruiksvriendelijk maken

In de wonderlijke wereld van webontwikkeling is het dan ook de taak van de developers om niet alleen om een schone, doelgerichte website te creëren, maar ook om ervoor te zorgen dat alles gemakkelijk te beheren valt voor de eindgebruiker. Eén van de belangrijkste aspecten hiervoor is dus de admin bar, die een directe link vormt tussen de backend (= alles achter de schermen) van de website en de acties die de gebruiker kan uitvoeren.

Een admin bar die niet is aangepast aan de gebruiker kan leiden tot verwarring en frustratie. Daarom is het belangrijk om de admin bar te vereenvoudigen en wat te stroomlijnen, zodat gebruikers gemakkelijk kunnen vinden wat ze nodig hebben en er intuïtief met kunnen werken. Let’s go with the flow!

Door de admin bar aan te passen aan de technisch kennis (bij de één is dat al wat hoger dan bij de andere… ) en de behoeften van de gebruikers, kunnen we de drempel verlagen voor het beheren van de website. Dit betekent bijvoorbeeld het vervangen van technische termen door duidelijke en begrijpelijke taal, het verwijderen van overbodige knoppen en opties, en het toevoegen van aanwijzingen en instructies die de gebruiker begeleiden bij het werken met de website.

Hoe doen we dat juist?

Een beetje code toevoegen aan de functions.php hé! Maar ook vakjargon vertalen en er voor zorgen dat onze plugins geen onnodig tabs opladen (de meeste plugins laten dat flink aanpassen op hun instellingen pagina).

/*--------------------------------------------------------------------------------------*\
|  ADMIN BAR: REMOVE NODES
\*--------------------------------------------------------------------------------------*/
function remove_nodes_admin_bar(){

        global $wp_admin_bar;

	$wp_admin_bar->remove_node('wp-logo');
        $wp_admin_bar->remove_menu('site-name');
	$wp_admin_bar->remove_node('updates');
        $wp_admin_bar->remove_menu('comments');
        $wp_admin_bar->remove_menu('new-post');
	$wp_admin_bar->remove_menu('new-projecten');
        $wp_admin_bar->remove_menu('gravityforms-new-form');

	$wp_admin_bar->add_node( 
		array( 
			'id' => 'customize', 
			'title' => 'Instellingen', 
		) 
	);
	
}

add_action( 'wp_before_admin_bar_render', 'remove_nodes_admin_bar',999 );

/*--------------------------------------------------------------------------------------*\
|  ADMIN BAR: ADD FRONT - BACK SWITCH
\*--------------------------------------------------------------------------------------*/
function custom_options_page_link() {

    global $wp_admin_bar;

	if (is_admin()) {

		$wp_admin_bar->add_menu(
			array(
				'id'    => 'frontend',
				'title' => 'Frontend <span class="frontend-icon"></span>',
				'href'  => get_home_url(),
			)
		);

	} else{

		$wp_admin_bar->add_menu(
			array(
				'id'    => 'backend',
				'title' => 'Backend <span class="backend-icon"></span>',
				'href'  => get_admin_url(),
			)
		);

	}
}

add_action('admin_bar_menu', 'custom_options_page_link');

/*--------------------------------------------------------------------------------------*\
|  ADMIN BAR: STYLE FRONT - BACK SWITCH
\*--------------------------------------------------------------------------------------*/
function override_admin_bar_css() { 

   if ( is_admin_bar_showing() ) { ?>

		<style type="text/css">

			#wp-admin-bar-frontend .frontend-icon::before {
				font-family: 'dashicons';
				content: '\f105';
				font-size: 14px;
				position: relative;
				float: left;
				margin-right: 6px;
			}
			#wp-admin-bar-backend .backend-icon::before {
				font-family: 'dashicons';
				content: '\f105';
				font-size: 14px;
				position: relative;
				float: left;
				margin-right: 6px;
			}

		</style>

   <?php }
}

add_action( 'admin_head', 'override_admin_bar_css' );
add_action( 'wp_head', 'override_admin_bar_css' );

Het resulaat

Het is een kleine moeite maar door de admin bar te stroomlijnen en alleen de essentiële functies beschikbaar te maken hebben we naar mijn mening de interface versimpelt, waardoor de klant (hopelijk) gemakkelijker kan navigeren en de gewenste taken kan uitvoeren.

Voor:

Na: