Posted on by — Leave a comment

Шаг 7. Стилизация и скрипты

База знаний

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

  1. Создал новый фиксатор assetsв корневой заглушке.
  2. Внутри папок assetsсоздайте две подпапки: cssи js.
  3. В его ходе cssсоздайте новый файл admin-knowledge-base.cssи добавьте следующий код:
CSSСкопировать код/* Стили для страницы со списком записей базы знаний */
.akb-table {
    width: 100%;
    border-collapse: collapse;
}

.akb-table th,
.akb-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.akb-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.akb-search-form {
    margin-bottom: 20px;
}

.akb-pagination {
    margin-top: 20px;
}

/* Стили для страницы редактирования записи базы знаний */
.akb-meta-box label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.akb-meta-box textarea {
    width: 100%;
    max-width: 600px;
}

Этот код включает стили для таблиц со списком записей, формы поиска, пагинации и метабокса при редактировании записей на странице.

  1. В его ходе jsсоздайте новый файл admin-knowledge-base.jsи добавьте следующий код:
javascriptСкопировать код(function($) {
    $(document).ready(function() {
        // Скрипты для страницы со списком записей базы знаний
        $('.akb-search-form').submit(function(e) {
            e.preventDefault();
            var searchQuery = $('.akb-search-input').val();
            var url = new URL(window.location.href);
            url.searchParams.set('s', searchQuery);
            window.location.href = url.href;
        });

        // Скрипты для страницы редактирования записи базы знаний
        // ...
    });
})(jQuery);

Этот код добавляет скрипт для обработки формы поиска на странице со списком записей. При отправке формы скрипт перехватывает событие, получает значение поискового запроса и перенаправляет пользователя на новый URL с поиском параметра.

  1. Открой файл admin-knowledge-base.phpв корневой папке плагина.
  2. Добавить следующий код в конец файла:
phpСкопировать кодfunction akb_enqueue_admin_assets() {
    wp_enqueue_style( 'akb-admin-style', plugin_dir_url( __FILE__ ) . 'assets/css/admin-knowledge-base.css', array(), '1.0.0' );
    wp_enqueue_script( 'akb-admin-script', plugin_dir_url( __FILE__ ) . 'assets/js/admin-knowledge-base.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'admin_enqueue_scripts', 'akb_enqueue_admin_assets' );

Эта функция позволяет подключать файлы стилей и скриптов к плагину страниц в админ-панели WordPress. Мы используем функции wp_enqueue_style()и wp_enqueue_script()файлы для регистрации и подключения.

  1. Сохрани все изменения в файлах.

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

На следующем этапе мы проведем последнее обсуждение и подготовим плагин к релизу.

Добавить комментарий