カテゴリー: コーディング

/**
 * 投稿画面でカテゴリーチェックボックスの階層を維持
 *
 */
function solecolor_wp_terms_checklist_args( $args, $post_id ){
   if ( $args['checked_ontop'] !== false ){
        $args['checked_ontop'] = false;
   }
   return $args;
}
add_filter('wp_terms_checklist_args', 'solecolor_wp_terms_checklist_args',10,2);

画像の一覧を表示するときなどに、画像サイズが統一されていないが為に、
コーディングに苦労した経験はおありではないでしょうか。

今回は、そんなときに便利なCSSプロパティをご紹介します。

その名も「object-fit」

こやつ、画像の縦横比を維持しつつ、トリミングしてくれるすげえ奴です。

たとえば、こんな画像があったとします。

縦長と横長の画像を正方形でトリミングするには、

img.sample {
  width: 250px;
  height: 250px;
  object-fit: cover;
}

こうなります。すごい！便利！

で、サポートブラウザですが、いつも通り「Can I Use」を見てみると…

例によってIE系は全滅です。残念でしかない…。

IEの対応策や、詳細については下記のページで解説されています。

参考：http://www.webcreatorbox.com/tech/object-fit/

ベンダープレフィックスとは何か

ベンダープレフィックス（接頭辞）とは、cssのプロパティの頭に付ける識別子のことで、
ブラウザごとに記述が決まっています。

-ms-　・・・・・・　Internet Explorer
-webkit-　・・・・・・　Google Chrome、Safari
-moz-　・・・・・・　Firefox
-o-　・・・・・・　Opera

なぜこういった記述が必要かと言うと、草案段階のcssプロパティを、
先行して実装、ブラウザ上に動作させる、という効果があります。

例えばこんな風に書きます。

.foo {
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

ですが、何でもかんでも付ければ良いというものではありません。
プロパティごとに必要最低限のプレフィックスだけ付けることが推奨されます。

また、草案から正式に勧告されたプロパティについては、プレフィックスを外すべきです。
ですが、そういった現状に気づかずに、正しいプレフィックスが付けられていない事が多々あります。

最新のプレフィックス事情については、下記のサイトで分かりやすくまとめられています。

参考：http://qiita.com/sdn_tome/items/42197e443134478befaf

Opera用のプレフィックスが今では意味をなさないものになっているというのは知りませんでした。

精度の高いコーディングをするためには、こういった最新の動向は常にチェックする必要がありますね。

jqueryを使ってclass付与と同時にアンカー要素にスムーススクロールを実装します。
最初、class付与の処理にreturn false;を書いていたので、処理が通らずスムーススクロールが実行されませんでした。
こういったイベントのバブリング（伝播）について簡単にまとめると、

・クリックなどのイベントは、子要素から親要素へと伝播される（バブリング）
・preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。
・return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルする。

引用元：http://www.tam-tam.co.jp/tipsnote/javascript/post5050.html

$(function(){
   $('#sample li a').click(function() {
      // アンカーの値取得
	  var id = $(this).attr("href");
 			if($('#sample1').hasClass('on') == false && $('#sample2).hasClass('on') == false && $('#sample3').hasClass('on') == false){
			 $(id).addClass('on');
			} else{
				$('#about section').removeClass('on');
				$(id).addClass('on');
			}
           //return false; 後の処理が通らなくなるので不要
    });

   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});

カスタムタクソノミーのターム情報を色々な形で取得、出力して「パンくずリスト」を作ってみましょう。

「get_ancestors」

祖先オブジェクトのIDを配列で返します。

関数リファレンス/get ancestors

//投稿についているタームのidを取得
$terms = wp_get_object_terms( $post->ID, 'my_taxonomy');
$term_id = $terms[0]->term_id;
 
//以下はターム一覧ページの場合と同じ
$$ancestors = get_ancestors( $term_id, 'my_taxonomy' );
 
$reversed_ancestors = array_reverse($ancestors); 
 
foreach($reversed_ancestors as $ancestor){
  echo get_term($ancestor)->name;
  echo get_term($ancestor)->slug;
  echo get_term_link($ancestor);
}

「get_the_terms」

投稿に割り当てられたタクソノミーのターム（カスタム分類の項目）を取得する。

関数リファレンス/get the terms

<ul class="pankuzu">
  <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップページ</a></li>         
<?php
  $terms = array_reverse(get_the_terms($post->ID,'タクソノミー名'));
  foreach( $terms as $term ) {
    echo '<li><a href="/document/タクソノミー名/'.$term->slug.'">'.$term->name.'</a><li>' ;
  }
?>
</ul>

「walk_category_tree」

タームの親子関係を保持した上で表示する。

引用：http://pimpmysite.net/archives/696

<ul class="breadcrumb">
<li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップページ</a></li>
<?php
  $terms = get_the_terms($post->ID,'タクソノミー名');
  if ( $terms && ! is_wp_error( $terms ) ) {
    echo walk_category_tree( $terms, 0 , array(
    'use_desc_for_title' => false,
    'style' => 'list',
    ));
  }
?>
</ul>