Úprava meta tagu viewport pre Divi tému

Ak máte stránku, postavenú na téme Divi a nechali ste si ju napríklad analyzovať, pomocou Google nástroja PageSpeed Insight, určite ste si všimli, že táto téma má meta tag viewport nastavený tak, že nie je možné stránku zväčšovať a zmenšovať na mobilných zariadeniach.

Tento tag je nastavený nasledovne:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Pre správne fungovanie na mobilných zariadeniach je potrebné zmeniť, alebo odstrániť vlastnosti z atribútu content.

• maximum-scale=1.0
• user-scalable=0

Tento meta tag je pridaný v hlavnej téme, v súbore functions.php, nasledovne:

function et_add_viewport_meta(){
	echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
}
add_action( 'wp_head', 'et_add_viewport_meta' );

Najjednoduchšie by bolo tento riadok upraviť, ale po aktualizácii témy by sa úpravy stratili.

Správny postup je nasledovný:

1.) ak ešte nemáte child tému pre Divi, vytvorte si ju. Tu nájdete návod. Alebo si ju rovno stiahnite z môjho GitHubu .

2.) Do functions.php v Child téme, pridajte tento kód:

/**
 * Odstránenie meta tagu viewport a pridani vlastného
 * @author PeterB aka Viking
 * url: https://wp-admin.sk/template/uprava-meta-tagu-viewport-pre-divi-temu/
 */
function viking_remove_divi_viewport() {
  // odstránenie meta tagu viewport
  remove_action( 'wp_head', 'et_add_viewport_meta' );
}
add_action( 'after_setup_theme','viking_remove_divi_viewport');

function viking_add_correct_divi_viewport() {
  // pridanie nového meta tagu
  echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
}
add_action( 'wp_head', 'viking_add_correct_divi_viewport' );

Pomocou hooku wp_head, môžete v podstate pridať do hlavičky akýkoľvek tag.

Tento snippet, patrí do functions.php, vašej aktuálnej témy.