Вопрос или проблема
Я просто не могу найти правильный способ сделать это. Я создал альтернативный заголовок и добавил опцию в настройках темы Redux для использования альтернативного заголовка. Также я создал файл custom-css.php, в который могу добавлять файлы, которые выводятся в заголовке. Это должно переопределять любой CSS из style.css.
То, что мне нужно, на самом деле очень просто, но каким бы способом я ни пользовался, это не работает.
Пример:
.header-fixed {
background: transparent url(assets/images/mix1.png) repeat-x;
}
С этой опцией это не работает, и изображение в инспекторе Chrome не существует. Если я добавляю полный путь, например:
background: transparent url(wp-content/themes/theme-name/assets/images/mix1.png) repeat-x !important;
тогда это работает. Почему, я не уверен. Но я не думаю, что это правильный подход.
Другие примеры:
-
background: url( .”/assets/images/mix1.png”;) repeat-x !important;
-
background: url( ” .”/assets/images/mix1.png”; “) repeat-x !important;
3.background: url( ” /assets/images/mix1.png) repeat-x !important;
4.background-image:url(.”/assets/images/mix1.png”); background-repeat:repeat-x;
- background-image:url(/assets/images/mix1.png); background-repeat:repeat-x;
И это еще не все. Поэтому, пожалуйста, дайте советы.
ОБНОВЛЕНИЕ: Добавлен третий пример, чтобы показать вам, как выводить путь внутри PHP-строки, согласно исходному коду, который вы предоставили в комментариях.
Нет ничего плохого в том, чтобы иметь полный путь в вашем CSS, но вы хотите убедиться, что путь генерируется динамически WordPress для наиболее стабильных результатов.
В данном случае полезны функции get_template_directory_uri() и/или get_stylesheet_directory_uri(). То, какую вы используете, зависит от того, разрабатываете ли вы стандартную тему или родительскую тему с поддержкой дочерних тем. Вы можете узнать больше о различиях здесь: https://codex.wordpress.org/Function_Reference/get_template_directory_uri
Вот код, основанный на примере, который вы утверждаете, работает как ожидается:
// пример активов стандартной темы / родительской темы
background: transparent url(<?php echo get_template_directory_uri(); ?>/assets/images/mix1.png) repeat-x !important;
// пример активов дочерней темы
background: transparent url(<?php echo get_stylesheet_directory_uri(); ?>/assets/images/mix1.png) repeat-x !important;
В вашем конкретном случае попробуйте это:
// конкретный пример из вашего исходного файла (строка 23)
.header-fixed { background: transparent url(' . get_template_directory_uri() . '/assets/images/mix1.png) repeat-x !important; }
Ответ или решение
Чтобы корректно использовать фоновое изображение в вашем заголовке, вам нужно убедиться, что путь к изображению определяется правильно. Учитывая ваш опыт с использованием различных путей к изображению и проблемы с их работоспособностью, давайте рассмотрим, как можно достичь этого с помощью динамических функций WordPress.
Использование абсолютного пути, как вы упомянули, рабочий вариант, но лучше полагаться на функции WordPress для более стабильных результатов. Вот как это можно сделать:
-
Функции WordPress для получения пути к теме:
- Если вы работаете с родительской темой, используйте
get_template_directory_uri()
. - Если вы работаете с дочерней темой, используйте
get_stylesheet_directory_uri()
.
- Если вы работаете с родительской темой, используйте
-
Пример CSS с использованием PHP:
Чтобы динамически включить путь к изображению в ваш CSS, вам необходимо вставить код PHP в файл, который генерирует ваш CSS (например, вcustom-css.php
, о котором вы упоминали). Вот пример того, как это можно сделать:<style> .header-fixed { background: transparent url('<?php echo get_template_directory_uri(); ?>/assets/images/mix1.png') repeat-x !important; } </style>
Если вы используете дочернюю тему, код должен выглядеть так:
<style> .header-fixed { background: transparent url('<?php echo get_stylesheet_directory_uri(); ?>/assets/images/mix1.png') repeat-x !important; } </style>
-
Убедитесь в правильности пути:
Проверьте, что путь к изображениям правильный и папкаassets/images
действительно существует в вашей теме. Убедитесь, что ваше изображениеmix1.png
находится по этому пути. -
Кэширование:
Иногда браузеры могут кэшировать старые версии стилей. После внесения изменений в CSS, обязательно обновите страницу с очищением кэша (в Chrome можно использовать сочетание клавиш Ctrl + F5). -
Использование инспектора Chrome:
Используйте инструменты разработчика (инспектор) в Chrome для проверки, загружается ли фон и нет ли ошибок, которые могут мешать отображению изображения. Убедитесь, что к вашей картинке нет блокировок с помощью настройки CORS или прав доступа.
Если вы следуете указанным выше шагам, ваше фоновое изображение должно правильно отображаться. Если по-прежнему возникают проблемы, это может помочь в диагностике:
- Проверьте консоль на наличие ошибок.
- Убедитесь, что ваш CSS-файл загружается корректно и не перекрывается другими стилями.
- Убедитесь, что изображение доступно и загружается напрямую, проверив его URL в браузере.
Если у вас остались дополнительные вопросы или необходимость в уточнении, не стесняйтесь спрашивать.