WordCamp Osaka 2019 ブロックエディタで誰でもカンタンに運用しやすいサイトを作ろう！

ϒϩοΫΤσΟλͰ୭Ͱ΋Χϯλϯʹ ӡ༻͠΍͍͢αΠτΛ࡞Ζ͏ʂ ΞΧϦϗϊΧχɹ౔ډ҆Ղཬ

ࣗݾ঺հ w ϑϦʔϥϯεͷ8FCɾ%51σβΠφʔ w σδλϧϋϦ΢ουେࡕߍߨࢣ w ࣇͷ฼ͰݩύςΟγΤ w 8PSE$BNQ0TBLBͷ࣮ߦҕһʹͳΓɺ  ࠙਌ձͰέʔΩΛ࡞੒ͨ͜͠ͱͰ 
ίϛϡχςΟͱਂؔ͘ΘΔΑ͏ʹ w 8PSE1SFTTͰαΠτΛͭ͘Δͱ͖͸͍ͭ΋  ࢠςʔϚͰ w ೉͍͠࿩͠·ͤΜʂͰ͖·ͤΜʂ

ࠓ೔͓࿩͢͠Δ͜ͱ w ϒϩοΫΤσΟλͱ͸ w ϒϩοΫΤσΟλͷศརͳػೳ w ͪΐͬͱ͚ͩෆศͳͱ͜Ζ w ϒϩοΫΤσΟλΛΑΓ࢖͍΍͘͢ w
ϒϩοΫΤσΟλΛΑΓศརʹ͢ΔϓϥάΠϯ w ࣮ࡍͷӡ༻ͷ࣮ྫ جຊͱ ʮ͜Ε஌ͬͯΔͱศརʂʯ Λ͓఻͑͠·͢

͜Μͳํͷ͓໾ʹཱͯΔ͔΋ w ϒϩοΫΤσΟλ͸࢖ͬͨ͜ͱ͕ͳ͍ w ΫϥγοΫΤσΟλΛ͙͢Πϯετʔϧͪ͠Ό͏ w ͸͡Ίʹ࢖͚ͬͨͲɺ͋Ε࢖͍ʹ͘͘ͳ͍ʁͱࢥͬͯ΍Ίͨ w ࢖ͬͯΔΜ͚ͩͲɺͦΜͳʹศར͔ͳʁ w
ࣗ෼Ͱ͸࢖ͬͯΔ͚Ͳɺ͓٬༷αΠτʹ͸·ͩΫϥγοΫΤσΟλ ໌೔͔ΒϒϩοΫΤσΟλΛ࢖͍ͨ͘ͳΔʜʂɹ͸ͣ

ϒϩοΫΤσΟλͱ͸

ΫϥγοΫΤσΟλʢ8PSE1SFTTܥ·Ͱʣ

ϒϩοΫΤσΟλʢ8PSE1SFTT͔Βʣ

ΫϥγοΫΤσΟλͱͳʹ͕ҧ͏ʁ w ͦͷ໊ͷ௨ΓϒϩοΫΛॏͶ͍ͯ͘Α͏ͳ6* w Ұ൪ͷϙΠϯτ͸ࠓ·ͰͰ͖ͳ͔ͬͨϨΠΞ΢τ͕Մೳʹͳͬͨʂ <IPHF>ʜʜ<IPHF>ͷΑ͏ͳγϣʔτίʔυ΍ ΧελϜϑΟʔϧυ͕ෆཁʹʂ

͜ΜͳϒϩοΫ͕͋Γ·͢ ϝσΟΞͱจষ ΧόʔϒϩοΫ΍ϘλϯϒϩοΫ ˞ΧόʔϒϩοΫͰશ෯ʹ͢Δʹ͸ςʔϚଆͰରԠ͕ඞཁ ΧϥϜϒϩοΫ ஈམ΍ը૾͸΋ͪΖΜɺʮ΢ΟδΣοτʢσϑΥϧτͷҰ෦ʣʯ΍ :PV5VCF΍5XJUUFSΛ͸͡Ίͱ͢Δଟ਺ͷຒΊࠐΈϒϩοΫͳͲ ๛෋ͳػೳͷϒϩοΫ͕͍ͬͺ͍ʂ ΫϥγοΫϒϩοΫ΋͋ΔͷͰɺैདྷͷΤσΟλΛҰ෦࢖༻ͨ͠Γ աڈͷϒϩάͷमਖ਼΋ΧϯλϯͰ͢ɻ

