Как вставить кнопку в header?
Добрый день.
Вставляю кнопку в header, получается шляпа.
<?php /** * @package Betheme * @author Muffin group * @link https://muffingroup.com */ $action_bar = mfn_opts_get('action-bar'); $translate['wpml-no'] = mfn_opts_get('translate') ? mfn_opts_get('translate-wpml-no', 'No translations available for this page') : __('No translations available for this page', 'betheme'); ?> <?php if ( isset($action_bar['show']) ): ?> <div id="Action_bar"> <div class="container"> <div class="column one"> <?php get_template_part('includes/include', 'slogan'); if (has_nav_menu('social-menu')) { mfn_wp_social_menu(); } else { get_template_part('includes/include', 'social'); } ?> </div> </div> </div> <?php endif; ?> <?php if (mfn_header_style(true) == 'header-overlay') { // overlay menu echo '<div id="Overlay">'; mfn_wp_overlay_menu(); echo '</div>'; // button echo '<a class="overlay-menu-toggle" href="#">'; echo '<i class="open icon-menu-fine"></i>'; echo '<i class="close icon-cancel-fine"></i>'; echo '</a>'; } ?> <div class="header_placeholder"></div> <div id="Top_bar" class="loading"> <div class="container"> <div class="column one"> <div class="top_bar_left clearfix"> <?php get_template_part('includes/include', 'logo'); ?> <div class="menu_wrapper"> <?php if ((mfn_header_style(true) != 'header-overlay') && (mfn_opts_get('menu-style') != 'hide')) { // responsive menu button $mb_class = ''; if (mfn_opts_get('header-menu-mobile-sticky')) { $mb_class .= ' is-sticky'; } echo '<a class="responsive-menu-toggle '. esc_attr($mb_class) .'" href="#" aria-label="'. __('mobile menu', 'betheme') .'">'; if ($menu_text = trim(mfn_opts_get('header-menu-text'))) { echo '<span>'. wp_kses($menu_text, mfn_allowed_html()) .'</span>'; } else { echo '<i class="icon-menu-fine" aria-hidden="true"></i>'; } echo '</a>'; // main menu mfn_wp_nav_menu(); } ?> </div> <div class="secondary_menu_wrapper"> <?php mfn_wp_secondary_menu(); ?> </div> <div class="banner_wrapper"> <?php echo wp_kses_post(mfn_opts_get('header-banner')); ?> </div> </div> </div> <?php if (! mfn_opts_get('top-bar-right-hide')) { get_template_part('includes/header', 'top-bar-right'); } ?> <div class="search_wrapper"> <?php get_search_form(true); if ( mfn_opts_get('header-search-live') ) { get_template_part('includes/header', 'live-search'); } ?> </div> </div> |
<?php /** * @package Betheme * @author Muffin group * @link https://muffingroup.com */ $action_bar = mfn_opts_get('action-bar'); $translate['wpml-no'] = mfn_opts_get('translate') ? mfn_opts_get('translate-wpml-no', 'No translations available for this page') : __('No translations available for this page', 'betheme'); ?> <?php if ( isset($action_bar['show']) ): ?> <div id="Action_bar"> <div class="container"> <div class="column one"> <?php get_template_part('includes/include', 'slogan'); if (has_nav_menu('social-menu')) { mfn_wp_social_menu(); } else { get_template_part('includes/include', 'social'); } ?> </div> </div> </div> <?php endif; ?> <?php if (mfn_header_style(true) == 'header-overlay') { // overlay menu echo '<div id="Overlay">'; mfn_wp_overlay_menu(); echo '</div>'; // button echo '<a class="overlay-menu-toggle" href="#">'; echo '<i class="open icon-menu-fine"></i>'; echo '<i class="close icon-cancel-fine"></i>'; echo '</a>'; } ?> <div class="header_placeholder"></div> <div id="Top_bar" class="loading"> <div class="container"> <div class="column one"> <div class="top_bar_left clearfix"> <?php get_template_part('includes/include', 'logo'); ?> <div class="menu_wrapper"> <?php if ((mfn_header_style(true) != 'header-overlay') && (mfn_opts_get('menu-style') != 'hide')) { // responsive menu button $mb_class = ''; if (mfn_opts_get('header-menu-mobile-sticky')) { $mb_class .= ' is-sticky'; } echo '<a class="responsive-menu-toggle '. esc_attr($mb_class) .'" href="#" aria-label="'. __('mobile menu', 'betheme') .'">'; if ($menu_text = trim(mfn_opts_get('header-menu-text'))) { echo '<span>'. wp_kses($menu_text, mfn_allowed_html()) .'</span>'; } else { echo '<i class="icon-menu-fine" aria-hidden="true"></i>'; } echo '</a>'; // main menu mfn_wp_nav_menu(); } ?> </div> <div class="secondary_menu_wrapper"> <?php mfn_wp_secondary_menu(); ?> </div> <div class="banner_wrapper"> <?php echo wp_kses_post(mfn_opts_get('header-banner')); ?> </div> </div> </div> <?php if (! mfn_opts_get('top-bar-right-hide')) { get_template_part('includes/header', 'top-bar-right'); } ?> <div class="search_wrapper"> <?php get_search_form(true); if ( mfn_opts_get('header-search-live') ) { get_template_part('includes/header', 'live-search'); } ?> </div> </div>
Это код header'a
Стилями я кнопку поправлю. Вопрос, что со шрифтом?Почему он так себя странно ведет. Что можно прописать(пробовал float,менял размеры, не помогает)
Код кнопки
<div class="popmake-1354"> <a target="_blank" href="/" class="popmake-1354"><span class="button_label">Обратная связь</span></a> </div> |
<div class="popmake-1354"> <a target="_blank" href="/" class="popmake-1354"><span class="button_label">Обратная связь</span></a> </div>
Дополнительно:
Так без стилей мы и не поймем почему он так выглядит
.top_bar_right_wrapper > div.book-now-button { display: block; float: left; margin-left: 10px; position: relative; top: 24px; } |
.top_bar_right_wrapper > div.book-now-button { display: block; float: left; margin-left: 10px; position: relative; top: 24px; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Вставлять кнопку прямо в большой файл header родительской темы Betheme — плохой вариант: при обновлении темы правка потеряется, а из-за неверного места легко сломать структуру шапки. Безопаснее делать это в дочерней теме: через настройки Betheme, hook, отдельный шаблон child theme или пункт меню с CSS-классом.
Если кнопку нужно поставить рядом с меню, сначала проверьте, можно ли добавить её как пункт меню и назначить CSS-класс, например
header-button. Это самый простой способ без PHP. CSS:#Top_bar .menu > li.header-button > a { background: #1b5083; color: #fff; border-radius: 4px; padding: 10px 16px; }
Если нужен именно PHP-вставка, ищите hook Betheme для области шапки или переопределяйте файл в child theme. Вставка рядом с логотипом обычно выглядит так:
<div class="header-cta"> <a class="button" href="/contacts/">Оставить заявку</a> </div>
Размещать блок нужно внутри контейнера шапки, но вне
<ul>меню, если это не пункт меню. Частая ошибка — вставить<div>внутрь списка<ul>или между незакрытыми PHP-условиями. Тогда «получается шляпа»: едет верстка, меню ломается на мобильном, кнопка наследует стили не того блока.Минимальный безопасный путь: child theme, копия только нужного header template, одна HTML-вставка и CSS. Перед правкой родительский Betheme-файл лучше не трогать.