Разное оформление категорий и страниц

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

Ранее я писал о таких вещах как .например, вывести описание категории, что позволит сделать сео текст на каждом разделе сайта, плюс к этому можно добавить title категории, без которого будет трудно получать посетителей прямо на раздел сайта. Если у вас этого еще не сделано, то советую почитать и изучить, чтобы помимо оформления была еще и грамотная оптимизация рубрик!

Итак, если вы прочитаете все до конца, то я уверен, что у вас все получится сделать правильно.

разные css для категорий, страниц, записей WordPress

Перед тем как делать что-либо далее, сделайте резервную копию сайта или файлов темы. Или хотя бы файлов style.css, header.php, category.php

Отдельный CSS для категории

Итак, первое что нам нужно реализовать – это поставить условие в шапке, чтобы для определенной рубрики, которую мы хотим сделать с индивидуальным дизайном,  выводился нужный CSS. Почему именно шапку? Потому что в ней идет присвоение *.css файла с описанием стилей для данной страницы.

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

В качестве примера мы прикрутим  в файл header.php  условие, по которому для категории, которая имеет ID=4 (вы возьмите id той рубрики, для которой будете делать изменения), файл style1.css. Если вы не знаете как узнать id , то читаем - как узнать id категории

Для начала вы можете просто скопировать файл style.css и положить его рядом с исходным в той же папке, изменения сделаем потом.

Теперь присвоим для рубрики с id=4 этот новый файл CSS, для этого заходим в "админка > внешний вид > редактор > header.php" и находим строчку

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Эту строку мы удаляем. Она отвечает за вывод файла style.css. Вместо неё пишем:

<?php if (in_category('4')) { ?>
<link rel="stylesheet" type="text/css" media="all" href="http://вашсайт.ru/wp-content/themes/названиетемы/style1.css" />
<?php ;} else { ?> 
<link rel="stylesheet" type="text/css" media="all" href="http://вашсайт.ru/wp-content/themes/названиетемы/style.css" />
<?php ;}?>

Таким образом, попадая на страницу рубрики с id=4 внешний вид будет определяться в style1.css, попробуйте сделать в нем изменения и убедитесь в этом сами!

Разные CSS оформления для страницыWordPress

Ровно таким же методом можно сделать разное оформление для страниц вашего сайта. Только в этом случае будет использоваться другая функция, а именно is_page(‘ID’).

Схема точно такая же, первым делом узнаем id нашей страницы. Теперь идем редактировать тот же самый header.php (админка > внешний вид > редактор > page.php)

Точно так же удаляем строку

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Вместо нее вставляем код:

<?php if (is_page('4')) { ?>
<link rel="stylesheet" type="text/css" media="all" href="http://вашсайт.ru/wp-content/themes/названиетемы/style1.css" />
<?php ;} else { ?> 
<link rel="stylesheet" type="text/css" media="all" href="http://вашсайт.ru/wp-content/themes/названиетемы/style.css" />
<?php ;}?>

Не забудьте поставить вместо моего ‘ID’ свой. Теперь поменяйте в вашем style1.css, например, фон страницы и проверьте как все получилось.

Отдельный CSS для главной страницы

Если же вам требуется сделать уникальное оформление для главной страницы, то можно вставить условие и для неё:

<?php if( is_front_page() ) {?>
<link rel="stylesheet" type="text/css" media="all" href="http://вашсайт.ru/wp-content/themes/названиетемы/styleindex.css" />
<?php }; ?>

В этом куске кода, проверяется на главной ли странице мы находимся (index.php), если да, то к ней применяется таблица стилей в данном случае styleindex.css

Буду рад видеть Вас в комментариях, задавайте вопросы, если они есть, не стесняйтесь :idea:

 

vsepro100.net был атакован и восстановлен недавно!
У вас быстро открывается сайт vsepro100.net

Добавить статью в соц сеть

