Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

B46b3aff345df8060a82312564e21184?s=47 h2ham
September 17, 2016
2
5.9k

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

WordCamp Tokyo 2016 の （´°ム°`）の発表スライド

B46b3aff345df8060a82312564e21184?s=128

h2ham

September 17, 2016
Tweet

More Decks by h2ham

See All by h2ham
B46b3aff345df8060a82312564e21184?s=48 h2ham
0
370
B46b3aff345df8060a82312564e21184?s=48 h2ham
7
3.8k
B46b3aff345df8060a82312564e21184?s=48 h2ham
1
5k

Featured

See All Featured
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
294
39k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
217
16k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
409
58k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
158
6.6k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
30
1.5k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
202
9.8k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
258
36k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
499
130k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
776
200k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
240k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
109
11k

Transcript

  1. None

  2. σβΠφʔ͕ޮ཰Α͘ςʔϚ࡞੒ΛਐΊΔʹ͸ʁ σβΠϯ͔Β8PSE1SFTTͷ ςʔϚ࡞੒ͷϫʔΫϑϩʔΛݟ௚͢ HIROMU HASEGAWA

  3. Question

  4. ීஈͷ੍࡞खॱʢϫʔΫϑϩʔʣ͸ ͲͷΑ͏ͳखॱͰਐΊ͍ͯ·͔͢ʁ

  5. 8PSE1SFTTͷ࣌͸ʁ

  6. ͜ͷηογϣϯ͸ ීஈͷϫʔΫϑϩʔΛ ݟͳ͓࣌ؒ͢ʹ

  7. About me

  8. ϜA ৽ׁग़਎๺ւಓࡳຈࢢࡏॅ ϑϦʔϥϯεˠ๏ਓԽɿ୅දऔక໾ ϑϩϯτΤϯυΤϯδχΞ ݉ςΫχΧϧσΟϨΫλʔ ࠷ۙͷझຯɿϋϜՈࡊԂਫ΍Γʢ೶ԂͰ͸ͳ͍ʣ

  9. None

  10. ࠓ͸·ͩ ίʔσΟϯάத৺ͷۀ຿

  11. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ීஈͷ੍࡞खॱʢϫʔΫϑϩʔʣ͸ ͲͷΑ͏ͳखॱͰਐΊ͍ͯ·͔͢ʁ

  12. ! ! %FTJHOFS 1SPHSBNNFS ϜA ͷ͓࢓ࣄ ϫΠϠʔ΍σβΠϯ͔Β࢓༷೺Ѳ΍ ΞʔΩςΫνϟͷ੔ཧͱεέδϡʔϧௐ੔ ૒ํͷίϛϡχέʔγϣϯͷڮ౉͠໾

  13. "  " \DTT^ " \+4^ $ 4ZTUFN 5FNQMBUFT #

  14. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ࡢ೥ͷ8PSE$BNQ5PLZPͷ࠙਌ձͰ

  15. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ίʔσΟϯάઌʹ΍Δͷͬͯɺ ແବ͡Όͳ͍Ͱ͔͢ʁ

  16. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ʂʂʂ

  17. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ແବͱ͍͏ൃ૝͕ͳ͔ͬͨʂ

  18. MJOLIUUQTIIBNOFUXPSEQSFTTDPEJOHqPX

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

    1SPHSBNNFS $ # 4ZTUFN5FNQMBUFT 4ZTUFN4FUUJOH

  20. ϫʔΫϑϩʔͷύλʔϯΛߟ͑ͯΈΔ

  21. ᶃཁ݅ఆٛɾઃܭɾσβΠϯ࡞੒ ᶄ8PSE1SFTTͷઃఆ ᶄجຊઃఆ ᶄGVODUJPOTQIQʹίʔυ௥Ճ ᶄϓϥάΠϯಋೖɾઃఆɹ ᶅςʔϚ࡞੒ ᶆσʔλ౤ߘ ᶅςʔϚ࡞੒

  22. ᶃཁ݅ఆٛɾઃܭɾσβΠϯ࡞੒ ᶄ8PSE1SFTTͷઃఆ ᶄجຊઃఆ ᶄGVODUJPOTQIQʹίʔυ௥Ճ ᶄϓϥάΠϯಋೖɾઃఆɹ ᶅςʔϚ࡞੒ ᶆσʔλ౤ߘ ᶅςʔϚ࡞੒

  23. σβΠϯΑΓޙͷ ίʔσΟϯάΛͲ͏ਐΊ͍ͯΔ͔

  24. &ςʔϚʹ௚઀ &੩తʹҰ౓ίʔσΟϯά

  25. ᶃςʔϚʹ௚઀

  26. ◦ެࣜςʔϚ΍ελʔλʔςʔϚͳͲ ഑෍ςϯϓϨʔτΛΒΧελϚΠζͯ͠ ◦͔̍ΒߏஙʢϑϧεΫϥονʣ

  27. (͋Β͔͡Ί࢖͑Δ༷ʑͳػೳ ʢػೳͱͯ͠࢖͏༧ఆͰ͋Ε͹ޮ཰తʣ (σβΠϯ͕ϑϧΦʔμʔͰ͸ͳ͚Ε͹
 ͙͢ʹར༻Մೳͳέʔε΋ ϝϦοτ

  28. )ߏ଄೺Ѳͷॳظίετ ʢ࢓૊Έ΍ػೳͷ೺Ѳʣ )ϑϧΦʔμʔσβΠϯͷ৔߹ ϕʔεͱͯ͠ར༻͢Δ৔߹ͷίετ σϝϦοτ

  29. ◦8PSE1SFTTͷλά΍ػೳΛ֮͑ΔΑΓ ɹςʔϚػೳͷൣғͷ͚ͩͳΒ௿ίετ ɹͦͷ࿮Λ௒͑Δ৔߹͸ɾɾɾʁ

  30. ◦ϫʔΫϑϩʔͱͯ֬͠཰Ͱ͖ΔͳΒ ແବΛ࠷খݶʹ཈͑ΒΕΔ

  31. ݸਓతҰ൪ͷٙ໰

  32. ?ݻఆϖʔδɾ౤ߘͷ
 ΤσΟλ෦෼ͷϑϩʔʁ

  33. None

  34. ᶃ8FC্ͷΤσΟλ෦෼ͰϚʔΫΞοϓ ᶄอଘ ᶅ)5.-मਖ਼ɾௐ੔ ᶆอଘɾɾɾʁ

  35. ?؅ཧը໘Λ௨ͯ͠ʁͦΕͱ΋ผʁ

  36. ᶄ੩తʹҰ౓ίʔσΟϯά

  37. )࡞ΔਓͷεΩϧɾ஌ࣝɾ഑ྀʹӨڹ ɹߟྀ΋Εɺख໭Γ͕ଟ͘ൃੜͯ͠͠·͏
 ɹςʔϚԽ͢Δࡍʹ͏·͘࠶ݱͰ͖Δ͔ʁ ))5.-ɾ$44ΛҰ͔Β࡞Βͳ͍ͱ
 ௚઀ॻ͘ͷͱมΘΒͳ͍ σϝϦοτ

  38. ◦ϓϥάΠϯར༻ͳͲͷ΋ͷʹΑͬͯ ग़ྗʹ੍ݶ͕͋Δ৔߹ ɹίʔσΟϯάͦͷ··࢖͑ͳ͍Մೳੑ΋

  39. ◦ϓϥάΠϯར༻ͳͲͷ΋ͷʹΑͬͯ ग़ྗʹ੍ݶ͕͋Δ৔߹ ɹίʔσΟϯάͦͷ··࢖͑ͳ͍Մೳੑ΋ ෼ۀͰϓϩάϥϜدΓͷਓ͸ ͜ͷखͷख໭Γ͕ݏ͍ͳ܏޲ ʢ͋͘·Ͱݸਓతͳҙݟʣ

  40. (ϑϧΦʔμʔσβΠϯʹ΋ॊೈʹରԠ ()5.-ͱ$44ʹूதͰ͖Δ (ςʔϚԽ͢ΔલͰ΋ґཔऀʹ
 ϒϥ΢β্Ͱ֬ೝͯ͠΋Β͑Δ (෼ۀԽ͠΍͍͢ ϝϦοτ

  41. ◦ίʔσΟϯά໘͚ͩʹϑΥʔΧε͢Δͱ 8PSE1SFTTͷߏங஌͕ࣝແͯ͘΋ ɹ࡞ۀཁһͱͯ͠ࢀըՄೳ ɹʢϙΠϯτΛ཈͑Δඞཁ͸͋Γʣ

  42. ͲͪΒͷϑϩʔ΋ળ͠ѱ͠

  43. ϙΠϯτʁ

  44. ϙΠϯτख໭ΓΛ࠷খݶʹ

  45. ख໭ΓΛݮΒ͢ϙΠϯτ

  46. (࡞੒͢Δ)5.-Λ ςϯϓϨʔτɾ7JFXʹ͠΍͍͢Α͏ʹ (γεςϜ୲౰ͱ࿈ܞΛߟྀͯ͠༻ҙ (όά΍ϛεͷग़དྷΔݶΓͳ͍
 ඼࣭ͷΑ͍ίʔυʹ

  47. ςϯϓϨʔτɾ7JFXʹ ͠΍͍͢Α͏ʹʁ

  48. (ϧʔϓ͕͠΍͍͢ (ڞ௨෦ΛΘ͔Γ΍͘͢෼཭ ($44PSγεςϜPSӡ༻

  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> ̍هࣄͷऴΘΓ͕ Θ͔ΓͮΒ͍

  50. )ೖͬͯ͘ΔσʔλɾελΠϧʹΑͬͯ σβΠϯ่ΕͷݪҼ΋

  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ͷ৔߹͸ ΤσΟλʹΑͬͯ ՝୊ʹ

  52. $44PSγεςϜPSӡ༻ʁ

  53. ݟग़͠ͷ૷০ ݟग़͠ͷ૷০จࣈ਺͕ଟ͘ ͳͬͨ৔߹͸ʁ ݟग़͠ͷ૷০จࣈ਺͕ଟ͘ ͳͬͨ৔߹͸ʁ ݟग़͠ͷ૷০จࣈ਺͕ଟ͘ʜ

  54. QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ Ϧϐʔτཁૉͷ)5.-ߏ੒

  55. None

  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>
  57. None

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

    <div class=“item”></div> <div class=“item”></div> </div>
  59. None

  60. ($44ͷઃܭ (*%ηϨΫλ͕࢖ΘΕͯͳ͍͔Ͳ͏͔ (ग़ྗ͞ΕΔ)5.-͕഑ྀ͞Ε͍ͯΔ͔ (Τϥʔ΍ɺ৘ใ͕ͳ͍࣌ͷ ελΠϧ͕༻ҙ͞Ε͍ͯΔ͔Ͳ͏͔

  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; } + + + + + +

  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; }

  63. ࣗ෼ͷ࢓ࣄͷґཔൣғ͔Β
 ϫʔΫϑϩʔΛߟ͑Δ

  64. "  " \DTT^ " \+4^ $ 4ZTUFN 5FNQMBUFT #

  65. ,੩తϑΝΠϧೲ඼PSνΣοΫ ,$.4ͷछྨ໰Θͣʢ8PSE1SFTTҎ֎΋ʣ

  66. ◦͍Ζ͍Ζͳܗ͕ࣜ͋ͬͯ΋γεςϜʹ ೖΕΔલͷϫʔΫϑϩʔΛҰఆʹ ◦Ҋ݅ʹΑΔߏ੒ͷϒϨͷٵऩ ґཔઌຖʹҧ͏ ίʔσΟϯάϨΪϡϨʔγϣϯ

  67. ◦ӨڹൣғͷϦεΫݮ -ີ݁߹ηϨΫλͰద༻͞Εͳ͘ͳͬͨ -ผՕॴʹ΋ಉ͡DMBTT໊͕ʂཁૉ͕ʂ

  68. ෼ۀ͔Βߟ͑Δޮ཰Խ

  69. .ಘҙͳ෦෼ʹूத .$.4ͷछྨ໰Θͣʢ8PSE1SFTTҎ֎΋ʣ

  70. ར༻πʔϧͱϙΠϯτ

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

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

  73. MJOLIUUQHVMQKTDPN

  74. MJOLIUUQTXXXCSPXTFSTZODJP

  75. MJOLIUUQXXXNFUBMTNJUIJP

  76. MJOLIUUQTHJUIVCDPNQBVMBSNTUSPOHTXJH

  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>

  78. --- template: default.html title: "λΠτϧ" --- <div>ίϯςϯπ</div> TXJHJOEFYIUNM

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

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

  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ʹ

  81. OQNJOTUBMM OQNTUBSU

  82. ͜ͷઌ3&45"1*͕ඞཁʹͳͬͯ΋

  83. .੩తʹ༻ҙ͓ͯ͘͠HVMQͷϑϩʔ͸ ɹͦͷ··+4ςϯϓϨʔτͰ΋ར༻Մೳ

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

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

  85. ੩తΛ༻ҙ͢Δʹͯ͠΋

  86. ᶃ8PSE1SFTTͷઃఆ ᶃجຊઃఆ ᶃGVODUJPOTQIQʹίʔυ௥Ճ ᶃϓϥάΠϯಋೖɾઃఆɹ ᶄ੩తϖʔδʹίʔσΟϯά ᶅίʔσΟϯάσʔλʹ81λά

  87. ຊ೔ͷ·ͱΊ

  88. /ίʔσΟϯάઌͰ΋ΠΩφϦςʔϚͰ΋ ɹͲͪΒ΋஌ࣝ΍εΩϧͰޮ཰త͔มΘΔ #ࣗ෼ʹ͋ͬͨϑϩʔ͸ͲΕ͔Λߟ͑Δ /λεΫϥϯφʔͳͲɺޮ཰Խπʔϧ΋׆༻Λ #੩తίʔσΟϯάͷϑϩʔͰ΋ ɹઌʹ8PSE1SFTTͷભҠͳͲ༻ҙ 0ϓϩδΣΫτɾϝϯόʔߏ੒ʹΑͬͯ ՝୊΋͔ΘΔͨΊ ɹϫʔΫϑϩʔ΋౎౓ݟ௚͠Λߦ͏͜ͱ ·ͱΊ

  89. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