webtips

JS

<script>
 $(function(){
 $("#acMenu dt").on("click", function() {
 $(this).next().slideToggle();
 $(this).toggleClass("active");//追加部分
 });
 });
</script>

html

<dl id="acMenu">
    <dt>アコーディオンメニュー1</dt>
    <dd>アコーディオンメニューが開く。</dd>
    <dt>アコーディオンメニュー2</dt>
    <dd>アコーディオンメニューが開く。</dd>
    <dt>アコーディオンメニュー3</dt>
    <dd>アコーディオンメニューが開く。</dd>
</dl>

CSS

#acMenu dt{
    display:block;
    width:185px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:#666 1px solid;
    cursor:pointer;
    background:url(images/i_swich.png) 177px -69px no-repeat;
    padding-right:15px;
    }
#acMenu dd{
    background:#f2f2f2;
    width:200px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:#666 1px solid;
    display:none;
    }
#acMenu dt.active{
    background:url(images/i_swich.png) 177px 18px no-repeat;
    }

li{
 display: inline-block;
}

サイドバーに特定タームの記事一覧を表示

<?php
$args = array(
'post_type' => 'タイプ名',
'taxonomy' => 'タクソノミー名',
'term' => 'ターム名',
'posts_per_page' => 10,
'numberposts' => '-1', //表示する記事数。-1 ならすべての投稿を取得。
);
$my_posts = get_posts($args);
foreach ( $my_posts as $post ) {
setup_postdata($post); ?>
<li class="icon"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php
}
?>

シンプルなターム一覧

<?php wp_list_categories(array('taxonomy' => 'タクソノミー名')); ?>

<?php wp_list_categories(array('title_li' => '', 'taxonomy' => 'タクソノミー名')); ?>

記事の件数を表示する場合

<?php wp_list_categories(array('taxonomy' => 'architect','show_count' => 1)); ?>

特定タームの一覧表示

<?php wp_list_categories(array('title_li' => '', 'taxonomy' => 'カスタム分類名')); ?>

single-***.phpで
所属するカスタム分類名（タームタイトル）を表示

カスタムタクソノミー:タームタイトル

<?php the_taxonomies( $args ); ?>

ターム名だけをリンク付きで表示

<?php echo get_the_term_list($post->ID, 'タクソノミー名'); ?>

ターム名だけをリンク無しで表示

<?php
if ($terms = get_the_terms($post->ID, 'タクソノミー名')) {
    foreach ( $terms as $term ) {
        echo '<li>' . esc_html($term->name) . '</li>';
    }
}
?>

taxonomy-***.phpで
記事が所属するカスタム分類名（タームタイトル）を表示

ターム名だけをリンク無しで表示

<?php single_tag_title(); ?>

ターム名だけをリンク無しで表示

<?php if(is_tax()) {
 $taxonomy = get_taxonomy(get_query_var('evenlist'));
 echo sprintf('%s', single_term_title('', false));
} ?>

ターム名だけをリンク付きで表示

<?php echo get_the_term_list($post->ID,'evenlist'); ?>

「padding」や「border」関係なく、横、縦幅の指定ができます。

今更ですが、これは便利。

CSS

 box-sizing: border-box;

横から出てくるサイドバーを実装でき、横からだけでなく、縦からでも出すことが出来る優れもの。
設置はもちろん、汎用性もあり便利です。

公式サイトから一式ダウンロードできます。

http://jillix.github.io/jQuery-sidebar/

公式サイトからダウンロードしたものだと、スタイルシートなど、URL読み込ませているので、
一式まとめてみました。

ダウンロード

たまにタブメニューを実装させるのですが、毎回何か簡単で扱いやすいのないかなと思ってました。

html

<!-- ▼ tab menu -->
<ul id="tab_menu">
  <li class="active">TAB1</li>
  <li>TAB2</li>
  <li>TAB3</li>
</ul>
<!-- ▲ tab menu -->

<!-- ▼ tab content -->
<div id="tab_con">
  <div class="active">TAB1 CONTENT</div>
  <div>TAB2 CONTENT</div>
  <div>TAB3 CONTENT</div>
</div>
<!-- ▲ tab content>

CSS

/* tab menu
----------------------------------- */
#tab_menu {
 list-style: none;
}

#tab_menu li {
 display: inline-block;
 padding-top: 5px;
 padding-bottom: 5px;
 padding-left: 25px;
 padding-right: 25px;
 background: #EEEEEE;
}
#tab_menu li.active {
 background: #CCCCCC;
 color: #FFFFFF;
}

#tab_menu li:hover {
 cursor: pointer;
 transition: 1.0s;
}


/* tab content
----------------------------------- */
#tab_con {
 padding: 25px;
 background-color: #CCCCCC;
}
#tab_con div {
 display: none;
}
#tab_con div.active {
 display: block;
}

jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>

<script>
$(function(){
  $('#tab_menu li').on('click', function(){
    if($(this).not('active')){
      // タブメニュー
      $(this).addClass('active').siblings('li').removeClass('active');
      // タブの中身
      var index = $('#tab_menu li').index(this);
      $('#tab_con div').eq(index).addClass('active').siblings('div').removeClass('active');
    }
  });
});
</script>

これは便利！

対応ブラウザ：IE9以降、Safari6以降、Google Chrome19以降、Firefox4以降

.3col {
  width : calc(100% / 3) ;
}

幅100%の3分の1サイズ！

念のため、ベンダープレフィックスを

li.3col {
  width : 33.33333% ; /* 未対応ブラウザ用フォールバック */
  width : -webkit-calc(100% / 3) ;
  width : calc(100% / 3) ;
}