5分でできる!WordPressでピンタレスト風テーマ
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 3,391 views
Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,391
On Slideshare
2,861
From Embeds
530
Number of Embeds
7

Actions

Shares
Downloads
10
Comments
0
Likes
7

Embeds 530

http://yotsuba-d.com 346
http://www.sysbird.jp 130
http://feedly.com 18
http://s.deeeki.com 13
https://twitter.com 9
http://www.slideee.com 9
http://www.feedspot.com 5

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 ありがとうございました!