Skip to content

Commit 9fc58ea

Browse files
Macc-PMacc-P
committed
曲一覧ページのリニューアル
1 parent 164215d commit 9fc58ea

File tree

1 file changed

+141
-0
lines changed

1 file changed

+141
-0
lines changed

‎theme/parts/sitemap/musiclist.php

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<div class="alert alert-info" role="alert">
2+
<a href="./jacket">ジャケット付きの曲一覧</a>もあります。<br>
3+
ただし、キャッシュがない状態で閲覧すると30MB以上のダウンロードが行われます。<br>
4+
情報量が多くグリッド表示する関係もありPC推奨です。
5+
</div>
6+
7+
<!-- JQuery読み込み -->
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
9+
<!-- SortのJSとCSS -->
10+
<script src="<?php echo get_stylesheet_directory_uri(); ?>/resources/sort.js" type="text/javascript"></script>
11+
12+
<script type="text/javascript">
13+
14+
// 絞り込み検索
15+
16+
$(function() {
17+
var $searchInput = $('#textarea'); // 入力エリア
18+
var $searchElem = $('.item'); // 絞り込む要素
19+
var excludedClass = 'is-hide'; // 絞り込み対象外の要素に付与するclass
20+
21+
// 絞り込み処理
22+
function extraction() {
23+
var keywordArr = $searchInput.val().toLowerCase().replace('　', ' ').split(' '); // 入力文字列を配列に格納
24+
$searchElem.removeClass(excludedClass).show();// 現在非表示にしているリストを表示する
25+
for (var i = 0; i < keywordArr.length; i++) {
26+
for (var j = 0; j < $searchElem.length; j++) {
27+
var thisString = $searchElem.eq(j).text().toLowerCase();
28+
if(thisString.indexOf(keywordArr[i]) == -1) { // 入力文字列と一致する文字列がない場合
29+
$searchElem.eq(j).addClass(excludedClass); // 絞り込み対象外のclass付与
30+
}
31+
}
32+
}
33+
$('.' + excludedClass).hide(); // 絞り込み対象外の要素の非表示
34+
}
35+
36+
$searchInput.on('load keyup blur', function() {
37+
extraction();
38+
});
39+
<?php
40+
if(isset($_GET['word'])){
41+
echo 'document.getElementById( "textarea" ).value = "'.$_GET['word'].'" ;';
42+
echo 'extraction();';
43+
}
44+
?>
45+
});
46+
</script>
47+
<style>
48+
.is-hide {
49+
display: none;
50+
}
51+
.music_cg{
52+
border-color: var(--cg);
53+
}
54+
.music_ml{
55+
border-color: var(--ml);
56+
}
57+
.music_shiny{
58+
border-color: var(--sc);
59+
}
60+
.music_as{
61+
border-color: var(--as);
62+
}
63+
.music_sidem{
64+
border-color: var(--sidem);
65+
}
66+
.music_godo{
67+
border-color: gray;
68+
}
69+
.music_cover{
70+
border-color: purple;
71+
}
72+
.music_remix{
73+
border-color: mistyrose;
74+
}
75+
.item{
76+
border-width: 0 0 3px 5px !important;
77+
padding: 0.2em 0.5em 0em !important;
78+
}
79+
80+
</style>
81+
<form>
82+
<div class="container">
83+
<div class="search-box row">
84+
<div class="custom-control custom-checkbox col-xs-6 col-md-3">
85+
<input type="checkbox" class="custom-control-input" name="musictype" value="music_cg" id="checkcg">
86+
<label class="custom-control-label" for="checkcg">シンデレラガールズ曲</label>
87+
</div>
88+
<div class="custom-control custom-checkbox col-xs-6 col-md-3">
89+
<input type="checkbox" class="custom-control-input" name="musictype" value="music_ml" id="checkml">
90+
<label class="custom-control-label" for="checkml">ミリオンライブ！曲</label>
91+
</div>
92+
<div class="custom-control custom-checkbox col-xs-6 col-md-3">
93+
<input type="checkbox" class="custom-control-input" name="musictype" value="music_shiny" id="checksc">
94+
<label class="custom-control-label" for="checksc">シャイニーカラーズ曲</label>
95+
</div>
96+
<div class="custom-control custom-checkbox col-xs-6 col-md-3">
97+
<input type="checkbox" class="custom-control-input" name="musictype" value="music_as" id="checkas">
98+
<label class="custom-control-label" for="checkas">765AS曲</label>
99+
</div>
100+
<div class="custom-control custom-checkbox col-xs-6 col-md-3">
101+
<input type="checkbox" class="custom-control-input" name="musictype" value="music_sidem" id="checkm">
102+
<label class="custom-control-label" for="checkm">SideM曲</label>
103+
</div>
104+
<div class="custom-control custom-checkbox col-xs-6 col-md-3">
105+
<input type="checkbox" class="custom-control-input" name="musictype" value="music_godo" id="checkjo">
106+
<label class="custom-control-label" for="checkjo">合同曲</label>
107+
</div>
108+
<div class="custom-control custom-checkbox col-xs-6 col-md-3">
109+
<input type="checkbox" class="custom-control-input" name="musictype" value="music_cover" id="checkco">
110+
<label class="custom-control-label" for="checkco">カバー曲</label>
111+
</div>
112+
<div class="custom-control custom-checkbox col-xs-6 col-md-3">
113+
<input type="checkbox" class="custom-control-input" name="musictype" value="music_remix" id="checkrm">
114+
<label class="custom-control-label" for="checkrm">リミックス曲</label>
115+
</div>
116+
</div>
117+
</div>
118+
</form>
119+
120+
<input type="text" id="textarea" placeholder="曲名で絞り込みできます。" />
121+
122+
<div class="musiclist list">
123+
<ul class="listwrap list-group list-group-flush">
124+
<?php
125+
$paged = (int) get_query_var('paged');
126+
$args = array(
127+
'posts_per_page' => -1,
128+
'paged' => $paged,
129+
'orderby' => 'post_date',
130+
'order' => 'DESC',
131+
'post_type' => allsongtype(),
132+
'post_status' => 'publish'
133+
);
134+
$the_query = new WP_Query($args);
135+
if ( $the_query->have_posts() ) :
136+
while ( $the_query->have_posts() ) : $the_query->the_post();
137+
?>
138+
<li class="list-group-item list_item item <?php echo get_post_type( $id ); ?>" data-musictype="<?php echo get_post_type( $id ); ?>"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
139+
<?php endwhile; endif; ?>
140+
</ul>
141+
</div>

0 commit comments

Comments
 (0)