Розпродаж хостинг-планів на неймовірних умовах!
Знижка від 300 до 500грн!
Як привернути увагу відвідувачів

Зверніть увагу: ця публікація побачила світ більше року тому, з того часу багато чого могло змінитися ;)

Вітаю. Зараз зробимо з Вами дуже швидко гарну панельку, що буде привертати увагу Ваших відвідувачів, додасть можливість виводити якусь цікаву інформацію (наприклад, про акції чи важливі новини) , при цьому не буде заважати користуватись сайтом. Складність – середня, тобто потрібно мати певні навички у редагуванні файлів шаблону.

Screenshot_186

Приблизно так буде виглядати ця панелька , прикріплена до нижнього краю екрану. Отже перше, це html код, який потрібно додати у Ваш шаблон перед тегом </body> , зазвичай цей тег можна знайти у footer.php в кореневій папці шаблону:

<div id="annonbar">
<strong>Ексклюзивно на WordPress.co.ua!</strong> <a href="#">Підпишись на новини.</a>
</div>

Оця частина <strong>Ексклюзивно на WordPress.co.ua!</strong> <a href="#">Підпишись на новини.</a> – це і є текст , що показується на панелі, тобто Ви можете замінити на щось своє.

Наступний крок – прикрашаємо нашу панельку і задаємо їй положення , додаючи відповідні стилі, наприклад, у файл style.css в самому кінці, що також у кореневій папці шаблону:

#annonbar {
background: rgb(252, 70, 30);
color: #fff;
display: block;
position: fixed;
bottom: 0;
width: 100%;
padding: 10px 0px;
text-align: center;
}
#annonbar a{
color: #fff;
text-decoration:underline;
font-weight: normal;
}

Нічого супер складного ми не прописали у стилях, лише вказали колір фону, колір тексту, невеличкі відступи для тексту всередині панелі, рівняння тексту по центру та ширину панелі , що дорівнює 100% ширини екрану, і фіксовану позицію – 0 пікселів від нижнього краю. Ви можете, наприклад, прикріпити панельку до верхнього краю, змінивши bottom: 0 на top: 0

Додамо ще маленький трюк – приховаємо цю панель з екранів мобільних пристроїв, адже вона може зайняти достатньо велику частину екрану, для цього у стилі ще додамо такий код:

@media only screen and (max-width: 767px) {
#annonbar {
display: none;
}
}

Тим самим  ми ховаємо панель з екранів, ширина яких менша за 767 пікселів. Звісно, для ідеального вигляду можна ще підшаманити, але це вже на Ваш розсуд. Зверніть увагу, що панелька трохи “перекриє” нижню частину екрану, в такому випадку можна додати в стилі, наприклад, аби вона була напівпрозорою:

#annonbar {
opacity: 0.65;
}

Для тих, хто не хоче морочитись з усіма цими кодами, ми зробили міні-плагін, який додасть в адмінці поле для введення тексту:

admin-menu

а також покаже цю панельку на Вашому сайті автоматично, якщо Ви додали якийсь текст у поле, описане вище:

anon-demo

Роботу плагіну можна побачити на нашому демо-сайті http://demo.wordpress.co.ua/silk/ , завантажити плагін можна за посиланням нижче усього за 7 гривень.

Зауважте, плагін не має опцій для зміни зовнішнього вигляду, лише вбудовано можливість для редагування  тексту, що виводиться на панелі за допомогою візуального редактора (показано на скріншоті).

Дмитро Кондрюк

Автор публікації

Share a little biographical information to fill out your profile. This may be shown publicly.

Є що відповісти?

Your email address will not be published.

Можна скористатися такими тегами в тексті:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  • 21.05.2016 at 19:48

    тиждень пройшов – хоч би хтось муркнув про те як прив\’язати панель до правого боку.

    • 21.05.2016 at 20:06

      хіба хтось питав ) , взагалі має бути не складно, блок позиціонується фіксовано, в прикладі – до гори чи до низу, вам треба замінити на право чи ліво, але як на мене, возні буде багато