Вопрос или проблема
Итак, я создал новый веб-сайт для клуба/организации. Моя задача – обновить старый веб-сайт на WordPress, используя этот новый веб-сайт.
Я перенес все свои HTML-страницы и CSS/JS файлы. Однако некоторые из моих пользовательских стилей CSS каким-то образом перезаписываются. Например, цвета моих кнопок на WordPress синие, а на локальной машине – оранжевые.
Что происходит? Я просмотрел все параметры и настройки плагинов, и не могу разобраться.
Я предполагаю, что у вас есть файл functions.php в каталоге вашей темы, после этого вы можете добавить следующий код:
/*Раздел для подключения стилей и скриптов*/
function keyword_theme_styles_and_scripts(){
/* Стили ниже */
wp_enqueue_style('bootstrap-min-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
wp_enqueue_style('video-js-min-css', get_template_directory_uri().'/assets/css/video-js.min.css');
wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800');
wp_enqueue_style('font-awesome-min-css', get_template_directory_uri().'/assets/font-awesome/css/font-awesome.min.css');
wp_enqueue_style('magnific-popup-css', get_template_directory_uri().'/assets/css/magnific-popup.css');
wp_enqueue_style('animate-min-css', get_template_directory_uri().'/assets/css/animate.min.css');
wp_enqueue_style('device-mockups-min-css', get_template_directory_uri().'/assets/device-mockups/device-mockups.min.css');
wp_enqueue_style('main-css', get_template_directory_uri().'/style.css');
/* Скрипты ниже */
wp_enqueue_script('jquery-min-js', get_template_directory_uri().'/assets/js/jquery.min.js', array(), '', true);
wp_enqueue_script('video-min-js', get_template_directory_uri().'/assets/js/video.min.js', array('jquery-min-js'), '', true);
wp_enqueue_script('bootstrap-min-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array('jquery'), '', true);
//wp_enqueue_script('bootstrap-min-js', get_template_directory_uri().'assets/bootstrap/js/bootstrap.min.js', array('jquery-min-js'), '', true);
wp_enqueue_script('jquery-easing-min-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js', array('jquery-min-js'), '', true);
wp_enqueue_script('scrollreveal-min-js', get_template_directory_uri().'/assets/js/scrollreveal.min.js', array('jquery-min-js'), '',true);
wp_enqueue_script('jquery-magnific-popup-min-js', get_template_directory_uri().'/assets/js/jquery.magnific-popup.min.js',array('jquery-min-js'), '', true);
wp_enqueue_script('svg-injector-min-js', get_template_directory_uri().'/assets/js/svg-injector.min.js', array('jquery-min-js'), '', true);
wp_enqueue_script('wow-min-js', get_template_directory_uri().'/assets/js/wow.min.js', array('jquery-min-js'), '', true);
wp_enqueue_script('index-min-js', get_template_directory_uri().'/assets/js/index.min.js', array('jquery-min-js'), '', true);
}
add_action('wp_enqueue_scripts', 'keyword_theme_styles_and_scripts');
Не забудьте добавить ваши пользовательские стили и скрипты внизу очереди.
И порядок подключения скриптов и стилей также имеет значение, поэтому добавляйте в правильном порядке.
Надеюсь, это поможет.
Удачи!!!
Ответ или решение
Когда речь заходит о настройке CSS в WordPress, проблема с тем, что пользовательский CSS переопределяется, может вызывать значительные затруднения. Давайте подробнее рассмотрим возможные причины данной ситуации и методы решения.
1. Причины переопределения CSS
Специфичность селекторов
Одной из распространённых причин, по которой стили могут не применяться, является специфичность CSS-селекторов. Если стили в вашей основной таблице стилей (например, style.css) имеют более высокую специфичность, чем ваши пользовательские стили, браузер применит именно их. Чтобы убедиться, что ваши стили имеют достаточную специфичность, попробуйте добавить более специфичные селекторы или использовать !important (но будьте осторожны с этим методом).
Порядок подключения стилей
Порядок подключения стилей также имеет значение. WordPress имеет систему подключения скриптов и стилей, и если ваши стили подключены раньше других, они могут быть переопределены. Убедитесь, что ваши пользовательские стили подключаются последними в функции functions.php. Пример правильного подключения приведён ниже:
function keyword_theme_styles_and_scripts() {
// Подключение стилей
wp_enqueue_style('main-css', get_template_directory_uri() . '/style.css');
// Ваши пользовательские стили должны быть подключены после основных стилей
wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css', array('main-css'), null);
}
add_action('wp_enqueue_scripts', 'keyword_theme_styles_and_scripts');2. Инструменты и плагины для стилевого управления
Кастомайзер WordPress и плагины
Если вы используете плагины для кастомизации стилей, такие как Custom CSS или Additional CSS в настройках темы, стоит проверить, нет ли конфликтов между этими стилями и вашими собственными стилями. Также рекомендуется проверить настройки расширений, таких как Elementor или WPBakery, которые могут использовать собственные CSS.
3. Кэширование
Кэширование — это ещё одна частая причина проблем с отображением стилей. Если вы используете плагин для кэширования, он может хранить предыдущие версии стилей. Прежде чем проверять изменения, не забудьте очистить кэш:
- Очистите кэш вашего плагина.
- Очистите кэш вашего браузера.
4. Поиск конфликтов
Если проблема сохраняется, попробуйте выполнить следующие шаги по устранению неполадок:
- Отключите плагины по одному, чтобы определить, не вызывает ли какой-либо плагин конфликты со стилями.
- Проверьте в режиме разработчика вашего браузера (обычно доступен через F12) какой стиль применяется к элементам, чтобы увидеть, какие правила CSS перезаписываются.
Заключение
Убедитесь, что ваши пользовательские стили подключаются в нужном порядке, имеют достаточную специфичность и не конфликтуют с другими стилями и плагинами. В случае проблем с кэшированием не забудьте очистить кэш. Если выполнение всех вышеперечисленных шагов не решает вашу проблему, исследуйте более сложные конфликты с JavaScript и другими элементами вашего сайта.
Эти советы помогут вам обеспечить корректное применение пользовательских стилей и предотвратить их нежелательное переопределение.