Размещение баннера или кнопки в header WordPress

3 сентября, 2013 admin

Размещение баннера или кнопки в header WordPressПри настройке внешнего вида сайта очень часто бывает необходимо установить в шапку дополнительную кнопку или баннер. Некоторые  шаблоны WordPress даже поддерживают такую функцию, однако даже в этих случаях она не всегда реализована именно так, как того желаем мы.

В Интернете много советов и статей на эту тему, но мы не будем копаться в дебрях, рассмотрим очень простой и надежный способ размещения баннера или кнопки в header WordPress.

Никаких особых знаний css или php вам не понадобится, поэтому смело можете приступать к реализации вашей идеи!

Как правило, и кнопка и баннер предполагают наличие изображения, формат изображения может быть любым: gif, jpg, png и другие. Соответственно, при нажатии на данное изображение мы должны попадать на нужную нам страницу. Поэтому первым делом переходим в админ-панель сайта, жмем «Записи» - «Добавить новую» и стандартным способом добавляем медиафайл, то есть подготовленный рисунок.

Далее нам нужно поместить в него ссылку на необходимую страницу, для этого выделяем изображение и жмем на кнопку «Вставить/изменить ссылку»Изменить-вставить ссылку, нажимаем «Обновить», в принципе все уже готово. Здесь же вы можете отредактировать размер изображения или установить на него рамку по своему вкусу.

После того, как вы проделали данную операцию,  следует перейти на вкладку «Текст». Именно здесь находится необходимый нам html-код баннера, который нужно просто скопировать:

Код баннера

Теперь можно просто разместить его в любом месте header.php, для этого переходим на кладку "Внешний вид" - "Редактор". Однако, скорее всего, расположится он на сайте не совсем так, как вы того хотели.

Для начала вам нужно отыскать в этом файле функцию вывода заголовка и подзаголовка, как правило, они обозначены: title и description. Код желательно размещать под функцией заголовка, но в теле селектора <div id="header"> до закрывающего тега <div>.

После того, как вы отыскали необходимое место, следует разместить следующий код и нажать кнопку «Обновить файл»:

<div class="banner"><div>
 <strong>Здесь необходимо вписать код вашего баннера</strong>
 </div>
 </div>

Большая часть работы проделана, осталось лишь указать точное расположение вашего баннера в файле style.css. Для этого в любое место, можно даже в самый конец файла, нужно вставить код:

.banner {
 float: right;
 margin-top: 11px;
 margin-right: -50px;
 }

Обновляйте файл и смотрите результат на странице своего сайта. Скорее всего, с первого раза в точку вы не попали, поэтому изменяйте параметры строчек margin-top и margin-right в соответствии со своими задачами.

Точно также можно прописать неограниченное количество баннеров и кнопок в header своего сайта, для этого всего лишь надо изменить название селектора, например banner1 или banner2.

Это полезно знать:

Опубликовано в рубрике Обучающие статьи Метки:
«
»
Вы можете оставить комментарий, или ссылку на Ваш сайт.

