部長ナビのページはApple製品のレビューを中心としたブログです。ドラマ仕立ての長期連載も見てね!

Simplicityで「主要カテゴリ最新記事」をトップページ上部に表示する方法

こんにちは。部長ナビ(@nabi_1080)です

今日も、ちゃぼPプロデュースのSimplicityカスタマイズコードを紹介します!

どうしてもやりたかった、gori.me風「主要カテゴリ最新記事一覧」

gori.meでは、主要カテゴリの最新記事が一番上に表示されています。コレをやりたかったのですが、やり方がわからず悶々としておりました。

そこで、ちゃぼPに聞いてみたところ、サクッとコードが送られてきました

でも、かなりカスタマイズすることになるので、自己責任でよろしくお願いします

list01

こんな感じになります。Simplicity用なので、右のサイドメニューの幅を考えて、この幅の3列×2段の6カテゴリの主要記事表示ができることになります!

まず、「list.php」をForkLiftで子テーマにコピーする

list.phpをムチャクチャ追記するので、親テーマでは無く、子テーマに移動(コピー)します

こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております! さて、Simplicityのカスタマイズについては、色々な記事を書い

やり方はこちらの記事をどうぞ!

とにかく、「list.php」を子テーマに移動してくれ!

次に、子テーマを追記

<?php
////////////////////////////
//タグ説明文の挿入
////////////////////////////
if (is_tag() && //タグページの時
          !is_paged() &&   //タグページのトップの時
          tag_description()) : //タグの説明文が空でない時 ?>
<!-- カテゴリの説明文 -->
<div class="category-description tag-description"><?php echo tag_description(); ?></div>
<?php endif; ?>

↑この下に挿入します!

挿入するコードは以下の通り

<?php if (!is_mobile()) :?>
<!-- 新着カテゴリgorime風1段目左 -->
<div class="top_article1">
 
<?php
    $cat = 'iphoneapp';
    $num = '1';
    global $post;
    $term_id = get_category_by_slug($cat)->term_id;
    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
              if ($myposts) {
                            foreach($myposts as $post):
                            setup_postdata($post);
?>
                                          <a class="anchor" href="/page-40000">iPhone</a>
                                          <a class="thumbnail" href="<?php the_permalink() ?>">
                                          <div class="top_article_thumb1">
                                                        <?php if(has_post_thumbnail()){ ?>
                                                                      <?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
                                                        <?php }else{ ?>
                                                         <i class="ico-camera-alt"></i>
                                                        <?php } ?>
                                                        <span class="top_text_area1"><?php the_title(); ?></span>
                                                        <span class="up-date1"><?php the_time('Y/m/d') ?></span>
                                          </div>
                                          </a>
<?php
                            endforeach;
?>
              <?php }else{ ?>
                  <p>記事がありません</p>
              <?php } ?>
</div>
 
<!-- 新着カテゴリgorime風1段目中央 -->
<div class="top_article2">
 
<?php
    $cat = 'ipad-tips';
    $num = '1';
    global $post;
    $term_id = get_category_by_slug($cat)->term_id;
    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
              if ($myposts) {
                            foreach($myposts as $post):
                            setup_postdata($post);
?>
                                          <a class="anchor" href="/page-40001">iPad</a>
                                          <a class="thumbnail" href="<?php the_permalink() ?>">
                                          <div class="top_article_thumb1">
                                                        <?php if(has_post_thumbnail()){ ?>
                                                                      <?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
                                                        <?php }else{ ?>
                                                         <i class="ico-camera-alt"></i>
                                                        <?php } ?>
                                                        <span class="top_text_area1"><?php the_title(); ?></span>
                                                        <span class="up-date1"><?php the_time('Y/m/d') ?></span>
                                          </div>
                                          </a>
<?php
                            endforeach;
?>
              <?php }else{ ?>
                  <p>記事がありません</p>
              <?php } ?>
</div>
 
<!-- 新着カテゴリgorime風1段目右 -->
<div class="top_article3">
 
