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

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

2012.04.28 WordBench 大阪

自己紹介

西山拓磨
• デザイナー（Web／グラフィック）
• 専門学校講師
takuma
大阪・京都を中心に活動しています

ポートフォリオとは

‣ クリエイターの作品集

‣ 自分を売り込むツール

‣ 就活必須アイテム

専門学校での担当授業

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

‣ 3回生を対象に就活の準備

サイトの目的

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

‣ ブログによる活動レポート

Web制作のワークフロー

設計実装

設計

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

実装

文書構造見栄え振る舞い
HTML CSS JavaScript

システム導入

‣ デザインのテーマ化

‣ 標準機能を拡張

サイトマップ

Blog カテゴリー記事

Home Portfolio カテゴリー作品

About

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

コーディング

‣ HTML5 ＋ CSS3

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

‣ できるだけ画像を使わずに表現

HTML5の準備

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

IE８以下には

✓ html5.js を適用

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との連携も考慮



About



About

‣ ブログとポートフォリオを分けて管理

カスタム投稿タイプ

‣ ブログ以外の投稿

‣ 投稿の分類もできる

プラグインをインストール

「Custom Post Type UI」

URL

‣ ブログへの投稿

http://takumadesign.com/blog/

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

http://takumadesign.com/portfolio/

パーマリンク設定

‣ カスタム投稿にも影響

http://takumadesign.com/blog/portfolio/

プラグインをインストール

「Custom Post Type Permalinks」

‣ blogのトップを固定ページで作る


page.php category.php single.php


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によるサイト構築

More Related Content