WordBench東京3月: 春のデザイナー祭り！ライトニングトーク

1. 5分できる！WordPressでピ
ンタレスト風テーマ
5分できる！WordPressでピ
ンタレスト風テーマ
鳥 山 優 子

2. 2/205分でできる！WordPressでピンタレスト風テーマ
株式会社ベクター
企画・デザイン部
WordPress
プラグイン
テーマ配布
TORIYAMA Yuko
http://profiles.wordpress.org/sysbird/
いままでに
食べたお菓子
2311種
共著

3. 3/20
ピンタレストといえば、
可変
グリッド
5分でできる！WordPressでピンタレスト風テーマ

4. 4/20
ピンタレスト風レイアウト
5分でできる！WordPressでピンタレスト風テーマ
NHKスタジオパーク
http://www.nhk.or.jp/studiopark/
この家電がカワイイ
http://kono-kaden-kawaii.net/

5. 5/20
WordPressのテーマでも、
5分でできる！WordPressでピンタレスト風テーマ
Smoothie (themeforest.net) Pinbin (wordpress.org)

6. 6/20
WordPressのテーマでも、
5分でできる！WordPressでピンタレスト風テーマ
trinity (wordpress.org) Fabulous (themeforest.net)

7. 7/20
Masonry
WordPressでピンタレスト風やるなら、
5分でできる！WordPressでピンタレスト風テーマ
http://masonry.desandro.com/
Masonry
を使え！

8. 8/20
ダウンロード不要
5分でできる！WordPressでピンタレスト風テーマ

9. 9/20
ココ！
Twenty Fourteenでも、
5分でできる！WordPressでピンタレスト風テーマ
Twenty Fourteen (wordpress.org)
ココ！

10. 10/20
子テーマでやってみよう。
5分でできる！WordPressでピンタレスト風テーマ
Twenty Thirteen (wordpress.org)
親テーマ

11. 11/20
用意するテンプレート
5分でできる！WordPressでピンタレスト風テーマ
style.css
home.php
functions.php
myscript.js

12. 12/20
<div id="content" class="masonry-wrapper" role="main">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_post_thumbnail(); ?>
<h1 class="entry-title">
home.php
5分でできる！WordPressでピンタレスト風テーマ
<h1 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark"><?php
the_title(); ?></a>
</h1>
</header>
</article>
<?php endwhile; ?>
<?php endif; ?>
</div>
トップページ

13. 13/205分でできる！WordPressでピンタレスト風テーマ

14. 14/20
@charset "utf-8";
/*
Theme Name: Twentythirteen Child
Template: twentythirteen
Version: 1.0
*/
style.css
5分でできる！WordPressでピンタレスト風テーマ
@import url("../twentythirteen/style.css");
.masonry-wrapper {
width: 930px;
margin: 0 auto;}
.home .hentry {
width: 300px;
background: #FFF;
margin: 5px;
float: left; }
グリッドの
幅を設定

15. 15/205分でできる！WordPressでピンタレスト風テーマ

16. 16/20
jQuery(window).load(function() {
jQuery('.masonry-wrapper').masonry({
itemSelector: '.hentry'
});
});
myscript.js
5分でできる！WordPressでピンタレスト風テーマ
Masonryを
適用する

17. 17/20
function my_scripts() {
wp_enqueue_script('jquery-masonry');
wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() .'/myscript.js', 'jquery',
'1.00' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
functions.php
5分でできる！WordPressでピンタレスト風テーマ
JavaScript
ファイルを
読み込む

18. 18/205分でできる！WordPressでピンタレスト風テーマ

19. 19/20
グリッドを作れるCSSフレームワーク
・Bootstrap
・Foundation
5分でできる！WordPressでピンタレスト風テーマ
無限スクロールのjQueryプラグイン
・Foundation
・Infinite Scroll

20. 20/20
＊サンプルテーマ
https://github.com/sysbird/twentythirteen-child
ありがとうございました！