5分でできる！wordpressでピンタレスト風テーマ

5分できる！WordPressでピンタレスト風テーマ

5分できる！WordPressでピンタレスト風テーマ

鳥 山 優 子

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

株式会社ベクター企画・デザイン部

WordPressプラグインテーマ配布

TORIYAMA Yuko

http://profiles.wordpress.org/sysbird/

いままでに食べたお菓子2311種共著

3 /20

ピンタレストといえば、可変グリッド

5分でできる！WordPressでピンタレスト風テーマ

4 /20

ピンタレスト風レイアウト5分でできる！WordPressでピンタレスト風テーマ

NHKスタジオパークhttp://www.nhk.or.jp/studiopark/

この家電がカワイイhttp://kono-kaden-kawaii.net/

5 /20

WordPressのテーマでも、5分でできる！WordPressでピンタレスト風テーマ

Smoothie (themeforest.net) Pinbin (wordpress.org)

6 /20

WordPressのテーマでも、5分でできる！WordPressでピンタレスト風テーマ

trinity (wordpress.org) Fabulous (themeforest.net)

7 /20

Masonry

WordPressでピンタレスト風やるなら、5分でできる！WordPressでピンタレスト風テーマ

http://masonry.desandro.com/

Masonryを使え！

8 /20

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

9 /20

ココ！

Twenty Fourteenでも、5分でできる！WordPressでピンタレスト風テーマ

Twenty Fourteen (wordpress.org)

ココ！

10 /20

子テーマでやってみよう。5分でできる！WordPressでピンタレスト風テーマ

Twenty Thirteen (wordpress.org)

親テーマ

11 /20

用意するテンプレート5分でできる！WordPressでピンタレスト風テーマ

style.css

home.php

functions.php

myscript.js

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 /205分でできる！WordPressでピンタレスト風テーマ

14 /20

@charset "utf-8";/*Theme Name: Twentythirteen ChildTemplate: twentythirteenVersion: 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 /205分でできる！WordPressでピンタレスト風テーマ

16 /20

jQuery(window).load(function() {jQuery('.masonry-wrapper').masonry({

itemSelector: '.hentry'});

});

myscript.js

5分でできる！WordPressでピンタレスト風テーマ

Masonryを適用する

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 /205分でできる！WordPressでピンタレスト風テーマ

19 /20

グリッドを作れるCSSフレームワーク・Bootstrap

・Foundation

5分でできる！WordPressでピンタレスト風テーマ

無限スクロールのjQueryプラグイン

・Foundation

・Infinite Scroll

20 /20

＊サンプルテーマhttps://github.com/sysbird/twentythirteen-child

ありがとうございました！