ϒϩοΫΤσΟλར༻Λఆͨ͠ςʔϚ੍࡞ͱࠓޙඞཁͳ͜ͱ݄ʢʣΈΜͳͷ͗;ϝσΟΞίεϞε͔Μ͕͑ΔελδΦ0MFJO%FTJHOٱߊ࢘
View Slide
ࣗݾհw ϑϦʔϥϯε8FC੍࡞ऀˏذෞࢢw 8PSE1SFTT$POUSJCVUPS DPSF NFFUVQ USBOTMBUJPO QMVHJOEFW UIFNFEFWw $PEFS%PKPذෞνϟϯϐΦϯw άϥϑΟοΫσβΠϯग़8FCؔ࿈ձࣾۈྺͳ͠w 8FCಠֶ8PSE1SFTTྺҎ্w [email protected]
Έͳ͞ΜͲΜͳਓʁʢෳճՄʣw ҰൠϢʔβʔʢۚમतडͳ͠ʣw ఏҊଆʢσΟϨΫλʔӦۀʣw ੍࡞ଆʢσβΠφʔΤϯδχΞʣ
લఏw 8PSE$BNQ0TBLBͰةػײΛಘ͖ͯͨw ނʹগʑݴ༿͕ڧ͍෦͕͋Γ·͢w େࣄͳ͜ͱԿճݴٴ͍ͯ͠·͢w ֶͼଓ͚·͠ΐ͏ʢࣗռʣϏδωεతͳଆ໘Ͱ8PSE1SFTTͱؔΘ͍ͬͯΔਓʹಛʹ͍͑ͨ
ͲͪΒ͕৴༻Ͱ͖Δʁw ͦͷຊΛಡΜͩ͜ͱ͕ͳ͍ॻళళһ͞Μw ͦͷຊΛಡΜͩ͜ͱ͕͋Δॻళళһ͞Μ
ࢲͨͪͲ͏ͩΖ͏͔ʁw ͍ͬͯΔͭΓͰࢭ·ͬͯͳ͍͔w ͍ͬͯΔใ͕ݹ͘ͳ͍ͬͯͳ͍͔w Α͔͘Βͳ͍ͷΛקΊ͍ͯͳ͍͔͍ͬͯ͏͔࣮ࡍʹͬͯΔʁ
ࣄͰ8PSE1SFTTʹܞΘΔͷͰ͋Ε࠷৽ใΛ͍ͬͯ͘͜ͱࣄͰ͋Δʢ(JGV8PSE1SFTT.FFUVQͰใަ͍͖ͯ͠·͠ΐ͏ʣ
ΞδΣϯμw ϒϩοΫΤσΟλΛ׆༻͢ΔͨΊͷGVODUJPOTQIQ5JQTw ϒϩοΫΤσΟλ׆༻ͷఏҊʹ͍ͭͯw ࠓޙͷ8PSE1SFTT։ൃͰҙ͖ࣝ͢͜ͱ
ϒϩοΫΤσΟλΛ׆༻͢ΔͨΊͷGVODUJPOTQIQ5JQT
0MFJOTUSBQIUUQTHJUIVCDPN0MFJOKQPMFJOTUSBQৗʹΞοϓσʔτ͍ͯ͠·͢
ಛw ࠷ݶͷnpm scriptͰศརͳ։ൃڥ͕ར༻Ͱ͖Δw 4BTTɺ+BWB4DSJQUɺ*NBHFͷίϯύΠϧw ඞཁ࠷ݶͷςϯϓϨʔτϑΝΠϧΛ༻ҙw ϞδϡʔϧϑΝΠϧΛฤू͢Δ͜ͱͰฤूը໘༻ελΠϧࣗಈతʹ࡞ࠓޙɺ͕͍͍ࣗ͢Α͏ʹվྑ͍͖ͯ͠·͢
///// Define block colors for in editor.///@function block-colors() {@return (white : #ffffff,black : #000000,charcoal : #282c34,regent : #8c97a7,husk : #b9a364,red-stage : #b15330);}
///// Return a single block color value by name///@function block-color( $name ) {@return map-get( block-colors(), $name );}
/////// Create CSS classes for color palette.////// @author Koji Kuno ////@each $color-name, $color-value in block-colors() {.has-#{ $color-name }-color {color : #{ $color-value };}.has-#{ $color-name }-background-color {background-color: #{ $color-value };}}
.has-white-color {color: #ffffff; }.has-white-background-color {background-color: #ffffff; }.has-black-color {color: #000000; }....
ฤूը໘ͷελΠϧొग़དྷΔ͚࣮ͩࡍͷελΠϧͰฤूͰ͖ΔΑ͏ʹ
add_action( 'after_setup_theme', function() {add_theme_support( 'editor-styles' );add_editor_style( 'assets/css/editor-style.min.css' );}
͜ͷΑ͏ͳελΠϧΛࢦఆͯ͠ΈΔbody {background-color: yellow;}
ϒϩοΫΤσΟλͷ߹.editor-styles-wrapper {background-color: yellow;}ΫϥγοΫΤσΟλͷ߹body {background-color: yellow;}ΫϥγοΫΤσΟλͷ߹ɺͷதʹฤूը໘͕ͭ͘ΒΕ͍ͯΔͷͰ
෯ͷ༗ޮԽඞཁ͔Ͳ͏͔ཁ֬ೝ
add_action( 'after_setup_theme', function() {add_theme_support( 'align-wide' );}?>.alignfullͱ.alignwideͱ͍͏$44ΫϥεʹରԠ͢Δඞཁ͕͋Δ
.alignfull {width:100vw;margin-left: calc( (100vw - $content_width ) * -0.5);ɹmax-width:100vw;}.alignwide {width:calc( $content_width + $added_width );margin-left: $added_width / 2;max-width:100vw;}
ΧϥʔύϨοτϒϥϯυΧϥʔΛొ͓ͯ͘͠ͱتΕΔഎܠ৭ͱςΩετΧϥʔʹར༻Ͱ͖Δ
add_action( 'after_setup_theme', function() {add_theme_support( 'editor-color-palette', [['name' => __( 'Gray' ),'slug' => 'gray','color' => '#555555' // use this for inline style.],[...]] );}
ςΩετΧϥʔͷ߹.has-text-color .has-{slug}-colorͱ͍͏Ϋϥε͕༩͞ΕΔͷͰ.has-gray-color {color: #555555;}ͱϑϩϯτଆʹελΠϧΛ༻ҙ͢ΔʢΤσΟλଆʹඞཁͳ͠ʣ
എܠ৭ͷ߹.has-background .has-{slug}-background-colorͱ͍͏Ϋϥε͕༩͞ΕΔͷͰ.has-gray-background-color {background-color: #555555;}ͱϑϩϯτଆʹελΠϧΛ༻ҙ͢ΔʢΤσΟλଆʹඞཁͳ͠ʣ
add_theme_support('editor-color-palette')ࣗମΛهड़͠ͳ͍߹ɺσϑΥϧτͰҎԼͷΧϥʔύϨοτ͕༻ҙ͞ΕΔελΠϧࣗମ8PSE1SFTT#MPDL-JCSBSZ͔Βৗ࣌ఏڙ
ϑΥϯταΠζηοτ
ϑΥϯταΠζΛஈ֊తʢδϟϯϓ͝ͱʣʹ͋Β͔͡Ίઃఆ͓ͯ͘͜͠ͱͰɺσβΠϯόϥϯεΛอͭҰΛ୲͑Δ
add_action( 'after_setup_theme', function() {add_theme_support( 'editor-font-sizes', [['name' => __( 'Small' ),'shortName' => __( 'S' ),'size' => 12, // use this for inline style.'slug' => 'small'],[...]] );}
.has-{slug}-font-sizeͱ͍͏Ϋϥε͕͘ͷͰɺ͜ͷ߹.has-small-font-size {font-size: 12px;}ͱ͍͏۩߹ʹϑϩϯτଆͷελΠϧʹهड़
8PSE1SFTT#MPDL-JCSBSZ͔Βࣗಈతʹఏڙ͞ΕΔҎԼͷΑ͏ͳελΠϧ͕͋Δ.has-small-font-size {font-size: 13px}.has-normal-font-size,.has-regular-font-size {font-size: 16px}..׆༻͢Δ͜ͱՄೳ!XQJODMVEFTDTTEJTUCMPDLMJCSBSZTUZMFNJODTTߦลΓΛࢀর
ϒϩοΫΤσΟλ׆༻ͷఏҊʹ͍ͭͯ
ओͳ׆༻ํ๏ͷఏҊϑΣʔζ طଘϒϩοΫʹελΠϧΛ༩֦ͯ͠ு ϓνΧελϜϒϩοΫˠ্ͰରԠͰ͖ͳ͍͚ͲෳࡶߏͰͳ͍ͷ ΨνΧελϜϒϩοΫˠಈతʹϨϯμϦϯά͢Δ%ZOBNJD#MPDL
ͪͳΈʹΧελϜϒϩοΫΛఏڙͯ͘͠ΕΔϓϥάΠϯͳͲΛ׆༻͢Δͱ͍͏બࢶ͋Γ·ͨͩ͢͠ɺґଘ͢Δ͜ͱʹͳΔͷͰ༻๏ʹ͝ҙΛ
8PSE1SFTTΛར༻͢ΔརʮϢʔβʔ͕ฤूͰ͖Δʯ
ͦͷମݧʢ69ʣΛཧ͢Δ͜ͱఏҊɾ੍࡞ଆͷ
طଘϒϩοΫʹελΠϧΛ༩͢Δߟ͑ํ
ίΞϒϩοΫͷछྨDPSFQBSBHSBQI DPSFIFBEJOH DPSFJNBHF DPSFRVPUF DPSFHBMMFSZ DPSFMJTU DPSFBVEJP DPSFDPWFS DPSFpMF DPSFWJEFP DPSFDPEF DPSFGSFFGPSN DPSFIUNM DPSFQSFGPSNBUUFE DPSFQVMMRVPUF DPSFUBCMF DPSFWFSTF DPSFCVUUPO DPSFDPMVNOT DPSFNFEJBUFYU DPSFNPSF DPSFOFYUQBHF DPSFTFQBSBUPS DPSFTQBDFS DPSFTIPSUDPEF DPSFBSDIJWFT DPSFDBUFHPSJFT DPSFMBUFTUDPNNFOUT DPSFMBUFTUQPTUT DPSFFNCFE DPSFFNCFEUXJUUFS DPSFFNCFEZPVUVCF DPSFFNCFEGBDFCPPL DPSFFNCFEJOTUBHSBN DPSFFNCFEXPSEQSFTT DPSFFNCFETPVOEDMPVE DPSFFNCFETQPUJGZ DPSFFNCFEqJDLS DPSFFNCFEWJNFP DPSFFNCFEBOJNPUP DPSFFNCFEDMPVEVQ DPSFFNCFEDPMMFHFIVNPS DPSFFNCFEEBJMZNPUJPO DPSFFNCFEGVOOZPSEJF DPSFFNCFEIVMV DPSFFNCFEJNHVS DPSFFNCFEJTTVV DPSFFNCFELJDLTUBSUFS DPSFFNCFENFFUVQDPN DPSFFNCFENJYDMPVE DPSFFNCFEQIPUPCVDLFU DPSFFNCFEQPMMEBEEZ DPSFFNCFESFEEJU DPSFFNCFESFWFSCOBUJPO DPSFFNCFETDSFFODBTU DPSFFNCFETDSJCE DPSFFNCFETMJEFTIBSF DPSFFNCFETNVHNVH DPSFFNCFETQFBLFSEFDL DPSFFNCFEUFE DPSFFNCFEUVNCMS DPSFFNCFEWJEFPQSFTT DPSFFNCFEXPSEQSFTTUW
͜ΕΒͷίϯϙʔωϯτͰϖʔδ࡞Εͳ͍ʁஈམɾݟग़͠ɾը૾ɾҾ༻ɾΪϟϥϦʔɾϦετɾΧόʔը૾ɾϘλϯɾΧϥϜɾը૾ͱจষ
طଘϒϩοΫΛ্खʹར༻͢Δ͜ͱͰɺेόϦΤʔγϣϯ๛ͳϖʔδΛ࡞Δ͜ͱ͕Ͱ͖Δͣ
͔͠͠ϒϩοΫͷ׆༻ʹίϯϙʔωϯτΛ׆༻ͨ͠σβΠϯࢥߟ͕ඞཁ
w اըɾఏҊˠ8PSE1SFTTͰԿ͕Ͱ͖Δͷ͔Βͳ͍ͱاըΛఏҊͰ͖ͳ͍w σβΠϯ੍࡞ˠ8PSE1SFTTͰԿ͕Ͱ͖Δͷ͔Βͳ͍ͱίϯϙʔωϯτԽͰ͖ͳ͍w ߏஙˠϒϩοΫΤσΟςΠϒϧͳ8PSE1SFTTڥߏஙʹؔ͢Δݟ͕ͳ͍ͱߏஙͰ͖ͳ͍8PSE1SFTTΛ͍ͬͯͳ͍ͱઃܭͰ͖ͳ͚Εࢦࣔग़ͤͳ͍͠ྑ͠ѱ͠ͷஅͰ͖ͳ͍͠࡞Εͳ͍
-FUTHFUCBDLPOUSBDL&YUFOEJOH%FGBVMU#MPDLTطଘϒϩοΫʹελΠϧΛ༩͢Δํ๏
ಡ͏#MPDL&EJUPS)BOECPPL
0MFJO#MPDLTIUUQTHJUIVCDPN0MFJOKQPMFJOCMPDLTϒϩοΫΛαϙʔτ͢ΔͨΊͷϓϥάΠϯͱͯ͠࡞͍ͬͯ·͢ʢৗ࣌Ξοϓσʔτʣ
!XPSEQSFTTTDSJQUTΊͬͪΌָͪΜ!XPSEQSFTTTDSJQUT
࡞ΓํͷྲྀΕ ϓϥάΠϯΛ࡞ΔʢςʔϚʹೖΕΔ͔அ͠Α͏ʣ ϝΠϯ1)1͔Βenqueue_block_editor_assetsIPPLͰ+4ϑΝΠϧΛಡΈࠐΉ +4͔ΒregisterBlockStyleͰొ $44Λ࡞ͯ͠ϝΠϯ1)1͔Βenqueue_block_assetsIPPLͰ$44ϑΝΠϧΛಡΈࠐΉ
ϓϥάΠϯͷߏྫ- index.php/src- index.js- style.scss/build- index.asset.php- index.js- style.css
index.phpfunction ob_extending_blocks_enqueue() {wp_enqueue_script( 'ob-extending-blocks-script',plugins_url( 'build/index.js', __FILE__ ),array( 'wp-blocks' ));}add_action( 'enqueue_block_editor_assets', 'ob_extending_blocks_enqueue' );
src/index.jswp.blocks.registerBlockStyle('core/button',{name: 'original-button',label: 'Original Button'});
TSDTUZMFTDTT.is-style-original-button {margin: 30px 0;.wp-block-button__link {background-color: darkblue;}}
JOEFYQIQfunction ob_extending_blocks_styles() {wp_enqueue_style( 'ob-extending-blocks-style',plugins_url( 'build/style.css', __FILE__ ) );}add_action( 'enqueue_block_assets', 'ob_extending_blocks_styles' );
ࠓޙͷ8PSE1SFTT։ൃͰҙ͖ࣝ͢͜ͱw 1)1όʔδϣϯw ૯߹తͳεΩϧʢඞཁͱߟ͑ΔͳΒʣw 8PSE1SFTT3PBE.BQIUUQTKBXPSEQSFTTPSHBCPVUSPBENBQ
1)1όʔδϣϯόʔδϣϯ ϦϦʔε ΞΫςΟϒ ηΩϡϦςΟ IUUQTXXXQIQOFUTVQQPSUFEWFSTJPOTQIQ
εΩϧͷόʔδϣϯΞοϓແ໊ؔɾྻɾ໊લۭؒɾ$PNQPTFSFUD
૯߹తͳεΩϧʢඞཁͱߟ͑ΔͳΒʣw .PEFSO+BWB4DSJQUw $44ઃܭw BZʢ8$"(""ʣͷཧղͱ࣮ྗ
8PSE1SFTT3PBE.BQࠓޙɺ8PSE1SFTTͲͷΑ͏ʹਐԽ͍ͯ͘͠ͷ͔ྫw φϏήʔγϣϯϝχϡʔΛϒϩοΫԽw طଘΟδΣοτΛશͯϒϩοΫҠ২͜ͷಓے͔Βඞཁͳٕज़ใΛબ͢Δ
ηογϣϯΛ௨ͯ͠Βͳ͔ͬͨ͜ͱ͕̍ͭͰ͋ͬͨํͳΒΘ͔Δͣ8PSE1SFTTJT/05FBTZ
ઃܭ੍࡞қ্͕ͬͯ·͢ʂ
ӡ༻ߟ༷͑ͨࡦఆw ͲΜͳೖྗํ๏͕ඞཁ͔w ඞཁͳίϯϙʔωϯτԿ͔
ϒϩοΫΤσΟλʔΛཧղ͢Δw ͲΜͳϒϩοΫ͕͋Δ͔w Կ͕Ͱ͖Δͷ͔ʢԿ͕Ͱ͖ͳ͍ͷ͔ʣw ͲΜͳ)5.-͕ॻ͖ग़͞ΕΔͷ͔w ίϯϙʔωϯτͷཧղͱઃܭ
ʢվΊͯʣεΩϧΞοϓ͢ΔͨΊʹ
ެࣜυΩϡϝϯτͱ༷ʑͳιʔείʔυΛಡΉ8PSE1SFTT(JUIVC8PSE1SFTT%FWFMPQFS3FTPVSDFT
ͦͯ͠Γ͚ͨΕ͏
Ͳ͜ͷ୭͕ॻ͍͔͔ͨΒͳ͍Α͏ͳϒϩάهࣄ͔ΒαΫοͱιʔείʔυίϐϖͯ͘͠ΔਓʹݶͬͯެࣜυΩϡϝϯτΛಡ·ͳ͍ਓଟ͗͢ʢࣗռ
FYDVTFw ӳޠ͔ͩΒಡΈʹ͍͘ˠ(PPHMF༁ͰͳΜͱ͔ͳΔˠ͔ͬͯͲ͔͜ͷ୭͔Θ͔Βͳ͍৴༻Ͱ͖ͳ͍ਓͷใΛӏವΈʹͪ͠ΌͩΊFYDVTFw Ҋ݅ਐߦதͰಡΜͰཧղ͍ͯ͠Δ͕࣌ؒऔΕͳ͍ˠͦΜͳΜ͔ͩΒ͍ͭ·ͰͨͬͯͰLT;͊ʀKCDʀTEKD͍ͭΔͷʁ
·ͱΊ
8PSE1SFTTʹܞΘΔਓؒͱͯ͋͠ͳͨɺͲ͏͍ͨ͠ʁͲ͏ͳΓ͍ͨʁͲ͏͋Γ͍ͨʁ
ਖ਼ɺదʹͬͯͯʮಈ͚ྑ͍ʯϨϕϧͰࡁ·ͤΔͳΒͳΜͱ͔ͳΔ
ͰɺͦΕͬͯϓϩͱ͔ͯͬ͜͠ѱ͘Ͷʁϓϩʹগͳ͔ΒͣͦΕͰ͓ۚΛ͏ਓ
Ͱ͖Δ͜ͱΛҰͭͣͭ͜ͳ͍͔ͯ͘͠͠ͳ͍
ͩΕͰͰ͖Δ͜ͱw 8PSE1SFTTΛʢ৮ΔͰͳ͘ʣ͏w ͲΜͳϒϩοΫ͕͋Δͷ͔ɺԿ͕Ͱ͖Δͷ͔ΛΔw ίʔυΛॻ͍ͯΈΔʢ࡞ͬͯΈΔʣ
ܹݩ ࡾప 5PSV.JLJ(VUFOCFSHҎ߱ͷςʔϚ࡞ʹ͚ͯɺࠓֶͿ͖͜ͱ ୩ӡ༻࠷େݶߟྀʂίʔϙϨʔταΠτͰϒϩοΫΤσΟλϑϧ׆༻ͷࣄྫհ #MPDL&EJUPSΧελϚΠζೖ81NFFUVQ0TBLBεϥΠυɿӡ༻࠷େݶߟྀʂίʔϙϨʔταΠτͰϒϩοΫΤσΟλϑϧ׆༻ͷࣄྫհεϥΠυɿ(VUFOCFSHҎ߱ͷςʔϚ࡞ʹ͚ͯɺࠓֶͿ͖͜ͱ
8PSE1SFTT.FFUVQʹࢀՃͯ͠ɺͨ͘͞Μ8PSE1SFTTͱؔΘΖ͏ʂ
͓ΘΓ
oleindesign
pyama86
prof18
syumai
squer
mukky620
nsuz
ledsun
punchdrunker
fornewid
alli83
mot_techtalk
konpay
paigeccino
myddelton
marktimemedia
shpigford
morganepeng
colly
jcasabona
garrettdimon
denniskardys
jonyablonski
iamctodd
lara