WordPress テーマ作成再入門

WordPress ςʔϚ࡞੒࠶ೖ໳ Toro_Unit / 2017.05.20 @ WBNagano vol.9 1

Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • দຊࢢࡏॅ 10೥໨ • ϑϦʔϥϯε
• Frontend Engineer / Plugin Developer / Web Designer • WordBench ௕໺ ϞσϨʔλʔ Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 2

Plugins Developer • Custom Post Type Permalinks • Active install:
80,000 + • Downloads: 380,000 + • Simple Post Type Permalinks • Powerful Posts Per Page • Responsive Slide • etc... 3

Theme Developer Vanilla 4

Other Contribution • 4.3 ~ 4.5, 4.7 ίΞߩݙऀ • WordCamp
Kansai 2016 / Tokyo 2016 ࣮ߦҕһ • WordCamp Kansai 2017 ηογϣϯνʔϜ Ϧʔμʔ • Speaker • WordCamp Kansai 2015, 2016 / Tokyo 2015, 2016 • WordBench Tokyo • WordBench Osaka • etc... 5

ςʔϚ࡞ͬͨ͜ͱ͋Δਓ! 6

WordPressͷਪ঑͍ͯ͠ΔςʔϚͷ࡞ ΓํΛ஌ͬͯΔਓ! 7

ʮผʹಈ͍ͯΔ͔Βྑ͘ͳ͍ʁʯ 8

ʮ͸͍ʁ(Җѹ)ʯ 9

ਪ঑͞Εͳ͍࡞ΓํΛ͍ͯ͠Δͱɾɾɾ • ϓϥάΠϯ͕ͳΜ͔มͳಈ͖͢Δɾɾɾɻ • ຊͷ௨Γʹ࡞ͬͨͷʹ͏͔͝ͳ͍ɾɾɾɻ • ϦχϡʔΞϧΊͪΌͪ͘Ό͍ͨ΁Μɾɾɾɻ • ηΩϡϦςΟϗʔϧʹͳͬͨΓɾɾɾɻ 10

͋ΔϓϥάΠϯ࡞ऀͷ੠ 11

ඇਪ঑ͷ࡞Γํͯ͠ΔςʔϚͰͷςετ͸ɺͯ͠ͳ͍͠ɺͰ͖ ͳ͍͠ɺ͢Δؾ΋ͳ͍ɻ ͍ͬͯ͏͔Ͳ͏΍ͬͯςετ͢Ε͹͍͍ͷΑʁ 12

ʮΑ͘஌Βͳ͍͚ͲɺͱΓ͋͑ͣಈ͍ͯΔ͔Βɾɾɾʯ ΄ΜͱʹͦΕͰେৎ෉ʁ 13

ςʔϚͷ࡞ΓํΛ͓͞Β͍ɻ 14

1. ςϯϓϨʔτͷछྨ 15

σϑΥϧτςʔϚ Twenty Seventeen ΛݟͯΈΑ͏ɻ 16

͙͑ͬ 17

େৎ෉ɻ 18

ςʔϚͷ࠷খߏ੒ • index.php • style.css ͜Ε͚ͩʂ 19

͡Ό͊ͳΜͰ͋Μͳʹɾɾɾ 20

ͱ͍͏Θ͚ͰςϯϓϨʔτͷ࢓૊ΈΛ͓͞Β͍͠·͠ΐ͏ɻ 21

1-1 ςϯϓϨʔτ֊૚ 22

ςϯϓϨʔτ֊૚ͱ͸ʁ WordPressͷςϯϓϨʔτ͕બ୒͞ΕΔ࢓૊Έɻ ݱࡏදࣔ͞Ε͍ͯΔϖʔδͷঢ়ଶʹ߹ΘͤͯςϯϓϨʔτ͕ݕ ࡧ͞ΕΔɻ 23

ྫ1 ΧςΰϦʔ ID:2, εϥοά: news ͷ৔߹ɻ 1. category-news.php 2. category-2.php
3. category.php 4. archive.php 5. index.php ͷॱʹςϯϓϨʔτ͕ݕࡧ͞Εɺݟ͔ͭͬͨ΋ͷ͕ద༻͞ΕΔɻ 25

ྫ2 ϒϩά౤ߘͷ৔߹ɻ 1. single-post.php 2. single.php 3. singular.php 4. index.php
ͷॱʹςϯϓϨʔτ͕ݕࡧ͞Εɺݟ͔ͭͬͨ΋ͷ͕ద༻͞Ε Δɻ 26

ৄ͘͠͸ɺςϯϓϨʔτ֊૚ - WordPress Codex ೔ຊޠ ൛ WordPress Codex: WordPress ͷΦϯϥΠϯ
υΩϡϝϯτɺWiki. 27

1-2 ςϯϓϨʔτϞδϡʔϧ 28

