2.8 Добавление CSS на фронтенд

Рассмотрим как добавляются стили 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.

Была ли эта страница полезной?