<?php
    $cat = 'macaccessory';
    $num = '1';
    global $post;
    $term_id = get_category_by_slug($cat)->term_id;
    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
              if ($myposts) {
                            foreach($myposts as $post):
                            setup_postdata($post);
?>
                                          <a class="anchor" href="/page-40002">Mac</a>
                                          <a class="thumbnail" href="<?php the_permalink() ?>">
                                          <div class="top_article_thumb1">
                                                        <?php if(has_post_thumbnail()){ ?>
                                                                      <?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
                                                        <?php }else{ ?>
                                                         <i class="ico-camera-alt"></i>
                                                        <?php } ?>
                                                        <span class="top_text_area1"><?php the_title(); ?></span>
                                                        <span class="up-date1"><?php the_time('Y/m/d') ?></span>
                                          </div>
                                          </a>
<?php
                            endforeach;
?>
              <?php }else{ ?>
                  <p>記事がありません</p>
              <?php } ?>
</div>
 
<!-- 新着カテゴリgorime風2段目左 -->
<div class="top_article1">
 
<?php
    $cat = 'solco';
    $num = '1';
    global $post;
    $term_id = get_category_by_slug($cat)->term_id;
    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
              if ($myposts) {
                            foreach($myposts as $post):
                            setup_postdata($post);
?>
                                          <a class="anchor" href="/review/sample">サンプル提供レビュー</a>
                                          <a class="thumbnail" href="<?php the_permalink() ?>">
                                          <div class="top_article_thumb1">
                                                        <?php if(has_post_thumbnail()){ ?>
                                                                      <?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
                                                        <?php }else{ ?>
                                                         <i class="ico-camera-alt"></i>
                                                        <?php } ?>
                                                        <span class="top_text_area1"><?php the_title(); ?></span>
                                                        <span class="up-date1"><?php the_time('Y/m/d') ?></span>
                                          </div>
                                          </a>
<?php
                            endforeach;
?>
              <?php }else{ ?>
                  <p>記事がありません</p>
              <?php } ?>
</div>
 
<!-- 新着カテゴリgorime風2段目中央 -->
<div class="top_article2">
 
<?php
    $cat = 'photopr';
    $num = '1';
    global $post;
    $term_id = get_category_by_slug($cat)->term_id;
    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
              if ($myposts) {
                            foreach($myposts as $post):
                            setup_postdata($post);
?>
                                          <a class="anchor" href="/page-43195">カメラ</a>
                                          <a class="thumbnail" href="<?php the_permalink() ?>">
                                          <div class="top_article_thumb1">
                                                        <?php if(has_post_thumbnail()){ ?>
                                                                      <?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
                                                        <?php }else{ ?>
                                                         <i class="ico-camera-alt"></i>
                                                        <?php } ?>
                                                        <span class="top_text_area1"><?php the_title(); ?></span>
                                                        <span class="up-date1"><?php the_time('Y/m/d') ?></span>
                                          </div>
                                          </a>
<?php
                            endforeach;
?>
              <?php }else{ ?>
                  <p>記事がありません</p>
              <?php } ?>
</div>
 
<!-- 新着カテゴリgorime風2段目右 -->
<div class="top_article3">
 
<?php
    $cat = 'recommend';
    $num = '1';
    global $post;
    $term_id = get_category_by_slug($cat)->term_id;
    $myposts = get_posts('numberposts=' .$num. '&category_name=' .$cat);
              if ($myposts) {
                            foreach($myposts as $post):
                            setup_postdata($post);
?>
                                          <a class="anchor" href="/page-39708">通常商品レビュー</a>
                                          <a class="thumbnail" href="<?php the_permalink() ?>">
                                          <div class="top_article_thumb1">
                                                        <?php if(has_post_thumbnail()){ ?>
                                                                      <?php $title= get_the_title(); the_post_thumbnail(array(720, 480), array( 'alt' =>$title, 'title' => $title)); ?>
                                                        <?php }else{ ?>
                                                         <i class="ico-camera-alt"></i>
                                                        <?php } ?>
                                                        <span class="top_text_area1"><?php the_title(); ?></span>
                                                        <span class="up-date1"><?php the_time('Y/m/d') ?></span>
                                          </div>
                                          </a>
<?php
                            endforeach;
?>
              <?php }else{ ?>
                  <p>記事がありません</p>
              <?php } ?>
</div>
<?php endif; ?>

list02

「$cat」の部分には、表示させたい記事が属するカテゴリのURLを記入します。この記述では「Macアクセサリ」のカテゴリの最新記事が表示されるので、例えば「Macアプリ」を更新しても表示されないことになるので、その際は、ここの記述を変えることになります

下の方にあるのは、Mac関連の最新記事は「Mac」とボックスの上にありますが、そこをクリックしたときに表示されるページも指定できます。私は、Macをクリックすると、Macのまとめページに飛ぶようにしています。

