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

212
16 марта 2018, 11:57

Порой кажется, что разработчики тем для ВП соревнуются между собой в запутанности тем.

Хочется изменить два банальных параметра - ширину тела сайта и ширину логотипа, ан нет! Нет таких параметров в style.css

Они инспектируются гуглом, четко указано, что есть такие стили и такие классы именно в этой папке и именно в этом файле. А их нет! Обычно я прощался с темой после подобного гемора, но в этот раз я решил разобраться с этим.

Одно смутило. В инспекции указаны и папка, и файл, но файл style.css идет с каким-то параметром, суть которого мне не ясна. То есть ссылается на файл такого вида: https://сайт/wp-content/themes/тема/style.css?ver=4.9.4

Загадка. То же самое и с шириной тела сайта. Где искать этот параметр - известно только разрабам, а они не отвечают.

Answer 1

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

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

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

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

<h2 class="entry-title">Home</h2>

Справа - стили этого элемента. При наведении на 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 {
    width: 200px;
}

Чтобы увидеть ширину "тела сайта, как вы это называете" (ширину контента, я полагаю), надо в инспекторе навести на <header id="masthead" class="site-header container" role="banner"> и увидеть подсветку блока

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

.container {
    max-width: 940px;
}
Answer 2

Некоторые разработчики тем могут закладывать некоторые параметры темы в виде функции. В данном случае (TD Persona), параметры логотипа хранятся в файле functions.php.

READ ALSO
Белая граница у тени в svg

Белая граница у тени в svg

Проблема в отображении тени

196
Изменение всех foreign keys

Изменение всех foreign keys

Всех приветствуюЕсть большое количество таблиц, и очень большое количество foreign key

154
как вносить русские символы в MySQL?

как вносить русские символы в MySQL?

Использую PomeloEntityFrameworkCore

181
Дополнительное условие выборки MySql

Дополнительное условие выборки MySql

Есть простой результат выборки из базы

175