ブログ

最近、Wordpressでスマートフォン向けサイトを制作させていただく機会がありました。
要望がカテゴリーとタグの一覧をページ遷移せずに表示したいとのことでしたので、jqueryを使ってポップアップ表示させることにしました。

この手の要望は結構ありますので、自身がコピペで使えるようにエントリーw

導入・カスタマイズが簡単なjqueryコード、プラグインを探した結果、superChemicalさんの「jQuery 簡単にモーダルウィンドウを実装する方法 (プラグイン不要)」の記事を参考にすることに。
というよりもほぼコピペですが。。

Javascript

$(function(){
    $('.tag_cat_btn').click(function(){
        var wn = '.' + $(this).attr('alt');
        var mW = $(wn).find('.modalBody').innerWidth() / 2;
        var mH = $(wn).find('.modalBody').innerHeight() / 2;
        $(wn).css({'display':'block'});
        $(wn).animate({'opacity':'1'},'fast')
    });
    $('.close,.modalBK').click(function(){
        $('.modal').animate({opacity:0,},
            {duration:'fast',complete:
            function() {
                $('.modal').css({'display':'none'});
            },
        });
    });
});

HTML

<!-- ボタン -->
<div class="tag_cat">
	<ul class="clearfix">
		<li alt="wd1" class="tag_cat_btn"><span>カテゴリー一覧</span></li>
		<li alt="wd2" class="tag_cat_btn"><span>タグ一覧</span></li>
	</ul>
</div>


<!-- カテゴリー一覧 -->
<div class="modal wd1">
	<div class="modalBody">
		<p class="close">閉じる</p>
		<ul class="clearfix">
			<?php wp_list_categories('depth=1&title_li='); ?>
		</ul>
	</div>
	<div class="modalBK"></div>
</div>

<!-- タグ一覧 -->
<div class="modal wd2">
	<div class="modalBody">
		<p class="close">閉じる</p>
		<ul class="clearfix">
			<?php
				$tag_all = get_terms("post_tag", "fields=all&orderby=count&order=DESC");
				foreach($tag_all as $value):
			?>
			<li><a href="<?php echo get_tag_link($value->term_id); ?>"><?php echo $value->name;?></a></li>
			<?php endforeach; ?>
		</ul>
	</div>
	<div class="modalBK"></div>
</div>

※superChemicalさんのサイトにもあるとおり、ポップアップの要素を増やしたい場合は、divタグのClass名「wd1」をユニークな数にしてください。（wd2,wd3など）

CSS

.tag_cat {
	text-align: center;
	background-color: #000;
}
.tag_cat ul li{
	list-style-type: none;
	float:left;
	width:50%;
	background: #888; /* Old browsers */
	background: -moz-linear-gradient(top,  #888 0%, #444 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888), color-stop(100%,#444)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #888 0%,#444 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #888 0%,#444 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #888 0%,#444 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #888 0%,#444 100%); /* W3C */
	vertical-align: middle;
}
.tag_cat ul li span{
	display: block;
	color:#fff;
	padding: 5px 3px;
	text-align: center;
	line-height: 120%;
	border: solid 1px #444;
	height: 1.2em;
	font-size: 14px;
	vertical-align: middle;
}
.modal{opacity: 0; display:none;}
.modalBody{position:fixed ; z-index:1000; background: #000; width:90%;padding:2% 4%; left:1%;top:1%; height: auto;opacity: 0.9;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
}
.modal p{
	padding:0 0 3px;
	text-align: right;
	color:#fff;
	font-size: 12px;
}
.modal ul li{
	width:50%;
	float: left;
}
.modal ul li a{
	display: block;
	padding:3px 0;
	font-size: 12px;
}

これからは、これをベースにカスタマイズすれば楽ちん！