#26 WP ZoomUP でお話した内容です。
「WordPressテーマ、つくれますか？」
WordPressςʔϚͷ࡞Γํ 2019ࢲͷϕετϓϥΫςΟεChiaki Okamoto
View Slide
ProfileChiilogԬຊ ઍळ
WordPressςʔϚͭ͘Ε·͔͢ʁ
ͦͦWordPressςʔϚͬͯʁ
ฏͨ͘ݴ͑σβΠϯςϯϓϨʔτ
ͱ͍͏͜ͱʁλΠτϧຊจͪΖΜɺղੳλάϝχϡʔͳͲͳͲͳͲ…ςʔϚΛม͖͑ͯͪΜͱදࣔͰ͖ͳ͍ͱͩΊͰ͢ΑͶʁ
ͳΜͰμϝͳΜ• ϦχϡʔΞϧ͕େมͮ͠Β͘ͳΔʹςʔϚͷվम͕େมʹͳΔ• ςʔϚϑΝΠϧͷͲͷϑΝΠϧʹԿΛॻ͍ͯ͋Δͷ͔Λݕূ͢Δख͕ؒ૿͑Δ• ྫΛ্͛Δͱղੳλάheader.php ʹॻ͍ͯΔͷ͔ɺfunctions.phpʹॻ͍ͯΔͷ͔ɺfooter.php ʹ͋Δͷ͔…ͳͲͳͲ
ʮ֎؍ʯͱʮίϯςϯπʯͤ͞·͠ΐ͏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%e8%a8%ad%e8%a8%88%e3%81%a8/
֎؍Θ͔Δɺίϯςϯπͬͯʁ• Θ͔Γ͍͢ͷͰݴ͑ɺϩΰɺຊจɺλΠτϧ͔ΒɺϝχϡʔɻOGPͳΜ͔ͦ͏Ͱ͢Ͷɻ• ʮςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ͞ΕΔͱࠔΔͷʯେମίϯςϯπͱࢥͬͯOK
ίϯςϯπΛςʔϚʹؚΊΔͱ…
͍Ζ͍ΖͱࠔΓ·͢ʢͬ͘͟Γʣ• ςʔϚΛ༗ޮԽ͍ͯͨ͠ͱ͖ʹೖྗͰ͖͍߲͕ͯͨফ͑ΔɻαΠτ্ͰݟΕͳ͘ͳΔɻʢओʹΧελϜϑΟʔϧυʣ• ղੳͰ͖ͳ͘ͳΔʢGoogle AnalyticsͳͲʣ• ϝχϡʔ͕Ҿ͖ܧ͛ͳ͍
͜͜·ͰΛ;·͑ͯ
͜Μͳ͜ͱͯ͠·ͤΜ͔ʁ• ςϯϓϨʔτଆʹϖʔδͷ༰Λॻ͘• page-about.php Λ࡞ͬͯίϯςϯπͷ༰Λॻ͘ͱ͔…front-page.phpͷதΛϕλॻ͖ͱ͔…• ػೳΛςʔϚʹؚΊΔ• ฤूՄೳྖҬ͕ͳ͍ or গͳ͍
ػೳͬͯ…ʁΘ͔Γ͍͢ͷͩͱղੳλάɺSEO༻ͷλάɺSNSͷγΣΞϘλϯྨɺγϣʔτίʔυɺΧελϜߘλΠϓɺΧελϜλΫιϊϛʔɺΧελϜϒϩοΫɺϑΥʔϜ
WordPress Theme Handbook• https://developer.wordpress.org/themes/• Google༁ͰेಡΊΔ• ςʔϚ࡞͢ΔͳΒ100ճಡ͏
WordPress؆୯ʁ
ຊWordPressͬͯ͘͠ͳ͍ʁ• ༷Λ͔ͬ͠Γ٧ΊΔඞཁ͕͋Δ• WordPressҎ֎બࢶʹ͍ΕΔ͜ͱΛߟ͑Δ• ϒϩοΫΤσΟλʔΛ͖ͪΜͱཧղ͢Δ• σϑΥϧτʹԿͷϒϩοΫ͕͋Δͷ͔ΛѲ͓ͯ͘͜͠ͱɺΧελϜϒϩοΫΛ࡞Δඞཁ͕͋Δͷ͔Ͳ͏͔ݕ౼• σβΠϯɺCSSίϯϙʔωϯτ͝ͱʹελΠϧ͢Δ͜ͱΛҙࣝ͢Δ
ࢲ͕WordPressςʔϚΛ࡞Δͱ͖ʹؾΛ͍ͬͯΔϙΠϯτ
ػೳͱ֎؍͖ͪΜͱ͢Δ• ͍ΘΏΔϓϥάΠϯςϦτϦʔΛ৵͞ͳ͍• ςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ͞ΕΔͱࠔΔͷςʔϚʹೖΕͳ͍• ྫ͑γϣʔτίʔυɺΧελϜϒϩοΫɻGoogleAnalyticsͳͲͷղੳλάʂ• Ҋ͔݅ͩΒʢorgʹొ͠ͳ͍ʣ͔Βͬͯ͑ͳ͍ɻͷͪͷͪҾ͖ܧ͍ͩ୭͔ʢ͔ࣗ͠Εͳ͍ʂʣ͕ࠔΓ·͢ɻ
దͳλάΛ͏• ΧςΰϦʔϖʔδͷϦϯΫʹ esc_url( home_url( ‘/’ ) ); ?>/hoge/fuga Έ͍ͨͳॻ͖ํΛେมΑ͘ݟ͔͚Δ…• get_category_link() ͱ͔ get_term_link() ͱ͔͋Γ·͢ɻCodexΛݟͯɺదͳϦϯΫ͕ͳ͍͔ௐ·͠ΐ͏ɻʢຖճௐͯΔʣ
దͳλάΛ͏• ϝχϡʔܥͷλάςϯϓϨʔτʹͨॻ͖͞Ε͍ͯΔͷΛΊͪΌͪ͘ΌΑ͘ݟ͔͚·͕͢ɺΧελϜϝχϡʔΛͬͨ΄͏͕ΊͪΌͪ͘ΌָͰ͢ɻ• ੲΈ͍ͨʹϝχϡʔ͕ը૾ͱ͔ͦ͏͍͏͜ͱগͳ͘ͳ͖ͬͯͨ͠ɾɾɾʢͦͦը૾ϓϥάΠϯ͍ΕͨΒ͑ΔΑ͏ʹͳΔΑʣ
దͳλάʁ• 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 ͷ͕ࣗΘ͔Γ·͔͢ʁࢲ͍֮͑ͯΒΕ·ͤΜɻ ࠓޙࣗҎ֎ͷਓ͕৮ΔՄೳੑेߟ͑ΒΕΔͷͰɺςϯϓϨʔτࡉ͔͚ͨ͘΄͏͕ྑ͍ͱߟ͑·͢ɻ
ϒϩοΫʹελΠϧΛՃ͢Δ• ϒϩοΫʹΫϥεͷՃͱ͔ͰͳΜͱ͔Ͱ͖Δέʔεׂͱଟ͍Ͱ͢ɻ• wp.blocks.registerBlockStyleͰελΠϧͷՃ؆୯ʹͰ͖·͢ʂ https://developer.wordpress.org/block-editor/developers/filters/block-filters/
ΧελϜϒϩοΫΛ࡞Δʢ࡞ͬͯΒ͏ʣ• طଘϒϩοΫΛΈ߹Θ࣮ͤͯݱͰ͖ͳ͍ͱ͔ɺػೳͷ։ൃ͕ඞཁͩͬͨΒ໎ΘͣΧελϜϒϩοΫΛ࡞Γ·͠ΐ͏ɻ• ͔ͨ͠͠ΒࣅͨػೳΛ୭͔͕࡞͍ͬͯΔ͔͠Εͳ͍͔ΒɺϓϥάΠϯ୳ͯ͠Έ·͠ΐ͏ɻʢAdvanced Posts Blocksਆʂʣ
ΤσΟλελΠϧΛ࡞Δ• ΫϥγοΫΤσΟλʔͷͱ͖ΑΓͬͱॏཁͰ͢ʂʂ ΤσΟλ্Ͱݟ͑ΔͷʹαΠτͰݟ͑Δͷ͘Β͍ͷؾ࣋ͪͰ͔ͬ͠Γͭ͘Γ·͠ΐ͏ɻϒϩοΫͷCSSΛeditor-style.cssʹಡΈࠐ·ͤΔ͚ͩͰ͢ΑɻͶɺ؆୯Ͱ͠ΐ͏ʁ
ϒϩοΫ୯ҐͰCSSίϯϙʔωϯτઃܭΛ͢Δ• ϒϩοΫΤσΟλʔʹͳͬͯॊೈ͕ʢΫϥγοΫΤσΟλʔͷࠒΑΓʣ্͕ͬͨͷͰɺϒϩοΫ୯ҐͰCSSΛॻ͔ͳ͍ͱ่ΕͷݪҼʹͳΓ·͢ɻ
ίϯϙʔωϯτ୯ҐʁϘλϯϒϩοΫΛྫʹ͠·͢ɻ Ϙλϯ
ίϯϙʔωϯτ୯ҐʁCSS͜͏ॻ͖·͢ɻ.wp-block-button {} .wp-block-button__link {}͜͏͍͏ॻ͖ํ͠ͳ͍΄͏͕͍͍ʂ.entry-content .wp-block-button {}
ίϯϙʔωϯτʹ͢ΔϝϦοτ• ίϯϙʔωϯτઃܭͰCSSΛॻ͘Α͏ʹ͢Δͱɺ࠶ར༻ੑ͕ߴ·ΔͷͰeditor-style.css ָ͕ʹ࡞ΕΔʂ• .entry-content ཧը໘Ͱग़ͯͳ͍͔Βɺeditor-style.cssͰಡΈࠐ·ͤͯελΠϧ͕ͨΒͳ͘ͳͬͯ͠·͏ʂ
ͱ͜ΖͰ…ΧελϜϑΟʔϧυʁ
҆қʹΧελϜϑΟʔϧυΘͳ͍͔ͤͬ͘ͷϒϩοΫΤσΟλʔͰ͢ɻ׆༻͠·͠ΐ͏ɻΧελϜϑΟʔϧυલఏͰΛਐΊͳ͍͜ͱɻΧελϚΠβʔͰͰ͖ͳ͍͔ɺΧελϜϒϩοΫΛ࡞Δඞཁ͕͋Δ͔ɺͪΌΜͱ੍࡞લʹ٧Ί·͠ΐ͏ɻ ͪ͜͜ΌΜͱΒͳ͍ͱ·͡Ͱ٧Ή͠ࢮ͵ͱ৺ಘΑɻ
҆қʹΧελϜϑΟʔϧυΘͳ͍جຊతʹίϯςϯπΤσΟλʔͰ݁ͤ͞·͢ɻʢ΄΅ΘΕͯͳ͍͚ͲɺߘϑΥʔϚοτσϑΥϧτͷػೳ͋Δ͠ʣ σβΠϯ্ͰͲ͏ͯ͠ΧελϜϑΟʔϧυʹ͠ͳ͍ͱೖྗ߲Λ࡞Εͳ͍ɺͱ͍͏ͱ͖ͦͦϫΠϠʔͷ࣌Ͱؒҧͬͯ·͢ɻ
͡Ό͋ɺͲ͏͍͏ͱ͖ʹΧελϜϑΟʔϧυΛ͏ͷʁجຊతʹɺϨΠΞτมߋ͢ΔͨΊͷϑϥάʹ͍·͢ɻͨͱ͑ɺ௨ৗ2ΧϥϜͷϨΠΞτ͚ͩͲɺϑϥάΛ͚ͭͨߘ͚ͩ1ΧϥϜʹ͢Δʂͱ͔ɺPRϚʔΫΛ͚ͭΔʂͱ͔…
େࣄͳ͜ͱͳͷͰ͏Ұ
ίϯςϯπͷͨΊʹΧελϜϑΟʔϧυ͍͚ͬͯͳ͍ʂ
·ͱΊ
ࠓ࢈ۀ• ػೳͱ֎؍͖ͪΜͱͯ͠ɺλάͪΌΜͱWordPress͕ఏڙ͍ͯ͠ΔͷΛ׆༻͠Α͏• ΧελϜϑΟʔϧυσβΠϯίϯτϩʔϧͷͨΊʹ͓͏• ઃܭϚδେࣄɻWordPressҊ݅ࣄͷ7ׂ༷ࡦఆͱࢥ͓͏
ຊʹWordPressͬͯ؆୯ʁ
୯Ձͱݟ߹ͬͯ·͔͢ʁ
Α͍ςʔϚ࡞ϥΠϑΛůŢ
chiilog
yoshikieguchi
mii3king
cyberagentdevelopers
doradora09
kohbis
nozomiito
satoshirobatofujimoto
iwamot
emgsilva
dzeyelid
ymty
nnstt1
jensimmons
addyosmani
zakiwarfel
3n
csswizardry
samanthasiow
dotmariusz
jonrohan
brianwarren
kneath
reverentgeek
dougneiner