我正在使用的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 =http://www.srcmini.com/” tel:+ 91- 9996320362″ > + 91-9996320362 < /a> < br> < a href=” tel:+91-8708558959″ > + 91-8708558959 < /a> < / div>
我使用了以下CSS:.contact-phone {display:block; 文字对齐:右; font-size:24px; 行高:1.6;字体粗细:400;字体家族:” Oswald” , 无衬线; }
#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>
', ) );
现在将调用小部件转到你的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="http://www.srcmini.com/tel:+91-9996320362">
+91-9996320362<
/a>
<
br>
<
a href="http://www.srcmini.com/tel:+91-8708558959">
+91-8708558959<
/a>
在里面。检查屏幕快照http://prntscr.com/fgf24h, 它会像这样出现在前端:http://prntscr.com/fgf2km
对于手机可以, 请将此CSS添加到你的style.css中, 或者如果在其中添加任何响应目录文件
@media only screenand (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%;
}}
如果有任何问题, 请在下面添加评论。
【在菜单顶部添加电话号码,并且应该可以在移动设备中查看】谢谢
推荐阅读
- 在WordPress 3.2.x中创建页面时缺少管理模板选择
- 将WooCommerce注册表单添加到任何页面/模板
- 将小部件添加到主题激活的自定义WordPress侧边栏()
- 在WordPress中为Gravatar img添加类
- 将自定义顶级外部和自定义子菜单外部链接添加到WP Admin
- 在WordPress中使用CMB2添加具有自定义回调函数的自定义元框()
- #私藏项目实操分享# 在shiro基础上整合jwt,可在项目中直接使用呦
- 使用 Python Poetry 进行依赖管理
- k8s 使用 vocano.sh 支持binpack