Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

7,263 views

Published on

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

Published in: Design
  • Be the first to comment

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

×