Sådan tilføjes itemprop="url" og "name" data til en WordPress-menu med php

Kort introduktion til Googles struktureret data
Googles strukturerede data er en form for markup, der hjælper Google med at identificere nøgleinformation på din hjemmeside, der kan bruges til uddrag i søgeresultaterne. Så hvis du er et hotel, kan du tilføje data som foreksempel identificere dine gennemsnitlige ratings og prisklasser, så Google kan bruge disse oplysninger til at oprette et bedre søgeresultat.

Dette blogindlæg handler om hvordan du med PHP/HTML kan tilføje Google-struktureret data / Schema markup (SiteNavigationElement) til din WordPress-navigationsmenu “wp_nav_menu”. Indlægget er rettet primært mod dem, der har nogen viden om programmering af WordPress-temaer 🤓

Udfordringen med WordPress menu og tilføjelse af schema data
WordPress menuen outputtes i html af en funktion, så hvad gør du hvis du gerne vil tilføje schema data til indholdet hvor vi inkluderer itemprop= “url” og “name”.

Din WordPress navigations menu funktion ser nok ud lignende som denne:

wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'cco_menu'));

Løsningen 🔨🔨
Indpak menufunktionen som spytter navigationsmenuen ud med et div element for at henvise til “SiteNavigationElement” og udbyg WordPress funktionen med at indpakke menu li med en span som indeholder itemprop=”name”.

Sådan her:

<div class=""  itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">									  
wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'ms_menu',   'before' => '', 'after' => '')); 
 </div>

Tilføj derefter følgende filter til din functions.php-fil:

function add_menu_attributes( $atts, $item, $args ) {
  $atts['itemprop'] = 'url';
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_attributes', 10, 3 );

Det var det! 🙌

Lidt læsestof/info omkring Schema og WordPress filters:

Mere baggrunds læsning omkring Googles strukturerede Schema data, kan du finde her: