Download - 5分でできる!WordPressでピンタレスト風テーマ
![Page 1: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/1.jpg)
5分できる!WordPressでピンタレスト風テーマ
5分できる!WordPressでピンタレスト風テーマ
鳥 山 優 子
![Page 2: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/2.jpg)
2 /205分でできる!WordPressでピンタレスト風テーマ
株式会社ベクター企画・デザイン部
WordPressプラグインテーマ配布
TORIYAMA Yuko
http://profiles.wordpress.org/sysbird/
いままでに食べたお菓子2311種共著
![Page 3: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/3.jpg)
3 /20
ピンタレストといえば、可変グリッド
5分でできる!WordPressでピンタレスト風テーマ
![Page 4: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/4.jpg)
4 /20
ピンタレスト風レイアウト5分でできる!WordPressでピンタレスト風テーマ
NHKスタジオパークhttp://www.nhk.or.jp/studiopark/
この家電がカワイイhttp://kono-kaden-kawaii.net/
![Page 5: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/5.jpg)
5 /20
WordPressのテーマでも、5分でできる!WordPressでピンタレスト風テーマ
Smoothie (themeforest.net) Pinbin (wordpress.org)
![Page 6: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/6.jpg)
6 /20
WordPressのテーマでも、5分でできる!WordPressでピンタレスト風テーマ
trinity (wordpress.org) Fabulous (themeforest.net)
![Page 7: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/7.jpg)
7 /20
Masonry
WordPressでピンタレスト風やるなら、5分でできる!WordPressでピンタレスト風テーマ
http://masonry.desandro.com/
Masonryを使え!
![Page 8: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/8.jpg)
8 /20
ダウンロード不要5分でできる!WordPressでピンタレスト風テーマ
![Page 9: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/9.jpg)
9 /20
ココ!
Twenty Fourteenでも、5分でできる!WordPressでピンタレスト風テーマ
Twenty Fourteen (wordpress.org)
ココ!
![Page 10: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/10.jpg)
10 /20
子テーマでやってみよう。5分でできる!WordPressでピンタレスト風テーマ
Twenty Thirteen (wordpress.org)
親テーマ
![Page 11: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/11.jpg)
11 /20
用意するテンプレート5分でできる!WordPressでピンタレスト風テーマ
style.css
home.php
functions.php
myscript.js
![Page 12: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/12.jpg)
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>
トップページ
![Page 13: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/13.jpg)
13 /205分でできる!WordPressでピンタレスト風テーマ
![Page 14: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/14.jpg)
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; }
グリッドの幅を設定
![Page 15: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/15.jpg)
15 /205分でできる!WordPressでピンタレスト風テーマ
![Page 16: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/16.jpg)
16 /20
jQuery(window).load(function() {jQuery('.masonry-wrapper').masonry({
itemSelector: '.hentry'});
});
myscript.js
5分でできる!WordPressでピンタレスト風テーマ
Masonryを適用する
![Page 17: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/17.jpg)
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ファイルを読み込む
![Page 18: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/18.jpg)
18 /205分でできる!WordPressでピンタレスト風テーマ
![Page 19: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/19.jpg)
19 /20
グリッドを作れるCSSフレームワーク・Bootstrap
・Foundation
5分でできる!WordPressでピンタレスト風テーマ
無限スクロールのjQueryプラグイン
・Foundation
・Infinite Scroll
![Page 20: 5分でできる!WordPressでピンタレスト風テーマ](https://reader033.vdocuments.pub/reader033/viewer/2022060107/554bbfd1b4c90530298b4fbb/html5/thumbnails/20.jpg)
20 /20
*サンプルテーマhttps://github.com/sysbird/twentythirteen-child
ありがとうございました!