5分できる!WordPressでピ
ンタレスト風テーマ
5分できる!WordPressでピ
ンタレスト風テーマ
鳥 山 優 子
2/205分でできる!WordPressでピンタレスト風テーマ
株式会社ベクター
企画・デザイン部
WordPress
プラグイン
テーマ配布
TORIYAMA Yuko
http://profiles.wordpress.org/sysbir...
3/20
ピンタレストといえば、
可変
グリッド
5分でできる!WordPressでピンタレスト風テーマ
4/20
ピンタレスト風レイアウト
5分でできる!WordPressでピンタレスト風テーマ
NHKスタジオパーク
http://www.nhk.or.jp/studiopark/
この家電がカワイイ
http://kono-kaden-kawa...
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() ) :...
13/205分でできる!WordPressでピンタレスト風テーマ
14/20
@charset "utf-8";
/*
Theme Name: Twentythirteen Child
Template: twentythirteen
Version: 1.0
*/
style.css
5分でできる!Word...
15/205分でできる!WordPressでピンタレスト風テーマ
16/20
jQuery(window).load(function() {
jQuery('.masonry-wrapper').masonry({
itemSelector: '.hentry'
});
});
myscript.js
5分...
17/20
function my_scripts() {
wp_enqueue_script('jquery-masonry');
wp_enqueue_script( 'myscript', get_stylesheet_directory...
18/205分でできる!WordPressでピンタレスト風テーマ
19/20
グリッドを作れるCSSフレームワーク
・Bootstrap
・Foundation
5分でできる!WordPressでピンタレスト風テーマ
無限スクロールのjQueryプラグイン
・Foundation
・Infinite Scro...
20/20
*サンプルテーマ
https://github.com/sysbird/twentythirteen-child
ありがとうございました!
Upcoming SlideShare
Loading in...5
×

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

4,181

Published on

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

Published in: Design
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,181
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
12
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×