Как корректно разместить виджет WordPress на сайте в заданном месте? Это вопрос из категории наиболее запрашиваемых на сегодняшний день. Научиться это делать правильно и быстро за пару минут вполне реально. Предлагаю сразу перейти к практической части урока, чтобы не запутаться в теоретической основе. Таким образом, Вы будете сразу входить в курс дела и в дальнейшем сможете без проблем самостоятельно выполнять эту не сложную задачу. Думаю, Вы примете такой план работы, и мы можем смело приступать к его реализации.
Представим ситуацию, в которой перед нами стоит задача поместить какой-либо виджет в определенное место на странице сайта WordPress, но выполнить эту задачу необходимо так, чтобы он отображался во вкладке администратора, и мог быть заменен любым другим виджетом. Итак, предлагаю выполнять работу поэтапно, мысленно разделив ее на несколько частей.
Регистрация местоположения под виджет
Перед тем, как начать работу, нам необходимо найти файл functions.php в нашей теме и открыть его. После того, как мы проделаем это действие, вверху нужно найти тег открытия для php кода — <?php и вставить этот код после него.
1 2 3 4 5 6 7 8 |
if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'New Sidebar', 'before_widget' => '<div class="newsidebar">', 'after_widget' => '</div>', 'before_title' => '<div class="title">', 'after_title' => '</div>', )); |
Этот код как бы сообщает системе, что необходимо провести действие по регистрации нового местоположения под виджет. Далее, в боковой панели Вы увидите такие данные:
- ‘name’ — название блока для виджетов. У Вас есть возможность придумать любое имя для него.
- ‘before_widget’ — в этой строке необходимо прописать HTML код, который Вам хотелось бы прикрепить перед виджетом.
- ‘after_widget’ – HTML-код, который следует за виджетом.
Координация параметров ‘before_widget’ и ‘after_widget’ необходима для выбора и задания желаемого стиля визуализации блока с виджетами, используя CSS.
Поработав с параметрами ‘before_title’ и ‘after_title’ , Вы сможете задать стиль визуализации заголовков виджета.
На этом регистрация новой боковой панели успешно завершена. Далее Вы просто переходите в панель администратора и находите там боковую панель с названием New SideBar — у Вас есть возможность переименовать его как пожелаете на свое усмотрение.
Как разместить боковую панель на сайте
Таким образом, у нас готова боковая панель для панели администратора, но непосредственно на сайте нет его отображения. Значит, нам необходимо теперь в самом коде существующего сайта указать на место, где в дальнейшем будет размещаться наша боковая панель, где она будет выводиться.
Чтобы задать эту функцию, необходимо открыть файл темы, к примеру header.php — если нам необходимо, чтобы виджеты были помещены в верхней части сайта, нам необходимо вставить нижеследующий код в определенное заранее место.
1 2 |
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("New Sidebar") ) : ?> <?php endif; ?> |
Если Вы задали код верно, то Ваша боковая панель будет размещена там, где Вам было необходимо. Однако на этом работа еще не завершена. На данном этапе, для корректной визуализации можно без проблем работать с CSS файлом, который в конечном итоге поможет получить гармоничное местоположение для виджетов WordPress. Однако я предполагаю, что Вы уже знаете, как это сделать.
В общем, на этом можно считать урок завершенным. Надеюсь, информация оказалась доступной и полезной для Вас. А если у Вас возникнут вопросы, я отвечу на них в комментариях.