Browsing "Уроки php"

Июн 26, 2021 -

Создание меню в WordPress

И вот мы создали самый простейший свой шаблон, состоящий из пары файлов:

index.php;
header.php;
style.css

Конечно, же, чтобы приступить к введению в страницу сайта меню необходимо, чтобы в админке Wordpess существовала возможность введения меню. Однако, в админке на данный момент отсутствует такая возможность. Что же делать?

Для этого нам надо научить админ-панель такой возможности. Как это сделать, вы узнаете в данной статье.

Вывод меню средствами WordPress

Для достижения поставленной задачи необходимо выполнить следующие три пункта инструкций.

1. Зарегистрировать меню в файле functions.php нашей темы.

Создаем файл functions.php, в котором опишем новую функцию, назовем ее, например, register_my_menus. Данная функция будет запускать стандартный метод register_nav_menus(), регистрирующий позиции меню.

Register_nav_menus() принимает на вход в качестве аргумента массив, каждый элемент которого регистрирует позицию для одного меню (ведь меню на сайте может быть несколько и для каждого из них будет зарегистрирована своя позиция и применены свои настройки).

В нашей теме было всего лишь одного горизонтальное меню в шапке сайта. Для примера работы с функцией register_nav_menus() я предлагаю зарегистрировать два меню. Одно из них вывести под шапкой, а второе перед подвалом.

Листинг 1. Регистрация двух меню. Файл function.php активной темы WordPress

function register_my_menus()
{
register_nav_menus
(
array( 'header-menu'=> 'header-menu1', 'footer-menu'=> 'footer-menu1')
);
}

В строке 5 листинга 1 мы как раз передаем массив аргументов стандартной функции WordPressregister_nav_menus(). В качеств первого аргумента мы регистрируем меню под шапкой блога:'header-menu' => 'header-menu1'. Зарегистрированная позиция в шаблоне будет носить названиеheader-menu, а в админке WordPress будет представлена как header-menu1.

Аналогичным образом второй аргумент 'footer-menu' => 'footer-menu1' регистрирует позицию для меню над подвалом.

Новая функция register_my_menus(), которую мы создали в листинге 1, должна как-то запускаться. Для этого используем хук init.

Листинг 2. Запуск функции register_my_menus хуком init. Файл functions.php

if(function_exists('register_nav_menus'))
{
     add_action( 'init', 'register_my_menus');
}

Как видно из листинга 2, мы применяем условный оператор «if» для проверки, можно ли в данной версии WordPress использовать функцию регистрации меню — register_nav_menus(). Ведь движок WordPress может быть старым и не поддерживать работу с меню. Методfunction_exists() вернет TRUE, если register_nav_menus() знаком данной версии WordPress.

Если WordPress умеет работать с функцией register_nav_menus, выполнится метод add_action( 'init', 'register_my_menus' ), который, при возникновении хука init запустит функциюregister_my_menus (описанную в листинге 1).

Естественно, что вначале мы делаем проверку возможности добавления меню, а только потом - регистрируем. Окончательный листинг будет таков:

if(function_exists('register_nav_menus'))
{
     add_action( 'init', 'register_my_menus');
}

function register_my_menus()
{
register_nav_menus
(
array( 'header-menu'=> 'header-menu1', 'footer-menu'=> 'footer-menu1')
);
}

2. Необходимо указать место для отображения зарегистрированных типов меню в файлах верстки нашей темы.

В нашем случае зарегистрировано два меню: header-menu и footer-menu. Откроем на редактирование файл index.php нашей темы и укажем позиции для вывода наших меню.

Например, header-menu будет выводиться под шапкой в блоке <nav></nav>. Для этого используем код листинга 3.

Листинг 3. Указываем место для вывода меню header-menu. Файл index.php активной темы

<nav>
     <?php wp_nav_menu( array( 'theme_location'=> 'header-menu') ); ?>
</nav>

