この一年で身についた“マトモ”な WordPressテーマの作り方

by Chiaki Okamoto

Slide 1

Slide 1 text

͜ͷҰ೥Ͱ਎ʹ͍ͭͨ ❝ϚτϞ❞ͳ WordPressςʔϚͷ࡞Γํ Chiaki Okamoto

Slide 2

Slide 2 text

Proﬁle Chiilog Ԭຊ ઍळ Chiilog Ԭຊ ઍळ

Slide 3

Slide 3 text

δϧ - ͏ΔΘ͠ͷ͔͍͓࢞͜͠͞Μ

Slide 4

Slide 4 text

Ϩʔφ - ͝͸Μ͍͖ͩ͢େ૽͗຤ͬࢠ

Slide 5

Slide 5 text

ࢲͷεΩϧηοτ • جຊతʹϚʔΫΞοϓܥ • HTMLɺCSSɺ͋ͱjQueryʢJSΉ͍ͣʣ • PHP͸WordPressςʔϚͰΑ͘ݟΔײ͡ͷ΍ ͔ͭ͠Θ͔Βͳ͍ʂ • whileͱ͔foreachͱ͔ɺجຊతͳؔ਺ͱ͔… • ࠷ۙnamespaceΛཧղͨ͠ʂ • ϖΞϓϩͯ͠΋ΒͬͨΒίʔυ͖Ε͍ʹͳΔ

Slide 6

Slide 6 text

WordPressςʔϚ ͭͬͯ͘Δਓʂ

Slide 7

Slide 7 text

ʮͭ͘ΕΔʯͷج४ͱ͸ ਖ਼௚ΫΦϦςΟ͹Β͹Β͡ΌΜʁ

Slide 8

Slide 8 text

WordPressςʔϚͱ͸ ฏͨ͘ݴ͑͹ σβΠϯςϯϓϨʔτ

Slide 9

Slide 9 text

Ͱ͖ͯ౰ͨΓલͷ͜ͱ • λΠτϧ΍ຊจ͕ςʔϚΛม͑ͯ΋͖ͪΜͱ ݟΕΔ͜ͱ • ςʔϚΛม͑ͯ΋ϝχϡʔ͕มΘΒͳ͍͜ͱ • ςʔϚΛม͑ͯ΋ղੳλά͕ૠೖ͞Ε͍ͯΔ ͜ͱ

Slide 10

Slide 10 text

ςʔϚΛม͑ͨΒ ○○͕ಈ͔ͳ͘ͳͬͨʂ͸ ࿦֎

Slide 11

Slide 11 text

Ͳ͏͢Δʁ

Slide 12

Slide 12 text

σϑΥϧτςʔϚʹ໭ͯ͠΋ ಈ͘Α͏ʹͭ͘Δʂ

Slide 13

Slide 13 text

֎؍ͱίϯςϯπ͸ ͖ͬͪΓ෼཭͓ͤͯ͘͞ 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 σβΠϯ

Slide 14

Slide 14 text

ͦΕ͕ҙࣝͰ͖ͳ͍ͱ͜͏ͳΔ • ϦχϡʔΞϧ͕େมͮ͠Β͘ͳΔʹςʔϚͷ վम͕େมʹͳΔʹݟੵ΋Γ௓Ͷ্͕Δ • ςʔϚϑΝΠϧ಺ͷͲͷϑΝΠϧʹԿΛॻ͍ ͯ͋Δͷ͔Λݕূ͢Δख͕ؒ૿͑Δ • ͨͱ͑͹ɺφϏήʔγϣϯϝχϡʔΛςʔϚଆʹॻ͍͍ͯͨ৔߹ɺ header.phpʹॻ͍ͯ͋Δͷ͔ɺͦΕͱ΋ϑΝΠϧΛ෼͚ͯ navigation.phpͳͲʹॻ͍͍ͯΔͷ͔ͱ͔୳͞ͳ͍ͱ͍͚ͳ͍ʂ