ϒϩοΫΤσΟλͷجຊ λΠτϧɾຊจೖྗ πʔϧόʔ ৄࡉઃఆ

ϒϩοΫΤσΟλͷجຊ λΠτϧɾຊจೖྗ πʔϧόʔ ৄࡉઃఆ ࠓ೔͸ओʹίίͱίίΛઆ໌͠·͢ʂ

ϒϩοΫͷ௥Ճํ๏ ΛΫϦοΫͰϒϩοΫͷछྨΛબͿ ʴ ΋͘͠͸Λೖྗ͠ɺΩʔϫʔυΛ ೖΕͯݺͼग़͢

ϒϩοΫͷ௥Ճํ๏ πʔϧόʔͷʴϘλϯ ͜Ε͚ͩྫ͕ग़·͢ ຊจೖྗཝͷʴϘλϯ ຊจೖྗཝͷͰ௥Ճ

֤ϒϩοΫͷৄࡉઃఆ ϒϩοΫΛબ୒͢Δͱ  ʮϒϩοΫʯλϒ͕બ୒͞ΕΔ ͜͜Ͱ֤ϒϩοΫͷઃఆΛ͢Δ ϒϩοΫʹΑΓ ઃఆͰ͖Δ߲໨͕มΘΓ·͢

هࣄશମͷઃఆ จॻλϒΛબ୒͢Δͱ  هࣄશମͷઃఆ͕Մೳ ΫϥγοΫΤσΟλͱઃఆ߲໨͸ ͦΕ΄ͲมΘΓ·ͤΜ w ެ։ઃఆ w ύʔϚϦϯΫ w
ΧςΰϦʔ w λά w ΞΠΩϟον ͳͲ

ͦΜͳํʹ͸ͪ͜Βͷ8PSE$BNQ5PLZPͷଜ্͞ΜͷεϥΠυ͕͓͢͢Ίʂ ΋ͬͱجຊ͕஌Γ͍ͨʂπʔϧόʔͷ͜ͱ΋ڭ͑ͯʂ IUUQTTQFBLFSEFDLDPNVE@pCPOBDDJMFUTMFBSOCMPDLFEJUPSGSPNTDSBUDI

ϒϩοΫΤσΟλͷศརͳػೳ

࠶ར༻ϒϩοΫ w ෳࡶʹ૊ΜͩϨΠΞ΢τ΋ొ࿥͓͚ͯ͠͹࠶ར༻Ͱ͖Δʂ w ύλʔϯԽ͍ͯ͠Δ΋ͷʹΊͪΌͪ͘Όศར w ෳ਺ͷϒϩοΫΛ࠶ར༻ϒϩοΫͱͯ͠ొ࿥Մೳ w ʮฤूʯΛΫϦοΫͯ͠ॻ͖׵͑Δͱ  աڈʹ౤ߘͨ͢͠΂ͯͷϒϩοΫ͕ೖΕସΘΔ 
ˠͦ͜Λར༻͢Ε͹ظؒݶఆόφʔͳΜ͔΋Χϯλϯʂ w ࠶ར༻ϒϩοΫࣗମ͸਽ܗͱͯ͠ஔ͍͓͖͍ͯͨ  ˠ಺༰͕มΘΔ৔߹͸  ʮ௨ৗϒϩοΫʹม׵ʯ͢Ε͹ॻ͖׵͑Մೳ

͢΂ͯͷίϯςϯπΛίϐʔ w πʔϧόʔͷͭͷ఺ͷதʹ͋Δ w Ұؾʹϖʔδ͢΂ͯͷத਎Λίϐʔ w షΓ෇͚͸৽نϖʔδͰ$USʢ⌘ʣʴ7

