Сам искал подобное решение. Пока решил как - установил Visual Composer , там есть Nivo Slider - получилось что нужно.
Давайте посмотрим что тут нового есть для решения ваших задач:
Что-то этот вопрос уже звучит иначе: вы просите галерею, а автор топика - слайдер постов. То что вы хотите реализуется через обычную галерею WP + довесок в jQuery. Но подойдет и Slider Pro, Для просмотра ссылки Войди
Смотрите выше мой ответ на вопрос топикстартера
это называется lightbox или thickbox, выберите на Для просмотра ссылки Войди
<div id="news" class="row">
<div class="tabs">
<div class="col-xs-8">
<div class="row">
<div class="tabs-img">
<?php $i = 1; ?>
<?php query_posts('cat=1&showposts=5'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if($i == 1){ ?>
<div class="tabs__content active">
<a href="<?php the_permalink(); ?>" class="active">
<div class="thumb-title"><?php the_title(); ?></div>
<?php
// получение миниматюры записи в чистом виде (для адаптации ширины)
if ( function_exists('has_post_thumbnail') && has_post_thumbnail($post->ID) ) {
$thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail_object = get_post($thumbnail_id);
?>
<a href="<?php the_permalink() ?>" alt="<?php the_title_attribute(); ?>">
<?php
echo '<img src="' . $thumbnail_object->guid . '">';
echo '</a>';
}
else
{
?>
<a href="<?php the_permalink() ?>" alt="<?php the_title_attribute(); ?>">
<?php
echo '<img src="' . get_template_directory_uri() . '/images/blank.png">';
echo '</a>';
}
?>
</a>
</div>
<?php } elseif($i == 2 || $i == 3 || $i == 4 || $i == 5) { ?>
<div class="tabs__content">
<a href="<?php the_permalink(); ?>">
<div class="thumb-title"><?php the_title(); ?></div>
<?php
// получение миниматюры записи в чистом виде (для адаптации ширины)
if ( function_exists('has_post_thumbnail') && has_post_thumbnail($post->ID) ) {
$thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail_object = get_post($thumbnail_id);
?>
<a href="<?php the_permalink() ?>" alt="<?php the_title_attribute(); ?>">
<?php
echo '<img src="' . $thumbnail_object->guid . '">';
echo '</a>';
}
else
{
?>
<a href="<?php the_permalink() ?>" alt="<?php the_title_attribute(); ?>">
<?php
echo '<img src="' . get_template_directory_uri() . '/images/blank.png">';
echo '</a>';
}
?>
</a>
</div>
<?php } ?>
<?php $i++; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</div><!-- end of .tabs-img //-->
</div>
</div>
<div class="col-xs-4">
<h2>Новости</h2>
<div class="tabs-ul">
<ul class="tabs__caption">
<?php $i = 1; ?>
<?php query_posts('cat=1&showposts=5'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if($i == 1){ ?>
<div class="tabs-title active">
<em><?php the_time(__('jS F Y')) ?></em>
<p <?php post_class() ?> id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></p>
</div>
<?php } elseif($i == 2 || $i == 3 || $i == 4 || $i == 5) { ?>
<div class="tabs-title">
<em><?php the_time(__('jS F Y')) ?></em>
<p <?php post_class() ?> id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></p>
</div>
<?php } ?>
<?php $i++; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ul>
</div><!-- end of .tabs-ul //-->
</div>
</div>
</div><!-- end of #news //-->
<style type="text/css">
.tabs__content
{
display: none;
height: 500px;
overflow: hidden;
position: relative;
z-index: 10;
}
.tabs__content.active
{
display: block;
}
ul.tabs__caption
{
padding: 0;
}
.tabs-title
{
padding: 10px 20px;
}
.tabs-title.active
{
background: #E2E2E2;
}
.tabs__content img
{
width: 100%;
}
.thumb-title
{
position: absolute;
bottom: 40px;
left: 40px;
width: 600px;
margin: 0;
padding: 0;
}
</style>
<script>
(function($) {
$(function() {
$('ul.tabs__caption').on('mouseover', 'div:not(.active)', function() {
$(this).addClass('active').siblings().
removeClass('active').closest('div.tabs').
find('div.tabs__content').removeClass('active').addClass('active').
//removeClass('active').
hide().
eq(
$(this).index()
).fadeIn("slow");////.addClass('active');//.fadeIn("slow");
});
});
})(jQuery);
</script>
Напиши название макета, я попробую его достать.