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

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

h2ham
September 17, 2016
2
6.1k

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

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

h2ham

September 17, 2016
Tweet

More Decks by h2ham

See All by h2ham
WordPress案件を請け負う制作会社からみる Shifter の魅力
h2ham
0
680
WordCamp Osaka 2019 h2ham (´ ºムº `)
h2ham
7
4.1k
WordCamp Tokyo 2017 h2ham toro_unit
h2ham
1
6k

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
42
13k
How STYLIGHT went responsive
nonsquared
85
4k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
12
5k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_i
25
16k
Docker and Python
trallard
27
1.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
499
130k
The Brand Is Dead. Long Live the Brand.
mthomps
47
2.8k
Producing Creativity
orderedlist
PRO
334
37k
How to name files
jennybc
44
66k
A Tale of Four Properties
chriscoyier
149
21k
Designing the Hi-DPI Web
ddemaree
273
32k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.2k

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