Комментарии к: Разное оформление категорий и страниц

  1. Павел, спасибо! давно хотела сделать разделы магазина в разном оформлении!! Жалко у вас нету рубрики "ксс для чайников"… пойду разбираться с ксс :grin:

    • Павел Гаврилин

      Оксана, спасибо за комментарий!
      Я в будущем возможно сделаю такой раздел, т.к. он косвенным образом связан и с настройкой внешнего вида wordpress блогов, но сейчас вам придется поискать эту информацию в гугле =)

  2. Павел, инструкции ваши абсолютно непонятны и пользоваться ими невозможно, написано вроде для чайников, снисходительно и в тоже время абсолютно не упрощая язык. С треском сегодня закрыла вашу статью "Как сделать разные header.php для страниц, рубрик?" и сейчас наткнулась на эту. Найти нигде описание больше не могу, но вы объясняете жутко.
    Благодарность за то, что есть хоть какая-то инструкция на эту тему. Но очень вам советую быть более лояльным к новичкам и объяснять все подробнее.

    • Павел Гаврилин

      Уважаемая Лизавета, что тут не понятно вам?))))
      разный header для страниц? там наиподробнейшим образом расписано, что надо вместо стандартного гет_хэдэр, вставить код, в котором надо лишь вставить свои id рубрики/страницы и там же ссылка как определить id нужный. задавайте конкретный вопрос, а не общий, я же не могу организовать вам уроки по скайпу =)))
      Статьи ориентированы на тех, кто хоть малейшее понятие имеет о чем идет речь, если вы впервые залезли вообще как факт в php, то вам придется параллельно с изучением инструкций еще и гуглить (я сам так учился с нуля).
      Вместо того, чтобы обижать людей, могли бы задать хоть 10000 вопросов и вам бы помогли, но с таким отношением…

  3. Большое спасибо за полезную статью! Павел, а есть возможность сделать только для текста комментариев свой стиль, чтобы допустим текст был курсивом? Если возможно, то как его добавить в таблицу стилей?
    Заранее спасибо и с наступающим Новым годом!

    • Павел Гаврилин

      Елена, извиняюсь за задержку, праздники , новый год =) Конечно можно. Что именно вам нужно? в определенных страницах курсивые комменты или на всех страницах сайта?
      Если для всех страниц, то все просто, вам надо в css изменить:
      .commentlist p {
      margin: 10px 5px 10px 0;
      }

      на
      .commentlist p {
      margin: 10px 5px 10px 0;
      font-style: italic;
      }

  4. спасибо! это самое простое решение которое мне удалось найти. Только вот не до конца оно решает мою проблему( буду благодарен если подскажете как сменить иконки в ленте анонсов на главной странице, чтоб у каждого анонса записи присваивалась своя иконка с соответствующей рубрики в которой эта запись размещена? очень жду ответа. заранее спасибо

  5. И как присвоить нескольким категориям одну иконку? может как то через запятую их прописать))

    • Павел Гаврилин

      почти, стоит сделать так:

      if ( in_category( array( 'id1', 'id2', 'id3', 'id4', 'id5' ) ))
      
  6. Огромное спасибо Павел! Всё действительно работает! Супер! :roll:

    Капча не очень, тяжеловата(

  7. Ура:!:, все проще некуда, спасиба за полезную инфу!! НО есть проблемка, теперь на главной странице отображается стиль, той категории в которую добавленна последняя новость, тоесть постоянно меняется. Как для главной страници закрепить один стиль CSS?? Подскажите если знаете, ато я тут уже :?:

  8. А можно задать несколько категорий?? так чтоб в одном коде, может с переменными, наподобии этого:

    Этот код запрещает выводить новости отмеченных категорий на главную страницу.
    Сам не могу сделать :?: Спасиба!

  9. Ой код не отобразился в коментарии((

  10. ?php query_posts($query_string .’&cat=-1,-3,-4,-92,-35,-99,-37,-98,-91,-36,-118,-147,-29,-30,-31,-32,-33,-34,-151,-163,-5,-6,-7,-8,-9,-10,-11,-12,-15,-13,-14,-109,-16,-17,-18,-19,-20,-21,-22,-23,-24,-25,-26,-27,-107,-28, -169, -171′); if (have_posts()) :?

    ?php $postCount=0; ?

    ?php while (have_posts()) : the_post();?

    ?php $postCount++;?

    • Павел Гаврилин

      Сергей, день добрый!
      Чтобы код отобразился целиком, заключите его в теги < рre>тут код
      чтобы задать несколько категорий в условие, сделайте так

      in_category( array('id1', 'id2') )
  11. Спасиба, с array работает :!:
    Но никак не могу задать несколько файлов *css, тоесть предоставленный вами код работает на два файла *css, я пытался сделать на три файла, тоесть style, style2, style3. Но ничего не получается. :?:

  12. Все, разобрался :!:

  13. Код оставить немогу, выкидывает на какуюто страницу с ограничением 100 симвалов(

  14. Но осталась последняя проблемма, тут я сам никак не справлюс:
    На главную страницу выводится тот стиль, который принадлежит к категории в которую добавленна последняя новость, как это исправить?? :sad:

  15. Не, не работает. :sad:

  16. Заработало :!: . Просто отдельным кодом записа, отдельно от кода для категорий, туда встроить не получилось. :!:

  17. Здравствуйте, Павел! Подписана на новости Вашего сайта, так как у Вас всегда полезная и ценная информация. Можно ли мне задать один вопрос, на который не могу ответ нигде найти? Мой блог на вордпресс, шаблон я несколько изменила. В частности, в таблице стилей изменила шрифт на DS Moster для всех заголовков. Сам шрифт закачала в папку wp-content этой темы. Первые несколько месяцев все отображалось, как я и хотела. Но в последнее время шрифт заголовков самовольно изменился на другой. Видимо, тот, что был в теме изначально. Однако в таблице стилей как был прописан DS Moster, так и есть. Подскажите, пожалуйста, что можно сделать, чтобы вернуть шрифт, какой нужен мне? Заранее большое спасибо!

    • Павел Гаврилин

      Странно. Попробуйте для начала приписать около вашего шрифта

      font-family: название шрифта !important;

      Очень рад, что информация вам оказалась полезна!

    • Павел Гаврилин

      Хотя вы знаете, у меня все правильно отображается (зашел на сайт). может кэш почистить?

  18. Большое спасибо за совет!!! И вообще за ваш сайт!

  19. Здравствуйте! мне надо изменить стиль одной страницы, но у меня ничего не получается… в page.php у меня нет строки <link rel="stylesheet" type="text/css" media="all" href="" />

    когда просто вставляю код который вы указали со всеми своими ссылками ничего не работает… подскажите пожалуйста что сделать? вот код моего page.php:

    <?php if ( function_exists( 'yoast_breadcrumb' ) ) {
    yoast_breadcrumb( '’, " );
    } ?>


    что и как здесь надо изменить? :| заранее спасибо!

  20. прошу прощения, вот код:

    <?php if ( function_exists( 'yoast_breadcrumb' ) ) {
    yoast_breadcrumb( '’, " );
    } ?>


  21. код не могу отправить, ваш сайт вставляет свой код…

    • Павел Гаврилин

      Ищите в header строку со стилями, и там вставьте условие для страницы.

  22. Павел Гаврилин

    Заключите код в теги тут код, и он полностью будет в комментарии ;-)

  23. <?php
    /*

    <?php if ( function_exists( 'yoast_breadcrumb' ) ) {
    yoast_breadcrumb( '’, " );
    } ?>


    */
    ?> код заключил в теги… сейчас посмотрим :sad:

  24. Добрый вечер! Возникла проблема с оформлением категорий.
    Когда в вместо id добавляю номер категории,кроме 1, ничего не происходит. В чем может быть проблема?
    если поможет,ссылка на сайт:news.hhos.ru

  25. Здравствуйте, Павел. Не знала, где задать этот вопрос, поэтому пишу здесь. Вопрос касательно комментариев. Комментарии у меня древовидные, в самом начале каждый комментарий подсвечивался другим цветом, но потом что-то произошло (возможно, я где-то нахимичила), и подсветка исчезла. Не подскажите, какой файл и какой примерно код за это отвечает. Сразу приношу извинения за некую безграммотность в объяснении.

  26. Павел Гаврилин

    Скорее всего css испортили. Посмотрите код страницы, какой класс или id присваивается главному комменту, и прописать для него отдельный стиль, например, задать фон..

  27. Здравствуйте. Прочитал я вашу статью, но она мне не помогла совершенно. Как сделать чтобы записи в одной из рубрик имели бы Заголовки со своим отдельным стилем (другой шрифт, цвет, размер)? Одним словом все записи на сайте имеют одинаковые по размерам, цвету и шрифту заголовки, а записи в одной из рубрик должны иметь заголовки с другими шрифтом, цветом и размером. Если знаете как это сделать, то скажите пожалуйста.

    • Павел Гаврилин

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

  28. Ок. Не хотите – не помогайте, я всего лишь попросил помочь, так как в конце поста вы сами написали, что если у вас есть вопросы, то задавайте их. Вот я и задал. А ваша инструкция совершенно не работает. Странно предлагать людям задавать вопросы в комментариях, потом направлять их опять же на свою статью, инструктаж которой просто не помогает человеку.

    • Павел Гаврилин

      Инструкция действительно работает, все что требуется от вас – это элементарные познания в редактировании php кода. Если они отсутствуют, то стоит набраться знаний..инструкции на моем блоге о настройке вордпресс, а не краткий курс пхп для начинающих.

    • Павел Гаврилин

      Альберт, специально еще раз прошелся глазами по статье.
      Идем к заголовку "Отдельный CSS для категории", там через абзац написано, что нужно удалить вызов стандартного CSS файла и прописать условие для определенной категории. ВСЕ! дальше, нужно лишь зайти в style1.css (если делать по инструкции) и поменять стиль для заголовков или что там вам еще нужно.

  29. Павел, ваш инструктаж к сожалению не работает для моих сайтов на WordPress. Я читал вашу инструкцию несколько раз, но так и не понял как можно применить её к моим сайтам на WordPress. С WordPress я работаю уже почти год. Совсем уж новичком меня не назвать, собственноручно изменял php код на сайтах много раз по свои нужды. И вот решил поменять заголовки в одной из рубрик. Попал на ваш блог, но инструкция не для моих сайтов.

    • Павел Гаврилин

      что именно у вас не получается? в header.php есть вызов CSS файла. вы нашли это место?
      какая у вас тема?

  30. Тема Twenty Thirteen. У меня такой строки в header.php как <link rel="stylesheet" type="text/css" media="all" href="" />

  31. Я опечатался – у меня нет такой строки в header.php

    • Павел Гаврилин

      Как я и говорил, нужны были небольшие знания вордпресс =))
      итак:
      идем в функции темы (functions.php)
      удаляем строку

      Line 182: 	wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' );

      далее шагаем в хэдэр и вставляем пхп код:

      < ?php if (in_category('2')) { ?>
      ссылка на отдельный КСС
      < ?php ;} else { ?> 
      ссылка на CSS для всех остальных категорий
      < ?php ;}?>
      

      id категории свой вставляем и все работает. только что еще раз проверил)

      • Возможно я вставил не в то место код
        ссылка на отдельный КСС

        ссылка на CSS для всех остальных категорий

        Но ничего не работает. Поменял в файле style1.css размер шрифта для пробы – шрифт поменялся у всех заголовков всех рубрик.

  32. Павел, ситуация такая – когда заходишь в запись со стилем style1 то заголовок там такой какой надо, вот когда заходишь на морду сайта, то заголовок этой записи такой же как и у записей со стилем style.

  33. Всё! Павел, я решил свою задачу благодаря Вам! Спасибо большое!!! Вы настоящий блоггер, который РЕАЛЬНО помогает людям! Сейчас же подпишусь на Ваш блог и порекомендую его друзьям.

    • Павел Гаврилин

      Пожалуйста =) Удачи в будущих настройках ваших сайтов :arrow:

      • Павел, а у вас на блоге есть статья про то как вывести количество просмотров у записей WordPress ? Искал актуальную информацию на сайтах, взял php код с одного из них и мой тестовый сайт полетел.

  34. Здравствуйте Павел, помогите пожалуйста! Я не могу изменить шрифт и размер описания категории. Не подскажете какой нужен селектор и куда его вставлять? :sad:

  35. Здравствуйте Павел. Может подскажете как такое провернуть в теме "Hueman". просмотрел кучу инструкций, но только по вашим удалось что-то сделать. но все равно все только ломается :sad:

  36. По-моему тут не хватает условия else.

  37. <link rel="stylesheet" type="text/css" media="all" href="" />
    Нет такого в хедер..и я так подозреваю, что еще в сотнях шаблонах тоже нет такого кода, а все совсем по другому и Ваш вариант подойдет далеко не всем.

  38. Спасибо за статью! Но у меня появился вопрос.

    У меня англо-русский сайт. Есть русские, а есть английские статьи. Я задал разные стили для категорий. Теперь в английских статьях пишется "Read More", в русских – "Читать далее". И т. п. Такая ситуация наблюдается и на страницах категорий, и в отдельных записях.

    НО! На главной странице у меня получается сделать либо всё на русском, либо на английском (я имею в виду подписи типа "нет комментариев", "Добавлено" и т. д.). Как бы провернуть такую штуку, чтобы на главной странице при выводе постов учитывались настройки для каждой из категорий?

    Заранее спасибо за ответ!

  39. Подскажите, при обновлении самой CMS, не слетят ли пути, может есть смысл создать дочернюю тему?

  40. Здравствуйте, понравился дизайн сайта, ;-) кое что позаимствую,сама статья полезная, но иногда не все понятно. У моего мужа есть сайт, вот ему то же трудно доказать что описывать действия необходимо более подробно и желательно с картинками. Извините если чем обидела,огромное спасибо за ваш труд!

  41. Непонятно для кого и зачем писалась эта статья, если код защищен от копирования!

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

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

Captcha Captcha Reload

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Подписаться, не оставляя комментарий