WordPress добавление CSS через плагин
Появилась задача изменить некоторые 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 добавляем такой код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?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:
1 2 3 4 5 6 |
/* Fixing editor width in standart WP theme "twentyfourteen"*/ html .mceContentBody { max-width: none !important; } |
Плагин так же доступен на GitHub-е
Author: | Tags: /
| Rating:
Leave a Reply