Slide 15

Slide 15 text

”ςʔϚ࡞੒”ͷج४Ͱࢲ͕਎ʹ͚ͭͨ͜ͱ

Slide 16

Slide 16 text

લఏ

Slide 17

Slide 17 text

ϒϩοΫΤσΟλʔͱ ஥ྑ͘͢Δ ݱঢ়ɺWordPressͷΤσΟλʔ͸ϒϩοΫΤσΟ λʔͰ͢ɻଟ෼ɺ͜ͷઌΫϥγοΫΤσΟλʔʹ ໭Δ͜ͱ͸ͳ͍ͱࢥ͏ʢଟ෼Ͷʂଟ෼ʂʣͷͰɺ ͦΖͦΖ޲͖߹͍·͠ΐ͏ɻ 5.3ͰάϧʔϓϒϩοΫ͕௥Ճ͞ΕͨΓɺΠϯφʔ ϒϩοΫʹελΠϧ௥ՃͰ͖ͨΓͱɺ͔ͳΓ࢖͍ উख͕Α͘ͳΓ·ͨ͠Αʂ

Slide 18

Slide 18 text

https://wptavern.com/gutenberg-one-year-later

Slide 19

Slide 19 text

ϒϩοΫΤσΟλʔͷ͍͍ͱ͜Ζ • ଟ਺ͷϒϩοΫ͔Β͔ͳΓࣗ༝ͳϨΠΞ΢τ ͰϖʔδΛ࡞Δ͜ͱ͕Ͱ͖Δ • the_content() ͚ͩͰίϯςϯπ͕׬݁͢Δ • ͭ·ΓɺେྔͷΧελϜϑΟʔϧυΛ࡞ͬͯςϯϓϨʔτ Λͭ͘ΔΑ͏ͳ͜ͱΛ͠ͳͯ͘Α͘ͳΔͷͰ͢ʂ

Slide 20

Slide 20 text

ςʔϚϋϯυϒοΫΛಡΉ • https://developer.wordpress.org/themes/ • ςʔϚΛ࡞ΔͨΊͷجຊ͸໢ཏ͞Ε͍ͯΔ • Google຋༁Ͱे෼ಡΊΔ • ςʔϚ࡞੒͢ΔͳΒ100ճಡ΋͏ʢby toro_unitʣ

Slide 21

Slide 21 text

೉қ౓ɿॳڃ

Slide 22

Slide 22 text

ػೳͱ֎؍͸͖ͪΜͱ෼཭͢Δ ςʔϚΛແޮԽͨ͠ͱ͖ʹɺҰॹʹແޮԽ͞Ε ΔͱࠔΔ΋ͷ͸ςʔϚʹ͸ೖΕͳ͍ • ྫ͑͹γϣʔτίʔυɺΧελϜϒϩοΫɻGoogle AnalyticsͳͲͷղੳλά΋ʂ • Ҋ͔݅ͩΒͬͯ؁͑ͯςʔϚ಺ʹೖΕͳ͍ɻ ͷͪͷͪҾ͖ܧ͍ͩ୭͔ʢࣗ෼͔΋ʂʣ͕ࠔΓ·͢ɻ

Slide 23

Slide 23 text

ͪͳΈʹɺػೳͬͯ…ʁ Θ͔Γ΍͍͢΋ͷͩͱ ղੳλάɺSEO༻ͷλάɺSNSͷγΣΞϘλϯ ྨɺγϣʔτίʔυɺΧελϜ౤ߘλΠϓɺΧ ελϜλΫιϊϛʔɺΧελϜϒϩοΫɺϑΥʔ Ϝ ͜ΕΒ͸શ෦ϓϥάΠϯԽ͠·͠ΐ͏

Slide 24

Slide 24 text

