Содержание
При разработке темы Crunchify нам хотелось иметь специальную таблицу стилей CSS, которую мы хотели применить только на домашней странице или странице указателя.
WordPress по умолчанию поставляется с несколькими условными тегами. Некоторые из наиболее часто используемых ниже в списке:
- is_home () — для проверки домашней страницы
- is_front_page () — для проверки первой страницы
- is_archive () — для проверки страницы архива
- is_page () — для проверки страницы
- is_single () — для проверки почты
- is_singular () — для проверки записи / страницы
Основываясь на теме, будет сложно применить CSS на домашней странице / странице индекса . Но мы попытаемся пройти через шаги, которые относятся к большей части темы WordPress.
Этот учебник применим, если у вас есть вопросы ниже:
- Конкретный CSS на домашней странице, другой для других страниц
- CSS — стиль что-то только на главной странице
- Другой CSS для первой страницы
- Как добавить CSS для пользовательского шаблона страницы
- Изменить css entry-content только на главной странице
- Шаблон домашней страницы CSS
- Изменить CSS для одной страницы
Давайте начнем:
Шаг 1
- Посетите домашнюю страницу вашего сайта. В моем случае:
https://crunchify.com - Щелкните правой кнопкой мыши на домашней странице и нажмите
Inspect Element - Проверить
tagи найти идентификатор домашней страницы CSS.- Я использую WordPress Genesis Framework и в моем случае это
body classсо свойством CSS.home
- Я использую WordPress Genesis Framework и в моем случае это
Шаг 2
Если вы идете в page или же single post вы увидите другой класс CSS. Проверьте это на скриншотах ниже.
Single post:
Page post:
Archive page:
Шаг 3
Как только вы определили правильный CSS класс просто поместите нужный CSS в вашей теме style.css файл.
В моей теме я разместил код ниже, чтобы применять его только к типу home / archive / page.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
, Главная , content - sidebar - wrap { // <=== это относится только к типу домашней страницы
ширина : 1150 пикселей ;
}
, Главная , содержание {
ширина : 800px ;
}
, архив , content - sidebar - wrap { // <--- это относится только к типу страницы архива
ширина : 1150 пикселей ;
}
, архив , содержание {
ширина : 800px ;
}
, страница , content - sidebar - wrap { // <=== это относится только к типу страницы
ширина : 1150 пикселей ;
}
, страница , содержание {
ширина : 800px ;
}
|
В моем другом блоге, поскольку я отключил 2-ю боковую панель на главной странице, я должен изменить post width соответственно. Для одной страницы у меня есть 2 боковых панели. Один слева и второй справа. Итак, незначительные изменения в CSS помогли мне исправить проблему ширины блога на different types of page бесшовно.
0.00 (0%) 0 votes
