Как добавить категорию или метку на фото?

Question

[HAbRAhabp]

Есть сайт на WordPress. Хочу сделать, чтобы на фотографии отображалась категория, в которой публикуется статья, и чтобы эта категория была кликабельной. Как можно это сделать? Как например на 4pda.ru, в некоторых постах есть кликабельные метки.

Comments

[HAbRAhabp]

Ну не получается... Сайт blogbitcoin.ru
мой index.php

<?php
global $options;
foreach ($options as $value) {
	if ( isset( $value['id'] ) ) {
	if (get_option( $value['id'] ) === FALSE) {
	$$value['id'] = $value['std'];
	} else {
		$$value['id'] = get_option( $value['id'] );
	}
  }
}
?>
<?php get_header(); ?> 

<?php if (get_option('gpress_slider_blog_loc') == 'Slippry') { ?>
 <?php include (TEMPLATEPATH . '/includes/slider.php'); ?>
<?php } ?>

<?php if (get_option('gpress_slider_blog_loc') == 'Flexy') { ?>
 <?php include (TEMPLATEPATH . '/includes/slider2.php'); ?>
<?php } ?>



  <div class="inner">
<?php if (get_option('gpress_sb_right') == 'Включить') { ?>
<div class="main">
<?php } else { ?>
<div class="main-full">
<?php } ?>
<?php if (get_option('gpress_sb_left') == 'Включить') { ?>
<div class="center-col">
<?php } else { ?>
<div class="center-full">
<?php } ?>

<?php if (get_option('gpress_feat_excl') == 'Исключить') { ?>
 
 <?php 
$featured_cat = get_option('gpress_feat_cat');
$category_id = get_cat_ID($featured_cat); 
$q = - $category_id

?>

<?php
$page = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts( array( 'cat' => $q, 'paged' => get_query_var('paged') ) );
?>

<?php } ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="index-title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-info">
<?php if (get_option('gpress_sx') == 'М') { ?>
<em class="fa fa-male"></em>
<?php } else { ?>
<em class="fa fa-female"></em>
<?php } ?>
<?php the_author(); ?> &nbsp;  &nbsp;&nbsp; 
<em class="fa fa-clock-o"></em><?php the_time('j F Y'); ?>  &nbsp;  &nbsp;&nbsp;  
<em class="fa fa-eye"></em> Просмотров: &nbsp;
<?php
if(function_exists('get_post_views')) { 
        echo get_post_total_views();
}
 ?>  &nbsp; &nbsp; &nbsp;<em class="fa fa-comments-o"></em> <?php comments_popup_link('Нет комментариев', '1 комментарий ', ' % коммент.'); ?></div>


<?php if (get_option('gpress_post_look') == 'Обычный пост') { ?>
 <?php the_content('Далее...'); ?> 
 <?php } else { ?>
 <?php if(has_post_thumbnail()): ?>
  <a href="<?php echo get_permalink(); ?>">

 <?php $params = array( 'width' => 215, 'height' => 215,'crop' => true);
$base = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium');
echo "<img alt='' class='index-thumb' src='" . bfi_thumb( $base[0], $params ) . "'/>"; ?>
  </a>

/* ВОТ */


<div class="label"> <?php the_category(', ') ?> </div>



/* ВОТ */
<?php  endif; ?>
<p><?php truncate_post($gpress_word_count); ?></p>
<?php } ?> 


<div class="clear"></div>
<div class="entry-info-bottom"><em class="fa fa-folder-open-o"></em>Рубрика:  <?php the_category(', ') ?> </div>
</div><!-- end // post -->
<?php endwhile;  ?>
<?php endif; ?>
 
 
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
</div><!-- end // center -->
<?php if (get_option('gpress_sb_left') == 'Включить') { ?>
<?php get_sidebar('left'); ?>
<?php } ?>
</div><!-- end // main -->

<?php if (get_option('gpress_sb_right') == 'Включить') { ?>
<?php get_sidebar('right'); ?>
<?php } ?>
</div><!-- end // inner -->
<div class="clear"></div>
<?php get_footer(); ?>

в style.css это:

/* 4pda */
.label {
    background: #aa4eb8;
    background: rgba(170,78,184,0.85);
}
a:hover, a:focus {
    text-decoration: underline;
}
.label {
    background: #aa4eb8;
    background: rgba(170,78,184,0.85);
}
.label {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
    line-height: 26px;
    color: #fff;
    position: absolute;
    z-index: 5;
    top: 9px;
    left: -9px;
    padding: 0 24px 0 24px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
a {
    color: #0072bc;
    outline: none;
    text-decoration: none;
    cursor: pointer;
}
* {
    outline: none;
}
user agent stylesheeta:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}
Inherited from 
body {
    margin: 0;
    color: #000;
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    background: #e6e7e9;
}
/* 4 */

В итоге флажок в самом вверху, а не в самой картинке...

[Павел Чесноков]

Укажите точный адрес, где можно увидеть "флажок".

[HAbRAhabp]

Павел Чесноков: он в самом вверху (почему то), мне надо, чтобы было на картинке, как тут 4pda.ru/tag/how-to-android/?utm_source=slider1
флажок how to.

[Павел Чесноков]

Изменил ответ.

Answer 1

[Павел Чесноков]

Просто поправьте CSS. Для начала измените параметр "position":

.label {
    position: relative;
}

Но там у вас бардак в коде, правильнее сделать DIVы не так:

<div>
    <h2></h2>
    <div class="entry-info"></div>
    <img>
    <div class="label"></div>
    <p></p>
    <div class="clear"></div>
    <div class="entry-info-bottom"></div>
</div>

А както так:

<div>
    <h2></h2>
    <div class="entry-info"></div>
    <div class="image_with_label">
    	<div class="label"></div>
    	<img>
    </div>
    <p></p>
    <div class="clear"></div>
    <div class="entry-info-bottom"></div>
</div>

Comments

[HAbRAhabp]

ответил отдельным постом

Answer 2

[Марат]

типа такой?

Comments

[HAbRAhabp]

Да.

[HAbRAhabp]

ответил отдельным постом ниже

[Марат]

вам надо обернуть в тег div изображение и название категории, и добавить стиль для div position: relative, отом для категории присвоить стиль position: absolute, потом регулируете положение по оси x y.

[Марат]

htmlbook.ru/css/position

[HAbRAhabp]

Марат: спасибо за наводку, попробую

[HAbRAhabp]

сделал все, как вы сказали и получилось! А можно для каждой категории свой цвет настроить?

[Марат]

да, у каждого поста свой класс есть например вот такой category-newsbitcoin

[Марат]

.category-newsbitcoin .label a { background: red; }

Answer 3

[WordPress WooCommerce]

Изменить шаблон архива. Верстку взять с 4pda или любого другого если нравится. Изменить файл стилей.

Comments

[HAbRAhabp]

Пробовал вытащить код из их стиля, вставил себе на сайт, на миниатюре все равно ничего нет. Только если вручную в пост вставить картинку с html кодом этого флажка, но на главной странице он не отображается. Наверное надо php где то прописать?

[WordPress WooCommerce]

HAbRAhabp: да. Для этого надо изучить иерархию шаблонов wp и основы php. После этого станет понятно что и где править. Сказать однозначно что и где править не имея данных о сайте - оч сложно.

[HAbRAhabp]

ответил отдельным постом