WordPress／ポートフォリオをプラグイン無しで作る。 | もとまつデザイン事務所

WordPress／ポートフォリオをプラグイン無しで作る。

ポートフォリオ（ホームページ制作実績）をプラグイン無しで作った。
http://pips.blue/web/

テンプレート

<?php
/*
Template Name:ホームページ制作実績
*/
?>

<?php get_header();?>

<DIV id="container">
<DIV id="main">
<!-- ホームページ制作実績 -->
<h2>ホームページ制作実績</h2>
もとまつデザイン事務所が制作したホームページを紹介します。
<DIV id="web">
<?php
   $newslist = get_posts( array(
    'category_name' => 'homepage', //特定のカテゴリースラッグを指定
    'posts_per_page' => -1 //取得記事件数
  ));
    foreach( $newslist as $post ):
    setup_postdata( $post );
?>
<div class="web_box">
<div class="web_img">
<a href="<?php the_excerpt(); ?>" target="blank"><?php the_post_thumbnail(); ?></a>
</div>
<h3><a href="<?php the_excerpt(); ?>" target="blank"><?php the_title(); ?>&nbsp;様</a></h3>
</div>
<?php endforeach; ?>
</DIV>
</DIV>
</DIV>

<?php get_footer(); ?>

スタイルシート

#container{
  width : 940px;
  margin-left : auto;
  margin-right : auto;
  position : relative;
  clear : both;
  margin-bottom : 20px;
}

#main{
  width : 850px;
  float : left;
  position : relative;
  margin-top : 20px;
  margin-bottom : 25px;
  margin-left : 0px;
  margin-right : 20px;
  padding-left : 20px;
  padding-right : 20px;
}

#web{
  margin-top : 10px;
  width : 100%;
  float : left;
  position : relative;
}

#web h3 a{
  margin-top : 0px;
  background-color : transparent;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 0px;
  line-height : 11pt;
  font-size : 9pt;
}

#web h3{
  margin-top : 0px;
  background-color : transparent;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 0px;
  line-height : 11pt;
  font-size : 9pt;
}

.web_box{
  width : 250px;
  float : left;
  position : relative;
  padding-top : -1px;
  padding-left : 5px;
  padding-right : 5px;border-width : 1px;border-style : solid;border-color : silver;
  height : 225px;
  background-color : white;
  margin-left : 5px;
  margin-right : 5px;
  margin-bottom : 10px;
/*↓角丸 */
-webkit-border-radius: 5px; /* Safari, Chrome用 */
-moz-border-radius: 5px; /* Firefox用 */
border-radius: 5px; /* CSS3 */
/*↓影をつける */
-webkit-box-shadow: 2px 2px 3px #CCC; /* Safari, Chrome用 */
-moz-box-shadow: 2px 2px 3px #CCC; /* Firefox用 */
box-shadow: 2px 2px 3px #CCC; /* CSS3 */
color:#FFF;
padding:10px;
}

.web_img{
  width : 250px;
  height : 188px;
  float : left;
  position : relative;
  margin-bottom : 0px;
}

.web_img img{
  width : 100%;
  height : auto;
}

固定ページを作る

上のテンプレート「ホームページ制作実績」で固定ページを作成。
このページがポートフォリオになる。

カテゴリーを作る

今回は「HP制作実績」という名前でスラッグが「homepage」のカテゴリーを作成。

タイトルと本文を入力

「HP制作実績」のカテゴリーを指定して
タイトルにサイトのアドレスを
本文にサイト名を入力する。

アイキャッチ画像を設定

サイトのイメージをアイキャッチ画像として設定する。