さらに、style.cssを追記!

子テーマのstyle.cssを追記しますが、以下の通りやると、ウチと同じ表記になります

/* 最新の記事
--------------------------------------------------------- */
.top_article1 {
margin:0 5px 20px 0px;
float: left;
width: 32%;
}
 
.top_article2 {
margin:0 8px 20px 8px;
float: left;
width: 32%;
}
 
.top_article3 {
margin:0 0px 20px 5px;
float: left;
width: 32%;
}
 
.top_article_thumb1 {
width: 100%;
overflow: hidden;
position: relative;
}
 
.top_article1 .anchor {
  padding: 3px 5px;
  display: block;
  color: #fff;
  background: #333;
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  *zoom: 1;
  text-align: center;
}
 
.top_article1 .anchor:hover, .top_article1 .anchor:active {
  text-decoration: underline;
}
 
.top_article1 .anchor span {
  float: right;
  font-size: 9px;
  background: #fff;
  color: #333;
  padding: 5px 3px;
}
 
.top_article1 .thumbnail {
  display: block;
  color: #333;
  background: #fff;
  text-decoration: none;
  line-height: 1.5;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  *zoom: 1;
}
 
.top_article1 .thumbnail img {
  width: 220px;
  height: 150px;
  display: block;
}
 
.top_article1 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}
 
.top_article1 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
 
.top_article1 .thumbnail .title {
  padding: 3px;
  height: 70px;
}
 
.top_article2 .anchor {
  padding: 3px 5px;
  display: block;
  color: #fff;
  background: #333;
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  *zoom: 1;
  text-align: center;
}
 
.top_article2 .anchor:hover, .top_article2 .anchor:active {
  text-decoration: underline;
}
 
.top_article2 .anchor span {
  float: right;
  font-size: 9px;
  background: #fff;
  color: #333;
  padding: 5px 3px;
}
 
.top_article2 .thumbnail {
  display: block;
  color: #333;
  background: #fff;
  text-decoration: none;
  line-height: 1.5;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  *zoom: 1;
}
 
.top_article2 .thumbnail img {
  width: 220px;
  height: 150px;
  display: block;
}
 
.top_article2 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}
 
.top_article2 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
 
.top_article2 .thumbnail .title {
  padding: 3px;
  height: 70px;
}
 
.top_article3 .anchor {
  padding: 3px 5px;
  display: block;
  color: #fff;
  background: #333;
  font-size: 16px;
  text-decoration: none;
  overflow: hidden;
  *zoom: 1;
  text-align: center;
}
 
.top_article3 .anchor:hover, .top_article3 .anchor:active {
  text-decoration: underline;
}
 
.top_article3 .anchor span {
  float: right;
  font-size: 9px;
  background: #fff;
  color: #333;
  padding: 5px 3px;
}
 
.top_article3 .thumbnail {
  display: block;
  color: #333;
  background: #fff;
  text-decoration: none;
  line-height: 1.5;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  *zoom: 1;
}
 
.top_article3 .thumbnail img {
  width: 220px;
  height: 150px;
  display: block;
}
 
.top_article3 .thumbnail:hover {
  color: #e22f26;
  background: #ffffea;
}
 
.top_article3 .thumbnail:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
 
.top_article3 .thumbnail .title {
  padding: 3px;
  height: 70px;
}

.top_text_area1 {
  padding: 4px 4px 0;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  color: #fff;
  font-weight: bold;
  overflow: hidden;
  height: 80px;
  line-height: 20px;
  font-size: 15px;
  text-decoration: none;
  background: rgba(3,3,3,0.6);
  background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(2,2,2,1.0)));
  background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(2,2,2,1.0));
  text-shadow: 0 0 5px rgba(0,0,0,1.0);
}

.up-date1{ 
 position:absolute; 
 top:0px; 
 right:0px; 
 background-color: #FF837B; 
 border:1px solid #FF837B; 
 color: #ffffff; 
 display: inline-block; 
 font-size: 12px; 
 line-height: 1.5; 
 margin: 0; 
 padding: 2px 5px 0; 
}

完成!

いかがですか?良い感じじゃ無いですか?

ぜひ、色々カスタマイズして使ってみてくださいね!

ちゃぼPには本当に感謝です!ありがとう!

フォロー購読方法について >

関連記事もっと記事を読む >

  1. Home >
  2. ブログ管理 >
  3. Simplicity >