前回WPZoomUPでおはなししたことのリライト版ですしおすし。
͜ͷҰͰʹ͍ͭͨ❝ϚτϞ❞ͳWordPressςʔϚͷ࡞ΓํChiaki Okamoto
View Slide
ProfileChiilogԬຊ ઍळChiilogԬຊ ઍळ
δϧ - ͏ΔΘ͠ͷ͔͍͓࢞͜͠͞Μ
Ϩʔφ - ͝Μ͍͖ͩ͢େ૽͗ͬࢠ
ࢲͷεΩϧηοτ• جຊతʹϚʔΫΞοϓܥ• HTMLɺCSSɺ͋ͱjQueryʢJSΉ͍ͣʣ• PHPWordPressςʔϚͰΑ͘ݟΔײ͡ͷ͔ͭ͠Θ͔Βͳ͍ʂ• whileͱ͔foreachͱ͔ɺجຊతͳؔͱ͔…• ࠷ۙnamespaceΛཧղͨ͠ʂ• ϖΞϓϩͯ͠ΒͬͨΒίʔυ͖Ε͍ʹͳΔ
WordPressςʔϚͭͬͯ͘Δਓʂ
ʮͭ͘ΕΔʯͷج४ͱਖ਼ΫΦϦςΟΒΒ͡ΌΜʁ
WordPressςʔϚͱฏͨ͘ݴ͑σβΠϯςϯϓϨʔτ
Ͱ͖ͯͨΓલͷ͜ͱ• λΠτϧຊจ͕ςʔϚΛม͖͑ͯͪΜͱݟΕΔ͜ͱ• ςʔϚΛม͑ͯϝχϡʔ͕มΘΒͳ͍͜ͱ• ςʔϚΛม͑ͯղੳλά͕ૠೖ͞Ε͍ͯΔ͜ͱ
ςʔϚΛม͑ͨΒ○○͕ಈ͔ͳ͘ͳͬͨʂ֎
Ͳ͏͢Δʁ
σϑΥϧτςʔϚʹͯ͠ಈ͘Α͏ʹͭ͘Δʂ
֎؍ͱίϯςϯπ͖ͬͪΓ͓ͤͯ͘͞https://wordpress.tv/2017/10/04/hiroshi-urabe-hiromu-hasegawa-%e3%81%9d%e3%81%ae%e8%a8%ad%e8%a8%88%e5%a4%a7%e4%b8%88%e5%a4%ab%ef%bc%9f%e7%84%a1%e7%90%86%e3%81%ae%e3%81%aa%e3%81%84wordpress%e3%81%ae%eσβΠϯ
ͦΕ͕ҙࣝͰ͖ͳ͍ͱ͜͏ͳΔ• ϦχϡʔΞϧ͕େมͮ͠Β͘ͳΔʹςʔϚͷվम͕େมʹͳΔʹݟੵΓͶ্͕Δ• ςʔϚϑΝΠϧͷͲͷϑΝΠϧʹԿΛॻ͍ͯ͋Δͷ͔Λݕূ͢Δख͕ؒ૿͑Δ• ͨͱ͑ɺφϏήʔγϣϯϝχϡʔΛςʔϚଆʹॻ͍͍ͯͨ߹ɺheader.phpʹॻ͍ͯ͋Δͷ͔ɺͦΕͱϑΝΠϧΛ͚ͯnavigation.phpͳͲʹॻ͍͍ͯΔͷ͔ͱ͔୳͞ͳ͍ͱ͍͚ͳ͍ʂ
”ςʔϚ࡞”ͷج४Ͱࢲ͕ʹ͚ͭͨ͜ͱ
લఏ
ϒϩοΫΤσΟλʔͱྑ͘͢Δݱঢ়ɺWordPressͷΤσΟλʔϒϩοΫΤσΟλʔͰ͢ɻଟɺ͜ͷઌΫϥγοΫΤσΟλʔʹΔ͜ͱͳ͍ͱࢥ͏ʢଟͶʂଟʂʣͷͰɺͦΖͦΖ͖߹͍·͠ΐ͏ɻ5.3ͰάϧʔϓϒϩοΫ͕Ճ͞ΕͨΓɺΠϯφʔϒϩοΫʹελΠϧՃͰ͖ͨΓͱɺ͔ͳΓ͍উख͕Α͘ͳΓ·ͨ͠Αʂ
https://wptavern.com/gutenberg-one-year-later
ϒϩοΫΤσΟλʔͷ͍͍ͱ͜Ζ• ଟͷϒϩοΫ͔Β͔ͳΓࣗ༝ͳϨΠΞτͰϖʔδΛ࡞Δ͜ͱ͕Ͱ͖Δ• the_content() ͚ͩͰίϯςϯπ͕݁͢Δ• ͭ·ΓɺେྔͷΧελϜϑΟʔϧυΛ࡞ͬͯςϯϓϨʔτΛͭ͘ΔΑ͏ͳ͜ͱΛ͠ͳͯ͘Α͘ͳΔͷͰ͢ʂ
ςʔϚϋϯυϒοΫΛಡΉ• https://developer.wordpress.org/themes/• ςʔϚΛ࡞ΔͨΊͷجຊཏ͞Ε͍ͯΔ• Google༁ͰेಡΊΔ• ςʔϚ࡞͢ΔͳΒ100ճಡ͏ʢby toro_unitʣ
қɿॳڃ
ػೳͱ֎؍͖ͪΜͱ͢ΔςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ͞ΕΔͱࠔΔͷςʔϚʹೖΕͳ͍• ྫ͑γϣʔτίʔυɺΧελϜϒϩοΫɻGoogleAnalyticsͳͲͷղੳλάʂ• Ҋ͔݅ͩΒͬͯ͑ͯςʔϚʹೖΕͳ͍ɻͷͪͷͪҾ͖ܧ͍ͩ୭͔ʢ͔ࣗʂʣ͕ࠔΓ·͢ɻ
ͪͳΈʹɺػೳͬͯ…ʁΘ͔Γ͍͢ͷͩͱղੳλάɺSEO༻ͷλάɺSNSͷγΣΞϘλϯྨɺγϣʔτίʔυɺΧελϜߘλΠϓɺΧελϜλΫιϊϛʔɺΧελϜϒϩοΫɺϑΥʔϜ͜ΕΒશ෦ϓϥάΠϯԽ͠·͠ΐ͏
దͳλάΛ͏ྫ͑ɺϝχϡʔܥͷλάςϯϓϨʔτʹͨॻ͖͞Ε͍ͯΔͷΛΑ͘ݟ͔͚·͢ʢࢲͬͨ͜ͱ͋ΔΑʂʣ͕ɺΧελϜϝχϡʔΛͬͨ΄͏͕ΊͪΌͪ͘ΌָͰ͢ɻੲΈ͍ͨʹϝχϡʔ͕ը૾ͱ͔ͦ͏͍͏͜ͱগͳ͘ͳ͖ͬͯͨ͠ɾɾɾʢͦͦը૾ϓϥάΠϯ͍ΕͨΒ͑ΔΑ͏ʹͳΔΑʣ
దͳλάʁ• GoogleઌੜΈΜͳͷຯํɻ• ʮߘΞʔΧΠϒͷλΠτϧग़͍ͨ͠ͳʯͱࢥͬͨΒɺarchive-post_type.php ʹߘλΠϓ໊Λϕλॻ͖͢ΔલʹɺGoogleઌੜͰʮWordPress archive titleʯͱ͔ௐͯΈΑ͏େࣄͳͷʮݕࡧྗʯʂ
దͳςϯϓϨʔτΛ͏τοϓϖʔδɺindex.php ʹͯ͠·ͤΜΑͶʁͪΌΜͱςʔϚϋϯυϒοΫʹςϯϓϨʔτ֊ʹ͍ͭͯهࡌ͕͋Γ·͢ɻ४͡·͠ΐ͏ɻ
https://developer.wordpress.org/themes/basics/template-hierarchy/
దͳςϯϓϨʔτΛ͏ΧςΰϦʔͱλά͕ಉ͡ͳΒarchive.php Λɺҧ͏ͳΒͪΌΜͱcategory.php tag.php ͳͲΛ४උ͠·͢ɻ• if จͰذͤͯ͞ɺ໌ɺ1ϲ݄ޙɺ3ϲ݄ޙɺޙ(ry ͷ͕ࣗΘ͔Γ·͔͢ʁࢲ͍֮͑ͯΒΕ·ͤΜɻࠓޙࣗҎ֎ͷਓ͕৮ΔՄೳੑेߟ͑ΒΕΔͷͰɺςϯϓϨʔτࡉ͔͚ͨ͘΄͏͕ྑ͍ͱߟ͑·͢ɻ
қɿதڃ
ΤσΟλελΠϧΛ࡞ΔΫϥγοΫΤσΟλʔͷͱ͖ΑΓॏཁͰ͢ʂʂΤσΟλ্Ͱݟ͑ΔͷʹαΠτͰݟ͑Δͷ͘Β͍ͷؾ࣋ͪͰ͔ͬ͠Γͭ͘Γ·͠ΐ͏ɻʢਖ਼ॳڃ͔ͱࢥ͏͚ͲɺCSSͷઃܭ͕ೖΔͷͰதڃʹʣ
// ΤσΟλʔελΠϧΛՃadd_editor_style();// σϑΥϧτͷϒϩοΫͷCSS͕ϑϩϯτͰద༻͞ΕΔadd_theme_support( 'wp-block-styles' );// ϒϩοΫΤσΟλʔʹCSSΛ͋ͯΔfunction themename_block_editor_styles {wp_enqueue_style( ‘style-name’, get_theme_file_uri( '/path/to/editor-style-block.css' ), array(), wp_get_theme()->get( 'Version' ), 'all' );}add_action( 'enqueue_block_editor_assets','themename_block_editor_styles', 1, 1 );ΤσΟλελΠϧͷಡΈࠐ·ͤํhttps://developer.wordpress.org/block-editor/developers/themes/theme-support/
ϒϩοΫ୯ҐͰCSSίϯϙʔωϯτઃܭΛ͢ΔϒϩοΫΤσΟλʔʹͳͬͯॊೈ͕ʢΫϥγοΫΤσΟλʔͷࠒΑΓʣ্͕ͬͨͷͰɺϒϩοΫ୯ҐͰCSSΛॻ͔ͳ͍ͱ่ΕͷݪҼʹͳΓ·͢ɻ
ίϯϙʔωϯτ୯ҐʁϘλϯϒϩοΫΛྫʹ͠·͢ɻ Ϙλϯ
ίϯϙʔωϯτ୯ҐʁCSS͜͏ॻ͖·͢ɻ.wp-block-button {}.wp-block-button__link {}͜͏͍͏ॻ͖ํ͠ͳ͍΄͏͕͍͍ʂ.entry-content .wp-block-button {}.wp-block-button {} .wp-block-button__link {}.entry-content .wp-block-button {}
ίϯϙʔωϯτʹ͢ΔϝϦοτίϯϙʔωϯτઃܭͰCSSΛॻ͘Α͏ʹ͢Δͱɺ࠶ར༻ੑ͕ߴ·ΔͷͰeditor-style.css ָ͕ʹ࡞ΕΔʂ• .entry-content ཧը໘Ͱग़ͯͳ͍͔Βɺeditor-style.cssͰಡΈࠐ·ͤͯελΠϧ͕ͨΒͳ͘ͳͬͯ͠·͏ʂ
ϒϩοΫʹελΠϧΛՃ͢Δ• ϒϩοΫʹΫϥεͷՃͱ͔ͰͳΜͱ͔Ͱ͖Δέʔεׂͱଟ͍Ͱ͢ɻ• wp.blocks.registerBlockStyleͰελΠϧͷՃ؆୯ʹͰ͖·͢ʂhttps://developer.wordpress.org/block-editor/developers/filters/block-filters/
͜͏͍͏ͷʂˠ
қɿ্ڃ
ΧελϜϒϩοΫΛ࡞Δʢ࡞ͬͯΒ͏ʣ• طଘϒϩοΫΛΈ߹Θ࣮ͤͯݱͰ͖ͳ͍ͱ͔ɺػೳͷ։ൃ͕ඞཁͩͬͨΒ໎ΘͣΧελϜϒϩοΫΛ࡞Γ·͠ΐ͏ɻ• ͔ͨ͠͠ΒࣅͨػೳΛ୭͔͕࡞͍ͬͯΔ͔͠Εͳ͍͔ΒɺϓϥάΠϯ୳ͯ͠Έ·͠ΐ͏ɻʢAdvanced Posts Blocksਆʂʣʮ؆୯ͩΑʂʯͬͯݴΘΕΔ͚Ͳɺ͘͢ͳ͘ͱReactͷ͕͍ࣝΔ͔Β্ڃ
νϡʔτϦΞϧΛͬͯΈΔΧελϜϒϩοΫΛΖ͏ʂͱෲΛܾΊͨΒɺͱΓ͋͑ͣνϡʔτϦΞϧ͔ΒͬͯΈΔͷΛΦεεϝ͠·͢ɻhttps://developer.wordpress.org/block-editor/tutorials/block-tutorial/
ϒϩοΫΤσΟλʔͷొͰίϯςϯπͷࣗ༝ര্͕Γ
ͰɺͱͱͰ͖ͯͨΑͶ
ΧελϜϑΟʔϧυͬͯͭ
҆қʹΧελϜϑΟʔϧυΘͳ͍͔ͤͬ͘ͷϒϩοΫΤσΟλʔͰ͢ɻ׆༻͠·͠ΐ͏ɻΧελϜϑΟʔϧυલఏͰΛਐΊͳ͍͜ͱɻΧελϚΠβʔͰͰ͖ͳ͍͔ɺΧελϜϒϩοΫΛ࡞Δඞཁ͕͋Δ͔ɺͪΌΜͱ੍࡞લʹ٧Ί·͠ΐ͏ɻͪ͜͜ΌΜͱΒͳ͍ͱҊ݅ؒҧ͍ͳ͘೩͑·͢ʢܦݧஊʣ※ WooCommerceݕࡧۦ͠ͳ͍ͱ͍͚ͳ͍Α͏ͳಛघͳҊ݅আ͘
͍ॴΑ͘ߟ͑ͯʂجຊతʹίϯςϯπΤσΟλʔͰ݁ͤ͞·͢ɻʢ΄΅ΘΕͯͳ͍͚ͲɺߘϑΥʔϚοτͱ͍͏σϑΥϧτͷػೳ͋Γ·͢ʣσβΠϯ্ͰͲ͏ͯ͠ΧελϜϑΟʔϧυʹ͠ͳ͍ͱೖྗ߲Λ࡞Εͳ͍ɺͱ͍͏ͱ͖ͦͦϫΠϠʔͷ࣌Ͱؒҧͬͯ·͢ɻ
͡Ό͋ɺͲ͏͍͏ͱ͖ʹΧελϜϑΟʔϧυΛ͏ͷʁجຊతʹɺϨΠΞτมߋ͢ΔͨΊͷϑϥάʹ͍·͢ɻͨͱ͑ɺ௨ৗ2ΧϥϜͷϨΠΞτ͚ͩͲɺϑϥάΛ͚ͭͨߘ͚ͩ1ΧϥϜʹ͢Δʂͱ͔ɺPRϚʔΫΛ͚ͭΔʂͱ͔…ΧελϜϑΟʔϧυʮϝλσʔλʯʂίϯςϯπೖΕΔͱ͜ΖͰͳ͍Αʂ
େࣄͳ͜ͱͳͷͰ͏Ұ
ίϯςϯπͷͨΊʹΧελϜϑΟʔϧυ͍͚ͬͯͳ͍ΑʂݟੵΓ͕ͶΔݪҼ…
ϓϥάΠϯ൛Gutenberg
ϓϥάΠϯ͍ΘΏΔ։ൃ൛ʂ։ൃ൛ͳͷͰຊ൪ڥʹೖΕΔͷΦεεϝ͠·ͤΜ͕ɺࣗͷςετڥͰ৮ͬͯΈΔͷΦεεϝͰ͢ɻ͜ͷઌʹࡌ͞ΕΔ͔͠Εͳ͍ػೳ͕͍ͪૣ͘ࢼͤ·͢ʂ
·ͱΊ
ຊʹWordPressͬͯ؆୯ʁਖ਼͘͠ͳ͍ʁੵΈ্͕Δ༷ʹຐվɺ;͍ʹ߱ͬͯ͘Δ༷มߋ…
WordPress ≠ ؆୯ͦΖͦΖೝࣝΛվΊΑ͏
Α͍ςʔϚ࡞ϥΠϑΛůŢ