ద੾ͳλάΛ࢖͏ ྫ͑͹ɺϝχϡʔܥͷλά͸ςϯϓϨʔτʹ΂ ͨॻ͖͞Ε͍ͯΔͷΛΑ͘ݟ͔͚·͢ʢࢲ΋ ΍ͬͨ͜ͱ͋ΔΑʂʣ͕ɺΧελϜϝχϡʔΛ ࢖ͬͨ΄͏͕ΊͪΌͪ͘ΌָͰ͢ɻ ੲΈ͍ͨʹϝχϡʔ͕ը૾ͱ͔ͦ͏͍͏͜ͱ΋গͳ͘ͳ͖ͬͯ ͨ͠ɾɾɾʢͦ΋ͦ΋ը૾΋ϓϥάΠϯ͍ΕͨΒ࢖͑ΔΑ͏ʹ ͳΔΑʣ

Slide 25

Slide 25 text

ద੾ͳλάʁ • Googleઌੜ͸ΈΜͳͷຯํɻ • ʮ౤ߘΞʔΧΠϒͷλΠτϧग़͍ͨ͠ͳʯͱ ࢥͬͨΒɺarchive-post_type.php ʹ౤ߘλΠ ϓ໊Λϕλॻ͖͢ΔલʹɺGoogleઌੜͰ ʮWordPress archive titleʯͱ͔ௐ΂ͯΈΑ͏ େࣄͳͷ͸ʮݕࡧྗʯʂ

Slide 26

Slide 26 text

ద੾ͳςϯϓϨʔτΛ࢖͏ τοϓϖʔδɺindex.php ʹͯ͠·ͤΜΑͶʁ ͪΌΜͱςʔϚϋϯυϒοΫʹ΋ςϯϓϨʔτ ֊૚ʹ͍ͭͯهࡌ͕͋Γ·͢ɻ४͡·͠ΐ͏ɻ

Slide 27

Slide 27 text

https://developer.wordpress.org/themes/basics/template-hierarchy/

Slide 28

Slide 28 text

