韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

WordPressでブログ作り11(サイドバーを作り込む)

サイドバーのソースコードが書いてあるsidebar.phpは、「WordPressでブログ作り2(パーツテンプレートに分解)」で、home.phpから切り出して作成しましたが、まだ中身はhtmlのままなので、ここで作りこんでいきます。

1、全カテゴリー名(カテゴリーリスト)を表示する

「wp_list_categories()」というテンプレートタグがありますが、これを使うと勝手にソースコードが生成されてしまい、アイコンをaタグの中に入れることが難しかったので、今回は以下のようにしました。

<h2 class="sidemenu__title">カテゴリー</h2>
 <ul>
  <?php
   $args=array(
    'hide_empty' => 0,
   );
   $categories=get_categories($args);
   foreach($categories as $category) { 
    echo '<li><a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '><i class="fa fa-caret-right"></i>' . $category->name.' ('. $category->count .')</a></li>';
    }
 ?>
</ul>

get_categoriesは、wp_list_categoriesの中で使われている、大元の関数なんだそうです!
「Codex 関数リファレンス/get categories」の、「カテゴリーとその説明を一覧表示する」というところに、使用例が書いてあります。

‘hide_empty’ => 0,で、投稿数0件のカテゴリー名も表示します。
そして、aタグの中に<i class=”fa fa-caret-right”></i>とアイコンを入れました。$の付いている変数とHTMLや文字列などは、「.」で繋ぐんですね。

こうすることで、aタグの中にアイコンフォントなどを入れたりと、好きなソースコードにすることができます。

【参考サイト】
WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする

スポンサーリンク

2、全タグ名(タグリスト)を表示する

次に、タグリストを作ります。
タグリストは、「wp_tag_cloud()」で出力できます。
( )の中の引数には、様々なパラメータを設定でき、「&」で繋ぎます。
このブログの場合は、以下のようにしました。

<h2 class="sidemenu__title">タグ</h2>
<?php wp_tag_cloud('format=list&number=0&smallest=14&largest=14&unit=px&orderby=count');?>

一行で書けるので簡単です。
smallestやlargestの数字は、人気のないタグと、人気のあるタグのフォントサイズを指定しています。今回は全て同じフォントサイズにしたいので、両方とも14にしました。
パラメータについては、「Codex テンプレートタグ/wp tag cloud」に書いてあります。

3、人気の記事を表示する

これは、後述の参考サイトを見ながらその通りに作りました。
2ステップでプラグインなしで作れます。参考サイト様のソースコードそのままで恐縮ですが、私の備忘録としてこちらにも書かせていただきます。

まず、funtions.phpに以下を記述します。

// 人気記事出力用
function getPostViews($postID){
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
            delete_post_meta($postID, $count_key);
            add_post_meta($postID, $count_key, '0');
            return "0 View";
    }
    return $count.' Views';
}
function setPostViews($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
            $count = 0;
            delete_post_meta($postID, $count_key);
            add_post_meta($postID, $count_key, '0');
    }else{
            $count++;
            update_post_meta($postID, $count_key, $count);
    }
}
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

次に、sidebar.phpに以下を記述。(こちらはこのブログ用にカスタマイズしてあります。)

<h2 class="sidemenu__title">人気の記事</h2>
<ul>
  <?php
  // views post metaで記事のPV情報を取得する
  setPostViews(get_the_ID());
  // ループ開始
query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=3&order=DESC'); while(have_posts()) : the_post(); ?>
  <li>
    <a href="<?php echo get_permalink(); ?>" title="<?php the_title(); ?>">
    <?php if (has_post_thumbnail()):
      the_post_thumbnail( 'popular-thumbnail');
    else: ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/noimage400x200.gif" alt="">
    <?php endif; ?>
    <div class="sidemenu-popular__text"><?php the_title(); ?></div>
    </a>
  </li>
  <?php endwhile; ?>
</ul>

ここで使っているサムネイルは、「WordPressでブログ作り4(アイキャッチ画像)」に書いているとおり、functions.phpに、

add_image_size( 'popular-thumbnail', 400, 200, true );

と記述をして’popular-thumbnail’という名前の幅400px、高さ200pxのアイキャッチ画像を作ってあります。

「posts_per_page=3」の数字を変えれば、表示件数を変更できます。

【参考サイト】
『プラグインなし』で人気記事一覧を出力する方法【WordPress】

4、最近の記事を表示する

こちらも後述の参考サイトを見ながら作ったので、HTMLの構造以外はソースコードほぼ同じです。
以下のようになります。

<h2 class="sidemenu__title">最近の記事</h2>
<ul>
  <?php $posts = get_posts('numberposts=5'); foreach($posts as $post): ?>
    <li>
      <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
        <?php
        if (has_post_thumbnail()):
          $title = get_the_title();
          the_post_thumbnail('recent-thumbnail');
        else:
        ?>
          <img src="<?php echo get_template_directory_uri(); ?>/images/noimage60x60.gif" alt="">
        <?php endif; ?>
        <div class="sidemenu-recent__text">
          <?php the_title(); ?><span><?php $category = get_the_category(); echo $category[0]->cat_name; ?></span>
        </div>
      </a>
    </li>
  <?php endforeach; ?>
</ul>

ここでも、3の人気記事と同様に、使っているサムネイルは、functions.phpに、

add_image_size( 'recent-thumbnail', 60, 60, true );

と記述をして’recent-thumbnail’という名前の幅60px、高さ60pxのアイキャッチ画像を作ってあります。(「WordPressでブログ作り4(アイキャッチ画像)」を参照。)

「’numberposts=5’」の数字を変えれば、表示する記事件数を変更できます。

【参考サイト】
WordPressの表示が速くなる!プラグインなしでも設置できるアレコレ

スポンサーリンク