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

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

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

Создай свой первый сайт на WordPress

Александр
Оцените автора
Добавить комментарий

  1. tiaurus

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

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

    <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. Александр автор

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

      Ответить
      1. tiaurus

        Я обновил комментарий, добавив в него подробную инструкцию.

        Ответить
        1. Александр автор

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

          <?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. Александр автор

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

          >

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

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

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

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

          Ответить
        3. Александр автор

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

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

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

          <h1>

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

          Ответить
          1. tiaurus

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

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

            Ответить