Свой дизайн для каждой страницы в WordPress

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

Первый способ позволяет видоизменять любую страницу сайта на WordPress с помощью CSS кода. Это поможет, если изменения в дизайне не велики.
Способ заключается в использовании функции body_class(), которая печатает определенный класс из следующих:

rtl 
home 
blog 
archive 
date 
search 
paged 
attachment 
error404 
single postid-(id) 
page-id-(page_id) 
attachmentid-(id) 
attachment-(mime-type) 
author 
author-(ник пользователя) 
category 
category-(слаг) 
tag 
tag-(слаг) 
page-parent 
page-child parent-pageid-(id) 
page-template page-template-(название шаблона) 
search-results 
search-no-results 
logged-in 
paged-(номер страницы) 
single-paged-(номер страницы) 
page-paged-(номер страницы) 
category-paged-(номер страницы) 
tag-paged-(номер страницы) 
date-paged-(номер страницы) 
author-paged-(номер страницы) 
search-paged-(номер страницы) 
tax-(название таксономии) (начиная с wordpress 3.1) 
term-(название терма) (начиная с wordpress 3.1) 
admin-bar (начиная с wordpress 3.1)

Думаю, из названий классов понятно, когда они будут выводиться :)
Теперь, чтобы воспользоваться, нужно поправить файлы index.php, single.php и прочие, в которых есть тег <body> следующим образом:

<body <?php body_class($class); ?>>

Этот код выведет для главной страницы этого сайта такую строку:

<body class="home blog logged-in">

Что означает, что открыта главная страница блога для залогиненного пользователя, теперь, чтобы видоизменить страницу, можно использовать следующие стили:

.home {
/* css код */
}
.blog {
/* css код */
}
.logged_in {
/* css код */
}

Есть и другие способы. Правда, они в основном похожи на описанный выше, различаются лишь первым шагом — способом задания элементам на странице своего класса или идентификатора.
Например, можно сделать так:

<body id="page-<?php the_ID(); ?>">

В результате каждая страница будет иметь свой собственный идентификатор «page-(номер страницы)». Далее просто пользуемся этим в css.

Есть еще один вариант. На мой взгляд совсем извращенный :) Но жить право имеет. Для задания уникального класса для страницы будем использовать ее заголовок!

<body class="<?php echo sanitize_title_with_dashes( get_the_title() ); ?>">

Для этой страницы такой код выведет следующую строку:

.svoj-dizajn-dlya-kazhdoj-stranicy-v-wordpress {
/* css код */
}

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

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

Запись опубликована в рубрике WordPress с метками , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">