ϒϩοΫϚωʔδϟʔ w πʔϧόʔͷͭͷ఺ͷதʹ͋Δ w ϒϩοΫϚωʔδϟʔΛΫϦοΫ w ඇදࣔʹ͍ͨ͠ϒϩοΫͷ  νΣοΫΛ֎͢ w ඇදࣔʹͨ͠ϒϩοΫ͸ʴϘλϯΛ 
ΫϦοΫͯ͠΋Ͱͯ͜ͳ͍ ͨͩ͠ɺࣗ෼ͷઃఆͷΈʂ ଞͷϢʔβʔ͸ͦͷ··Ͱ͢

ͪΐͬͱ͚ͩෆศͳͱ͜Ζ

ΠϯϥΠϯʹऑ͍ w จࣈͷ෦෼తͳ৭มߋ΍ϑΥϯταΠζมߋ͕Ͱ͖ͳ͍  ʢϒϩοΫશମͷ৭͕΍ϑΥϯταΠζ͕มΘΔʣ Χϥʔ͸ϓϥάΠϯΛ࢖͑͹ɺબ୒ͨ͠෦෼ͷΈมߋ͕ՄೳͰ͢ʂ

ςʔϒϧ͕ͪΐͬͱ࢖͍ͮΒ͍ w ͔ΒUIFBEΛࢦఆ͢Δ͜ͱͰUI͕ઃఆͰ͖ΔΑ͏ʹʂ  ͚ΕͲࣗ༝ʹUIΛࢦఆͰ͖ΔΘ͚Ͱ͸ͳ͍ʜʢ)5.-ฤू͸Մೳʣ UI ͍·ͷͱ͜ΖଞϓϥάΠϯͰ΋ηϧ͝ͱͷઃఆ͕Ͱ͖Δ΋ͷ͸Έ͔ͭͬͯ·ͤΜʜ

ϒϩοΫͷબ୒͕ͪΐͬͱγϏΞ w ബ͍఺ઢ͕ͭ͘Α͏ʹͳ͔ͬͯΒ͸બ୒͠΍͘͢ͳͬͨ΋ͷͷ  ׳ΕΔ·Ͱ೉͍͔͠΋

͋͑ͯݴͬͨײ͋Γ·͢ΑͶʁ  ͦΜͳʹෆศʹײ͡ͳ͍ཧ༝͹͔Γʂ ࢖Θͳ͍ཧ༝͕ͳ͍ʂʂ

ϒϩοΫΤσΟλΛΑΓ࢖͍΍͘͢

σϑΥϧτͷΧϥʔύϨοτͷมߋʢFEJUPSDPMPSQBMFUUFʣ w σϑΥϧτͷΧϥʔύϨοτ͸࢖Θͳ͍৭΋ w ࢖͍͍ͨ৭Λ͍͍ͪͪΧελϜΧϥʔ͔ΒબͿͷ͸͍ͨ΁Μ ࢖͍͍ͨ৭͚ͩύϨοτʹ ද͍ࣔͤͨ͞ʂ

σϑΥϧτͷΧϥʔύϨοτͷมߋʢFEJUPSDPMPSQBMFUUFʣ w GVODUJPOTQIQʹӈهΛهೖ function mytheme_setup_theme_supported_features() { add_theme_support( 'editor-color-palette', array( array(
'name' => 'ന', 'slug' => 'white', 'color' => '#FFF', ) , array( 'name' => 'ࠇ', 'slug' => 'black', 'color' => '#000', ) , array( 'name' => 'ϐϯΫ', 'slug' => 'pink', 'color' => '#F45F70', ) , array( 'name' => 'ϒϧʔ', 'slug' => 'blue', 'color' => '#4AB6B7', ) , array( 'name' => '྘', 'slug' => 'green', 'color' => '#96CE64', ) , array( 'name' => 'ΦϨϯδ', 'slug' => 'orange', 'color' => '#FE8026', ) , ) ); } add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' ); ͜͏ͳΓ·͢ʂ

