• Главная
  • Карта сайта
Не найдено

Як додати віджет WordPress в ваш заголовок сайту

  1. Чому і коли вам потрібен заголовку віджета на свій сайт?
  2. Крок 1. Створення заголовка віджета
  3. Крок 2: Екран вашого користувацького заголовка віджета
  4. Крок 3: стиль вашого заголовка віджета області за допомогою CSS

В и хочете додати WordPress віджет в область заголовка вашого сайту? Віджети дозволяють легко додавати блоки контенту в позначених розділів вашої теми. У цій статті ми покажемо вам, як легко додати WordPress віджет в заголовок вашого сайту.

Примітка: Це проміжний підручник. Вам потрібно буде додавати код у файли вашій темі WordPress і писати CSS .

Чому і коли вам потрібен заголовку віджета на свій сайт?

Віджети дозволяють легко додавати блоки контенту в певному місці у вашій темі WordPress. Ці призначені області називаються бічні панелі або віджет готові області.

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

Ця специфічна область називається 'Below the fold' і всі популярні веб-сайти використовують її, щоб показати дійсно важливі речі.

Як правило, WordPress теми додають бічну панель поруч з контентом, або в нижній області. Чи не багато тем WordPress додають віджет-готові області вище змісту або в заголовку.

Ось чому в цій статті ми розглянемо, як додати віджет в область заголовка вашого сайту WordPress.

Крок 1. Створення заголовка віджета

По-перше, нам потрібно створити область користувальницьких віджетів. Цей крок дозволить вам побачити свій користувальницький віджет - зону на сторінці Зовнішній вигляд »Редактор теми в панелі управління WordPress.

Вам потрібно буде додати цей код в файл вашої теми functions.php .

function wpb_widgets_init () {register_sidebar (array ( 'name' => 'Призначений для користувача заголовок області віджета', 'id' => 'custom-header-widget', 'before_widget' => '<div class = "chw-widget"> ',' after_widget '=>' </ div> ',' before_title '=>' <h2 class = "chw-title"> ',' after_title '=>' </ h2> ',)); } Add_action ( 'widgets_init', 'wpb_widgets_init');

Цей код реєструє нову бічну панель або віджет для вашої теми.

Тепер ви можете перейти на сторінку Зовнішній вигляд »Віджети, і ви побачите нову область віджету з написом" для користувача заголовок області віджета ".

Тепер ви можете перейти на сторінку Зовнішній вигляд »Віджети, і ви побачите нову область віджету з написом для користувача заголовок області віджета

Ідіть вперед, і додайте текстовий віджет в створеному віджеті і зберегти його. Дивіться наш керівництво про те, як додавати і використовувати віджети в WordPress для отримання детальних інструкцій по додаванню віджетів.

Крок 2: Екран вашого користувацького заголовка віджета

Якщо ви відвідаєте свій сайт зараз, ви не зможете побачити тільки що доданий до новоствореного віджету текстовий віджет.

Це тому, що ми ще не сказали WordPress, де відобразити цю область віджету.

Давайте зробимо це в цьому кроці.

Вам потрібно буде відредагувати файл header.php у вашій темі і додати цей код, в якому ви хочете відобразити область клієнтів віджета.

&lt;? Php if (is_active_sidebar ( 'custom-header-widget')):?> <Div id = "header-widget-area" class = "chw-widget-area widget-area" role = "complementary"> &lt;? php dynamic_sidebar ( 'custom-header-widget'); ?> </ Div> &lt;? Php endif; ?>

Не забудьте зберегти зміни.

Тепер ви можете відвідати свій сайт, і ви побачите вашу віджет-зону.

Тепер ви можете відвідати свій сайт, і ви побачите вашу віджет-зону

Ви помітите, що це виглядає трохи негарно. Ось де ви будете в потребуватиме CSS, щоб зробити його виглядати краще.

Крок 3: стиль вашого заголовка віджета області за допомогою CSS

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

Ще простіше зробити це за допомогою плагіна CSS Hero. Він дозволяє використовувати інтуїтивний призначений для користувача інтерфейс для зміни CSS будь-якої теми WordPress. Для отримання більш докладної інформації див наш огляд CSS Hero .

Якщо ви не хочете використовувати плагін, то ви можете додавати власні CSS до вашої теми, відвідавши сторінку Зовнішній вигляд »Налаштувати.

Він запустить інтерфейс налагоджувальника теми WordPress. Вам потрібно буде натиснути на вкладку "Додаткові CSS".

Вам потрібно буде натиснути на вкладку Додаткові CSS

Додаткова закладка CSS в Настроювачі теми дозволяє додати користувальницький CSS, спостерігаючи зміни, які з'являються в живому перегляді.

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

Ось деякі приклади CSS, щоб допомогти вам почати роботу.

div # header-widget-area {width: 100%; background-color: # f7f7f7; border-bottom: 1px solid #eeeeee; text-align: center; } H2.chw-title {margin-top: 0px; text-align: left; text-transform: uppercase; font-size: small; background-color: #feffce; width: 130px; padding: 5px; }

Це як наш спеціальний заголовок, область віджету на темі за замовчуванням Twenty Seventeen.

Вам може знадобитися налаштувати CSS, щоб відповідати вашій темі.

Ми сподіваємося, що ця стаття допомогла вам дізнатися, як додати віджет WordPress в заголовок вашого сайту.

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.

Чому і коли вам потрібен заголовку віджета на свій сайт?
Чому і коли вам потрібен заголовку віджета на свій сайт?
Lt;?
Php if (is_active_sidebar ( 'custom-header-widget')):?
Php dynamic_sidebar ( 'custom-header-widget'); ?
Php endif; ?
Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью