我的网站在 WP 上，我使用 Hueman 主题。 我想在标题的右侧添加 baner。现在我使用标题图像，它有最大。宽度，我不知道是否应该在此标题图片上添加我的横幅或剪切宽度标题图像并在其旁边添加横幅。
我搜索了很多，找到了解决方案: https://wordpress.org/support/topic/ads-11?replies=6#post-4906945
我不知道我可以把 div 和我的横幅放在哪里，这是 header.php 的样子
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(''); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header id="header">
<?php if ( has_nav_menu('topbar') ): ?>
<nav class="nav-container group" id="nav-topbar">
<div class="nav-toggle"><i class="fa fa-bars"></i></div>
<div class="nav-text"><!-- put your mobile menu text here --></div>
<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
<div class="container">
<div class="container-inner">
<div class="toggle-search"><i class="fa fa-search"></i></div>
<div class="search-expand">
<div class="search-expand-inner">
<?php get_search_form(); ?>
</div>
</div>
</div><!--/.container-inner-->
</div><!--/.container-->
</nav><!--/#nav-topbar-->
<?php endif; ?>
<div class="container group">
<div class="container-inner">
<?php if (ot_get_option('header-image') == ''): ?>
<div class="group pad">
<?php echo alx_site_title(); ?>
<?php if (ot_get_option('site-description') != 'off'): ?><p class="site-description"><?php bloginfo('description'); ?></p><?php endif; ?>
</div>
<?php endif; ?>
<?php if (ot_get_option('header-image')): ?>
<a href="<?php echo home_url('/'); ?>" rel="home">
<img class="site-image" src="<?php echo ot_get_option('header-image'); ?>" alt="<?php get_bloginfo('name'); ?>">
</a>
<?php endif; ?>
<?php if (has_nav_menu('header')): ?>
<nav class="nav-container group" id="nav-header">
<div class="nav-toggle"><i class="fa fa-bars"></i></div>
<div class="nav-text"><!-- put your mobile menu text here --></div>
<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
</nav><!--/#nav-header-->
<?php endif; ?>
</div><!--/.container-inner-->
</div><!--/.container-->
</header><!--/#header-->
<div class="container" id="page">
<div class="container-inner">
<div class="main">
<div class="main-inner group">
这是我编辑的 custom.css，用于对移动用户隐藏此横幅
/*
Add your custom styles in this file instead of style.css so it
is easier to update the theme. Simply copy an existing style
from style.css to this file, and modify it to your liking.
When you update your theme, backup this file and re-add it after.
*/
/* Global */
.mystyle {}
.ads-header-desktop {
display: block;
float: right;
margin-right: 5px;
margin-top: -95px;
}
/* hide or display */
.ads-header-desktop { display: block; }
@media only screen and (max-width: 800px) {
.ads-header-desktop { display: none; }
}
/* Tablet - 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
.mystyle {}
}
/* Mobile - 480px & 320px */
@media only screen and (max-width: 719px) {
.mystyle {}
}
/* Mobile - 320px */
@media only screen and (max-width: 479px) {
.mystyle {}
}
总结:
这是我的网站:www.st-mobilny.pl，我想做类似的事情:1drv.ms/1RoUkIV
最佳答案
最好的办法是添加绝对位置:
<div class="container-inner">
<div class="banner"><a href=""><img src="path/to/image" alt=""></a></div>
<?php if (ot_get_option('header-image') == ''): ?>
在你的 CSS 中:
.container-inner {
position: relative;
}
.banner {
position: absolute;
top: 50px;
right: 0px;
z-index: 100;
}
@media screen and (max-width: 768px) { .banner { position: static;} }
将 top 和 right 更改为您想要的任何内容。我添加了一个示例媒体查询来展示如何更改它，所以一旦您进入移动设备，横幅就会出现在 Logo 上方。如果您想要 Logo 下方的横幅，请将 html 中的 div 移动到菜单上方。
关于php - 如何在标题中创建横幅，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33812293/