σϑΥϧτͷΧϥʔύϨοτͷมߋʢFEJUPSDPMPSQBMFUUFʣ w TUZMFDTTʹʮIBTεϥοάCBDLHSPVOEDPMPSʯͱ  ʮIBTεϥοάDPMPSʯͷ$44Λهೖ ͜ΕͰग़ྗ͞Εͨهࣄʹ΋ରԠ .has-white-background-color { background-color: #FFF; }
.has-white-color { color: #FFF; }

ϨεϙϯγϒຒΊࠐΈʢSFTQPOTJWFFNCFETʣ w :PV5VCFͳͲͷຒΊࠐΈίϯςϯπΛϨεϙϯγϒରԠ͢Δ function responsive_embeds_features() { add_theme_support( 'responsive-embeds' ); }
add_action('after_setup_theme', 'responsive_embeds_features'); ΧϥʔύϨοτͱҰॹʹॻ͍ͯ΋0, ˞BGUFS@TFUVQ@UIFNFϑοΫΛطʹ࢖͍ͬͯΔ৔߹͸ͦͷதʹ௥Ճ͢Δͱ͍͏͜ͱ

ελΠϧͷόϦΤʔγϣϯʢSFHJTUFS#MPDL4UZMFʣ ίίͷόϦΤʔγϣϯΛ ૿΍͢ʂ

ελΠϧͷόϦΤʔγϣϯʢSFHJTUFS#MPDL4UZMFʣ ελΠϧΛબͿͱ ʮߴ౓ͳઃఆʯʹ $44Ϋϥε͕ͭ͘ ελΠϧͷ࢓૊Έ͕Θ͔ͬͨͱ͜ΖͰ௥Ճͷํ๏͸࣍ʂ

ελΠϧͷόϦΤʔγϣϯʢSFHJTUFS#MPDL4UZMFʣ register_block_style( 'core/quote', array( 'name' => 'blue-quote', 'label' => __(
'Blue Quote' ), 'inline_style' => '.wp-block-quote.is-style-blue-quote { color: blue; }', ) ); ྫɿҾ༻ͷจࣈ৭͕੨͍ελΠϧΛ࡞Δ w GVODUJPOTQIQʹԼهΛهೖ

ελΠϧͷόϦΤʔγϣϯʢSFHJTUFS#MPDL4UZMFʣ ελΠϧ͕૿͑ͨʂ

ΤσΟλͱϑϩϯτΛಉ͡ελΠϧͰදࣔʢFEJUPSTUZMFʣ function my_theme_editorstyle_setup() { add_theme_support( 'editor-styles' ); add_editor_style( 'style-editor.css' );
} add_action( 'after_setup_theme', 'my_theme_editorstyle_setup'); w GVODUJPOTQIQʹԼهΛهೖ UIFNFσΟϨΫτϦͷTUZMFFEJUPSDTTͱ͍͏ελΠϧγʔτΛಡΈࠐΜͰ͍Δ TUZMFFEJUPSDTTʹϑϩϯτͱಉ͡ελΠϧͰ$44Λهड़

