Main > CMS | Wordpress > WordPress добавление CSS через плагин

WordPress добавление CSS через плагин

05.04.2014 0 comments » Views: 3,586

Wordpress. CSSFix Plugin

Появилась задача изменить некоторые css в стандартной теме twentyfourteen. В случае, если это сделать в скриптах темы, то изменения будут затерты после обновления. Времени, на поиск уже готового решения не было, поэтому быстро накидал маленький плагин позволяющий внедрять любые стили в любую тему, админку и стандартный редактор TinyMCE..

Итак, создаем папки и файлы:

www/wp-content/plugins/cssfixes/
www/wp-content/plugins/cssfixes/cssfixes.php = основной код плагина
www/wp-content/plugins/cssfixes/backend-style.css = стили админской части
www/wp-content/plugins/cssfixes/frontend-style.css = стили для пользовательской части
www/wp-content/plugins/cssfixes/editor-style.css = стили TinyMCE редактора в админке

Теперь в cssfixes.php добавляем такой код:


<?php
/*
Plugin Name: CSSFixes
Plugin URI: https://it-rem.phpdev.one/
Description: Add some css-es to themes. Useful if you use theme which can be auto updated
Version: 1.0.0
Author: Vitaliy S. Orlov
Author URI: https://it-rem.phpdev.one/
License: any
*/

add_action( 'wp_enqueue_scripts', 'cssfixes_frontend_stylesheet' );
add_action( 'admin_enqueue_scripts', 'cssfixes_backend_stylesheet' );
add_action( 'admin_init', 'cssfixes_editor_stylesheet');

function cssfixes_frontend_stylesheet() {
    wp_register_style( 'cssfixes-style', plugins_url('frontend-style.css', __FILE__) );
    wp_enqueue_style( 'cssfixes-style' );
}

function cssfixes_backend_stylesheet() {
    wp_register_style( 'cssfixes-style', plugins_url('backend-style.css', __FILE__) );
    wp_enqueue_style( 'cssfixes-style' );
}

function cssfixes_editor_stylesheet() {
    global $editor_styles;
    if (is_admin()) $editor_styles = array('../../plugins/cssfixes/editor-style.css');
}

<?php

Plugin Name: CSSFixes

Plugin URI: https://it-rem.phpdev.one/

Description: Add some css-es to themes. Useful if you use theme which can be auto updated

Version: 1.0.0

Author: Vitaliy S. Orlov

Author URI: https://it-rem.phpdev.one/

License: any

add_action( 'wp_enqueue_scripts', 'cssfixes_frontend_stylesheet' );

add_action( 'admin_enqueue_scripts', 'cssfixes_backend_stylesheet' );

add_action( 'admin_init', 'cssfixes_editor_stylesheet');

function cssfixes_frontend_stylesheet() {

wp_register_style( 'cssfixes-style', plugins_url('frontend-style.css', __FILE__) );

wp_enqueue_style( 'cssfixes-style' );

}

function cssfixes_backend_stylesheet() {

wp_register_style( 'cssfixes-style', plugins_url('backend-style.css', __FILE__) );

wp_enqueue_style( 'cssfixes-style' );

}

function cssfixes_editor_stylesheet() {

global $editor_styles;

if (is_admin()) $editor_styles = array('../../plugins/cssfixes/editor-style.css');

}

Теперь можно менять стили, на те что будут удобны Вам, и при обновлении темы или WP они не будут перезатерты. Например, я увеличил окно визуального редактора, в админке, которое в теме по-умолчанию twentyfourteen ограничено 477px. Сделал это, добавив такой код, в editor-style.css:


/* Fixing editor width in standart WP theme "twentyfourteen"*/
html .mceContentBody {
	max-width: none !important;
}

/* Fixing editor width in standart WP theme "twentyfourteen"*/

html .mceContentBody {

max-width: none !important;

}

Плагин так же доступен на GitHub-е

Author: Vitaly Orlov | Rating: 4/5 | Tags: css , cssfix , Plugins , twentyfourteen

WordPress добавление CSS через плагин

Leave a Reply Cancel reply