GINBOU

漫画描きの主婦・小鳥遊ゆりかの日々活動記録

SIMPLESTERのカスタマイズ2

   

wordpress-logo-hoz-rgb

使用中のテーマ「SIMPLESTER」のサイドバーの新着記事と関連記事に日付とカテゴリを表示する

新しく使い始めたテーマをカスタムするお話(二回目)。
前回はCSSだけをいじる話でしたが、今回いじるのはnewpost.php。
PHPをいじるのにはちょいと勇気が必要な小鳥遊です。

やりたいこと↓
15_0312

 

newpost.phpに<?php the_time(‘Y/m/d’) ?>を追加して日付を取得

wordpressの管理画面>外観>テーマの編集を開くと、「SIMPLESTER-Ver3: スタイルシート (style.css)」の画面が出てきます。
その右側の「stinger5ver20141227」をクリックして「STINGER」のテーマを開きます。
※上にある「編集するテーマを選択」からも行けます※
15_0312_2「STINGER」のテンプレートの中から「newpost.php」を選択。
15_0312_3「newpost.php」に<?php the_time(‘Y/m/d’) ?>を記述。
私はタイトルの上に日付を入れたかったので、<div>で囲って以下の場所へ記述しました。

 <?php else: // サムネイルを持っていないときの処理 ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
 <?php endif; ?>
 </a> </dt>
 <dd>
 <h5><a href="<?php the_permalink(); ?>" >
 <?php the_title(); ?>
 </a></h5>

 

 <?php else: // サムネイルを持っていないときの処理 ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
 <?php endif; ?>
 </a> </dt>
 <dd>
<!-- 日付 -->
 <div class="blog_info smanone ymd">
 <p><i class="fa fa-clock-o"></i>&nbsp;
 <?php the_time('Y/m/d') ?></p>
 </div>
<!-- 日付 -->
 <h5><a href="<?php the_permalink(); ?>" >
 <?php the_title(); ?>
 </a></h5>

ついでに、日付のテキストが並ぶだけだと味気ないので、投稿記事の日付のように「Font Awesome」を利用して時計のマークをつけました。
<i class=”fa fa-clock-o”></i>の部分がそうです。
「STINGER」には元々「Font Awesome」が読み込まれているので、好きなアイコンを選びたい放題です。^^

 

<?php the_category(‘, ‘) ?>と<i class=”fa fa-tags”>を追加

次に上記のコードを同じく「newpost.php」に加えて、カテゴリとタグも表示されるようにします。
日付と同じように<div>で囲って、場所は抜粋文の下を選びました。

<dd>
 <h5><a href="<?php the_permalink(); ?>" >
  <?php the_title(); ?>
  </a></h5>
 <div class="smanone">
  <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
 </div>
</dd>

 

</pre>
<pre><dd>
 <h5><a href="<?php the_permalink(); ?>" >
  <?php the_title(); ?>
  </a></h5>
 <div class="smanone">
  <?php the_excerpt(); //スマートフォンには表示しない抜粋文 ?>
 </div></pre>
<pre> <!-- カテゴリ -->
 <div class="blog_info smanone catag">
  <p><span class="pcone">
   <i class="fa fa-folder-open"></i>
   <?php the_category(', ') ?></br>
   <i class="fa fa-tags"></i>
   <?php the_tags('', ', '); ?>
  </span></p>
 </div>
 <!-- カテゴリ -->
</dd>

 

「SIMPLESTER」のCSSにスタイルを追加

最後に、「SIMPLESTER」のテーマに戻り、1.と2.で加えた日付とカテゴリへスタイルをつけます。

/*----------------------------
サイドバー新着記事
------------------------------*/
#kanren .ymd {
   font-size:80%;
   margin-bottom:5px
   }
#kanren .catag {
   margin-top:15px
   }
#kanren .clearfix dd .blog_info p {
   font-size:11px;
   color:#8858AA
   }

サイズ・色・抜粋文との隙間を微調整しました。
完成↓ ワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ
15_0312_4

 - , , , , ,

  こちらの記事も合わせてどうぞ

  2013/12/24

レスポンシブ化とか無理

よし、自作テーマができた! つぎはレスポンシブ化だ!! って張り切ってみたものの。 グーグル先生に訊 …

  2017/06/11

from Instagram

西武vsDeNA戦を見に行って来ました!楽しかったーw

  2017/06/01

from Instagram

パスポートセンターの近くの公園の花壇がきれい(●´ω`●)

  2015/03/14

SIMPLESTERのカスタマイズ1

使用中のテーマ「SIMPLESTER」の幅を変更 新しくしたテーマについての続きです。^^ word …

no image

  2013/12/10

カスタム投稿の条件分岐

カテゴリーの条件分岐 を使ってカスタム投稿内でメニュー表示の分岐をしようと思ったんだけど、まったくで …

  2018/01/01

from Instagram

毎年恒例の初詣に行って来ました!