ΤσΟλͱϑϩϯτΛಉ͡ελΠϧͰදࣔʢFEJUPSTUZMFʣ ࣗಈతʹFEJUPSTUZMFTXSBQQFSΫϥε͕ͭ͘Α͏ʹͳΔ ೖྗͨ͠$44 body { font-size: 22px; font-family: "NonBreakingSpaceOverride", "Hoefler
Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; line-height: 1.8; color: #111; } p { font-size: 22px; } ࣮ࡍʹग़ྗ͞ΕΔ$44 .editor-styles-wrapper { font-size: 22px; font-family: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; line-height: 1.8; color: #111; } .editor-styles-wrapper p { font-size: 22px; }

ࠓݴͬͨ͜ͱɺ͜͜ʹશ෦ͷͬͯ·͢ʂ #MPDL&EJUPS)BOECPPL ΧϥʔύϨοτɾϨεϙϯγϒຒΊࠐΈɾΤσΟλͱϑϩϯτΛಉ͡දࣔ 5IFNF4VQQPSU ελΠϧͷόϦΤʔγϣϯ #MPDL'JMUFST

ΧελϜ౤ߘλΠϓͰͷ஫ҙ w SFHJTUFS@QPTU@UZQF ͰTIPX@JO@SFTUΛUSVFʹ͢Δඞཁ͕͋Δ ϓϥάΠϯͩͱʮ3&45"1*ͰදࣔʯͷΑ͏ͳදݱͷ৔߹΋ ˞ྫ͸$VTUPN1PTU5ZQF6*

ϒϩοΫΤσΟλΛΑΓศརʹ͢ΔϓϥάΠϯ

ΠϯϥΠϯͷ૷০ڧԽ "EWBODFE3JDI5FYU5PPMTGPS(VUFOCFSH 5JOZ.$&"EWBODFE ෦෼తͳ৭มߋ͕Մೳʹ

Ϣχοτςετ #MPDL6OJU5FTUGPS(VUFOCFSH ίΞͷϒϩοΫΛζϥοͱݻఆϖʔδϖʔδʹ  ग़ྗͯ͘͠ΕΔ ࣗ࡞ͷςʔϚͳͲɺ֤ϒϩοΫʹରԠͤ͞Δͷʹ  ҰཡදࣔͰ͖ͯศར

4OPX.POLFZ#MPDLT ϒϩοΫͷछྨΛ૿΍͢ ւ֎ͷϓϥάΠϯʹ͸ͳ͍ϒϩοΫ͕͋Δ ਧ͖ग़͠΍εςοϓͳͲɺϦονͳදݱ͕  Ͱ͖Δ

ϒϩοΫͷछྨΛ૿΍͢ σϑΥϧτͷΧϥϜϒϩοΫΑΓ  ػೳ͕๛෋ͳ3PXϒϩοΫ $P#MPDLT ΧϯλϯʹεϥΠμʔ͕ͭ͘ΕΔ  $BSPVTFMϒϩοΫ

ϒϩοΫͷछྨΛ૿΍͢ "EWBODFE(VUFOCFSH ʮϓϩϑΟʔϧʯͰάϧʔϓΛͭ͘Γɺ  ͲͷϢʔβʔΛͦͷάϧʔϓʹ௥Ճ͢Δ͔બͿ ͦͷάϧʔϓʹͲͷϒϩοΫΛදࣔɾඇදࣔ͢Δ͔ઃఆ ϒϩοΫ΋๛෋Ͱ͕͢ϒϩοΫͷඇදࣔػೳ͕͍͢͝

"UPNJD#MPDLTr(VUFOCFSH#MPDLT$PMMFDUJPO ϒϩοΫͷछྨΛ૿΍͢ πʔϧόʔʹʮ-BZPVUTʯ  ͱ͍͏߲໨͕Ͱ͖Δ ΫϦοΫ͢Δͱ͋Δఔ౓  ϨΠΞ΢τ͕׬੒ͨ͠΋ͷΛ  ͙͢ʹૠೖͰ͖Δ

4UBDLBCMFr(VUFOCFSH#MPDLT ϒϩοΫͷछྨΛ૿΍͢ ·ͩ·ͩ͋ΔϒϩοΫΛ૿΍͢ϓϥάΠϯʂ ͜͜Ͱ঺հͨ͠΋ͷ͸͘͝Ұ෦Ͱ͢  ಉ͡Α͏ͳϒϩοΫ͕͔ͿΔͱ͖΋͋Γ·͕͢  ࢖͍΍͍͢΋ͷΛબΜͰɺ࢖Θͳ͍΋ͷ͸ඇදࣔ͢Ε͹0,ʂ 6MUJNBUF"EEPOTGPS(VUFOCFSH 1PXFSGVM(VUFOCFSH#MPDLTBOE5FNQMBUFTr(IPTU,JU

-B[Z#MPDLTr(VUFOCFSH#MPDLT$POTUSVDUPS ΧελϜϒϩοΫΛͭ͘Δ ϓϩάϥϛϯάͳ͠ͰΧελϜϒϩοΫΛ࡞੒ ௨ৗͷϒϩοΫͷΑ͏ͳݟͨ໨Ͱ͸ͳ͍΋ͷͷ  ϊϯϓϩάϥϚʔʹ͸خ͍͠  ʢΧελϜϑΟʔϧυΈ͍ͨͳೖྗํ๏ʣ

࣮ࡍͷӡ༻ͷ࣮ྫ

͍͍΋ͷϚΨδϯ΢Σϒ ΤσΟλ؅ཧɾӡ༻͍͍͍ͤͯͨͩͯ͞ΔαΠτ w ςʔϚ͸ࢲ͕࡞͍ͬͯͳ͍ w Ͱ΋ΤσΟλ͚ͩ͸  ࢲʹ೚ͤͯʂͱ͍͏͜ͱͰ  ӡ༻͍ͯ͠·͢ w هࣄ͸ϥΠλʔ͞Μࣗ͝਎ʹ 
ॻ͍͍ͯͨͩ͘Α͏௅ઓத

ϒϩοΫ͕๛෋͗͢Δ໰୊ w ͨ͘͞ΜͷϒϩοΫ͕͋Δ͔Βͦ͜ɺ  νʔϜ಺Ͱදݱํ๏ΛܾΊΔ w ࢖ͬͯ΋Β͍΍͍͢഑ྀ  ۩ମతʹ͸࠶ར༻ϒϩοΫΛ׆༻ w ͋Β͔͡ΊܾΊ͓͍ͯͨදݱํ๏Λ  ࠶ར༻ϒϩοΫʹొ࿥͓͖ͯ͠ 
جຊ͸ͦΕ͔͠࢖Θͳ͍ w Ή΍Έʹදݱํ๏Λ૿΍ͣ͞ʹ  ݟ΍͍͢αΠτΛҡ࣋Ͱ͖Δ w ϒϩοΫϚελʔ͕νʔϜͷ  ҙݟΛฉ͖৽͍͠දݱํ๏Λ௥Ճ͢Δ

࢖͍ํ͕೉͍͠৔߹ w ಛఆͷϒϩοΫͷ࢖͍ํ͕Θ͔Βͳ͍৔߹  ࣭໰͍͍ͨͩͨΒ͙͢ʹ  ΩϟϓνϟΛࡱͬͯνϟοτͰઆ໌ɺ  ͦͷޙ%SPQCPY΁ೖΕͯڞ༗ w εϓϨουγʔτʹ  ؆қϚχϡΞϧΛ࡞੒ w
ϚχϡΞϧʹ͸Ωϟϓνϟ΁ͷ  ϦϯΫ΋ೖΕΔͱจࣈ͚ͩͰ͸  Θ͔ΓͮΒ͍ͱ͜Ζ΋Θ͔Γ΍͍͢ w ಈըϚχϡΞϧ΋࡞੒༧ఆ ࣮ࡍͷΩϟϓνϟ

࠷ޙʹ ϒϩοΫΤσΟλ͸(VUFOCFSHͷϓϩδΣΫτͷҰ෦Ͱ͢ɻ  (VUFOCFSHϓϥάΠϯΛೖΕΔͱͻͱ଍ૣ͘৽ػೳΛࢼ͢͜ͱ͕Ͱ͖·͢ɻ  ·ͨɺԼهͷϖʔδͰ৘ใΛ௥͏͜ͱ͕Ͱ͖·͢ɻ IUUQTNBLFXPSEQSFTTPSHDPSFUBHHVUFOCFSH ৽͍͠ػೳͷ6*ʹ͍ͭͯٞ࿦ͷࢀՃΛื͍ͬͯͨΓ͢ΔͷͰɺ  ڵຯͷ͋Δํ͸ͥͻࢀՃͯ͠Έ͍ͯͩ͘͞ʂ (VUFOCFSHͷ(JU)VC͸ͪ͜Β IUUQTHJUIVCDPN8PSE1SFTTHVUFOCFSH

࠷ޙʹ ࢖ͬͨ͜ͱͳ͔ͬͨํ͸ ͥͻ໌೔͔ΒͲ͏ͧʂ

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ !LPLPOB@TBO

WordCamp Osaka 2019 ブロックエディタで誰でもカンタンに 運用しやすいサイト...

WordCamp Osaka 2019 ブロックエディタで誰でもカンタンに 運用しやすいサイトを作ろう！

More Decks by akari-doi

Other Decks in Business

Featured

Transcript

WordCamp Osaka 2019 ブロックエディタで誰でもカンタンに運用しやすいサイト...

WordCamp Osaka 2019 ブロックエディタで誰でもカンタンに運用しやすいサイトを作ろう！