WordPress で作る
ポートフォ  リオサイ ト


   2012.04.28 WordBench 大阪
自己紹介


         西山 拓磨
         •   デザイナー(Web/グラフィック)
         •   専門学校講師
takuma
         大阪・京都を中心に活動しています
ポートフォリオとは


‣   クリエイターの作品集

‣   自分を売り込むツール

‣   就活必須アイテム
専門学校での担当授業



「ポートフ リオサイ
     ォ    ト制作」

  ‣   3回生を対象に就活の準備
作りました!
サイトの目的


‣   ポートフォリオとして実績紹介

‣   ブログによる活動レポート
Web制作のワークフロー




設計     実装
設計



サイト構造    ページ構造      デザイン詳細
サイトマップ   ワイヤーフレーム   デザインカンプ
実装



文書構造    見栄え   振る舞い
 HTML   CSS   JavaScript
システム導入




‣   デザインのテーマ化

‣   標準機能を拡張
サイトマップ

         Blog      カテゴリー   記事




Home   Portfolio   カテゴリー   作品




        About
スケッチを描こう!
ワイヤーフレーム
デザインカンプ
コーディング


‣   HTML5 + CSS3

‣   新要素を使ってマークアップ

‣   できるだけ画像を使わずに表現
HTML5の準備



<!DOCTYPE html>
                         ✓   DOCTYPE 宣言
<html lang="ja">
<head>
                         ✓   lang属性
<meta charset="UTF-8">
                         ✓   文字コード
IE8以下には

                    ✓ html5.js          を適用

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS

✓ 新要素をブロックレベル要素へ変更


  article,aside,details,figcaption,figure,
  footer,header,hgroup,menu,nav,section {
      display:block;
  }
CSS3


‣   角丸… border-radius

‣   影… box-shadow、text-shadow

‣   フォント… @font-face
JavaScript



‣   jQueryで実装

‣   WordPressとの連携も考慮
Blog      カテゴリー   記事




Home   Portfolio   カテゴリー   作品




        About
Blog      カテゴリー   記事




Home      Portfolio   カテゴリー   作品




           About




  ‣    ブログとポートフォリオを分けて管理
カスタム投稿タイプ



   ‣   ブログ以外の投稿

   ‣   投稿の分類もできる
プラグインをインストール

「Custom Post Type UI」
URL


‣ ブログへの投稿

http://takumadesign.com/blog/


‣ ポートフォリオへの投稿

http://takumadesign.com/portfolio/
パーマリンク設定




‣ カスタム投稿にも影響

http://takumadesign.com/blog/portfolio/
プラグインをインストール

「Custom Post Type Permalinks」
‣   blogのトップを固定ページで作る
Blog        カテゴリー             記事


            page.php       category.php   single.php


   Home        Portfolio     カテゴリー             作品


index.php   archive.php    archive.php    single.php


                About


            page.php
Blog記事ページ
single.php
Blogトップ(個別ページ)
page.php → blog.php
トップページ
index.php → home.php
Portfolioトップ(アーカイブページ)
archive.php → archive-portfolio.php
Portfolio作品詳細ページ
single.php → single-portfolio.php
‣   jQueryによるスライドショー
ギャラリー




‣   投稿に関連付けられた画像を取得
トップページでは




‣   投稿のアイキャチ画像を取得
アイキャッチ画像


‣   functions.phpにコードを追加


      add_theme_support( ‘post-thumbnails’ );
ポート ォリオサイトの活用
   フ

‣   作品や活動を発表

‣   新しいWeb技術の実験

‣   WordPressによるサイト構築

WordPressで作るポートフォリオサイト