読者です 読者をやめる 読者になる 読者になる

色々でべろっぷ

WordPress、サーバー構築、プログラム等のメモ

WordPressのタイル状表示させる方法

WordPress

参考
http://nelog.jp/jquerymasonryWordpressの記事リストをギャラリーサイトのようにタイル状に隙間なくビッシリと表示させる方法


カスタム投稿をタイル状に一覧表示する。

jQueryライブラリのMasonryを利用して実装する。

ダウンロード先
http://masonry.desandro.com/Masonry


Masonryの呼び出し

functions.php

function init_mywp() {
…
…
	//各種スクリプト読込
	wp_enqueue_script('jquery'); //jQueryを呼び出していない場合は呼び出す。既に呼び出している場合は不要。
	//これ!
	wp_enqueue_script('masonry',get_bloginfo('stylesheet_directory') . '/js/masonry.pkgd.min.js', array(), false, true );
	//自分の作ったJSファイル
	wp_enqueue_script('miruahoweb',get_bloginfo('stylesheet_directory') . '/js/miruahoweb.js', array(), false, true );
}
add_action('init', 'init_mywp');//初期化時


Masonryで、ブロック要素を操作するためには、以下の2つの設定が必要。
・投稿リストを囲うコンテナ要素にIDをつける(classでも良いけど)
・投稿それぞれのブロック要素にclassを指定する


コンテナ要素:#tilelist
ブロック要素: .tile_part

リストを囲むコンテナ要素(#tilelist)の実装部分
front-page.php

				<?php $the_query = new WP_Query($args); ?>

				<div id="tilelist">
					<?php if($the_query->have_posts()): ?>
						<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

							<!-- /#これ! -->
							<?php get_template_part('entry-card'); ?>

						<?php endwhile; ?>

						<!-- /#これ! -->
						<div class="clearfix"></div>

					<?php endif ?>

				</div><!-- /#tilelist -->

			</div><!-- main -->


投稿のブロック要素(.tile_part)の実装部分
entry-card.php

<div class="tile_part">

	<div class="entry-thumb">
		<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
			<a href="<?php the_permalink(); ?>" class="entry-image"><?php the_post_thumbnail( 'thumb220', array('style' => 'width:220px;height:220px;') ); ?></a>
		<?php else: // サムネイルを持っていないときの処理 ?>
			<a href="<?php the_permalink(); ?>" class="entry-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/noimage.jpg" alt="NO IMAGE" title="NO IMAGE" style="width:220px;height:220px;" class="no-image list-no-image" /></a>
		<?php endif; ?>
	</div>

	<div class="entry-content">
		<h3><a href="<?php the_permalink(); ?>" class="entry-title"><?php echo get_the_title(); ?></a></h3>
		<p class="post-meta">
		<span class="post-date"><i class="fa fa-clock-o fa-fw"></i><?php the_time('Y/n/j') ;?></span>
		</p><!-- /.post-meta -->
		<p class="entry-snippet"><?php echo get_the_custom_excerpt( get_the_content(),150); //抜粋?></p>
		<p class="entry-read"><a href="<?php the_permalink(); ?>">記事を読む</a></p>
	</div>

</div>


サムネイルサイズを指定する
functions.php

function init_mywp() {
…
…
    // これ!
	add_image_size('thumb220',220,220,true);

スタイルシート
style.css

div.tile_part{
	text-align:center;
	width:233px;
	margin:10px 5px 0 5px;
	border:1px solid #ddd;
	border-radius:5px;
	float:left;
	clear:none;
}


jQueryでMasonryライブラリを呼び出すコード
miruahoweb.js

/* タイル表示 */
jQuery(function(){
	jQuery('#tilelist').masonry({ <!-- #tilelistは記事一覧を囲んでる部分 -->
		itemSelector: '.tile_part', <!--.tile_partは各記事を囲んでる部分-->
		isAnimated: true <!--アニメーションON-->
	});
});