n-wp.ru — блог о WordPress

Как вывести изображение поверх миниатюры поста в зависимости от категории?

Здравствуйте. В первую очередь хочу сказать что у Вас очень крутой ресурс. Моё почтение админу))))
Сам я в коде не силен и не могу найти решение моей задачи.
Есть список постов на главной странице. У каждого поста есть миниатюра.
Вопрос: КАК можно вывести изображение поверх миниатюры поста. Нужно мне это для классификации каждого поста.
Допустим если пост новостной и он закреплен за категорией «новости», то в верхнем углу миниатюры выводится иконка новости, если пост информационный, то выводится иконка инфо… Т.е. я понял что вывод каждой определенной иконки должен быть зависим от категории, но как это сделать на практике — не знаю…
Люди добрые, может подскажет кто как это сделать?
Заранее весьма благодарен за внимание)))

7 комментариев

  • Ну для начала вам нужно просто попробовать вывести вместо категории картинку, ей соответствующую. Вариантов тут три:
    Отображение картинок вместо названий категорий (не универсальный вариант, но работающий)
    Как задать постам разных категорий индивидуальное оформление (тоже не совсем универсально, но уже близко к идеалу)
    Добавление в шаблон элемента с оформлением, соотвествующим классу, который присваивается в зависимости от категории поста (самый универсальный метод)

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

    Этот код выводит миниатюру поста, а поверх нее выводит еще один элемент, в котором отображается значок категории. Он должен быть вставлен внутри цикла, отвечающего за вывод содержимого поста. Главное в этом коде — это использование элемента DIV с классом, меняющимся в зависимости от категории поста. Если вы решили применять такое оформление, то вам нужно учесть, что у поста в этом случае должна быть одна категория.

    К коду необходимо добавить оформление.

    [cc lang=»css»]
    .thumb {position: relative;}
    .image h1 {position: absolute; top:0;left: 0;width: 100%;}
    .video {background:url(images/videocategory.png) no-repeat right center;padding-right:24px;text-align:left;}
    .audio {background:url(images/audiocategory.png) no-repeat right center;padding-right:24px;text-align:left;}
    .news {background:url(images/newscategory.png) no-repeat right center;padding-right:24px;text-align:left;}

    Этот код вставляется в style.css. Как видно из кода, определено оформление для классов с ярлыками video, audio, news — для каждого из них задается свое фоновое изображение.

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

    • Спасибо тебе огромное, добрый человече! Живи долго и будь счастлив!
      Третий способ именно то, что я искал)) Сейчас буду разбираться)
      The best wordpress blog ever!

        • Начал разбираться и ступор… Дело в том, что у меня премиум тема и там все как всегда отличается от дефаулта….

          Может посмотрите и подскажите куда и чего вставлять тут? Заранее извиняюсь что надоедаю, но действительно не волоку в коде((((

        • Все) разобрался… Стоило немного поднять глаза и обнаружить, что этот код

          >

          уже прописан в теме)))
          Но у меня два вопросика еще.

          1. У меня стала выводиться картинка, но она почему-то выводиться позади миниатюры! O_o
          В чем может быть причина? Я уже в силу своей неопытности стал z-index в css пихать — не помогло((( Как её вывести наперед миниатюры?

          2. Зачем надо добавлять код в тег h1?
          Когда я добавлял код с тегом h1, то у меня постоянно смещался блок миниатюры. Так зачем он?

          Заранее благодарен за ответ)))

        • Ох ты ж ёлы-палы! Не думал что код пролезет в коментах… сори.. Вот читабельный вариант.

          1. У меня стала выводиться картинка, но она почему-то выводиться позади миниатюры! O_o
          В чем может быть причина? Я уже в силу своей неопытности стал z-index в css пихать – не помогло((( Как её вывести наперед миниатюры?

          2. Зачем надо добавлять код в тег

          Когда я добавлял код с тегом
          , то у меня постоянно смещался бло миниатюры. Так зачем он?
          Заранее благодарен за ответ)))

          • 2. Да по сути не зачем — вы можете использовать любой другой контейнер, DIV например. Я привел пример из своего куска кода, практически ничего не меняя.
            1. Скорее всего это особенности вашего оформления в премиум-теме. Ищите, как оформляются миниатюры — возможно, что на них уже поверх что-то добавляется.

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