ڞ௨෦෼ΛผͷςϯϓϨʔτʹग़དྷΔɻ • header.php : get_header() • footer.php : get_footer() •
sidebar.php :get_sidebar() • searchform.php : get_search_form() • comments.php : comments_template() 29

get_template_part() ΦϦδφϧͷςϯϓϨʔτΛݺͼग़͢ɻ ྫ • get_template_part('template-parts/hoge'); template-parts/hoge.php Λݺͼग़͢ɻ • get_template_part('template-parts/hoge', 'piyo');
template-parts/hoge-piyo.php Λݺͼग़͢ɻ 30

๻ͷ࠷খߏ੒ • index.php • single.php • page.php • header.php •
footer.php ͔͜͜Βద֦ٓு͍ͯ͘͠ɻ 31

2. CSS ͱ JS ͷಡΈࠐΈ 32

Α͋͘Δτϥϒϧ • ʮͳΜ͔jQuery͕2ճݺͼग़͞ΕͯΔɾɾɾɾʯ 33

͜͏ͯ͠·ͤΜʁ <head> <link href="<?php echo get_stylesheet_uri(); ?>"> <link href="<?php echo
get_template_directory_uri() . '/common.css'; ?>> <?php wp_head();?> </head> <script src="jquery.js"></script> <?php wp_footer();?> </body> • wphead, wpfooter ςʔϚʹ͸ඞͣೖΕΔౕɻ 34

ਪ঑͞ΕΔ΍Γํ header.php <head> <?php wp_head();?> </head> footer.php <?php wp_footer();?> </body>
35

