WordPress テーマ作成再入門

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

  24. 24

  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

  41. 41

  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

  58. 58

  59. ߦّͷѱ͍ςʔϚ 59

  60. 60

  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

  76. 76

  77. WordCamp Kyoto 2017 • 06/24, 25 • ژ౎େֶ ࠃࡍՊֶΠϊϕʔγϣϯ౩ WordCamp

    is... ੈքத֤஍ͰߦΘΕ͍ͯΔ WordPress ͷΧϯϑΝϨϯεɻ೔ຊͰ Ұ൪େ͖͍WordPressͷΠϕϯτɻࠓ೥͸ژ౎ͱ౦ژʹͯ։࠵ɻ 77
  78. 78

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

    https://torounit.com 79