WordPress テーマ作成再入門

WordBench 長野 vol.9 での登壇資料です。

Transcript

1. WordPress ςʔϚ࡞੒࠶ೖ໳ Toro_Unit / 2017.05.20 @ WBNagano vol.9 1
2. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) • দຊࢢࡏॅ 10೥໨ • ϑϦʔϥϯε • Frontend Engineer / Plugin Developer / Web Designer • WordBench ௕໺ ϞσϨʔλʔ Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 2
3. 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
4. Theme Developer Vanilla 4
5. 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. ςʔϚ࡞ͬͨ͜ͱ͋Δਓ! 6
7. WordPressͷਪ঑͍ͯ͠ΔςʔϚͷ࡞ ΓํΛ஌ͬͯΔਓ! 7
8. ʮผʹಈ͍ͯΔ͔Βྑ͘ͳ͍ʁʯ 8
9. ʮ͸͍ʁ(Җѹ)ʯ 9
10. ਪ঑͞Εͳ͍࡞ΓํΛ͍ͯ͠Δͱɾɾɾ • ϓϥάΠϯ͕ͳΜ͔มͳಈ͖͢Δɾɾɾɻ • ຊͷ௨Γʹ࡞ͬͨͷʹ͏͔͝ͳ͍ɾɾɾɻ • ϦχϡʔΞϧΊͪΌͪ͘Ό͍ͨ΁Μɾɾɾɻ • ηΩϡϦςΟϗʔϧʹͳͬͨΓɾɾɾɻ 10
11. ͋ΔϓϥάΠϯ࡞ऀͷ੠ 11
12. ඇਪ঑ͷ࡞Γํͯ͠ΔςʔϚͰͷςετ͸ɺͯ͠ͳ͍͠ɺͰ͖ ͳ͍͠ɺ͢Δؾ΋ͳ͍ɻ ͍ͬͯ͏͔Ͳ͏΍ͬͯςετ͢Ε͹͍͍ͷΑʁ 12
13. ʮΑ͘஌Βͳ͍͚ͲɺͱΓ͋͑ͣಈ͍ͯΔ͔Βɾɾɾʯ ΄ΜͱʹͦΕͰେৎ෉ʁ 13
14. ςʔϚͷ࡞ΓํΛ͓͞Β͍ɻ 14
15. 1. ςϯϓϨʔτͷछྨ 15
16. σϑΥϧτςʔϚ Twenty Seventeen ΛݟͯΈΑ͏ɻ 16
17. ͙͑ͬ 17
18. େৎ෉ɻ 18
19. ςʔϚͷ࠷খߏ੒ • index.php • style.css ͜Ε͚ͩʂ 19
20. ͡Ό͊ͳΜͰ͋Μͳʹɾɾɾ 20
21. ͱ͍͏Θ͚ͰςϯϓϨʔτͷ࢓૊ΈΛ͓͞Β͍͠·͠ΐ͏ɻ 21
22. 1-1 ςϯϓϨʔτ֊૚ 22
23. ςϯϓϨʔτ֊૚ͱ͸ʁ WordPressͷςϯϓϨʔτ͕બ୒͞ΕΔ࢓૊Έɻ ݱࡏදࣔ͞Ε͍ͯΔϖʔδͷঢ়ଶʹ߹ΘͤͯςϯϓϨʔτ͕ݕ ࡧ͞ΕΔɻ 23
25. ྫ1 ΧςΰϦʔ ID:2, εϥοά: news ͷ৔߹ɻ 1. category-news.php 2. category-2.php 3. category.php 4. archive.php 5. index.php ͷॱʹςϯϓϨʔτ͕ݕࡧ͞Εɺݟ͔ͭͬͨ΋ͷ͕ద༻͞ΕΔɻ 25
26. ྫ2 ϒϩά౤ߘͷ৔߹ɻ 1. single-post.php 2. single.php 3. singular.php 4. index.php ͷॱʹςϯϓϨʔτ͕ݕࡧ͞Εɺݟ͔ͭͬͨ΋ͷ͕ద༻͞Ε Δɻ 26
27. ৄ͘͠͸ɺςϯϓϨʔτ֊૚ - WordPress Codex ೔ຊޠ ൛ WordPress Codex: WordPress ͷΦϯϥΠϯ υΩϡϝϯτɺWiki. 27
28. 1-2 ςϯϓϨʔτϞδϡʔϧ 28
29. ڞ௨෦෼ΛผͷςϯϓϨʔτʹग़དྷΔɻ • header.php : get_header() • footer.php : get_footer() • sidebar.php :get_sidebar() • searchform.php : get_search_form() • comments.php : comments_template() 29
30. 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
31. ๻ͷ࠷খߏ੒ • index.php • single.php • page.php • header.php • footer.php ͔͜͜Βద֦ٓு͍ͯ͘͠ɻ 31
32. 2. CSS ͱ JS ͷಡΈࠐΈ 32
33. Α͋͘Δτϥϒϧ • ʮͳΜ͔jQuery͕2ճݺͼग़͞ΕͯΔɾɾɾɾʯ 33
34. ͜͏ͯ͠·ͤΜʁ <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
35. ਪ঑͞ΕΔ΍Γํ header.php <head> <?php wp_head();?> </head> footer.php <?php wp_footer();?> </body> 35
36. 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
37. wp_enqueue_style ΍ɺwp_enqueue_script Λ࢖͏ͱ WordPress͕ྑ͍ײ͡ʹ CSS Λ JS ಡΈࠐΜͰ͘ΕΔɻ jQuery, underscore, Backbone.js, masonry ౳͸WordPress ʹ಺ଂ͞Ε͍ͯΔɻ ؔ਺ϦϑΝϨϯε/wp enqueue script - WordPress Codex ೔ຊޠ൛ 37
38. 3. σʔλͷແ֐Խ αχλΠζ / Τεέʔϓ 38
39. ͋Γ͕ͪͳϠόΠίʔυ <?php //ΧελϜϑΟʔϧυͷ஋Λऔಘ $hoge = get_post_meta( get_the_ID(), 'hoge', ture ); ?> <!-- class ଐੑΛ௥Ճ --> <h1 class="<?php echo $hoge;?>"></h1> 39
40. ΋͠ΧελϜϑΟʔϧυʹෆਖ਼ͳσʔλ͕ೖͬͯΔͱ... ྫ͑͹ɺ">͜Μʹͪ͸͜Μʹͪ͸!! Έ͍ͨͳจࣈྻɻ <h1 class="">͜Μʹͪ͸͜Μʹͪ͸!!"></h1> 40
42. ΍͹͍ʂ 42
43. ݟͨ໨͕յΕΔ͚ͩͳΒ·ͩ͠΋ෆਖ਼ͳJSͱ͔ΛຒΊࠐ·ΕΔ ڪΕ΋.... • Ϣʔβʔ͕มͳίʔυΛίϐϖͨ͠৔߹ɻ • WordPressͷύεϫʔυ͕ྲྀग़৔߹ɻ • etc... ͍ΘΏΔ XSSͷ੬ऑੑ 43
44. ਖ਼͘͠σʔλͷແ֐ԽΛ͠Α͏ɻ <?php $hoge = get_post_meta( get_the_ID(), 'hoge', ture );?> <div class="<?php echo esc_attr( $hoge );?>"></div> ෆਖ਼ͳσʔλ͕ೖͬͯ΋େৎ෉ɻ <h1 class="&quot;&gt;͜Μʹͪ͸͜Μʹͪ͸!!"></h1> 44
45. WordPressʹ༻ҙ͞Ε͍ͯΔαχλΠζͷؔ਺ • esc_html: ௨ৗͷςΩετ • esc_attr: HTMLଐੑ • esc_url: URL/ϝʔϧΞυϨεͳͲ • esc_textarea: textareaཁૉ • esc_js: ΠϯϥΠϯJS • wp_kses: ಛఆͷHTMLλάΛڐՄ͢Δ৔߹ 45
46. 4. ϓϥάΠϯςϦτϦʔ 46
47. • ΞΫηεղੳ • ޿ࠂίʔυ • γΣΞϘλϯ • ΧελϜ౤ߘλΠϓ/λΫιϊϛʔ • SEOपΓͷ͍Ζ͍Ζɾɾɾ 47
48. αΠτΛϦχϡʔΞϧͨ͠Β͖͑ͨ!!! 48
49. ·͍ͣʂ 49
50. ςʔϚΛม͑Δͱ͍Ζ͍Ζಈ͔ͳ͘ͳΔ… 50
51. ·͍ͣ!!! 51
52. ςʔϚςϦτϦʔ WEBαΠτͷݟͨ໨ɻ ϓϥάΠϯςϦτϦʔ WEBαΠτͷػೳɻ -> ػೳ͸ϓϥάΠϯͰʂ 52
53. ϓϥάΠϯͷ࡞Γํɾɾɾʁ • wckansai2016/plugin-hands-on 53
54. ϊϯϓϩάϥϚʔͷͨΊͷWordPressϓϥάΠϯ࡞੒௒ೖ໳ https://www.slideshare.net/mignonstyle/make-wordpress-plugin 54
55. αΠτͷ֦ுੑΛඈ༂తʹߴ ΊΔ WordPressϓϥάΠϯ ։ൃͷόΠϒϧ 55
56. 5. ςʔϚͷݕূ 56
57. ςʔϚνΣοΫϓϥάΠϯ Theme Check — WordPress Plugins 57
59. ߦّͷѱ͍ςʔϚ 59
61. ͪͳΈʹ • WordPressͷ؅ཧը໘͔Βμ΢ϯϩʔυͰ͖ΔςʔϚ (ެࣜσ ΟϨΫτϦ ܝࡌςʔϚ)͸શͯ͜ͷςετ͕௨ͬͯΔɻ • ྑ͘ղΒͳ͍ςʔϚΛ࢖͏͘Β͍ͳΒɺެࣜσΟϨΫτϦ͔ ΒςʔϚΛ୳ͦ͏ɻ 61
62. 6.υΩϡϝϯτ 62
63. Theme Developer Handbook • ӳޠ͚ͩͲͦ͜·Ͱ೉͜͠ͱ͸ॻ͍ ͯͳ͍ͷͰҙ֎ʹಡΊΔɻ 63
64. WordPress Codex ೔ຊޠ൛ • ςϯϓϨʔτλάͷ࢓༷ͳͲ͸͜͜ Ͱ֬ೝɻ 64
65. _s • WordPress.com ͷӡӦݩͷ Automattic ͕։ൃ͍ͯ͠Δϕʔες ʔϚɻ͜ΕΛϕʔεʹCSSΛ௥Ճɺ HTMLΛฤूͯ͠ςʔϚΛ࡞Δͱ͍͏ ํ๏΋͋Δɻ 65
66. τϥϒϧ͕ى͖Δલʹਖ਼͍͠஌ࣝΛɻ ϓϩάϥϛϯάʹࣗ৴͕ແ͍ͳΒ͹ɺͳ͓͞Βɺ͜͏͍ͬͨ΋ͷʹै͏΂͖ɻ 66
67. ͦͯ͠ 67
68. WordPress ίϛϡχςΟͷࡒ࢈Λ׆༻͠Α͏ɻ ͜Ε͕ WordPressͷҰ൪ͷڧΈɻ 68
69. ࠔͬͨΒϑΥʔϥϜͰ࣭໰ͯ͠ΈΑ͏ɻ • https://ja.wordpress.org/support/ • WordPress ͷެࣜͷαϙʔτϑΥʔ ϥϜɻ • ͪΌΜͱ࣭໰͢Δͱ݁ߏղ౴͕ͭ ͘ɻ • ϑΥʔϥϜΛݕࡧ͢Δͱ౴͕͑͋ͬ ͨΓ͢Δ͜ͱ΋Α͋͘Δɻ 69
70. tips • titleλάΛςʔϚʹॻ͘ͷ͸ඇਪ঑ʹɻ add_theme_support('title-tag') Λ࢖͍·͠ΐ͏ɻ • ࠷ۙ get_theme_file_uri ͱݴ͏ؔ਺͕௥Ճ͞Εͨɻ • ςʔϚΧελϚΠβʔ • etc... ·ͩ·ͩԞ͕ਂ͍ɻ 70
71. more...? 71
72. ΤϯδχΞͷͨΊͷ WordPress։ൃೖ໳ 72
73. ϊϯϓϩάϥϚʔͷͨΊͷWordPress ςʔϚ࡞੒εςοϓΞοϓज़ https://www.slideshare.net/ mignonstyle/wordpress-stepuptips 73
74. and.. Let's Join WordBench! wordbench.org 74
75. and... 75
77. WordCamp Kyoto 2017 • 06/24, 25 • ژ౎େֶ ࠃࡍՊֶΠϊϕʔγϣϯ౩ WordCamp is... ੈքத֤஍ͰߦΘΕ͍ͯΔ WordPress ͷΧϯϑΝϨϯεɻ೔ຊͰ Ұ൪େ͖͍WordPressͷΠϕϯτɻࠓ೥͸ژ౎ͱ౦ژʹͯ։࠵ɻ 77
79. ͓ΘΓɻ Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site: https://torounit.com 79