กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • How to Create a Responsive Menu for Your WordPress Theme

    April 10, 2018

    Step 1 – Create a Child Theme
    https://codex.wordpress.org/Child_Themes
    Copy across the header.php from your current theme and create an empty functions.php.

    Step 2 – Add a New Menu Location

    Adding a menu location to house our mobile menu will make the solution far more flexible. Working with a menu location rather than with a specific menu will enable new menus to be assigned to the location without any need to update the stylesheet. To add a new menu location, add the following to functions.php:

    function extra_setup() {
register_nav_menu (‘primary mobile’, __( ‘Navigation Mobile’, ‘twentythirteen’ ));
}
add_action( ‘after_setup_theme’, ‘extra_setup’ );

    Now when you go to Appearance > Menus in the backend of your WordPress installation, you’ll now see two menu locations as possible options for a menu. Create a menu and assign it to the new location so that you have something to test with.

    Screen snippet showing additional menu location in Theme LocationsAdding a mobile menu to the theme locations

    Step 3 – Add the New Location to the Header

    header.php, find the existing call to wp_nav_menu and add the following immediately underneath

    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary mobile’, ‘menu_class’ => ‘nav-menu’ ) ); ?>;

    This call generates the HTML for our new menu location.

    Step 4 – Set the CSS classes for the menus

    To show the appropriate menu, we are going to make use of @mediaqueries to toggle the displaying of the primary and mobile menus.

    By default, WordPress wraps menus in a div tag with a class name derived from the menu name. Whilst we could simply use these class names in our stylesheet, that would mean having to update the stylesheet every time a different menu is assigned to a location. To maximise flexibility we will set our own more generic class name for the menu container. We can do this very simply by using the wp_nav_menu_args filter.

    Go back to your functions.php file and add the following:

    function set_container_class ($args) {
$args[‘container_class’] = str_replace(‘ ‘,’-‘,$args[‘theme_location’]).’-nav’; return $args;
}
add_filter (‘wp_nav_menu_args’, ‘set_container_class’)

    All we are doing here is setting the container_class to the theme location (replacing spaces with hyphens) and adding ‘-nav’. We have registered the locations primary and primary mobile so WordPress will now output our 2 menus wrapped in <div class=”primary-nav”> and <div class=”primary-mobile-nav”> elements respectively.

    Step 5 – Amend the Stylesheet to Control Menu Display

    Our final step is to add the styling to only show the appropriate menu. Open styles.css and add the following:

    .primary-mobile-nav {
display: none;
}
@media (max-width: 643px){
.primary-nav {
display: none;
}
.primary-mobile-nav {
display: block;
}
}

    Generally, we don’t want the mobile menu to show so we’ll hide it by default by setting its display attribute to none.

    To ensure that we only show the mobile menu (and hide the primary menu) when we get below a certain screen-size, we place the display statements within an appropriate @media query. For the TwentyThirteen theme it’s at 643px but you’ll need to check your theme’s stylesheet to see which @media query activates the small menu.

    Of course, you can add any number of menus and target multiple screen-sizes just by adding more menus in steps two and three and updating the stylesheet with the appropriate @media queries.

    Just five quick and easy steps to add awesome mobile menus to your responsive WordPress theme and provide your non-desktop users with a far better and more tailored experience.

    https://premium.wpmudev.org/blog/how-to-create-awesome-responsive-menu/


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories