В верстке есть страница галереи оформленная на сетке masonry. Как ее прикрутить к вордпрессу, чтоб картинки и подписи к ним выводились с админ-панели?

Question

[Виталий]

HTML:

<?php 
/*
Template Name: gallery
*/
?>

<?php get_header(); ?>	

	<div class="container content">
		<h1>Галерея</h1>
		<div class="gallery_container">
			<div class="gallery_item">
				<div class="transparency">
				<?php <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
				        здесь картинка
				<?php endwhile; ?>
			
				<?php else: ?>
				
				<?php endif; ?> ?>

				</div>
				<div class="gallery_item_desc">
					<p>Здесь подпись к фотке</p>
				</div>
			</div>
					<?php endwhile; ?>
					
					<?php else: ?>
					
					<?php endif; ?>
		</div>
	</div>
<?php get_footer(); ?>

СSS:
.gallery_item {
border: 1px solid #fff;
margin-bottom: 10px;
position: relative;
}
.gallery_item_desc {
max-height: 0;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
background-color: gray;
width: 100%;
text-align: center;
}
.gallery_item_desc p {
margin: 0!important;
padding: 10px 0;
}
.gallery_item:hover .gallery_item_desc {
max-height: 300px;
transition: max-height 1s;
}
.gallery_item:hover .transparency {
opacity: 0.5;
transition: opacity 0.3s;
}
javascript:
$(document).ready(function() {
// masonry
$('.gallery_container').masonry({
itemSelector: '.gallery_item',
columnWidth: 300,
gutter: 10
});

});
functions.php:

<?php
add_action( 'init', 'galler' );
function galler() {
	register_post_type('galler', array(
		'public' => true,
		'supports' => array('title','thumbnail','editor'),
		'labels' => array(
			'name' => 'Вставка фото в галерею',
			'all_items' => 'Всі фото',
			'add_new' => 'Додати фото',
			
			),
		));
}
?>

.gallery_container - обертка для сетки;
.gallery_item - блоки картинок;
.gallery_item_desc - блок подписи к картинке, который открывается при наведении на фотку.
Картинка и описание к ней должно выводится с админки вордпресса.

Answer 1

[Денис Янчевский]

В WordPress есть стандартный шорткод галереи [gallery], который вывод картинки и описание к ним.
Вы можете переопределить его вывод с помощью фильтра

add_filter('post_gallery', 'my_post_gallery', 10, 3);

Исходный код шорткода можно посмотреть в /wp-includes/media.php.

Comments

[Виталий]

то есть, я смогу сохранить html-разметку и js-код плагина масонри, и циклом выводить картинки?

[Денис Янчевский]

Виталий: Да. В исходном коде шорткода можно посмотреть как это делается в стандартном варианте и на основе него написать свой.

Answer 2

[Саша Улыч]

Можно использовать плагин Custom fields, создать доп. поля и выводить их в нужно месте