html - 在菜单顶部添加电话号码，并且在移动设备中应该是响应式 View

Question

我使用的 wordpress 主题是这个: https://wordpress.org/themes/total/

我的网站是http://www.kalimataxiservice.com/

我只想在这个主题的右侧添加两个电话号码，如下所示:

桌面:

手机:

我使用了这个 html 但不起作用: <div class="contact-phone"><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+91-9996320362">+91-9996320362</a><br>
<a href="tel:+91-8708558959">+91-8708558959</a></div>

我使用了这个 CSS: .contact-phone {
display:block;
text-align: right;
font-size: 24px;
line-height: 1.6;
font-weight: 400;
font-family: 'Oswald', sans-serif;
}

Answer 1

好的，我们开始吧

首先，打开你的 style.css 并用下面的代码替换 CSS

#ht-site-navigation {
  float: left;
  padding: 27px 0;
  transition: padding 0.3s ease 0s;
  width: 47%;
}
.contact-phone {
    display:block;
    text-align: right;
    font-size: 24px;
    line-height: 1.6;
    font-weight: 400;
    font-family: 'Oswald', sans-serif;
    float: right;
       }

打开你的 functions.php 并找到下面的代码

function total_widgets_init() {

在此代码之后添加这样的新小部件

register_sidebar( array(
        'name'          => esc_html__( 'Header Phone', 'total' ),
        'id'            => 'total-head-mobile',
        'description'   => __( 'Add widgets here to appear in Phone not on header.', 'total' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h4 class="widget-title">',
        'after_title'   => '</h4>',
    ) );

现在把call widget转到你的header.php中打开，找到代码在它下面调用你的小部件

          <div class="contact-phone">
                        <?php if(is_active_sidebar('total-head-mobile')): 
                            dynamic_sidebar('total-head-mobile');
                        endif;
                        ?>  
                    </div>

从后面打开你的小部件，你会看到一个名为 Header Phone 的小部件，将一个文本框拖到其中并添加你的手机无代码

 <i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+91-9996320362">+91-9996320362</a><br>
<a href="tel:+91-8708558959">+91-8708558959</a>

初始化。查看截图http://prntscr.com/fgf24h它会像这样出现在前端:http://prntscr.com/fgf2km

OK for mobile 请将此 css 添加到您的 style.css 或者如果有任何响应目录文件添加到那里

@media only screen  and (min-width: 320px)  and (max-width: 767px) {
#ht-site-navigation {
  padding: 0;
}
.contact-phone {
  position: relative;
  z-index: 999;
}
#ht-site-branding {
  float: left;
  width: 100%;
}

}

如果有任何问题，请在下面添加评论。

谢谢