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

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

12.05.2016

2

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

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

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 гривень.

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

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

Автор публікації Дмитро Кондрюк

В веб-індустрії з 2003 року. В 2009р. заснував проект Український WordPress (що у подальшому став офіційним сайтом команди локалізації WordPress в Україні). З 2010 року засновник і технічний директор проекту Український хостинг для WordPress (WPHost.me) - повноцінного хостинг-сервісу, максимально оптимізованого на використання CMS WordPress.

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

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

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