Как применить CSS к конкретной странице/сообщению

Опубликовано: 2022-01-04

Знаете ли вы, что вы можете применить CSS к определенной странице или записи в WordPress ? Да, из-за того, что WordPress поддерживает CSS, это возможно. И в этом руководстве мы покажем вам различные способы добавления CSS на определенную страницу или запись.

Все темы WordPress обычно применяют разные стили к каждому типу контента. Записи, страницы, таксономии, профили и любой другой контент имеют разные таблицы стилей в каждом из них. То же самое касается плагинов и всех других аспектов WordPress.

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

Зачем применять CSS к конкретной странице или публикации

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

Может быть определенная страница или тип сообщения, который нуждается в уникальном дизайне по сравнению с другими страницами или сообщениями на вашем веб-сайте. В этом случае один из лучших вариантов — применить CSS к конкретной странице или публикации. Эти страницы или сообщения обычно добавляются в меню вашего сайта. Но они также могут включать другие уникальные страницы и сообщения, такие как страница магазина, страница продукта или даже домашняя страница.

Например, даже мы в QuadLayers использовали CSS на определенных страницах, таких как «Портфолио» и «О нас», чтобы сделать их отличными от других страниц или типов записей. Теперь, без лишних слов, давайте продолжим процесс.

Как применить CSS к определенной странице или публикации

Существуют различные способы добавления CSS на определенную страницу или запись. Но вот 3 самых распространенных :

  1. Использование идентификатора или класса HTML
  2. Добавление PHP-функции
  3. Включение файла CSS на определенную страницу или запись

Все эти подходы можно использовать для применения CSS для различных целей. Мы рассмотрим все эти подходы в этой статье с надлежащим пошаговым руководством.

1. Использование идентификатора или класса HTML

Это один из наиболее распространенных и широко распространенных подходов, если вы хотите применить CSS к определенной странице или публикации. Все, что нам нужно сделать, это получить уникальный идентификатор , который будет иметь страница или запись. Затем этот HTML-класс или идентификатор позволяет нам нацелить все наши CSS-скрипты на нужную страницу или запись.

1.1. Найдите класс HTML или идентификатор страницы

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

Просто откройте страницу, на которой вы хотите применить CSS, и щелкните правой кнопкой мыши элемент, который хотите отредактировать. Затем нажмите «Проверить ».

Здесь проверьте HTML-тег body. Это зависит от темы, которую вы используете.

Мы использовали тему Twenty Twenty во всех следующих примерах. Итак, вот что вы увидите, просматривая домашнюю страницу веб-сайта с использованием темы Twenty Twenty:

На приведенном выше снимке экрана уникальный идентификатор домашней страницы — это класс « home ». Поэтому, если вы хотите применить некоторые правила CSS только к домашней странице, вам нужно использовать этот класс в своих селекторах.

Например, предположим, что мы хотим применить какой-либо стиль к логотипу только на главной странице . Затем, помимо домашнего класса, нам также понадобится селектор изображения логотипа. Опять же, это можно получить с помощью инструмента проверки браузера.


В этом случае мы будем использовать класс «пользовательский логотип», чтобы применить наш стиль к логотипу. Теперь давайте соединим их с классом, полученным на предыдущем шаге. Наконец, мы можем применить наш скрипт только на домашней странице, используя следующий селектор CSS:

 .home .custom-logo{ /*your CSS here */}

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

Конечно, если вам нужен более конкретный селектор, вы можете использовать полный селектор пути CSS. Но это довольно сложно и в большинстве случаев не требуется.

В качестве примера, это очень специфичный селектор для стилизации того же элемента логотипа, который мы видели раньше:

 html body.home div#page.site header#masthead div.site-branding div.site-logo span.custom-logo-link img.custom-logo{ /*your CSS here */}

1.2. Найдите класс HTML или идентификатор сообщения

Как и в случае со страницами, для каждого поста также должен быть уникальный HTML-класс. Опять же, просто проверьте элемент в сообщении, к которому вы хотите применить CSS, с помощью инструмента разработчика браузера. Затем вы сможете увидеть уникальный идентификатор, как с атрибутом postid .

Для следующего поста с темой Twenty Twenty класс, идентифицирующий этот пост, — postid -557.

проверка идентификатора сообщения применить css к определенному сообщению на странице

Точно так же вы можете сделать то же самое с любой другой страницей веб-сайта. Использование уникального класса, который идентифицирует страницу. Если вы посмотрите на следующий снимок экрана, вы увидите, что класс, идентифицирующий страницу, — page-id-357 .

проверка идентификатора страницы, применение CSS к публикации на определенной странице

Наконец, создайте свой собственный селектор CSS, который соответствует потребностям вашего веб-сайта, как пример пользовательского логотипа. Затем вы можете применить CSS к определенной странице или публикации, добавив его в « Внешний вид» > «Настроить» > «Дополнительный CSS» . Если вам нужна дополнительная помощь, вы можете ознакомиться с нашим руководством о том, как применить CSS к WordPress или применить CSS с помощью инструмента разработчика браузера.

2. Добавление функции PHP

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

  • Ваша тема не имеет уникального HTML-класса или идентификатора для контента, который вам нужно стилизовать.
  • У вас есть большой список правил CSS, и вам нужно сохранить их в отдельных файлах.
  • Вы хотите применить какое-то другое условие, кроме текущей страницы.

Если у вас есть подобные проблемы, когда вы хотите применить CSS к определенной странице или сообщению, лучше использовать функцию PHP .

Но прежде чем мы начнем, обязательно сделайте резервную копию своего веб-сайта WordPress или создайте дочернюю тему для этого подхода. Мы будем редактировать некоторые деликатные файлы на вашем сайте. Таким образом, любые ненужные изменения могут привести к дальнейшим проблемам с вашим сайтом.

