Где находится css в wordpress
Перейти к содержимому

Где находится css в wordpress

  • автор:

Как найти нужные стили в WordPress?

Порой кажется, что разработчики тем для ВП соревнуются между собой в запутанности тем. Хочется изменить два банальных параметра — ширину тела сайта и ширину логотипа, ан нет! Нет таких параметров в style.css Они инспектируются гуглом, четко указано, что есть такие стили и такие классы именно в этой папке и именно в этом файле. А их нет! Обычно я прощался с темой после подобного гемора, но в этот раз я решил разобраться с этим. Одно смутило. В инспекции указаны и папка, и файл, но файл style.css идет с каким-то параметром, суть которого мне не ясна. То есть ссылается на файл такого вида: https://сайт/wp-content/themes/тема/style.css?ver=4.9.4 Загадка. То же самое и с шириной тела сайта. Где искать этот параметр — известно только разрабам, а они не отвечают.

Отслеживать
задан 15 мар 2018 в 13:08
183 1 1 серебряный знак 13 13 бронзовых знаков

@SeVlad а так вопрос нужный, многие не понимают, как найти стили. Я тоже накатаю ответ часа через три.

15 мар 2018 в 14:55
Какие правила я нарушил?
15 мар 2018 в 15:50

Да вы никакие правила не нарушили. Насколько я понял @SeVlad, он имеет ввиду, что согласно правилам, надо отвечать по сути.

15 мар 2018 в 17:15

@KAGGDesign SeVlad имеет виду. что тело «вопроса» — нытьё ни о чем. Написано копирайтором, генерящим воду. Увлекательно но бесполезно. ОК. Кто-то всё же должен послать в ru.meta.stackoverflow.com/questions/6688/… 🙂

15 мар 2018 в 17:45

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Чтобы понять, откуда берутся стили, надо кликнуть правой кнопкой на элементе и выбрать в меню «Просмотреть код». Откроется инспектор браузера (Development Tools).

Эти и дальнейшие инструкции предназначены для Chrome, поскольку он доминирует на рынке браузеров сегодня. В остальных браузерах ход инспекции примерно одинаков.

Допустим, мы решили проинспектировать заголовок главной страницы моего тестового сайта http://test.kagg.eu/

введите сюда описание изображения

Видим, что при открылась вкладка Elements инспектора с html кодом

Home

Справа — стили этого элемента. При наведении на style.css:1903 всплыла подсказка с полным url файла стилей: http://test.kagg.eu/wp-content/themes/twentyseventeen/style.css . Более того, указан номер строки в css, откуда взяты конкретные стили — 1903. Видим, что в строке 1903 находятся объявления правила для

.page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title 

Обратите внимание на то, что сработали для данного элемента только те стили, что выделены чёрным .page .panel-content .entry-title . Те, что выделены серым, не применимы к данному элементу.

Прокручивая вниз правое окно стилей, можно увидеть, какие css-свойства работали на данном элементе. Перечёркнутые свойства не работают, они перекрыты в других правилах.

Для того, чтобы понять, откуда у данного элемента Home взялось то или иное свойство (например, font-family), кликните справа на вкладку Computed

введите сюда описание изображения

Видим, что Libre Franklin объявлен в строке 418 style.css. Надо навести курсор на style.css, чтобы узнать его полный url, поскольку файлов с таким именем может быть несколько.

Таким способом вы можете узнать, где объявлено любое свойство css: ширина body или ширина логотипа или что угодно ещё.

Касательно вашего вопроса о параметре ?ver= в url файла стилей. Это всего лишь версия файла. Она задаётся либо явно в теме при вызове wp_enqueue_style() , либо принимает значение версии WordPress. Из вашего текста ясно, что у вас установлена последняя на настоящий момент версия WordPress 4.9.4.

Зачем вообще добавляют версию? Это имеет значение для кеширования. При смене ?ver= браузер сбросит кеш этого файла, даже если в нём не изменили ни одного байта.

Но в целом это несколько другая тема, которую надо обсуждать отдельно. В рамках данного вопроса вы можете смело игнорировать ?ver= . Да и в инспекторе этого параметра нет. Инспектор отображает текущую версию файла стилей.

Update

Что касается конкретной темы tdPersona, то ничего запутанного в ней нет.

Код функции tdpersona_the_custom_logo() находится в wp-content/themes/tdpersona/inc/template-tags.php -он очень простой, там 3 строчки, она вызывает стандартную функцию WordPress the_custom_logo() , а та вытаскивает размеры логотипа из базы, согласно настройкам в «Внешний вид->Настроить->Свойства сайта->Логотип». Пользуясь инструкцией выше, легко увидеть, что изображение логотипа обернуто в div с классом .brand . Чтобы изменить размер логотипа, достаточно добавить одно правило в style.css

.brand img

Чтобы увидеть ширину «тела сайта, как вы это называете» (ширину контента, я полагаю), надо в инспекторе навести на и увидеть подсветку блока

введите сюда описание изображения

Справа внизу в окне стилей видим, что ширина контейнера задана в 31 строке файла style.css

Как редактировать CSS в WordPress