ద੾ͳςϯϓϨʔτΛ࢖͏ ΧςΰϦʔͱλά͕ಉ͡ͳΒarchive.php Λɺ ҧ͏ͳΒͪΌΜͱcategory.php ΍ tag.php ͳͲ Λ४උ͠·͢ɻ • if จͰ෼ذͤͯ͞ɺ໌೔ɺ1ϲ݄ޙɺ3ϲ݄ޙɺ൒೥ޙ(ry ͷ ࣗ෼͕Θ͔Γ·͔͢ʁࢲ͸͍֮͑ͯΒΕ·ͤΜɻ ࠓޙࣗ෼Ҏ֎ͷਓ͕৮ΔՄೳੑ΋े෼ߟ͑ΒΕΔͷͰɺς ϯϓϨʔτ͸ࡉ͔͘෼͚ͨ΄͏͕ྑ͍ͱߟ͑·͢ɻ

Slide 29

Slide 29 text

೉қ౓ɿதڃ

Slide 30

Slide 30 text

ΤσΟλελΠϧΛ࡞Δ ΫϥγοΫΤσΟλʔͷͱ͖ΑΓॏཁͰ͢ʂʂ ΤσΟλ্Ͱݟ͑Δ΋ͷʹαΠτͰݟ͑Δ΋ͷ ͘Β͍ͷؾ࣋ͪͰ͔ͬ͠Γͭ͘Γ·͠ΐ͏ɻ ʢਖ਼௚ॳڃ͔ͱࢥ͏͚ͲɺCSSͷઃܭ͕ೖΔͷͰதڃʹʣ

Slide 31

Slide 31 text

// ΤσΟλʔελΠϧΛ௥Ճ 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/

Slide 32

Slide 32 text

ϒϩοΫ୯ҐͰ CSSίϯϙʔωϯτઃܭΛ͢Δ ϒϩοΫΤσΟλʔʹͳͬͯॊೈ౓͕ʢΫϥ γοΫΤσΟλʔͷࠒΑΓʣ্͕ͬͨͷͰɺϒ ϩοΫ୯ҐͰCSSΛॻ͔ͳ͍ͱ่ΕͷݪҼʹͳ Γ·͢ɻ

Slide 33

Slide 33 text

ίϯϙʔωϯτ୯Ґʁ ϘλϯϒϩοΫΛྫʹ͠·͢ɻ

  Ϙλϯ 

Slide 34

Slide 34 text

ίϯϙʔωϯτ୯Ґʁ 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 {}

Slide 35

Slide 35 text

ίϯϙʔωϯτʹ͢ΔϝϦοτ ίϯϙʔωϯτઃܭͰCSSΛॻ͘Α͏ʹ͢Δ ͱɺ࠶ར༻ੑ͕ߴ·ΔͷͰeditor-style.css ָ͕ ʹ࡞ΕΔʂ • .entry-content ͸؅ཧը໘Ͱ͸ग़ͯͳ͍͔Βɺeditor- style.cssͰಡΈࠐ·ͤͯ΋ελΠϧ͕౰ͨΒͳ͘ͳͬͯ͠ ·͏ʂ

Slide 36

Slide 36 text

ϒϩοΫʹελΠϧΛ௥Ճ͢Δ • ϒϩοΫʹΫϥεͷ௥Ճͱ͔ͰͳΜͱ͔Ͱ͖ Δέʔε͸ׂͱଟ͍Ͱ͢ɻ • wp.blocks.registerBlockStyleͰελΠϧͷ௥ Ճ͸؆୯ʹͰ͖·͢ʂ https://developer.wordpress.org/block- editor/developers/ﬁlters/block-ﬁlters/

Slide 37

Slide 37 text

͜͏͍͏ͷʂˠ

Slide 38

Slide 38 text

೉қ౓ɿ্ڃ

Slide 39

Slide 39 text

ΧελϜϒϩοΫΛ࡞Δ ʢ࡞ͬͯ΋Β͏ʣ • طଘϒϩοΫΛ૊Έ߹Θͤͯ΋࣮ݱͰ͖ͳ͍ ͱ͔ɺػೳͷ։ൃ͕ඞཁͩͬͨΒ໎ΘͣΧε λϜϒϩοΫΛ࡞Γ·͠ΐ͏ɻ • ΋͔ͨ͠͠ΒࣅͨػೳΛ୭͔͕࡞͍ͬͯΔ͔ ΋͠Εͳ͍͔ΒɺϓϥάΠϯ΋୳ͯ͠Έ· ͠ΐ͏ɻʢAdvanced Posts Blocks͸ਆʂʣ ʮ؆୯ͩΑʂʯͬͯݴΘΕΔ͚Ͳɺ͘͢ͳ͘ͱ΋Reactͷ஌͕͍ࣝΔ͔Β্ڃ

Slide 40

Slide 40 text

νϡʔτϦΞϧΛ΍ͬͯΈΔ ΧελϜϒϩοΫΛ΍Ζ͏ʂͱෲΛܾΊͨΒɺ ͱΓ͋͑ͣνϡʔτϦΞϧ͔Β΍ͬͯΈΔͷΛ Φεεϝ͠·͢ɻ https://developer.wordpress.org/block-editor/ tutorials/block-tutorial/

Slide 41

Slide 41 text

ϒϩοΫΤσΟλʔͷొ৔Ͱ ίϯςϯπͷࣗ༝౓ ര্͕Γ

Slide 42

Slide 42 text

Ͱ΋ɺ΋ͱ΋ͱͰ͖ͯͨΑͶ

Slide 43

Slide 43 text

ΧελϜϑΟʔϧυͬͯ΍ͭ

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

҆қʹΧελϜϑΟʔϧυ͸࢖Θͳ͍ ͔ͤͬ͘ͷϒϩοΫΤσΟλʔͰ͢ɻ׆༻͠· ͠ΐ͏ɻΧελϜϑΟʔϧυલఏͰ࿩ΛਐΊͳ ͍͜ͱɻΧελϚΠβʔͰͰ͖ͳ͍͔ɺΧελ ϜϒϩοΫΛ࡞Δඞཁ͕͋Δ͔ɺͪΌΜͱ੍࡞ લʹ٧Ί·͠ΐ͏ɻ ͪ͜͜ΌΜͱ΍Βͳ͍ͱҊ݅͸ؒҧ͍ͳ͘೩͑ ·͢ʢܦݧஊʣ ※ WooCommerce΍௒ݕࡧۦ࢖͠ͳ͍ͱ͍͚ͳ͍Α͏ͳಛघͳҊ݅͸আ͘

Slide 46

Slide 46 text

࢖͍ॴ͸Α͘ߟ͑ͯʂ جຊతʹίϯςϯπ͸ΤσΟλʔ಺Ͱ׬݁ͤ͞ ·͢ɻʢ΄΅࢖ΘΕͯͳ͍͚Ͳɺ౤ߘϑΥʔϚοτͱ͍͏σ ϑΥϧτͷػೳ΋͋Γ·͢ʣ σβΠϯ্ͰͲ͏ͯ͠΋ΧελϜϑΟʔϧυʹ ͠ͳ͍ͱೖྗ߲໨Λ࡞Εͳ͍ɺͱ͍͏ͱ͖͸ͦ ΋ͦ΋ϫΠϠʔͷ࣌఺Ͱؒҧͬͯ·͢ɻ

Slide 47

Slide 47 text

͡Ό͋ɺͲ͏͍͏ͱ͖ʹ ΧελϜϑΟʔϧυΛ࢖͏ͷʁ جຊతʹɺϨΠΞ΢τมߋ͢ΔͨΊͷϑϥάʹ ࢖͍·͢ɻ ͨͱ͑͹ɺ௨ৗ2ΧϥϜͷϨΠΞ΢τ͚ͩͲɺϑ ϥάΛ͚ͭͨ౤ߘ͚ͩ1ΧϥϜʹ͢Δʂͱ͔ɺ PRϚʔΫΛ͚ͭΔʂͱ͔… ΧελϜϑΟʔϧυ͸ʮϝλσʔλʯʂίϯςϯπೖΕΔͱ͜ΖͰ͸ͳ͍Αʂ

Slide 48

Slide 48 text

େࣄͳ͜ͱͳͷͰ΋͏Ұ౓

Slide 49

Slide 49 text

ίϯςϯπͷͨΊʹ ΧελϜϑΟʔϧυ͸ ࢖ͬͯ͸͍͚ͳ͍Αʂ ݟੵ΋Γ͕௓ͶΔݪҼ…

Slide 50

Slide 50 text

ϓϥάΠϯ൛Gutenberg

Slide 51

Slide 51 text

ϓϥάΠϯ͸͍ΘΏΔ։ൃ൛ʂ ։ൃ൛ͳͷͰຊ൪؀ڥʹೖΕΔͷ͸Φεεϝ͠ ·ͤΜ͕ɺࣗ෼ͷςετ؀ڥ౳Ͱ৮ͬͯΈΔͷ ͸ΦεεϝͰ͢ɻ ͜ͷઌʹ౥ࡌ͞ΕΔ͔΋͠Εͳ͍ػೳ͕͍ͪૣ ͘ࢼͤ·͢ʂ

Slide 52

Slide 52 text

·ͱΊ

Slide 53

Slide 53 text

ຊ౰ʹWordPressͬͯ؆୯ʁ ਖ਼௚೉͘͠ͳ͍ʁੵΈ্͕Δ࢓༷ʹຐվ଄ɺ;͍ʹ߱ͬͯ͘Δ࢓༷มߋ…