31 комментарий к записи “Размещение баннера или кнопки в header WordPress”

  1. Лана:
    14.01.2014 в 5:13 пп

    День добрый! Не подскажите куда надо вставлять html-код кнопки в заголовок в теме Graphene WordPress. Хочется сделать кнопку «Заказать обратный звонок». Расположила код сразу под — ничего не получилось. Может через какой плагин попробовать?

    Ответить
    • admin:
      14.01.2014 в 5:32 пп

      Ставьте первый код в header.php:

      <div class="banner"><div>
 <strong>Здесь необходимо вписать код вашего баннера</strong>
 </div>
 </div>

      После /* Header menu */(после закрывающего тега </div> и перед
      <?php
      /* Secondary menu */
      В конец style.css прописывайте код:

       

      .banner {
 float: right;
 margin-top: -100px;
 margin-right: 50px;
position:relative;
z-index: 1000;
 }

      Соответственно, значения margin-top и margin-right необходимо изменить в соответствии с вашими предпочтениями. Если что-то не получилось — пишите, попробуем справиться с вашей проблемой!

      Ответить
  2. Лана:
    14.01.2014 в 6:52 пп

    Спасибо, после вашего ответа понятно стало куда вставлять первый код. Все сделала , но опять почему-то не получилось. После /* Header menu */(после закрывающего тега и перед
    <?php
    /* Secondary menu */
    перед и после вставки кода строчки надо пропускать-я пропустила только перед
    <?php
    /* Secondary menu */?
    А вообще, у Вас самая, понятно для меня написанная, статья!

    Ответить
    • admin:
      14.01.2014 в 7:47 пп

      Ваш код должен выглядеть примерно вот так:

      <?php do_action( 'graphene_header_menu' ); ?>
</div>
 
<div class="banner"><div>
<a href="ССЫЛКА"><img class="alignnone size-full wp-image-42" alt="Заказать обратный звонок" src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="320" height="61" /></a>
</div>
</div>
 
<?php
/* Secondary menu */

      Разумеется, ширина и высота изображения у вас, скорее всего, будет иная!

      Ответить
  3. Лана:
    14.01.2014 в 7:07 пп

    После того как начала пробовать вставлять код банера задумалась. Сейчас у меня сайт на компьютере, а когда я его перенесу на хостинг и присвою доменное имя код банера должен измениться и придется все заново переделывать. Может пока и не стоит ничего менять. А то я совсем запутаюсь.

    Ответить
    • admin:
      14.01.2014 в 7:39 пп

      Код банера нужно будет отредактировать в соответствии с тем, как у вас изменится путь до изображения и ссылка банера! В ином случае редактировать ничего не придется!

      Ответить
  4. Лана:
    14.01.2014 в 8:22 пп

    Вот спасибо огромное! Все-таки была ошибка в первом коде — увидела когда переписала все заново по Вашей инструкции! Сейчас все получилось — буду продолжать дальше. Надо у Вас на сайте еще что-нибудь изучить. Спасибо!

    Ответить
  5. Татьяна:
    28.02.2014 в 11:45 пп

    Спасибо за доступную инструкцию, как разместить кнопку в шапке сайта:) Сейчас попробую поэксперементировать:)

    Ответить
    • admin:
      01.03.2014 в 2:45 пп

      Если что-то не будет понятно — пишите! Кстати, обратите внимание на исходящие внешние ссылки с вашего сайта!

      Ответить
  6. Михаил:
    05.03.2014 в 3:30 дп

    Спасибо большое автору мне очень эта статья помогла

    Ответить
  7. Кирыч:
    16.03.2014 в 2:24 пп

    Установил картинку вашим методом, но получается её перекрывает слой css, z-index не срабатывает, может у Вас есть какие идеи?

    Ответить
    • admin:
      16.03.2014 в 2:48 пп

      Здравствуйте, опишите, пожалуйста, проблему подробнее! Укажите адрес вашего сайта, вышлите архив с вашим шаблоном на support@site-s-nulya а также напишите куда именно необходимо разместить изображение!

      Ответить
  8. Кирыч:
    16.03.2014 в 8:32 пп

    Сайт локально на denwer, логотип нужно разместить в header поверх слоя css, тема twentyeleven.Воткнул в header div и подключил к стилям, но логотип оказывается под слоем а не над ним как у вас в шапке.

    Ответить
    • admin:
      17.03.2014 в 4:27 пп

      Код необходимо вставить в header между <header id=»branding» role=»banner»> и <hgroup>, хотя возможно имеются и другие варианты. Я пользовался именно этим. Код в style.css в данном случае выглядит так:

      .banner1 {
 float: left;
margin-top: 100px;
padding: 100px 100px 100px 100px;
position: absolute;
 }

      Обратите внимание, что имя селектора я использовал banner1, поскольку banner был занят, замените при копировании на свой. Также было установлено позиционирование элемента с помощью position: absolute; Выглядит это так:

      positionabsoluteОтпишитесь, пожалуйста, о результате!

      Ответить
  9. Эля:
    02.07.2014 в 9:18 дп

    Очень хорошая статья, действительно редкая, очень долго искала подобную 🙂 Спасибо!
    Но подскажите, как можно вставить в шапку сайта, как на Вашей картинке для Кирыча, не просто картинку со ссылкой, а красивую кнопку? Пробовала вставить шорткоды готовых кнопок, но они отображаются в виде текста…
    Заранее благодарна 🙂

    Ответить
    • admin:
      02.07.2014 в 9:23 дп

      Здравствуйте, Эля! По сути, баннер и кнопка — это одно и то же. Соответственно, вам необходимо воспользоваться готовым решением, приведенным в данной статье. Если что-то не будет получаться — обязательно пишите с указанием адреса вашего сайта!

      Ответить
  10. Эля:
    02.07.2014 в 9:33 дп

    Нууу, не совсем ))) Как мне кажется, кнопка должна красиво нажиматься)))) А баннер — это просто картинка, при нажатии на которую пользователь переходит по ссылке.
    Вот, я хочу поставить у себя красивую большую кнопку)))))))

    Ответить
    • admin:
      02.07.2014 в 10:00 дп

      Для реализации вашего желания необходимо использовать css-спрайт, а также псевдоклассы :hover и :active. Возможно в скором времени на эту тему выйдет отдельная статья!

      Ответить
  11. Артём:
    14.07.2014 в 6:02 пп

    Привет!
    я на новом WordPress в редакторе Header вижу только такой код

    <meta charset="» />

    <link rel="pingback" href="» />


    <script src="/js/html5.js» type=»text/javascript»>

    <body >

    <a href="» title=»» rel=»home»>

    <a class="assistive-text" href="#content" title="»>
    ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>

    куда вставлять ваш код?

    Ответить
    • admin:
      14.07.2014 в 9:51 пп

      Здравствуйте, можете дать название шаблона? Вообще код можно вставить в конец header.php, а затем отредактировать его местоположение с помощью css…

      Ответить
  12. Артём:
    15.07.2014 в 10:01 дп

    вот это? Twenty Twelve: Header (header.php)

    Ответить
    • admin:
      16.07.2014 в 1:27 пп

      Специально обновил Twenty Twelve до последней, Header.php:

      <?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ? rel="nofollow">" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>
 
		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ? rel="nofollow">"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->
 
		<?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ? rel="nofollow">"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>
	</header><!-- #masthead -->
 
	<div id="main" class="wrapper">
      Ответить
  13. Артём:
    16.07.2014 в 7:05 пп

    все верно, я строчку с кнопкой вставил между h1 и h2
    И вот теперь
    кнопка висит слева. чтобы передвинуть её вправо в самый конец заголовка, так чтобы слева шло название сайта и сразу правее на одном уровне с надписью была кнопка обратного звонка как сделать?

    Ответить
    • admin:
      27.07.2014 в 9:09 дп

      Насколько я понял, вторую часть кода вы не установили в style.css. Именно там можно отрегулировать положение объекта!

      Ответить
  14. Александра:
    17.08.2014 в 7:59 пп

    Добрый день. Ваша статья очень интересная, но вот не могу понять куда точно мне вставлять код.

    <html class=» «>

    <meta charset="» />

    <link rel="stylesheet" type="text/css" href="» media=»screen» />
    <link rel="pingback" href="» />

    <body >

    6, ‘sort_column’ => ‘menu_order’, ‘container’ => ‘ul’, ‘menu_id’ => ‘top-nav’, ‘menu_class’ => ‘nav fl’, ‘theme_location’ => ‘top-menu’ ) ); ?>

    <?php
    if ( class_exists( 'woocommerce' ) ) {
    echo '’;
    woocommerce_cart_link();
    echo ‘cart->get_checkout_url()).'»>’.__(‘Checkout’,’woothemes’).’‘;
    echo get_search_form();
    echo »;
    }
    ?>

    <a id="logo" href="» title=»»>
    <img src="» alt=»» />

    <a href="»>

    ²

    6, ‘sort_column’ => ‘menu_order’, ‘container’ => ‘ul’, ‘menu_id’ => ‘main-nav’, ‘menu_class’ => ‘nav fr’, ‘theme_location’ => ‘primary-menu’ ) );
    } else {
    ?>

    <li class="»><a href="»>

    Ответить
    • admin:
      17.08.2014 в 8:06 пп

      Здравствуйте, мне трудно сориентироваться, поскольку я не знаю куда именно вы желаете баннер установить! Попробуйте ниже или выше этих строк:

      <a id="logo" href="» title=»» rel="nofollow">
<img src="» alt=»» />
      Ответить
  15. Азат:
    28.10.2015 в 3:45 пп

    Здравствуйте! Спасибо, помогло, но хотелось бы узнать. Я хочу разместить три кнопки в Header, постоянно прописывать div class не хочется, так как все три кнопки одних стилей, можно ли прописать id под каждую кнопку и как это сделать? Я написал

    .knopki #knopka1 {position: absolute;
    margin-top: 10px;
    left: 500px;
    float: left;}

    .knopki #knopka2 {position: absolute;
    float: right;
    margin-top: 10px;
    right: 250px;}

    Можно ли как то по проще сделать?

    Ответить

Оставить комментарий

Яндекс.Метрика