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, щоб допомогти вам почати роботу.

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.