デザイナーが効率よくテーマ作成を進めるには? デザインから WordPress のテーマ作成のワークフローを見直す

B46b3aff345df8060a82312564e21184?s=47 h2ham
September 17, 2016
5.8k

デザイナーが効率よくテーマ作成を進めるには? デザインから WordPress のテーマ作成のワークフローを見直す

WordCamp Tokyo 2016 の (´°ム°`)の発表スライド

B46b3aff345df8060a82312564e21184?s=128

h2ham

September 17, 2016
Tweet

Transcript

  1. 1.
  2. 9.
  3. 19.

    "  " \DTT^ " \+4^ # % ! %FTJHOFS

    1SPHSBNNFS $ # 4ZTUFN5FNQMBUFT 4ZTUFN4FUUJOH
  4. 33.
  5. 49.

    <div class=“main"> <h2> ~ </h2> <p>ʢ´°Ϝ°`ʣ</p> <p> ࡳຈʹ͍ΔΑ </p> <h2>2هࣄ໨</h2>

    <div class=“image-block”> <img src=“###.jpg” alt=“” > <p>ը૾ͷԣʹճΓࠐΉจࣈ</p> </div> </article> ̍هࣄͷऴΘΓ͕ Θ͔ΓͮΒ͍
  6. 51.

    <article class=“entry"> <header class=“entry__title”><h2> ~ </h2></header> <div class=“entry__body”> <p>ʢ´°Ϝ°`ʣ</p> <p>

    ϞδϡʔϧຖΛҙࣝग़དྷͯΔʁ </p> </div> </article> <article class=“entry"> <header class=“entry__title”><h2> ~ </h2></header> <div class=“entry__body”> <div class=“image-block”> <img src=“###.jpg” alt=“” > <p>ը૾ͷԣʹճΓࠐΉจࣈ</p> </div> </div> </article> $.4ͷ৔߹͸ ΤσΟλʹΑͬͯ ՝୊ʹ
  7. 55.
  8. 56.

    <div class=“row”> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> </div> <div

    class=“row”> <div class=“item”></div> <div class=“item”></div> <div class=“item”></div> </div>
  9. 57.
  10. 59.
  11. 61.

    #news .main .heading-lv2 { border: solid #333; border-width: 0 0

    1px 10px: padding 10px 5px; font-size: 20px; font-weight: bold; } #home .main h2.entry-title { border: solid #333; border-width: 0 0 1px 10px; padding: 10px 5px; font-size: 20px; font-weight: bold; } + + + + + +
  12. 62.

    .heading-lv2 { border: solid #333; border-width: 0 0 1px 10px:

    padding 10px 5px; font-size: 20px; font-weight: bold; } .entry-title { border: solid #333; border-width: 0 0 1px 10px; padding: 10px 5px; font-size: 20px; font-weight: bold; }
  13. 71.

    project/ +-- .editorconfig +-- .gitignore +-- gulpfile.js +-- metalsmith.json +--

    package.json +-- html +-- _resource +-- _layouts ¦ +-- default.html ¦ +-- footer.html ¦ +-- header.html +-- index.html +-- common +-- style.scss
  14. 72.
  15. 77.

    TXJHMBZPVU <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>{{ title

    }}</title> </head> <body> {% include 'header.html' %} {{ contents | safe }} {% include 'footer.html' %} </body> </html>
  16. 79.

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>λΠτϧ</title> </head> <body>

    <header> ~ </header> <div>ίϯςϯπ</div> <footer> ~ </footer> </body> </html> σϓϩΠޙ
  17. 80.

    <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo(

    'charset' ); ?>"> <?php wp_head(); ?> </head> <body> <?php get_header(); ?> <div>ίϯςϯπ</div> <?php get_header(); ?> <?php wp_footer(); ?> </body> </html> 5IFNFʹ
  18. 84.

    import React from 'react'; class Header extends React.Component { render()

    { return ( <header className="header"> ʙ </header> ); }; } export default Header; ྫ͑͹3FBDU