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

Автор Александр Опубликовано 28.09.2012 Обновлено 27.12.2016

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

Александр

Оцените автора

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

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

Возьмем третий способ, как самый универсальный, и попробуем на его основе вывести изображение поверх миниатюры поста, соответствующее категории.
```
<div class="thumb">
    <a  rel="nofollow ugc">" title="<?php the_title(); ?>"><?php the_post_thumbnail('thumbnail', array('title' => "")); ?></a>
    <h1>
        <div <?php post_class(); ?>>
        </div>
    </h1>
</div>
```
Этот код выводит миниатюру поста, а поверх нее выводит еще один элемент, в котором отображается значок категории. Он должен быть вставлен внутри цикла, отвечающего за вывод содержимого поста. Главное в этом коде – это использование элемента DIV с классом, меняющимся в зависимости от категории поста. Если вы решили применять такое оформление, то вам нужно учесть, что у поста в этом случае должна быть одна категория.

К коду необходимо добавить оформление.
```
.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 – для каждого из них задается свое фоновое изображение.

Я часто использую подобный код для выделения постов некоторых категорий, например, для постов в категории видео.
Ответить
1. Александр автор 28.09.2012 в 14:19
  
  Спасибо тебе огромное, добрый человече! Живи долго и будь счастлив!
  Третий способ именно то, что я искал)) Сейчас буду разбираться)
  The best wordpress blog ever!
  
  Ответить
  1. tiaurus 28.09.2012 в 14:26
    
    Я обновил комментарий, добавив в него подробную инструкцию.
    
    Ответить
    1. Александр автор 28.09.2012 в 14:56
      
      Начал разбираться и ступор… Дело в том, что у меня премиум тема и там все как всегда отличается от дефаулта….
      
      <?php if ($image['url']) : ?> <div class="the-post-image"> <?php if ($popup_link) : echo $popup_link; else : ?> <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf( esc_attr__( 'Permalink to %s', THEME_NAME ), the_title_attribute( 'echo=0' ) ); ?>"> <?php endif; ?> <figure> <img src="<?php echo $image['url']; ?>" width="<?php echo $image['width']; ?>" height="<?php echo $image['height']; ?>" /> </figure> </a> </div> <?php endif; ?>
      
      Может посмотрите и подскажите куда и чего вставлять тут? Заранее извиняюсь что надоедаю, но действительно не волоку в коде((((
      
      Ответить
    2. Александр автор 28.09.2012 в 21:29
      
      Все) разобрался… Стоило немного поднять глаза и обнаружить, что этот код
      
      >
      
      уже прописан в теме)))
      Но у меня два вопросика еще.
      
      1. У меня стала выводиться картинка, но она почему-то выводиться позади миниатюры! O_o
      В чем может быть причина? Я уже в силу своей неопытности стал z-index в css пихать – не помогло((( Как её вывести наперед миниатюры?
      
      2. Зачем надо добавлять код в тег h1?
      Когда я добавлял код с тегом h1, то у меня постоянно смещался блок миниатюры. Так зачем он?
      
      Заранее благодарен за ответ)))
      
      Ответить
    3. Александр автор 28.09.2012 в 21:32
      
      Ох ты ж ёлы-палы! Не думал что код пролезет в коментах… сори.. Вот читабельный вариант.
      
      1. У меня стала выводиться картинка, но она почему-то выводиться позади миниатюры! O_o
      В чем может быть причина? Я уже в силу своей неопытности стал z-index в css пихать – не помогло((( Как её вывести наперед миниатюры?
      
      2. Зачем надо добавлять код в тег
      
      <h1>
      
      Когда я добавлял код с тегом
      , то у меня постоянно смещался бло миниатюры. Так зачем он?
      Заранее благодарен за ответ)))
      
      Ответить
      1. tiaurus 29.09.2012 в 14:33
        
        2. Да по сути не зачем – вы можете использовать любой другой контейнер, DIV например. Я привел пример из своего куска кода, практически ничего не меняя.
        1. Скорее всего это особенности вашего оформления в премиум-теме. Ищите, как оформляются миниатюры – возможно, что на них уже поверх что-то добавляется.
        
        Вообще я премиум-темы не люблю – люди за них деньги просят, а ковыряться приходится мне.
        
        Ответить