Как добавить стили CSS к фронтенду в плагине Wordpress

Статьи 03.09.2022 (обновлено)

Рассмотрим как добавляются стили CSS в плагине для отображения этих стилей во фронтенде WordPress.

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

Добавление (встраивание) стилей для плагина идентично тому, как мы добавляем стили при создании темы. Сниппет ниже демонстрирует вставку стилей через плагин. В главный файл плагина мы добавляем код ниже:

<?php
/**
 * Plugin Name: plugin name
 * Plugin URI: http://www.pluginurl.com/
 * Description: plugin description
 * Version: 1.0
 * Author: author name
 * Author URI: http://www.authorurl.com/
 */

function wpsamurai_register_styles(){
    wp_register_style( 'wpsamurai_stylesheet', plugins_url( '/css/my-plugin.css', __FILE__ ) );
    wp_enqueue_style( 'wpsamurai_stylesheet' );
}

add_action( 'wp_enqueue_scripts', 'wpsamurai_register_styles' );

Файл стилей мы кладем в папку CSS в папке плагина. В нашем случае файл стилей мы назвали my-plugin.css, но название может быть любым, главное — не забыть поменять его в приведенном сниппете выше. Сам файл my-plugin.css может содержать все что угодно:

.classname { color: #000; }

Мы используем обычный хук действия wp_enqueue_scripts.

Сергей Ермилов
Опубликовано 14.06.2022
Категория: Статьи
Теги: ,

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

Ваш адрес email не будет опубликован.