Оформляйте что-то только на главной странице

Question

Оформляйте что-то только на главной странице

Я относительно новичок в Wordpress, но я уверен, что есть способ сделать то, что я хотел бы сделать.

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

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

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

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

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

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

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

7

css homepage

Author: Mayeenul Islam, 2013-12-04

Source

2 answers

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

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

1

Author: saifur, 2013-12-04 06:01:11

score 13 · Accepted Answer

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

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

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

Home страница, ваш тег тела отобразит <body class="blog">
Front Page, ваш тег тела отобразит <body class="home">
Страница сведений о записи в блоге (single.php), ваш тег тела отобразит <body class="single">
Страница сведений о странице (page.php), ваш тег тела отобразит <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(), ... и так далее...