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

デザイナーが効率よくテーマ作成を進めるには？ デザインから WordPress のテーマ作成の...

h2ham
September 17, 2016
2
6.4k

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

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

h2ham

September 17, 2016
Tweet

More Decks by h2ham

See All by h2ham
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武（ハム）
h2ham
1
3k
WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか？実装事例から見る現在のWordPressの設計と構築』
h2ham
1
620
WordPress案件を請け負う制作会社からみる Shifter の魅力
h2ham
0
1.2k
WordCamp Osaka 2019 h2ham (´ ºムº `)
h2ham
7
4.7k
WordCamp Tokyo 2017 h2ham toro_unit
h2ham
1
6.8k

Featured

See All Featured
Typedesign – Prime Four
hannesfritz
40
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Site-Speed That Sticks
csswizardry
0
28
The Cult of Friendly URLs
andyhume
78
6k
Rails Girls Zürich Keynote
gr2m
94
13k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Designing Experiences People Love
moore
138
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Documentation Writing (for coders)
carmenintech
65
4.4k
Building Adaptive Systems
keathley
38
2.3k

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