Ну и где-нибудь над подвалом аналогичным образом укажем место отображения footer-menu (см. листинг 4).

Листинг 4. Указываем место для вывода меню footer-menu. Файл index.php активной темы

<nav>
     <?php wp_nav_menu( array( 'theme_location'=> 'footer-menu') ); ?>
</nav>

3. Настройка меню в админке WordPress.

После того, как предыдущие два пункта были реализованы, в админке WordPress вы увидите специальный пункт, отвечающий за работу с меню.

Рис. 1. Раздел по работе с меню WordPress админки блога.

Наша тема поддерживает два меню (header-menu и footer-menu). Поэтому в соответствующем интерфейсе раздела «Меню» создадим два меню. Одно назовем header-menu-2, второе — footer-menu-2.

Рис. 2. Создание меню WordPress.

Созданные меню можно закреплять за позициями, которые носят название header-menu1 и footer-menu1. Именно такие названия для позиций мы регистрировали в листинге 1.

Рис. 3. Закрепление за позициями соответствующих меню WordPress.

После этого, пользуясь функционалом, представленным на рис. 4., можно добавлять выбранный тип ссылок в меню, открытое на вкладке интерфейса, представленного на рис. 2.

Рис. 4. Функционал по добавлению пунктов в меню.

Я добавил в каждое меню по три пункта. При этом, пункты можно смещать (вверх и вниз, влево и вправо). При смещении влево и вправо происходит создание вложенных меню (см. рис. 5 и 6).

Рис. 5. В меню header-menu-2 я создал три пункта. При этом смещением вправо я реализовал следующую последовательность вложений: Мой блог → Еще одна ссылка → Третья ссылка.

Рис. 6. Меню footer-menu-2 с вложенностью следующего вида: Ссылка 1 → Ссылка 2, Ссылка 3.

Выпадающее меню в WordPress средствами jQuery

Для организации выпадающего меню в WordPress мы будем пользоваться библиотекой jQuery.

Раз мы решили задействовать jQuery, то давайте подключим его к нашей теме. Для этого необходимо указать код листинга 6 в файле index.php обязательно до вызова функции wp_head().

Листинг 6. Подключение jQuery в WordPress

<?php wp_enqueue_script('jquery'); ?>

jQuery будет использоваться для плавного «появления» вложенных пунктов меню.

Для начала вложенные пункты нужно скрыть. Используем для этого стили, которые укажем в файле style.css нашей темы (см. листинг 7).

Листинг 7. Скрываем вложенные пункты. Файл style.css

ul.menu ul.sub-menu
{
    display: none;
    position: relative;
    left: 50px;
}

Пояснение к листингу 7

Все ul, имеющие класс sub-menu (именно такой класс WordPress автоматически задает для тега ul, охватывающего вложенные пункты меню) и попавших в ul с классом menu (menu — класс, которым награждается внешний ul автоматически) скрыть свойством display: none.

Свойство position: relative позволяет сместить пункты меню относительно их первоначального положения, что я и делаю свойством left: 50px.

Дальнейшее оформление пунктов меню не входит в задачи данной статьи. Об этом мы поговорим в следующих публикациях блога.

Теперь остается подключить jQuery-скрипт, который будет заниматься отображением скрытых пунктов меню.

Скрипт мы спрячем в файл script.js, который сохраним в папке с нашей темой. Сам скрипт приведен в листинге 8.

Листинг 8. jQuery-скрипт, отображающий и прячущий вложенные пункты меню

var$j = jQuery.noConflict();
$j(document).ready(function()
{
     $j('.menu li').hover
     (
        function()
          {
               //показать подменю
           $j("ul:first", this).slideDown(100);
        },
        function()
          {
            //скрыть подменю
             $j('ul:first', this).slideUp(100);
        }
     );
})

Скрипт очень простой, но действует результативно.

Метод jQuery hover() чувствует наведение указателя мыши на тег <li> в меню и, если мышь находится над указанным элементом, срабатывает функция «показать подменю», если мышь уходит с элемента — выполняется функция «скрыть подменю».

