Сделать css виджета перезаписью темы css

Я создал виджет, который создает формы. Я использую платформу Twitter Bootstrap для стилизации этих форм. У меня есть два примера WP:

Поэтому мой вопрос:

  • Как заставить мой виджет CSS принимать высокий приоритет, чем CSS темы?

Вот как я добавляю CSS в свой виджет:

class LeadCapture_Form_Widget extends WP_Widget { /** * Register widget with WordPress. */ function __construct() { parent::__construct( 'lc-form-widget', // Base ID 'LeadCapture_Form_Widget', // Name array( 'description' => __( 'Widget that outputs a basic form with that will capture the user\'s information and submits it to the CRM.', 'text_domain' ), ) // Args ); add_action( 'wp_enqueue_scripts', array( $this, 'register_plugin_styles' ) ); } /** * Register and enqueue style sheet. */ public function register_plugin_styles() { wp_register_style( 'lc-form-widget', plugins_url( 'LeadCapture_Form_Widget/css/form.css' ) ); wp_enqueue_style( 'lc-form-widget' ); } 

Solutions Collecting From Web of "Сделать css виджета перезаписью темы css"

Можно сделать bootstrap css «контекстуализированным» внутри селектора, то есть стили bootstrap работают внутри этого селектора и благодаря правилам CSS-специфики , они берут на себя определенность над другими правилами.

Как сделать:

В первую очередь загрузите bootstrap меньше. Предположим, что эти файлы находятся в папке 'bootstrap/less' .

Теперь создайте новый файл меньшего размера, допустим, my-bootstrap.less .

В этом файле

 #my-widget-container .my-widget { @import 'bootstrap/less/bootstrap.less'; } 

Скомпилировав этот файл меньше * , давайте предположим, что вы получите файл my-bootstrap.css . Если вы откроете этот файл, вы увидите, что это полная загрузочная среда, но где каждое правило имеет префикс '#my-widget-container .my-widget' .

На этом этапе вы можете полностью удалить файлы начальной загрузки, а также ваш файл меньшего my_bootstrap.css и сохраните только этот файл my_bootstrap.css (лучше, если его свести к минимуму), вместо того, чтобы вставлять исходный загрузочный файл, вы можете поставить в очередь этот файл, и у вас не будет проблем с темами, не использующими бутстрап.

Однако, если тема основана на начальной загрузке, ваш файл css является избыточным, поэтому вы должны ставить его в очередь, только если bootstrap отсутствует:

 function __construct() { // your stuff here add_action( 'wp_enqueue_scripts', array( $this, 'register_plugin_styles' ), PHP_INT_MAX // highest priority ); } public function register_plugin_styles() { global $wp_styles; $s = array_map( 'basename', wp_list_pluck($wp_styles->registered, 'src') ); if ( ! in_array('bootstrap.css', $s ) && ! in_array( 'bootstrap.min.css', $s ) ) { // no one has registered bootstrap, let's register your 'my-bootstrap' wp_enqueue_style( 'my-bootstrap', get_template_directory_uri() . '/my-bootstrap.css' ); } } 

Теперь, что вы должны сделать, это просто обернуть вывод вашего виджета

 <div id="my-widget-container"> <div class="my-widget"> YOUR WIDGET CONTENT GOES HERE </div> </div> 

* Как скомпилировать меньше файлов в css один из объема этого ответа и этого сайта, простой поиск Google даст вам какие-либо рекомендации, если вам это нужно.

Вероятно, есть несколько способов сделать это:

Метод 1) Заполните свои стили после стилей темы – View Codex

Метод 2) Используйте !important что займет 100% приоритет – Просмотр переполнения стека

Метод 3) Если вы создаете свои собственные виджеты, вы можете вставить свои собственные теги <style> которые будут иметь приоритет над любыми внешними файлами – View Stack Overflow

Я попытался бы использовать описанные выше методы в этом порядке и попытаться избежать метода 3, если это возможно, хотя оно и существует.