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

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

  • 3,220 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,220
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
10
Comments
0
Likes
7

Embeds 0

No embeds

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