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(); ?> 様</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制作実績」のカテゴリーを指定して
タイトルにサイトのアドレスを
本文にサイト名を入力する。
アイキャッチ画像を設定
サイトのイメージをアイキャッチ画像として設定する。