Стилизация элементов только на главной странице

Question

Стилизация элементов только на главной странице

4 дек. 2013 г., 07:46:35

Просмотры: 59.4K

Голосов: 10

Я относительно новичок в WordPress, но уверен, что есть способ сделать то, что мне нужно.

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

Мой текущий CSS выглядит следующим образом:

#main_content .container {
position: relative;
padding: 120px 0;
}

Я хотел бы уменьшить отступ до 80px, если это главная страница, в остальных случаях оставить как есть.

Это нужно делать внутри шаблона или существуют особые CSS-приемы, специфичные для WordPress, о которых я пока не знаю?

Исходя из моего небольшого опыта, я думаю, что должен иметь возможность определить, является ли страница is_home или что-то подобное, и выбрать специальную таблицу стилей в файле header.php для главной страницы. Предположительно, с использованием !important после изменения padding в CSS.

Можете подсказать направление? Результаты, которые я нахожу через поиск, не совсем то, что я пытаюсь сделать.

MrS1ck

103

css главная страница

Все ответы на вопрос

Комментарии

Ваш ответ был очень полезным и подробным, спасибо!

MrS1ck

4 дек. 2013 г. 18:57:52

Если вы находитесь на странице Home, ваш тег body будет отображаться как <body class="blog"> вместо home, а на Front Page <body class="home"> вместо front-page: https://core.trac.wordpress.org/browser/tags/4.9.2/src/wp-includes/post-template.php#L570

rafawhs

1 мар. 2018 г. 15:37:48

@mayeenul Islam, я применил некоторые CSS-стили к классу ".page" для внутренних страниц. Но моя главная страница имеет оба класса ".home" и ".page". Как мне это обработать?

Sopo

8 мая 2018 г. 22:29:23

Я обнаружил, что класс "page-template-default" присутствует на всех внутренних страницах, кроме главной, поэтому использовал его. В любом случае, спасибо.. это было полезно

Sopo

8 мая 2018 г. 22:50:20

Проверьте класс тега body, там есть класс home для домашней страницы. Надеюсь, следующий CSS поможет вам.

.home #main_content .container {
position: relative;
padding: 120px 0;
}

saifur

166

4 дек. 2013 г. 08:01:11

Mayeenul Islam 12.9K · Accepted Answer · 2013-12-04T08:32:15Z

Функция WordPress body_class($class) — это удобный динамический способ загрузки стилей и JavaScript для определенного содержимого body. Если ваша тема не поддерживает body class, добавить их очень просто:

Откройте файл header.php (или шаблон, содержащий тег <body>)
Отредактируйте тег <body>, изменив его на <body <?php body_class(); ?>> — готово! :)

Теперь, когда вы находитесь на:

Главной странице (Home), ваш тег body будет отображаться как <body class="blog">
Главной странице сайта (Front Page), ваш тег body будет отображаться как <body class="home">
Странице отдельной записи блога (single.php), ваш тег body будет отображаться как <body class="single">
Странице отдельной страницы (page.php), ваш тег body будет отображаться как <body class="page">

Теперь у вас есть полная свобода стилизации. Для внешней таблицы стилей, например, для главной страницы, ваш стиль может выглядеть так (как уже упомянул @saifur):

body.home #main_content .container {
   position: relative;
   padding: 120px 0;
}

Внутренний CSS

Для внутреннего CSS в WordPress есть условные проверки, такие как is_home() и is_front_page(). С их помощью можно определить, находитесь ли вы на главной странице блога или главной странице сайта, и затем загрузить внутренний CSS-код:

<?php if( is_home() || is_front_page() ) : ?>
<style id="my-internal-css">
    #main_content .container {
       position: relative;
       padding: 120px 0;
    }
</style>
<?php endif; ?>

Аналогично работают функции is_single(), is_page(), is_category(), is_archive(), is_day() и другие.