Если вам нужна помощь, вы даже можете использовать один из лучших плагинов для дочерних тем для WordPress, чтобы создать дочернюю тему.

2.1. Найдите идентификатор страницы/сообщения

Первый шаг — проверить идентификатор страницы или записи, к которой мы хотим применить наши стили. Вы могли заметить, что значения id такие же, как и на предыдущем шаге. Однако это не тот HTML-идентификатор, который мы использовали раньше.

Идентификатор, на который мы сейчас ссылаемся, — это переменная PHP, которая идентифицирует записи и страницы. Принимая во внимание, что идентификатор в предыдущем подходе идентифицирует класс HTML.

К счастью, очень легко найти страницу и разместить идентификатор на своем веб-сайте. Вы можете увидеть идентификатор страниц и сообщений на панели администратора бэкэнда, когда открываете редактор . Идентификатор сообщения или страницы указан в URL-адресе вашего браузера.

URL-адрес идентификатора страницы применяет CSS к публикации на определенной странице

Другой способ получить идентификатор страницы или сообщения — использовать следующий скрипт в файле functions.php дочерней темы. Просто перейдите в « Внешний вид» > «Редактор тем» и откройте файл functions.php .

Затем вставьте следующий фрагмент в редактор и обновите файл. Он напечатает идентификатор страницы на переднем конце.

 add_action('wp_head',функция(){
    $page_id = get_queried_object_id();
    эхо $page_id;
});

Внешний интерфейс идентификатора страницы, как применить CSS к определенной странице/сообщению

После того, как вы узнаете PHP-идентификатор записи или страницы, к которой нужно применить CSS, вы можете просто напечатать CSS на голове. Вы можете использовать тот же хук, который мы использовали раньше, т. е. wp_head() .

Просто вставьте следующий фрагмент в файл functions.php еще раз.

 add_action('wp_head','my_head_css');
функция my_head_css(){
    $page_id = get_queried_object_id();
    если($page_id==97){
        echo "<style> /* здесь ваш CSS */ </style>";
    }
}

Убедитесь, что вы добавили свой CSS в раздел «ваш CSS здесь» и обновите файл.

3. Включение файла CSS на определенную страницу или запись

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

3.1. Создайте файл CSS с помощью редактора кода

Во-первых, вам нужно создать отдельный CSS-файл со всеми необходимыми CSS-скриптами с помощью редактора кода. Можно использовать такие редакторы, как Visual Studio Code, Sublime text или любой другой, поддерживающий файлы CSS.

Затем создайте новый файл с расширением CSS и вставьте сюда свой код. В этом руководстве мы назвали файл my-style.css .

3.2. Загрузите файл CSS в папку дочерней темы

Теперь созданный файл CSS необходимо загрузить в каталог дочерней темы. Для этого вы можете использовать FTP-клиент, такой как FileZilla, для загрузки файла. Вы даже можете загрузить его в основной каталог дочерней темы .

3.2. Поставьте в очередь свой пользовательский файл CSS

Теперь вы можете поставить свой пользовательский файл CSS на свой веб-сайт WordPress, добавив фрагмент кода в файл functions.php .

В следующем сценарии мы будем использовать wp_enqueue_script() , который является правильным способом применения файлов CSS к веб-сайту WP. Внутри функции мы регистрируем и ставим в очередь наш файл CSS ( my-styles.css ), только если выполняется условие. Это то же самое использование, что и в предыдущем примере.

Затем get_queried_object_id() извлечет идентификатор текущей страницы или сообщения. Все, что вам нужно сделать, это еще раз добавить следующий скрипт в файл functions.php и обновить его.

 add_action('wp_enqueue_scripts', 'my_theme_styles');

функция my_theme_styles() {
    если (get_queried_object_id () == 97) {
        wp_register_style('my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
        wp_enqueue_style('my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
    }
}

Примечание. В приведенном выше примере сценария мы ссылаемся на ту же ссылку на идентификатор, что и в предыдущих примерах, то есть 97.

Если вам нужна дополнительная информация о добавлении файла CSS, ознакомьтесь с нашим подробным руководством по применению CSS в WordPress.

Вывод

Это все различные методы, с помощью которых вы можете применить CSS к определенной странице или сообщению. Это может очень помочь вам в создании уникального дизайна для определенных страниц и постов вашего сайта. Подводя итог, можно сказать, что есть 3 наиболее распространенных способа добавления CSS на определенные страницы и записи:

  • Использование идентификатора или класса HTML
  • Добавление PHP-функции
  • Включение файла CSS на определенную страницу или запись

Самый простой подход из них — использование идентификатора или класса HTML для селекторов CSS. Однако, если ваша тема имеет какие-либо ограничения для нее, ваш следующий лучший вариант — добавить функцию PHP для применения CSS. Наконец, если вам нужно применить большие сценарии CSS для конкретной страницы или публикации, включение их в файл CSS является наиболее подходящим подходом для вас.

Если вы хотите использовать больше CSS на своем веб-сайте, у нас также есть учебные пособия по настройке меню Divi с помощью CSS или программному редактированию магазина WooCommerce. Точно так же вы также можете еще больше настроить свои страницы и сообщения с помощью наших руководств по программному созданию сообщений и страниц, превращению сообщения в страницу, созданию пользовательского типа сообщения или даже добавлению сообщений на страницу в WordPress.

Итак, можете ли вы теперь применить CSS к определенным страницам или сообщениям? Был ли этот урок полезен? Пожалуйста, дайте нам знать в комментариях. А пока вот еще несколько статей, которые вы, возможно, захотите посетить:

  • Как преобразовать/изменить тип записи в WordPress
  • Создайте пользовательский тип записи WordPress программно
  • Как настроить страницу корзины WooCommerce