More Related Content
Similar to パララックス効果を使ったWordPressサイト
Similar to パララックス効果を使ったWordPressサイト (20)
パララックス効果を使ったWordPressサイト
- 1. パララ ク
ッ ス効果を使った
WordPress サイト
2012.07.22 WordBench 京都
- 2. 自己紹介
西山 拓磨
• デザイナー(Web/グラフィック)
• 専門学校講師
takuma
• 大阪・京都を中心に活動
ポートフォリオ http://takumadesign.com/
- 4. パララ クス
ッ
=
視差
‣ 視点をずらすことで奥行きを表現
- 11. jQueryプラグイン
‣ Sequence
http://www.sequencejs.com/
‣ Scrolling Parallax
http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
‣ Curtain.js
http://curtain.victorcoulon.fr/
その他いろいろ
- 15. 最適なコンテンツ
キャンペーンサイト
ランディングページ
‣ 写真 イラストが中心のシングルページ
・
- 18. サイト設計
ホーム
商品特徴 ラインアップ CM 情報 開発ストーリー お問い合わせ
- 19. サイト設計
ホーム
商品特徴
ラインアップ
CM 情報
開発ストーリー
お問い合わせ
‣ コンテンツをト プページに集約
ッ
- 20. サイト設計
ホーム
商品特徴 固定ページの内容
ラインアップ カスタム投稿タイプの内容
CM 情報 カスタム投稿タイプの内容
開発ストーリー 通常の投稿の内容
お問い合わせ メールフォーム
‣ コンテンツをト プページに集約
ッ
- 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; ?>
- 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);
?>