Speaker Deck
Sign in
Sign up
for free
デザイナーが効率よくテーマ作成を進めるには？ デザインから WordPress のテーマ作成のワークフローを見直す
h2ham
September 17, 2016
2
5.8k
デザイナーが効率よくテーマ作成を進めるには？ デザインから WordPress のテーマ作成のワークフローを見直す
WordCamp Tokyo 2016 の （´°ム°`）の発表スライド
h2ham
September 17, 2016
Tweet
Share
Want more?
h2ham
0
71
h2ham
7
2.6k
h2ham
1
4.3k
reverentgeek
13
760
rmw
4
410
skipperchong
0
260
carmenhchung
8
550
keathley
9
300
productmarketing
3
350
clairelew
4
800
thoeni
1
210
jcasabona
4
280
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
.
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
h2ham
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
