wordpress show specific html for descktop and another html for mobile

In wordpress I have a header.php that inside it I coded desktop and mobile HTML together. the problem is that for each device the other html are loaded and I just make them display none by media query. that makes performance and SEO problems as I know.

I want to just load the html of desktop in desktop and mobile in mobile. I used wp_is_mobile() before but as you know this function doesn’t works when you enable cache.

this is a example of what is my header.php look like:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <?php if (function_exists('wp_body_open')) {
        wp_body_open();
    } else {
        do_action('wp_body_open');
    } ?>
    <header>
        <div id="main-menu" class="<?php print_custom_header_classes(); ?>">
            <!------------------------------ mobile menu ------------------------------>
            <div class="mobile-nav">
                        <div class="navbar-toggler transparent-highlight">
                            <span class="nav-icon"></span>
                        </div>
                        <div class="header-brand header-brand--mobile">
                            <a class="header-brand__link transparent-highlight" href="<?php echo site_url(); ?>">
                                <img src="<?php echo get_template_directory_uri(); ?>/assets/images/logo.webp" alt="" width="100" height="80" class="header-brand__link--logo">
                            </a>
                        </div>
            </div>
            <div class="main-menu__wrapper main-menu__wrapper--mobile">
                    <?php wp_nav_menu(
                        array(
                            'theme_location' => 'siteMenu',
                            'container' => true,
                            'menu_class' => 'main-menu__list',
                            'li_class' => 'main-menu__item',
                            'a_class' => 'main-menu__link'
                        )
                    ); ?>
            </div>
            <!------------------------------ desktop menu ------------------------------>
            <div class="container">
                <div class="main-menu__wrapper">
                      <!---------- desktop content goes here I did not add in order not to write additional code ---------->
                </div>
            </div>
    </header>

another option is add by js but this approach is not good for SEO and also mybe load not as fast as html when defering. Is there any other options that I can use? Any helpful approach and efforts are appreciated.

You need to sign in to view this answers

Related Post