Создание меню для Wordpess плагина в админ панели

Подготовка файлов для создания меню в Wordpress

Давайте начнём разработку плагина с того, что создадим пункты меню в главном меню в административной панели, которые будут отображаться. В дальнейшем, мы уже к этим пунктам меню подключим Vue routing и будем уже организовывать структуру переходов. 

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

Конечно, это один из вариантов, как вы можете это сделать. Вы можете использовать любую структуру, которая вам будет удобна. Я же показываю, один из возможных вариантов, как это можно реализовать. 

Далее можно создать в этой папке файл, например, class-admin-menu.php. Это будет обычный PHP класс, который будет подгружать меню для нашего плагина.

В нём будут находиться, соответственно, класс AdminMenu. Далее здесь будет такой метод, как init. Вызывая который, мы будем создавать наше меню.

Создание пункта меню Wordpress 

Это будет происходить с помощью хука. Мы создаём хук admin_menu, который будет вызывать в этом классе метод addMenu. 

Давайте создадим этот метод админ меню, метод AddMenu/ Мы будем из нашего файла test-vue.php вызывать вот этот метод init. А этот метод init уже будет создавать нам меню, которое будет отображаться на нашей странице. 

<?php

class AdminMenu

{

   public function init()

   {

       add_action('admin_menu', array($this, 'addMenu'));

   }

public function addMenu()

{

}

}

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

include_once("includes/class-admin-menu.php");

Теперь, соответственно, у нас появился доступ к этому файлу. 

Для того, чтобы нам теперь подключить наше меню, мы создаём экземпляр класса AdminMenu и вызываем метод, который создаст нам наше меню. 

$admin_menu = new AdminMenu();

$admin_menu->init();

Функция add_menu_page

Для того чтобы создать новый пункт меню, мы можем воспользоваться вот такой функцией WordPress, которая создаёт новый пункт меню в главном меню админки. 

public function addMenu()

{

   add_menu_page(
       'TestVue',
       'TestVue',
       'manage_options',
       'testvue-admin',
       array($this, 'render'),//Функция выводит содержимое страницы
       null,
       2
   );
}

TestVue - это название меню, которое будет отображаться для пользователя

Возможности для показа этого меню: manage_options. Это меню будет показано только, администраторам.

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

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

В качестве метода render мы с вами отобразим ту разметку, которая должна у нас отобразить при переходе по этому пункту меню. Я буду просто отображать div с идентификатором app, который будет у нас в дальнейшем использоваться для подключения Vue приложения к этому плагину. 

public function render()

{

   ?>

   <div id="app"></div>

   <?php

}

Теперь у нас, как вы видите, в меню появился новый пункт TestVue. Мы создали вот такое главное меню. Давайте на этом пока завершим и в следующем видео уже создадим подпункты для этого главного меню.