functions.php function my_enqueue_scripts() { //include css wp_enqueue_style( 'my-style', get_stylesheet_uri() );
wp_enqueue_style( 'my-common', get_template_directory_uri() . '/common.css', array( 'my-style' ), '1.0.0' ); //include js wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/scripts.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' ); 36

wp_enqueue_style ΍ɺwp_enqueue_script Λ࢖͏ͱ WordPress͕ྑ͍ײ͡ʹ CSS Λ JS ಡΈࠐΜͰ͘ΕΔɻ jQuery, underscore,
Backbone.js, masonry ౳͸WordPress ʹ಺ଂ͞Ε͍ͯΔɻ ؔ਺ϦϑΝϨϯε/wp enqueue script - WordPress Codex ೔ຊޠ൛ 37

3. σʔλͷແ֐Խ αχλΠζ / Τεέʔϓ 38

͋Γ͕ͪͳϠόΠίʔυ <?php //ΧελϜϑΟʔϧυͷ஋Λऔಘ $hoge = get_post_meta( get_the_ID(), 'hoge', ture );
?>  <h1 class="<?php echo $hoge;?>"></h1> 39

΋͠ΧελϜϑΟʔϧυʹෆਖ਼ͳσʔλ͕ೖͬͯΔͱ... ྫ͑͹ɺ">͜Μʹͪ͸͜Μʹͪ͸!! Έ͍ͨͳจࣈྻɻ <h1 class="">͜Μʹͪ͸͜Μʹͪ͸!!"></h1> 40

΍͹͍ʂ 42

ݟͨ໨͕յΕΔ͚ͩͳΒ·ͩ͠΋ෆਖ਼ͳJSͱ͔ΛຒΊࠐ·ΕΔ ڪΕ΋.... • Ϣʔβʔ͕มͳίʔυΛίϐϖͨ͠৔߹ɻ • WordPressͷύεϫʔυ͕ྲྀग़৔߹ɻ • etc... ͍ΘΏΔ XSSͷ੬ऑੑ
43

ਖ਼͘͠σʔλͷແ֐ԽΛ͠Α͏ɻ <?php $hoge = get_post_meta( get_the_ID(), 'hoge', ture );?> <div
class="<?php echo esc_attr( $hoge );?>"></div> ෆਖ਼ͳσʔλ͕ೖͬͯ΋େৎ෉ɻ <h1 class="">͜Μʹͪ͸͜Μʹͪ͸!!"></h1> 44

WordPressʹ༻ҙ͞Ε͍ͯΔαχλΠζͷؔ਺ • esc_html: ௨ৗͷςΩετ • esc_attr: HTMLଐੑ • esc_url: URL/ϝʔϧΞυϨεͳͲ
• esc_textarea: textareaཁૉ • esc_js: ΠϯϥΠϯJS • wp_kses: ಛఆͷHTMLλάΛڐՄ͢Δ৔߹ 45

4. ϓϥάΠϯςϦτϦʔ 46

• ΞΫηεղੳ • ޿ࠂίʔυ • γΣΞϘλϯ • ΧελϜ౤ߘλΠϓ/λΫιϊϛʔ • SEOपΓͷ͍Ζ͍Ζɾɾɾ
47

αΠτΛϦχϡʔΞϧͨ͠Β͖͑ͨ!!! 48

·͍ͣʂ 49

ςʔϚΛม͑Δͱ͍Ζ͍Ζಈ͔ͳ͘ͳΔ… 50

·͍ͣ!!! 51

ςʔϚςϦτϦʔ WEBαΠτͷݟͨ໨ɻ ϓϥάΠϯςϦτϦʔ WEBαΠτͷػೳɻ -> ػೳ͸ϓϥάΠϯͰʂ 52

ϓϥάΠϯͷ࡞Γํɾɾɾʁ • wckansai2016/plugin-hands-on 53

ϊϯϓϩάϥϚʔͷͨΊͷWordPressϓϥάΠϯ࡞੒௒ೖ໳ https://www.slideshare.net/mignonstyle/make-wordpress-plugin 54

αΠτͷ֦ுੑΛඈ༂తʹߴ ΊΔ WordPressϓϥάΠϯ ։ൃͷόΠϒϧ 55

5. ςʔϚͷݕূ 56

ςʔϚνΣοΫϓϥάΠϯ Theme Check — WordPress Plugins 57

ߦّͷѱ͍ςʔϚ 59

ͪͳΈʹ • WordPressͷ؅ཧը໘͔Βμ΢ϯϩʔυͰ͖ΔςʔϚ (ެࣜσ ΟϨΫτϦ ܝࡌςʔϚ)͸શͯ͜ͷςετ͕௨ͬͯΔɻ • ྑ͘ղΒͳ͍ςʔϚΛ࢖͏͘Β͍ͳΒɺެࣜσΟϨΫτϦ͔ ΒςʔϚΛ୳ͦ͏ɻ 61

6.υΩϡϝϯτ 62

Theme Developer Handbook • ӳޠ͚ͩͲͦ͜·Ͱ೉͜͠ͱ͸ॻ͍ ͯͳ͍ͷͰҙ֎ʹಡΊΔɻ 63

WordPress Codex ೔ຊޠ൛ • ςϯϓϨʔτλάͷ࢓༷ͳͲ͸͜͜ Ͱ֬ೝɻ 64

_s • WordPress.com ͷӡӦݩͷ Automattic ͕։ൃ͍ͯ͠Δϕʔες ʔϚɻ͜ΕΛϕʔεʹCSSΛ௥Ճɺ HTMLΛฤूͯ͠ςʔϚΛ࡞Δͱ͍͏ ํ๏΋͋Δɻ 65

τϥϒϧ͕ى͖Δલʹਖ਼͍͠஌ࣝΛɻ ϓϩάϥϛϯάʹࣗ৴͕ແ͍ͳΒ͹ɺͳ͓͞Βɺ͜͏͍ͬͨ΋ͷʹै͏΂͖ɻ 66

ͦͯ͠ 67

WordPress ίϛϡχςΟͷࡒ࢈Λ׆༻͠Α͏ɻ ͜Ε͕ WordPressͷҰ൪ͷڧΈɻ 68

ࠔͬͨΒϑΥʔϥϜͰ࣭໰ͯ͠ΈΑ͏ɻ • https://ja.wordpress.org/support/ • WordPress ͷެࣜͷαϙʔτϑΥʔ ϥϜɻ • ͪΌΜͱ࣭໰͢Δͱ݁ߏղ౴͕ͭ ͘ɻ
• ϑΥʔϥϜΛݕࡧ͢Δͱ౴͕͑͋ͬ ͨΓ͢Δ͜ͱ΋Α͋͘Δɻ 69

tips • titleλάΛςʔϚʹॻ͘ͷ͸ඇਪ঑ʹɻ add_theme_support('title-tag') Λ࢖͍·͠ΐ͏ɻ • ࠷ۙ get_theme_file_uri ͱݴ͏ؔ਺͕௥Ճ͞Εͨɻ •
ςʔϚΧελϚΠβʔ • etc... ·ͩ·ͩԞ͕ਂ͍ɻ 70

more...? 71

ΤϯδχΞͷͨΊͷ WordPress։ൃೖ໳ 72

ϊϯϓϩάϥϚʔͷͨΊͷWordPress ςʔϚ࡞੒εςοϓΞοϓज़ https://www.slideshare.net/ mignonstyle/wordpress-stepuptips 73

and.. Let's Join WordBench! wordbench.org 74

and... 75

WordCamp Kyoto 2017 • 06/24, 25 • ژ౎େֶ ࠃࡍՊֶΠϊϕʔγϣϯ౩ WordCamp
is... ੈքத֤஍ͰߦΘΕ͍ͯΔ WordPress ͷΧϯϑΝϨϯεɻ೔ຊͰ Ұ൪େ͖͍WordPressͷΠϕϯτɻࠓ೥͸ژ౎ͱ౦ژʹͯ։࠵ɻ 77

͓ΘΓɻ Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site:
https://torounit.com 79

WordPress テーマ作成再入門

WordPress テーマ作成再入門

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Featured

Transcript