Вопрос или проблема
Я новичок в WordPress, поэтому не совсем понимаю, как он работает, но я редактировал тему, изменяя wp-content/themes/<theme_name>/css/style.css, а затем загружал это на сайт через FTP. Вот в чем проблема:
Из инструментов разработчика Chrome я вижу, что style.css (текущий файл) перезаписывает style.css?ver=4.6.3. Это означает, что хотя я и удалил границу из текущего CSS, она все равно отображается из старой версии CSS.
Смотрев на HTML-код страницы, который генерирует WordPress, я нашел это в <head>:
<link rel="stylesheet" id="twentysixteen-style-css" href="http://<web.address>/wp-content/themes/<theme_name>/style.css?ver=4.6.3" type="text/css" media="all">
И потом я также нашел это:
<link href="http://<web.address>/wp-content/themes/<theme_name>/css/style.css" rel="stylesheet" type="text/css">
Что происходит? Почему WordPress загружает старую версию style.css, а затем текущую?
Стили загружаются в том порядке, который указан в базовом коде. Обычно это контролируется темой. Если второй файл стиля определяет тот же стиль, что и первый, то второй перезаписывает ‘параметры’ первого стиля. Это предусмотрено дизайном.
Обратите внимание, что изменять файлы темы напрямую — не самая лучшая идея. Все изменения, которые вы вносите, будут перезаписаны, когда эта тема будет обновлена.
Если вы хотите настроить тему (и ее стили), лучше всего создать ‘дочернюю тему’. Это тема, которая использует код и стиль ‘родительской’ темы, а затем добавляет ваши кастомизированные элементы из ‘дочерней’ темы. Это отличный способ экспериментировать с изменениями в теме, не беспокоясь о том, что ваши изменения будут ‘потеряны’ при обновлении темы.
Существует множество руководств о том, как создать дочернюю тему. Я использую плагин под названием “Child Theme Wizard”, чтобы создать необходимые файлы дочерней темы.
Добавьте ваш стиль в действие ‘wp_head’, и он загрузится первым.
add_action('wp_head', function () {
wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/style.css');
}
-
(опционально, но рекомендуется) Создайте дочернюю тему по этому руководству: https://developer.wordpress.org/themes/advanced-topics/child-themes/
-
(опционально, но рекомендуется) Поместите ваш файл css в дочернюю тему (например, /css/style.css)
-
Загрузите стили в functions.php, указав, что родительский стиль должен загружаться ДО вашего:
function my_enqueue_styles() {
$parent_style="twentysixteen-style";
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'my-style',
get_stylesheet_directory_uri() . '/css/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
Ответ или решение
Проблема с загрузкой старого и нового style.css в WordPress
Ваша ситуация, когда WordPress загружает как старую, так и новую версии style.css, может быть довольно распространенной среди новичков, работающих с этой системой управления контентом. Давайте разберемся, что происходит и как это можно исправить.
1. Понимание темы загрузки стилей в WordPress
WordPress использует метод «enqueue» (добавление в очередь) для загрузки стилей и скриптов, что позволяет избежать конфликтов и дублирования. Из вашего HTML кода видно, что две разные версии style.css загружаются:
- Первая версия:
style.css?ver=4.6.3 - Вторая версия:
style.css
Это указывает на то, что ваш текущий файл стилей не перезаписывает старый файл, а просто добавляется к нему.
2. Версия и кэширование
Ключевым моментом в вашем случае является наличие параметра ?ver=4.6.3. Это означает, что WordPress использует кешированную версию вашего файла стилей. Изменяя CSS файл и загружая его через FTP, вы можете не увидеть изменения сразу из-за механизма кэширования, который может хранить старую версию файла.
Рекомендации по устранению проблемы:
- Очистите кеш браузера. Периодически браузеры хранят кэшированные версии веб-страниц, что может мешать отображению актуальных изменений.
- Проверьте серверный кэш. Если у вас установлен плагин кеширования (например, W3 Total Cache или WP Super Cache), не забудьте очистить его.
- Отключите кеширование. На время разработки отключите все системы кэширования.
3. Неэффективная практика редактирования тем
Вы упомянули, что редактируете файлы темы напрямую. Это может привести к потере всех изменений при обновлении темы. Вместо этого рекомендуется создать дочернюю тему. Дочерняя тема позволяет вам вносить изменения в стиль и функциональность без риска их утраты.
Шаги для создания дочерней темы:
- Создайте папку для дочерней темы в каталоге
/wp-content/themes/. - Создайте файл
style.cssс необходимыми заголовками. - В файл
functions.phpдочерней темы добавьте код для загрузки стилей:
function my_enqueue_styles() {
$parent_style = 'twentysixteen-style';
wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style',
get_stylesheet_directory_uri() . '/css/style.css',
array($parent_style),
wp_get_theme()->get('Version')
);
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');Таким образом, ваше пользовательское style.css будет загружено после родительского стиля, что обеспечит применимость всех ваших изменений.
4. Подведение итогов
Вы столкнулись с проблемой кэширования и неправильной загрузки стилей в WordPress. Лучшая практика состоит в том, чтобы не редактировать файлы тем напрямую, а создавать дочерние темы для внесения всех необходимых изменений. Это обеспечит устойчивость ваших настроек и facilidad отладки в будущем.
Следуя перечисленным рекомендациям, вы сможете решить проблему загрузки старой версии style.css и привести все ваши изменения к актуальному виду.