日: 2015年6月16日

スマフォ用のサイドメニュー　スライドメニューの導入方法　jquery.sidr.js

jquery.sidr.min.js

こいつを使う

※追記
class=”simple-menu” href=”#sidr”
とし
出てくるのにも
class=”simple-menu” href=”#sidr”要素を入れて
閉じる

下記だと　IDだから１こしかきかない
http://number333.org/2013/06/14/sidr/
説明

ヘッダー

<link href="/js/css/jquery.sidr.dark.css" rel="stylesheet" type="text/css">
<script src="/js/jquery.sidr.min.js"></script>

<script>
$(document).ready(function() {
  $('.simple-menu').sidr({side: 'right'});
});
</script>

こいつでくくって

 <?php if (is_mobile()) : 
 //モバイルヘッダー
 ?>

<?php endif; ?>

リンクボタン

<a class="simple-menu" href="#sidr"> 
<img src="/img/d_this/moble_menu.jpg" width="120" height="120" alt="モバイルメニュー" />
</a>

実際のコード

<div id="sidr">
  <!-- Your content -->
  <ul>
  <li><a href="/会社概要/">タマツアーバリとは</a></li>
  <li style="text-align:center">現地ツアー</li>
    <?php wp_list_categories('title_li=&depth=1&taxonomy=bali-tours-cat&hide_empty=0'); ?>
    <li style="text-align:center">オプショナルツアー</li>
    <?php wp_list_categories('title_li=&depth=1&taxonomy=bali-optional-tours-cat&hide_empty=0'); ?>
    
<li style="text-align:center">　</li>
 <li><a href="/bali-tours/世界遺産ボロブドゥールへバリから日帰ツアー/">
世界遺産ボロブドゥール</a>
</a></li>
<li>

<li>
<a href="/bali-tours/バリ島空港送迎（デンパサール国際空港）/">
空港送迎
</a>
</li>


<li>
<a href="/bali-tours/ガソリン代込のお得な車チャーター！行動自由で/">
車チャーター
</a>
</li>
<li style="text-align:center">　</li>
<li>
<a href="/bali-tours-voice/">
お客様の声
</a>
</li>



<li style="text-align:center">　</li>
<li><a href="/お問合せ/">お問合せ</a></li>
<li><a href="/会社概要/">会社概要</a></li>
<li><a href="/個人情報の取扱/">個人情報の取扱</a></li>
    
  </ul>
</div>

<script>
$(document).ready(function() {
  $('#simple-menu').sidr({side: 'right'});
});
</script>

ギャラリーにてキーワードを強化　画像altをループフィールドでaltに

smart custum fileで

ループフィールドsekou_imgz

のsekou_img_altを画像altへ分岐あり

これはさらに新築施工例orリフォームというターム名まで取得して入れる

 

タイトルにて記事内でターム名取得

<?php if ( $terms = get_the_terms($post->ID, 'built-cat') ) { echo ''; //前 <ul> foreach ( $terms as $term ) { echo '' . esc_html($term->name) . ''; //"前後ろ<li></li> } echo ''; //後ろ</ul> } ?>

ギャラリー

<div id="img_box2">
<div class="navi-image">

 <?php
$fields = SCF::get('sekou_imgz');
foreach ($fields as $field) :
?>
<?php
//ターム名
$tarm_key = $term->name;
//ページタイトル
$title_base = get_the_title();
//画像altあれば
if($field['sekou_img_alt']):
$alt = $field['sekou_img_alt'];
$title = $alt.'|'.$tarm_key.'|'.$title_base;
//画像altなければ
else:
$title = $tarm_key.'|'.$title_base;
endif;

 $attachment_id = $field['sekou_img'];
?>


<a href="#" onClick="return false;">
<?php 
$car_photo = wp_get_attachment_image($attachment_id,'gall_h500',0,array('alt'=>$title,'title'=>$title));
echo $car_photo;
?>
</a>
<?php
endforeach;
?>



</div class="navi-image">
  
  <div class="navi">
<ul>


   <?php
$fields = SCF::get('sekou_imgz');
foreach ($fields as $field) :
?>
<?php
//ターム名
$tarm_key = $term->name;
//ページタイトル
$title_base = get_the_title();
//画像altあれば
if($field['sekou_img_alt']):
$alt = $field['sekou_img_alt'];
$title = $alt.'|'.$tarm_key.'|'.$title_base;
//画像altなければ
else:
$title = $tarm_key.'|'.$title_base;
endif;
 $attachment_id = $field['sekou_img'];

?>


<li><a href="#" onClick="return false;">
<?php 
$car_photo = wp_get_attachment_image($attachment_id,'gall_s',0,array('alt'=>$title,'title'=>$title,'class'=>'navi_sam'));
echo $car_photo;
?>
</a></li>
<?php
endforeach;
?>


    </ul>
  </div class="navi">
  <div style="clear:both;"></div>
  
  


  </div id="img_box2">
<!---------------------------------------------------->