Для отображения пунктов подменю используется метод slideDown(). Данный метод воздействует на первый ul, вложенный в данный элемент li — добиться такого выбора объекта воздействия можно селектором $j("ul:first", this).

Аналогичным образом работает метод slideUp, скрывающий подменю.

Остается подключить файл script.js с jQuery-скриптом (листинг восемь) к нашей теме. Для этого в разделе <head> файла index.php активной темы укажем следующую строку:

<scriptsrc="<?php bloginfo('stylesheet_directory'); ?>/scripts.js"></script>

Это стандартное подключение скрипта из внешнего файла. Т. к. файл script.js находится в папке с активной темой, путь к ней можно узнать благодаря использованию стандартного метода WordPress bloginfo('stylesheet_directory').

По материалам с сайта http://www.sdelaysite.com/wordpress-site/menu-wordpress

Июн 26, 2021 -

Уроки php

No Comments

§5. PHP и MySQL - создаем админку

В предыдущих уроках рассказывалось о том, как создавать скелет собственной CMS. Наконец-то настала пора сделать полноценную административную панель с возможностью добавления и редактирования текста.

Сен 20, 2016 -

Уроки php

No Comments

§4. PHP и MySQL - пишем свою CMS

Как написать свою CMS на базе PHP и MySQL? Как сделать собственную административную панель (админку) на php?

Наверное, многие могли задаваться подобными вопросами, но сложности в изучении и скудный материал в сети Интернет вряд ли содействовал в этом. Скудный, спросите вы, несмотря на обилие копипастов? Да, отвечу я, ибо на десятках сайтах копирующих тупо копирующих статьи со сторонних источников, распространяются одни и те же ошибки, которые становятся серьезнейшим камнем преткновения для начинающих изучать PHP. Многочисленные высоколобые форумчане зачастую не могут разобраться в наипростейших кодах, что приходится самому разбираться во всем.

В очередной раз я нашел тому подтверждение, когда решил начать освоение языка PHP и работы с базами данных MySQL с создания простейшей админки и небольшого сайтика, дабы на реальном движке отточить свое мастерство. Каково же было мое удивление, когда ни один из приведенных в сети кодов не заработал. Мне понадобился целый день, чтобы самому решить те простейшие задачи, на которые я так и не нашел ответа в сети.

Итак, в этой статье я представляю работающий код простой админки и шаблона, позволяющего создавать и редактировать статьи, используя php.

Сен 16, 2016 -

Уроки php

No Comments

§3. Резюме последних двух уроков №1 и №2

В итоге двух уроков, мы имеем такую интересную структуру нашего небольшого, но работающего на php, сайтика:

<?php define ('PRO', 1); include("options.php"); include("maketop.php");?>

Сен 16, 2016 -

Уроки php

No Comments

§2. Как сделать выпадающее вертикальное меню на php

Как сделать выпадающее вертикальное меню на PHP и HTML?

Именно это мы сейчас и разберем. И так, стоит задача, сделать вертикальное меню, в виде выпадающего списка.

Выпадающий список на php

Сен 16, 2016 -

Уроки php

No Comments

§1. Пример создания сайта на php

Пример создания сайта на PHP

Конечно для создания простого сайта можно использовать CMS Joomla или просто сделать сайт на WordPress, но зачем стрелять по комарам из пистолета?

Для этих целей вполне подойдет статический сайт на HTML, но ведь иногда заказчик хочет расширить функционал своего сайта, добавить новые страницы, изменить дизайн и т. п. Поэтому уже изначально я начинаю разрабатывать динамический движок сайта, используя язык программирования PHP. Именно PHP лежит в основе разработок всех известных и популярных CMS. Поэтому знать его основы я думаю не помешает любому веб-мастеру, ведь тогда он будет более свободно и уверенно манипулировать движком своей CMS.