Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイナーが効率よくテーマ作成を進めるには? デザインから WordPress のテーマ作成のワークフローを見直す
Search
h2ham
September 17, 2016
2
6.4k
デザイナーが効率よくテーマ作成を進めるには? デザインから WordPress のテーマ作成のワークフローを見直す
WordCamp Tokyo 2016 の (´°ム°`)の発表スライド
h2ham
September 17, 2016
Tweet
Share
More Decks by h2ham
See All by h2ham
WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか?実装事例から見る現在のWordPressの設計と構築』
h2ham
1
480
WordPress案件を請け負う制作会社からみる Shifter の魅力
h2ham
0
1.1k
WordCamp Osaka 2019 h2ham (´ ºムº `)
h2ham
7
4.6k
WordCamp Tokyo 2017 h2ham toro_unit
h2ham
1
6.7k
Featured
See All Featured
Optimizing for Happiness
mojombo
373
69k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Atom: Resistance is Futile
akmur
261
25k
How to Ace a Technical Interview
jacobian
274
23k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Gamification - CAS2011
davidbonilla
78
4.9k
Become a Pro
speakerdeck
PRO
15
4.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Transcript
None
σβΠφʔ͕ޮΑ͘ςʔϚ࡞ΛਐΊΔʹʁ σβΠϯ͔Β8PSE1SFTTͷ ςʔϚ࡞ͷϫʔΫϑϩʔΛݟ͢ HIROMU HASEGAWA
Question
ීஈͷ੍࡞खॱʢϫʔΫϑϩʔʣ ͲͷΑ͏ͳखॱͰਐΊ͍ͯ·͔͢ʁ
8PSE1SFTTͷ࣌ʁ
͜ͷηογϣϯ ීஈͷϫʔΫϑϩʔΛ ݟͳ͓࣌ؒ͢ʹ
About me
ϜA ৽ׁग़ւಓࡳຈࢢࡏॅ ϑϦʔϥϯεˠ๏ਓԽɿදऔక ϑϩϯτΤϯυΤϯδχΞ ݉ςΫχΧϧσΟϨΫλʔ ࠷ۙͷझຯɿϋϜՈࡊԂਫΓʢԂͰͳ͍ʣ
None
ࠓ·ͩ ίʔσΟϯάத৺ͷۀ
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ීஈͷ੍࡞खॱʢϫʔΫϑϩʔʣ ͲͷΑ͏ͳखॱͰਐΊ͍ͯ·͔͢ʁ
! ! %FTJHOFS 1SPHSBNNFS ϜA ͷ͓ࣄ ϫΠϠʔσβΠϯ͔Β༷Ѳ ΞʔΩςΫνϟͷཧͱεέδϡʔϧௐ ํͷίϛϡχέʔγϣϯͷڮ͠
" " \DTT^ " \+4^ $ 4ZTUFN 5FNQMBUFT #
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ࡢͷ8PSE$BNQ5PLZPͷ࠙ձͰ
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ίʔσΟϯάઌʹΔͷͬͯɺ ແବ͡Όͳ͍Ͱ͔͢ʁ
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ʂʂʂ
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ ແବͱ͍͏ൃ͕ͳ͔ͬͨʂ
MJOLIUUQTIIBNOFUXPSEQSFTTDPEJOHqPX
" " \DTT^ " \+4^ # % ! %FTJHOFS
1SPHSBNNFS $ # 4ZTUFN5FNQMBUFT 4ZTUFN4FUUJOH
ϫʔΫϑϩʔͷύλʔϯΛߟ͑ͯΈΔ
ᶃཁ݅ఆٛɾઃܭɾσβΠϯ࡞ ᶄ8PSE1SFTTͷઃఆ ᶄجຊઃఆ ᶄGVODUJPOTQIQʹίʔυՃ ᶄϓϥάΠϯಋೖɾઃఆɹ ᶅςʔϚ࡞ ᶆσʔλߘ ᶅςʔϚ࡞
ᶃཁ݅ఆٛɾઃܭɾσβΠϯ࡞ ᶄ8PSE1SFTTͷઃఆ ᶄجຊઃఆ ᶄGVODUJPOTQIQʹίʔυՃ ᶄϓϥάΠϯಋೖɾઃఆɹ ᶅςʔϚ࡞ ᶆσʔλߘ ᶅςʔϚ࡞
σβΠϯΑΓޙͷ ίʔσΟϯάΛͲ͏ਐΊ͍ͯΔ͔
&ςʔϚʹ &੩తʹҰίʔσΟϯά
ᶃςʔϚʹ
◦ެࣜςʔϚελʔλʔςʔϚͳͲ ςϯϓϨʔτΛΒΧελϚΠζͯ͠ ◦͔̍ΒߏஙʢϑϧεΫϥονʣ
(͋Β͔͡Ί͑Δ༷ʑͳػೳ ʢػೳͱͯ͠͏༧ఆͰ͋Εޮతʣ (σβΠϯ͕ϑϧΦʔμʔͰͳ͚Ε ͙͢ʹར༻Մೳͳέʔε ϝϦοτ
)ߏѲͷॳظίετ ʢΈػೳͷѲʣ )ϑϧΦʔμʔσβΠϯͷ߹ ϕʔεͱͯ͠ར༻͢Δ߹ͷίετ σϝϦοτ
◦8PSE1SFTTͷλάػೳΛ֮͑ΔΑΓ ɹςʔϚػೳͷൣғͷ͚ͩͳΒίετ ɹͦͷΛ͑Δ߹ɾɾɾʁ
◦ϫʔΫϑϩʔͱͯ֬͠Ͱ͖ΔͳΒ ແବΛ࠷খݶʹ͑ΒΕΔ
ݸਓతҰ൪ͷٙ
?ݻఆϖʔδɾߘͷ ΤσΟλ෦ͷϑϩʔʁ
None
ᶃ8FC্ͷΤσΟλ෦ͰϚʔΫΞοϓ ᶄอଘ ᶅ)5.-मਖ਼ɾௐ ᶆอଘɾɾɾʁ
?ཧը໘Λ௨ͯ͠ʁͦΕͱผʁ
ᶄ੩తʹҰίʔσΟϯά
)࡞ΔਓͷεΩϧɾࣝɾྀʹӨڹ ɹߟྀΕɺखΓ͕ଟ͘ൃੜͯ͠͠·͏ ɹςʔϚԽ͢Δࡍʹ͏·͘࠶ݱͰ͖Δ͔ʁ ))5.-ɾ$44ΛҰ͔Β࡞Βͳ͍ͱ ॻ͘ͷͱมΘΒͳ͍ σϝϦοτ
◦ϓϥάΠϯར༻ͳͲͷͷʹΑͬͯ ग़ྗʹ੍ݶ͕͋Δ߹ ɹίʔσΟϯάͦͷ··͑ͳ͍Մೳੑ
◦ϓϥάΠϯར༻ͳͲͷͷʹΑͬͯ ग़ྗʹ੍ݶ͕͋Δ߹ ɹίʔσΟϯάͦͷ··͑ͳ͍Մೳੑ ۀͰϓϩάϥϜدΓͷਓ ͜ͷखͷखΓ͕ݏ͍ͳ ʢ͋͘·Ͱݸਓతͳҙݟʣ
(ϑϧΦʔμʔσβΠϯʹॊೈʹରԠ ()5.-ͱ$44ʹूதͰ͖Δ (ςʔϚԽ͢ΔલͰґཔऀʹ ϒϥβ্Ͱ֬ೝͯ͠Β͑Δ (ۀԽ͍͢͠ ϝϦοτ
◦ίʔσΟϯά໘͚ͩʹϑΥʔΧε͢Δͱ 8PSE1SFTTͷߏங͕ࣝແͯ͘ ɹ࡞ۀཁһͱͯ͠ࢀըՄೳ ɹʢϙΠϯτΛ͑Δඞཁ͋Γʣ
ͲͪΒͷϑϩʔળ͠ѱ͠
ϙΠϯτʁ
ϙΠϯτखΓΛ࠷খݶʹ
खΓΛݮΒ͢ϙΠϯτ
(࡞͢Δ)5.-Λ ςϯϓϨʔτɾ7JFXʹ͍͢͠Α͏ʹ (γεςϜ୲ͱ࿈ܞΛߟྀͯ͠༻ҙ (όάϛεͷग़དྷΔݶΓͳ͍ ࣭ͷΑ͍ίʔυʹ
ςϯϓϨʔτɾ7JFXʹ ͍͢͠Α͏ʹʁ
(ϧʔϓ͕͍͢͠ (ڞ௨෦ΛΘ͔Γ͘͢ ($44PSγεςϜPSӡ༻
<div class=“main"> <h2> ~ </h2> <p>ʢ´°Ϝ°`ʣ</p> <p> ࡳຈʹ͍ΔΑ </p> <h2>2هࣄ</h2>
<div class=“image-block”> <img src=“###.jpg” alt=“” > <p>ը૾ͷԣʹճΓࠐΉจࣈ</p> </div> </article> ̍هࣄͷऴΘΓ͕ Θ͔ΓͮΒ͍
)ೖͬͯ͘ΔσʔλɾελΠϧʹΑͬͯ σβΠϯ่ΕͷݪҼ
<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ͷ߹ ΤσΟλʹΑͬͯ ՝ʹ
$44PSγεςϜPSӡ༻ʁ
ݟग़͠ͷ০ ݟग़͠ͷ০จࣈ͕ଟ͘ ͳͬͨ߹ʁ ݟग़͠ͷ০จࣈ͕ଟ͘ ͳͬͨ߹ʁ ݟग़͠ͷ০จࣈ͕ଟ͘ʜ
QIPUPCZ/BOB#"HZFJIUUQTXXXqJDLSDPNQIPUPTOBOBHZFJ Ϧϐʔτཁૉͷ)5.-ߏ
None
<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>
None
<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>
None
($44ͷઃܭ (*%ηϨΫλ͕ΘΕͯͳ͍͔Ͳ͏͔ (ग़ྗ͞ΕΔ)5.-ྀ͕͞Ε͍ͯΔ͔ (Τϥʔɺใ͕ͳ͍࣌ͷ ελΠϧ͕༻ҙ͞Ε͍ͯΔ͔Ͳ͏͔
#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; } + + + + + +
.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; }
ࣗͷࣄͷґཔൣғ͔Β ϫʔΫϑϩʔΛߟ͑Δ
" " \DTT^ " \+4^ $ 4ZTUFN 5FNQMBUFT #
,੩తϑΝΠϧೲPSνΣοΫ ,$.4ͷछྨΘͣʢ8PSE1SFTTҎ֎ʣ
◦͍Ζ͍Ζͳܗ͕ࣜ͋ͬͯγεςϜʹ ೖΕΔલͷϫʔΫϑϩʔΛҰఆʹ ◦Ҋ݅ʹΑΔߏͷϒϨͷٵऩ ґཔઌຖʹҧ͏ ίʔσΟϯάϨΪϡϨʔγϣϯ
◦ӨڹൣғͷϦεΫݮ -ີ݁߹ηϨΫλͰద༻͞Εͳ͘ͳͬͨ -ผՕॴʹಉ͡DMBTT໊͕ʂཁૉ͕ʂ
ۀ͔Βߟ͑ΔޮԽ
.ಘҙͳ෦ʹूத .$.4ͷछྨΘͣʢ8PSE1SFTTҎ֎ʣ
ར༻πʔϧͱϙΠϯτ
project/ +-- .editorconfig +-- .gitignore +-- gulpfile.js +-- metalsmith.json +--
package.json +-- html +-- _resource +-- _layouts ¦ +-- default.html ¦ +-- footer.html ¦ +-- header.html +-- index.html +-- common +-- style.scss
None
MJOLIUUQHVMQKTDPN
MJOLIUUQTXXXCSPXTFSTZODJP
MJOLIUUQXXXNFUBMTNJUIJP
MJOLIUUQTHJUIVCDPNQBVMBSNTUSPOHTXJH
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>
--- template: default.html title: "λΠτϧ" --- <div>ίϯςϯπ</div> TXJHJOEFYIUNM
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>λΠτϧ</title> </head> <body>
<header> ~ </header> <div>ίϯςϯπ</div> <footer> ~ </footer> </body> </html> σϓϩΠޙ
<!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ʹ
OQNJOTUBMM OQNTUBSU
͜ͷઌ3&45"1*͕ඞཁʹͳͬͯ
.੩తʹ༻ҙ͓ͯ͘͠HVMQͷϑϩʔ ɹͦͷ··+4ςϯϓϨʔτͰར༻Մೳ
import React from 'react'; class Header extends React.Component { render()
{ return ( <header className="header"> ʙ </header> ); }; } export default Header; ྫ͑3FBDU
੩తΛ༻ҙ͢Δʹͯ͠
ᶃ8PSE1SFTTͷઃఆ ᶃجຊઃఆ ᶃGVODUJPOTQIQʹίʔυՃ ᶃϓϥάΠϯಋೖɾઃఆɹ ᶄ੩తϖʔδʹίʔσΟϯά ᶅίʔσΟϯάσʔλʹ81λά
ຊͷ·ͱΊ
/ίʔσΟϯάઌͰΠΩφϦςʔϚͰ ɹͲͪΒࣝεΩϧͰޮత͔มΘΔ #ࣗʹ͋ͬͨϑϩʔͲΕ͔Λߟ͑Δ /λεΫϥϯφʔͳͲɺޮԽπʔϧ׆༻Λ #੩తίʔσΟϯάͷϑϩʔͰ ɹઌʹ8PSE1SFTTͷભҠͳͲ༻ҙ 0ϓϩδΣΫτɾϝϯόʔߏʹΑͬͯ ՝͔ΘΔͨΊ ɹϫʔΫϑϩʔݟ͠Λߦ͏͜ͱ ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