ちんぽブログ

ちんぽではじまりちんぽでおわる

PCとスマホで「クリック/タップ」と表記を変える

クリック・タップと表記をかえたいところをspan class="cr"で囲む。
そしてjs以下

clickTap();
function clickTap(){
if($('.test').length){
var ua = navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
        // スマートフォン用コード


        // クリックの文字列をタップに。
        var txt = $('.cr').html();
        $('.cr').html(
          txt.replace(/クリック/g,'タップ')
        );
    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
        // tablet用コード

        // クリックの文字列をタップに。
        var txt = $('.cr').html();
        $('.cr').html(
          txt.replace(/クリック/g,'タップ')
        );
        
    }
}
} 

【wordpress】カスタムタクソノミーの色分けなどに使う為のclass付与

カスタム投稿のカテゴリの色分けなどに使える。それぞれのカテゴリ(タクソノミ)のスラッグをクラス名として付与できる。
single.php、archive.phpでも使える。というかおそらくどこでも使えそう。

slug; ?>">がスラッグのクラス付与
name; ?>はカテゴリ名を表示

        <?php $terms = get_the_terms($post->ID, 'works-cat'); foreach ($terms as $term) : ?>
	<div class="w_cate <?php echo $term->slug; ?>">
		
		<?php echo $term->name; ?>
		<?php endforeach; ?>
	</div>

【wordpress】ページ数が多いときのページング

これはarchive.phpに使用。ループはwp queryもquery_postも使わずデフォルトで記事ループで使えた。

①functions.phpに以下記述。

// ページネーション ページ数が多いときのページング
function pagination($pages = '', $range = 4)
{
     $showitems = ($range * 2)+1;  
 
     global $paged;
     if(empty($paged)) $paged = 1;
 
     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
         if(!$pages)
         {
             $pages = 1;
         }
     }   
 
     if(1 != $pages)
     {
         echo "<div class=\"pagination\"><span class='page-position'>Page ".$paged." of ".$pages."</span>";
         if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."' class='page-big-button'>&laquo; 最初</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."' class='page-big-button'>&lsaquo; 前へ</a>";
 
         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                 echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
             }
         }
 
         if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\" class='page-big-button'>次へ &rsaquo;</a>";
         if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."' class='page-big-button'>最後 &raquo;</a>";
         echo "</div>\n";
     }
}


②ページングを表示させたいところに以下を

<div class="page-numbers">
				<?php if (function_exists("pagination")) {
    				pagination($additional_loop->max_num_pages);
				} ?>
</div><!--page-numbers -->


③ページング用のCSS

.page-numbers ul,
.page-numbers .pagination{
  @extend .flex_box;
  margin-top: 30px;
  justify-content: center;
}



.page-numbers li,
.page-numbers span,
.page-numbers a{
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  background: #fff;
  width: 40px;
  height: 40px;
  @extend .flex_box;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-size: 1.2rem;
}

.page-numbers li:first-child,
.page-numbers span:first-child{
  border-left:1px solid #ccc;
}

.page-numbers li a,
.page-numbers.current{
  box-sizing:border-box;
  @extend .flex_box;
  height: 100%;
  // width: 100%;
  align-items: center;
  justify-content: center;
  @include transition(all 0.3s);
  margin-top:0;
}



.page-numbers span{
  margin-top: 0;
}

.page-numbers a{
  @include transition(all 0.3s);
}

.page-numbers li a:hover,
.page-numbers a:hover{
  background: #333;
  color: #fff;
}

.page-numbers span.current{
  background: #333;
  color: #fff;
}

.page-numbers a.page-big-button{
  width: 60px;
}

.page-numbers span.page-position{
   width: 100px;
   background: $yellow;
}

【参考URL】
https://coliss.com/articles/blog/wordpress/how-to-build-a-wordpress-post-pagination-without-plugin.html

WP Queryの使い方

●一覧を出力したいPHPに以下のコードを。

<?php
					$args = array(
  						// 'cat' => 3,
						'posts_per_page' => 8
					);
					$the_query = new WP_Query( $args );
					if ( $the_query->have_posts() ) :
						while ( $the_query->have_posts() ) : $the_query->the_post();
  						//ここにループするテンプレート

							get_template_part('archive_list');

						endwhile;
					endif;
					wp_reset_postdata();
?>

上のソースでarchive_list.phpを呼び出している。そのarchive_list.phpの中にループ内容をかく。

【参考URL】
http://notnil-creative.com/blog/archives/1288

http://notebook.yamamotohiroyuki.com/wordpress/2012/08/15/%E3%81%A1%E3%82%87%E3%81%84%E3%81%A1%E3%82%87%E3%81%84%E5%BF%98%E3%82%8C%E3%82%8B%E3%80%8Ewp_query%E3%80%8F%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9/