9月 | 2013 | キジムナーの技術メモブログ

2013-0919

WordPressで、カスタム分類ごとにカスタム投稿を表示する方法

Add a Comment[Author: admin Category: カスタマイズ ]

WordPressで、カスタム分類ごとにカスタム投稿を表示する際のサンプルコード。
<?php
    $taxonomys = get_terms( "ここにtaxonomyを入力","orderby=slug&order=DESC&parent=ここに親カテゴリを指定する場合は入力");//"frontiercat"からタームを取り出す。数字が小さいものから大きいものの順に取り出す
    foreach($taxonomys as $value)://繰り返しその一つを$valueに代入
 ?>
<div id="<?php echo $value->slug; ?>" class="area">カテゴリ名：<?php echo $value->name;?>　スラッグ名：<?php echo $value->slug; ?></div>
<?php query_posts( array( 'menu-cate' => $value->slug, 'order'=>'DESC' ) ); //記事を読み込む ?>
<?php if(have_posts()):
while(have_posts()): the_post(); ?>
<h1>タイトル<?php the_title(); ?></h1>
<p>抜粋：<?php the_excerpt(); ?></p>
<p>カスタムフィールド：<?php echo post_custom('menu-price'); ?></p>
<p>本文<?php the_content(); ?></p>

<?php endwhile; endif; ?>
 </dl>

<?php endforeach; ?>

2013-0916

jQueryでプラグインなしでモーダルウィンドウを実装

Add a Comment[Author: admin Category: jQuery ]

表示するコンテンツを増やす場合にはコピー&ペーストでwd2,wd3…と任意の数にしてください。
■jQuery

$(function(){
	$('.btns').click(function(){
		wn = '.' + $(this).attr('data-tgt');
		var mW = $(wn).find('.modalBody').innerWidth() / 2;
		var mH = $(wn).find('.modalBody').innerHeight() / 2;
		$(wn).find('.modalBody').css({'margin-left':-mW,'margin-top':-mH});
		$(wn).fadeIn(500);
	});
	$('.close,.modalBK').click(function(){
		$(wn).fadeOut(500);
	});
});

■HTML

<div class="modal wd1">
	<div class="modalBody">
		<p class="close">×close</p>
		<p>…..</p>
	</div>
	<div class="modalBK"></div>
</div>

<div class="modal wd2">
	<div class="modalBody">
		<p class="close">×close</p>
		<p>…..</p>
	</div>
	<div class="modalBK"></div>
</div>
<div class="modal wd3">
	<div class="modalBody">
		<p class="close">×close</p>
		<p>…..</p>
	</div>
	<div class="modalBK"></div>
</div>
<p data-tgt="wd1" class="btns">1</p>
<p data-tgt="wd2" class="btns">2</p>
<p data-tgt="wd3" class="btns">3</p>

■css

.modal{display:none;}
.modalBody{position: fixed; z-index:1000; background: #000; width:690px; left:50%; top:50%; height: 400px}
.modalBK{position: fixed; z-index:999; height:100%; width:100%;background:#000; opacity: 0.9;filter: alpha(opacity=90);-moz-opacity:0.90;}
.btns{font-size: 80px; width:150px; background:#111; height: 150px; line-height:150px; text-align:center; font-family: arial; color: #fff; float: left; margin:10px; cursor: pointer}
.close{cursor: pointer;}
.modal{width:690px; color: #eee;}
.modal p{font-size:12px; text-align:justify;}
.modal h1{font-weight:bold; font-size: 30px;}
.modalBody{padding: 10px;}

引用：http://zxcvbnmnbvcxz.com/jquery-easy-modalwindow/

2013-0912