ブログ

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

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

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

Javascript

[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’});
},
});
});
});
[/javascript]

HTML

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

CSS

[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;
}
[/css]

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