WordPress - 将按钮添加到标题区域

Posted 2023-03-06

【中文标题】WordPress - 将按钮添加到标题区域

【英文标题】：WordPress - Adding button to header area

【发布时间】：2019-03-31 01:51:34

【问题描述】：

我正在尝试使用自定义按钮实现以下目标：

桌面：

手机：

请让我知道如何在我的 WordPress 网站上解决此问题。我想用这个按钮实现的是：在桌面上，按钮总是显示。在移动设备上，该按钮始终显示在 3 行菜单旁边。此时，我的网站在移动设备的 3 行菜单中显示蓝色按钮。我希望此按钮始终显示在此菜单之外，在 3 行菜单旁边，如上所示。谢谢！

感谢您的帮助。

【问题讨论】：

请分享您的代码或至少是您网站的链接...

【参考方案1】：

这是在移动设备中修改标题的代码：

<?php
    $scroll_trigger = get_option('stack_scroll_trigger', '200px');
    $mobile_scroll_trigger = get_option('stack_mobile_scroll_trigger', '200px');
    $scroll = ( 'yes' == get_option('stack_scroll_header', 'yes') ) ? 'data-scroll-class="'. $scroll_trigger .':pos-fixed"' : false;
    $mobile_scroll = ( 'yes' == get_option('stack_scroll_mobile_header', 'yes') ) ? 'data-scroll-class="'. $mobile_scroll_trigger .':pos-fixed"' : false;
    $mobile_scroll_class = ( 'yes' == get_option('stack_scroll_mobile_header', 'yes') ) ? 'bar--mobile-sticky' : false;

    $background = get_option('stack_header_background', 'original--bg');
?>

<div class="nav-container">

    <div class="bar bar--sm visible-xs <?php echo esc_attr($background); ?> <?php echo esc_attr($mobile_scroll_class); ?>" <?php echo wp_kses_post($mobile_scroll); ?>>
        <div class="container">
            <div class="row">
                <div class="col-xs-4 col-sm-10">
                    <?php get_template_part('inc/content-header', 'logo'); ?>
                </div>
                <div class="col-xs-8 col-sm-2 text-right mobile-header">
                    <?php 
                        if( class_exists('woocommerce') && 'yes' == get_option('stack_header_mobile_cart', 'yes') )
                            get_template_part('inc/content-header', 'woocommerce');
                        
                    ?>
                    <a class="hidden-md hidden-lg btn btn--sm btn--primary type--uppercase" href="#" target="">
                        <span class="btn__text">become a technician</span>
                    </a>
                    <a href="#" class="hamburger-toggle" data-toggle-class="#menu1;hidden-xs">
                        <i class="icon--sm stack-interface stack-menu"></i>
                    </a>
                </div>
            </div><!--end of row-->
        </div><!--end of container-->
    </div><!--end bar-->

    <nav id="menu1" class="bar bar--sm bar-1 hidden-xs hiddem-sm bar--transparent bar--absolute <?php echo esc_attr($background); ?>" <?php echo wp_kses_post($scroll); ?>>
        <div class="container">
            <div class="row">
                <div class="col-md-1 col-sm-2 hidden-xs">
                    <div class="bar__module">
                        <?php get_template_part('inc/content-header', 'logo'); ?>   
                    </div><!--end module-->
                </div>
                <div class="col-md-11 col-sm-12 text-right text-left-xs text-left-sm">
                    <?php get_template_part('inc/content-header', 'nav'); ?>    
                    <?php get_template_part('inc/content-header', 'buttons'); ?>
                </div>
            </div><!--end of row-->
        </div><!--end of container-->
    </nav><!--end bar-->

</div>

【讨论】：

这是我的原始文件：