Как редактировать CSS в WordPress

Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие.

Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем!

Способ №1

1. Заходим в административное меню и переходим в Внешний вид -> Редактор.

Как редактировать CSS в WordPress

2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл».

Как редактировать CSS в WordPress

Как видите, с административной панели всего за несколько кликов можно добраться до стилей вашего шаблона WordPress.

Способ №2

Для редактирования стилей этим способом нам нужно:

1. Найти файл style.css в корне папки вашей активированной темы (шаблона).

Путь к файлу: wp-content\themes\название_вашей темы\style.css

Как редактировать CSS в WordPress

2. Открываем с помощью текстового редактора (я пользуюсь Notepad++) файл style.css и вносим необходимые изменения.

3. После того как внесете все необходимые правки в стилях не забудьте сохранить файл style.css.

Редактирование таким способом актуальнее всего если сайт размещен на локальном сервере. В таком случае, вам не нужно будет каждый раз обновлять страницу редактирования CSS стилей в административном меню после каждого изменения.

Согласитесь, проще и быстрее нажать Ctrl+S в текстовом редакторе и сразу смотреть изменения на сайте, чем после каждого обновления стилей пересохранять страницу в административном меню.

Если у вас что-то не получилось или возникли вопросы, смело пишите в комментариях!

Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие. Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем! Способ №1 1. Заходим в административное меню и переходим в Внешний вид -> Редактор. 2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл». Как видите, с административной панели всего за несколько кликов можно…

Обзор

Проголосуйте за урок
Оценка

Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Где находятся стили темы для css в wordpress?

Подскажите пожалуйста, выбираю тему в wordpress, захожу в админку в редактор и нахожу там файл стилей style.css. Но в нем нет ничего, пусто. И больше нет никаких файлов со стилями. Когда захожу через отладчик хрома, то вижу что для моей темы существует файл all.css. И в нем прописываются все стили. Но я не могу его найти в админке. Как быть?

  • Вопрос задан более трёх лет назад
  • 2767 просмотров

Комментировать

Решения вопроса 1

edalis

HTML, CSS, JS, Node.js

Редактировать через FTP.
Вообще, редактирование файлов WordPress через админку плохая практика, обычно эту возможность отключают для повышения безопасности сайта.
Так же плохой практикой является редактирование любых файлов исходной темы. Лучше создать дочернюю тему и в нее вносить необходимые правки, таким образом, при обновлении исходной темы, внесенные изменения не пропадут.

Ответ написан более трёх лет назад

Комментировать

Нравится 2 Комментировать

Заголовки style.css

Это особенный файл — именно по нему WordPress идентифицирует тему. Когда вы заходите в раздел Темы в админке, WordPress просматривает все папки в каталоге themes на наличие в них файла style.css . Те папки в которых найден style.css с заголовком Theme Name: определяются как папки тем. Название темы и другие данные берутся из файла style.css . Такие данные считываются из данных в начале файла (они находятся в комментариях):

/** * Theme Name: Моя первая темы */

Весь список параметров файла style.css

Вместе с полем Theme Name можно указать и другие поля. Theme Name(обязательное) Название темы. это обязательное поле! Достаточно только указать это поле, чтобы ВордПресс определил тему. Остальные поля не обязательны, но желательны. Template Название родительской темы. Пример: Twenty Seventeen. Description(обязательное для репозитория WP) Краткое описание темы. Theme URI URL страницы, где можно найти дополнительные сведения о теме. Author(обязательное для репозитория WP) Имя лица или организации, разработавшей тему. Рекомендуется указывать имя пользователя на сайте wordpress.org. Author URI URL — адрес автора или организации. Version(обязательное для репозитория WP) Версия темы, в формате X.X или X.X.X . License(обязательное для репозитория WP) Лицензия темы. License URI(обязательное для репозитория WP) URL лицензии. Text Domain(обязательное для репозитория WP) Строка, используемая как textdomain при переводе перевода. Domain Path Путь до файла MO перевода относительно папки темы. Используется чтобы WordPress знал, где найти перевод, когда тема отключена. По умолчанию /languages . Tags Слова или фразы, черзе запятую, позволяющие пользователям находить тему с помощью фильтра тегов. Полный список тегов приведен в руководстве по обзору темы. обязательное для репозитория WP — это значит что поле обязательное если вы планируете размещать тему в каталоге (репозитории тем) WordPress.

Пример полного заголовка файла style.css

/** * Theme Name: Название темы * Theme URI: URL темы в каталоге WordPress или где-то еще. Пример: http://wordpress.org/themes/twentythirteen * Author: Имя автора темы * Author URI: URL автора. Пример: http://mysite.org/ * Description: Короткое описание темы. * License: Лицензия. Пример: GNU General Public License v2 or later * License URI: URL на лицензию. Пример: http://www.gnu.org/licenses/gpl-2.0.html * Tags: Метки темы, по которым тему можно будет найти в каталоге WordPress. Например: black, brown, orange, tan, white, yellow * Text Domain: Домен перевода для темы. Нужен чтобы можно было перевести описание указанное в Description. Например: twentythirteen * Version: Версия темы. Пример: 1.0 */

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *