2012.07.22 第6回WordBench京都にて発表 http://takumadesign.com/blog/wordbenchkyoto-vol6-report/

1. パララ ク
ッ ス効果を使った
WordPress サイト
2012.07.22 WordBench 京都

2. 自己紹介
西山 拓磨
• デザイナー（Web／グラフィック）
• 専門学校講師
takuma
• 大阪・京都を中心に活動
ポートフォリオ http://takumadesign.com/

3. パララ クス効果とは
ッ

4. パララ クス
ッ
=
視差
‣ 視点をずらすことで奥行きを表現

5. パララックスを取り入れたウェブサイト
NIKE BETTER WORLD http://www.nikebetterworld.com/about

6. “奥行き”の仕組み

7. 重なる要素をレイヤーに分ける

8. 異なるスピードで動かす

9. 異なるスピードで動かす

10. 実装方法
background-position の値を
JavaScript で動的に変化させる

11. jQueryプラグイン
‣ Sequence
http://www.sequencejs.com/
‣ Scrolling Parallax
http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
‣ Curtain.js
http://curtain.victorcoulon.fr/
その他いろいろ

12. おすすめプラグイン
http://johnpolacek.github.com/scrolldeck.js/

13. Point1. NIKEのサイト風サンプル

14. Point2. アニメーションエフェクト

15. 最適なコンテンツ
キャンペーンサイト
ランディングページ
‣ 写真 イラストが中心のシングルページ
・

16. ×
Parallax Effect

17. WordPress
デフォルトではテキストベース
‣ ブログ以外のコンテンツを作る

18. サイト設計
ホーム
商品特徴 ラインアップ CM 情報 開発ストーリー お問い合わせ

19. サイト設計
ホーム
商品特徴
ラインアップ
CM 情報
開発ストーリー
お問い合わせ
‣ コンテンツをト プページに集約
ッ

20. サイト設計
ホーム
商品特徴 固定ページの内容
ラインアップ カスタム投稿タイプの内容
CM 情報 カスタム投稿タイプの内容
開発ストーリー 通常の投稿の内容
お問い合わせ メールフォーム
‣ コンテンツをト プページに集約
ッ

21. トップページのカスタマイズ
専用のテンプレートを準備
‣ home.pnp を作成

22. トップページに表示
‣ カスタム投稿タイプの内容
‣ 固定ページの内容
‣ メールフォーム

23. カスタム投稿タイプ

24. カスタム投稿タイプ
プラグインをインストール
「Custom Post Type UI」

25. カスタム投稿タイプ
home.php にコードを記述
<?php query_posts( Array( 'post_type' => '⃝⃝' ) ); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php content(); ?>
<?php endwhile; endif; ?>

26. 固定ページ

27. 固定ページ
home.php にコードを記述
<?php $page = query_posts( 'pagename=⃝⃝' );
echo $page[0]->post_content;
?>

28. 固定ページ
改行を反映する場合
<?php $page = query_posts( 'pagename=⃝⃝' );
echo apply_filters( 'the_content' , $page[0]->post_content);
?>

29. メールフォーム

30. メールフォーム
プラグインをインストール
「Contact Form 7」

31. メールフォーム

32. メールフォーム
home.phpでショートコードを使う場合
<?php echo do_shortcode(
'[contact-form-7 id="8" title="お問い合わせ"]'
); ?>

33. 制作の流れ
コンテンツをトップページへ集約
スクロールによるパララックスを実装

34. パララックスを使って
WordPressサイトに
ユニークな演出を！

35. One More Thing…

36. WordPress×パララックス
によるウェブサイト

37. 本日公開！

38. morisu maki http://morisumaki.com/