webtips

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'); ?>

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

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>

WordPressでは、画像をアップロードすると、
サムネイルサイズ・中サイズ・大サイズ・フルサイズが自動的にアップされます。
サイズの変更はダッシュボード＞設定＞メディアからできます。

毎回設定から変更するのは面倒くさい、他のサイズも使いたいという時に役に立ちます。

しかも簡単です。function.phpに以下を追加するだけ。

function.php

横200px、縦125pxの画像を追加する時。
【thumb_name】は自分でわかるように入れてください。

/** 好きな画像サイズを追加する
add_image_size( 'thumb_name', 200, 125, true );

表示させるときは、

テンプレートファイル

<?php the_post_thumbnail('thumb_name'); ?>

アイキャッチ画像の出力｜WordPressの要領です。

カスタム投稿タイプ？

WordPressの「投稿」とは別に、新たに自分で、投稿タイプを増やすためのものです。

プラグインを利用してもいいのですが、プラグインに頼らず、そんなに難しくはないので、テーマをカスタマイズ。

まず、追加するカスタム投稿を以下のようにしたい時

カスタム投稿名→post
表示する投稿タイプ名→ポスト

■カテゴリタクソノミー(カテゴリー分け)
カテゴリー名→post_category
表示するカテゴリー名→ポストカテゴリー

■カテゴリタクソノミー(タグ分け)
タグ名→post_tag
表示するタグ名→ポストタグ

※カテゴリタクソノミーは必要なければ、記述しないでもOK。

function.php

/**———————————————————————————————-*/
/* カスタム投稿タイプを追加 */
add_action( 'init', 'create_post_type' );
function create_post_type() {
 register_post_type( 'post', //カスタム投稿タイプ名を指定
 array(
 'labels' => array(
 'name' => __( 'ポスト' ),
 'singular_name' => __( 'ポスト' )
 ),
 'public' => true,
 'has_archive' => true, /* アーカイブページを持つ */
 'menu_position' =>5, //管理画面のメニュー順位
 'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'custom-fields' ,'comments' ),
 )
 );

/* カテゴリタクソノミー(カテゴリー分け) */
 register_taxonomy(
 'post_category', /* タクソノミーの名前 */
 'post', /* 使用するカスタム投稿タイプ名 */
 array(
 'hierarchical' => true, /* trueだと親子関係が使用可能。falseで使用不可 */
 'update_count_callback' => '_update_post_term_count',
 'label' => 'ポストカテゴリー',
 'singular_label' => 'ポストカテゴリー',
 'public' => true,
 'show_ui' => true
 )
 );
/* カスタムタクソノミー、タグを使えるようにする */
 register_taxonomy(
 'post_tag', /* タクソノミーの名前 */
 'post', /* 使用するカスタム投稿タイプ名 */
 array(
 'hierarchical' => false,
 'update_count_callback' => '_update_post_term_count',
 'label' => 'ポストタグ',
 'singular_label' => 'ポストタグ',
 'public' => true,
 'show_ui' => true
 )
 );
}
/**———————————————————————————————-*/

管理画面のメニュー順位

function.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>Page ".$paged." of ".$pages."</span>";
 if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>&laquo; First</a>";
 if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</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)."#news' class=\"inactive\">".$i."</a>";
 }
 }

if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";
 if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last &raquo;</a>";
 echo "</div>\n";
 }
 }

テーマファイル

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

スタイルシート

下記のスタイルシートで、自由なデザインに。。。

.navigation{
 width: 100%;
 height: auto;
 float: left;
}

 .pagination {
 clear:both;
 padding:20px 0;
 position:relative;
 font-size:11px;
 line-height:13px;
 }

.pagination span, .pagination a {
 display:block;
 float:left;
 margin: 2px 2px 2px 0;
 padding:6px 9px 5px 9px;
 text-decoration:none;
 width:auto;
 color:#555555;
 background: #cccccc;
 }

.pagination a:hover{
 color: #fff;
 background-color: #555555;
 }

.pagination .current{
 padding:6px 9px 5px 9px;
 background: #555555;
 color:#fff;
 }

<?php
 $post = $wp_query->post;

if ( in_category('カテゴリーID') ) {
 /* カテゴリーID1 */
 include(TEMPLATEPATH.'/single-1.php');

}

else {
 /* それ以外 */
 include(TEMPLATEPATH.'/single-default.php');
 }
 ?>

“カテゴリーID”の投稿は[single1.php]のデザインを使用してそれ以外の投稿は、[single2.php]のデザインを使用する。
という内容。

single.phpのコードはこの記述のみ。
あとはsingle1.php、single2.phpにそれぞれ単一ページ用のコードを記述。

もっとたくさんデザインを使い分けたいとき

2つだけだはなく、もっと多くのデザインを使い分けたいときは

 <?php
 $post = $wp_query->post;

if ( in_category('カテゴリーID1') ) {
 /* カテゴリーID1 */
 include(TEMPLATEPATH.'/single-1.php');

}

elseif ( in_category('カテゴリーID2') ) {
 /* カテゴリーID2 */
 include(TEMPLATEPATH.'/single-2.php');

}

elseif ( in_category('カテゴリーID3') ) {
 /* カテゴリーID3 */
 include(TEMPLATEPATH.'/single-3.php');

}

elseif ( in_category('カテゴリーID4') ) {
 /* カテゴリーID4 */
 include(TEMPLATEPATH.'/single-4.php');

}

else {
 /* 上記に当てはまらない */
 include(TEMPLATEPATH.'/single-default.php');
 }
 ?>

<!-- ▼▼▼Newマーク▼▼▼ -->
 <?php
 $days = 7; //Newマーク表示の日数
 $daysInt = ($days-1)*86400;
 $today = time();
 $entry = get_the_time('U');
 $dayago = $today-$entry;
 if ($dayago < $daysInt) {
 $blogUrl = get_bloginfo('template_url');
 echo '<div class="new">NEW!</div>';
 }
 ?>
 <!-- ▲▲▲Newマーク▲▲▲ -->

<?php if( is_user_logged_in() ) : ?>
<!--ログイン状態-->
<?php else : ?>
<!--ログインしていないとき-->
<?php endif; ?>