Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPress テーマ作成再入門

WordPress テーマ作成再入門

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

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

Transcript

  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
  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
  3. 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
  4. 24

  5. ྫ1 ΧςΰϦʔ ID:2, εϥοά: news ͷ৔߹ɻ 1. category-news.php 2. category-2.php

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

    ͷॱʹςϯϓϨʔτ͕ݕࡧ͞Εɺݟ͔ͭͬͨ΋ͷ͕ద༻͞Ε Δɻ 26
  7. ڞ௨෦෼ΛผͷςϯϓϨʔτʹग़དྷΔɻ • header.php : get_header() • footer.php : get_footer() •

    sidebar.php :get_sidebar() • searchform.php : get_search_form() • comments.php : comments_template() 29
  8. ͜͏ͯ͠·ͤΜʁ <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
  9. 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
  10. wp_enqueue_style ΍ɺwp_enqueue_script Λ࢖͏ͱ WordPress͕ྑ͍ײ͡ʹ CSS Λ JS ಡΈࠐΜͰ͘ΕΔɻ jQuery, underscore,

    Backbone.js, masonry ౳͸WordPress ʹ಺ଂ͞Ε͍ͯΔɻ ؔ਺ϦϑΝϨϯε/wp enqueue script - WordPress Codex ೔ຊޠ൛ 37
  11. 41

  12. ਖ਼͘͠σʔλͷແ֐ԽΛ͠Α͏ɻ <?php $hoge = get_post_meta( get_the_ID(), 'hoge', ture );?> <div

    class="<?php echo esc_attr( $hoge );?>"></div> ෆਖ਼ͳσʔλ͕ೖͬͯ΋େৎ෉ɻ <h1 class="&quot;&gt;͜Μʹͪ͸͜Μʹͪ͸!!"></h1> 44
  13. WordPressʹ༻ҙ͞Ε͍ͯΔαχλΠζͷؔ਺ • esc_html: ௨ৗͷςΩετ • esc_attr: HTMLଐੑ • esc_url: URL/ϝʔϧΞυϨεͳͲ

    • esc_textarea: textareaཁૉ • esc_js: ΠϯϥΠϯJS • wp_kses: ಛఆͷHTMLλάΛڐՄ͢Δ৔߹ 45
  14. 58

  15. 60

  16. 76

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

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