WordPress テーマ作成超入門

WordPress テーマ作成超入門

@WordBench Nagoya 201806

64b9a826057b29b0990f6d5511ddbe1c?s=128

RyoUozumi

June 09, 2018
Tweet

Transcript

  1. WORDPRESS ςʔϚ࡞੒௒ೖ໳ ڕॅྒɹ@WordBench Nagoya 201806

  2. ࣗݾ঺հ • ڕॅྒ • ࠓ೥ͦ͜͸ଔۀ͍ͨ͠௨৴ͷ୹େੜʢӳޠΛओʹษڧதʣ • δϟζτϥϯϖοτͱΨδΣοτ͕޷͖ • 2013೥8݄29೔ΑΓݱryo.nagoyaͰWordPressσϏϡʔ •

    Twitter:@ryoraspp • Facebook: https://www.facebook.com/blog.ryoraspp/
  3. NHKʹग़ԋͨ͜͠ͱ΋

  4. ͦ΋ͦ΋ςʔϚͬͯԿʁ

  5. צҧ͍ͯ͠͠·͏ͷ͸

  6. –ίτόϯΫ(σδλϧେࣙઘͷղઆ) “ςʔϚʢʪυΠπʫThemaʣ ߦಈ΍૑࡞ͳͲͷجௐͱͳΔߟ͑ɻओ୊ɻ·ͨɺ࿦จͷ୊໨ɺָۂͷओટ཯ͳͲɻ ʮڞಉݚڀͷςʔϚΛܾΊΔʯʮ੓෎ʹͱͬͯ೶ۀ੓ࡦ͕ࠓޙͷςʔϚʹͳΔʯ ग़యɹখֶؗ ”

  7. ͬͪ͜ͷςʔϚͱ͍͏ҙຯͰ͸ͳ ͍ʂ ύιίϯۀքͰͷςʔϚͷҙຯ͸

  8. –ίτόϯΫʢύιίϯͰࠔͬͨͱ͖ʹ։͘ຊͷղઆʣ “ςʔϚ ιϑτͷഎܠ΍ϘλϯɺϑΥϯτͳͲͷσβΠϯΛ·ͱΊͯมߋ͠ɺݟͨ໨Λม͑Δػೳͷ͜ͱͰ͢ɻʮεΩϯʯ ͱݺͿ͜ͱ΋͋Γ·͢ɻ΢Οϯυ΢ζ8ͷσεΫτοϓʹ΋ʮݸਓઃఆʯʹςʔϚͷઃఆ͕͋Γ·͢ɻ ग़యɹ(ג)ே೔৽ฉग़൛ൃߦʮύιίϯͰࠔͬͨͱ͖ʹ։͘ຊʯύιίϯͰࠔͬͨͱ͖ʹ։͘ຊʹ͍ͭͯɹ৘ใ ”

  9. ͭ·ΓWORDPRESͷ ςʔϚ͸ ݟͨ໨Λม͑ΔػೳͰ͢ʂ

  10. ςϯϓϨʔτ֊૚

  11. https://wpdocs.osdn.jp/wiki/images/wp-template-hierarchy.jpg

  12. HTMLͷ৔߹ <header> <body> <footer> style.css

  13. ςʔϚͷ৔߹ header.php single.php footer.php style.css sidebar.php index.php page.php front-page.php archive.php

    404.php functions.php
  14. • index.php ౔୆ͷςϯϓϨʔτϑΝΠϧ • archive.php ΞʔΧΠϒϖʔδΛදࣔ͢ΔςϯϓϨʔτϑΝΠϧ • single.php ݸผ౤ߘϖʔδΛදࣔ͢ΔςϯϓϨʔτϑΝΠϧ •

    page.php ݻఆϖʔδΛදࣔ͢ΔςϯϓϨʔτϑΝΠϧ • front-page.php αΠτϑϩϯτϖʔδΛදࣔ͢ΔςϯϓϨʔτϑΝΠϧ • sidebar.php αΠυόʔΛදࣔ͢ΔςϯϓϨʔτϑΝΠϧ • header.php <?php get_header(); ?> ͷத਎ • footer.php <?php get_footer(); ?> ͷத਎ • functions.php ςʔϚͷػೳʢϓϥάΠϯͱಉ͜͡ͱ͕Ͱ͖Δʣ

  15. ͜͜Ͱ͜Μͳ͜ͱٙ໰͕ੜ·Ε·͢

  16. ςϯϓϨʔτϑΝΠϧʹ ػೳ͔͚Δ functions.phpʹ΋ ϓϥάΠϯʹ΋

  17. ͱ͍͏͜ͱ͸ʂ

  18. ςϯϓϨʔτϑΝΠϧʹػೳΛ͔͖͍ͨؾ࣋ͪ ͱ functions.phpʹػೳΛ͔͖͔͍ͨؾ࣋ͪ ͱ ϓϥάΠϯʹػೳΛॻ͖͍ͨؾ࣋ͪ ͕ ಉ࣌ʹ༙͖ىͬͯ͜͠·͏

  19. ରॲ๏ • ςϯϓϨʔτϑΝΠϧʹ͸ςϯϓϨʔτλά Λओʹ • functions.phpʹςʔϚͷػೳΛ͔͘ • ϓϥάΠϯʹςʔϚʹؔ͢ΔҎ֎ͷ͜ͱΛ͔ ͘

  20. ͔͠͠ॳ৺ऀʹ͸HOOKSͱ͍͏ٕज़Λ࢖͏ͷ͸ ೉͍͠ͷͰɺجૅతͳςΫχοΫΛ਎ʹ͚ͭΔ· Ͱ͸ςʔϚ͸ςʔϚͷͨΊͷؔ਺ʢςϯϓϨʔτ λάʣΛ͔͘Α͏զຫ͠·͠ΐ͏ɻ

  21. ςʔϚΛ࡞͍ͬͯ͜͏ʂ

  22. ςʔϚΛ࡞੒͢Δલʹ • WordPressͷσόοάϞʔυΛ༗ޮԽ • ϓϥάΠϯʢShow Current Template ຢ͸WP Extend ToolbarʣΛΠϯετʔϧ+༗ޮԽ

    • ςʔϚϢχοτςετͷΠϯϙʔτ • style.cssͷίϝϯτʹςʔϚʹؔ͢Δ಺༰Λهड़
  23. STYLE.CSSΛॻ͍ͯΈΑ͏ /* Theme Name: ςʔϚͷ໊લ Theme URI: ςʔϚͷαΠτ Description: ςʔϚͷઆ໌

    Version: 0.1 όʔδϣϯ1ʹͯ͠(׬੒ͤͯ͞)ެ։͠Α͏ʂ Author: WBN ࣗ෼ͷ໊લΛ஌Β͠ΊΕΔ Author URI: ࣗ෼ͷαΠτ License: GNU General Public License v2 or later */ •
  24. ςʔϚΛ࡞੒͢Δલʹ php get_header(); ?> header.phpΛಡΈࠐΉ php get_sidebar(); ?> sidebar.phpΛಡΈࠐΉ php

    get_footer(); ?> footer.phpΛಡΈࠐΉ
  25. Τεέʔϓॲཧ • Τεέʔϓॲཧͷඞཁੑ • ΋͠URLʹ༗֐ͳϦϯΫΛೖྗ͞Εͯ΋ɺແ֐ԽͰ͖ɺXSSΛ๷ࢭͰ͖Δ • <?php echo esc_url( home_url(

    '/' ) ); ?> • ྫ:<script>ѱ͍.js</script> • ݕࡧཝ΍ίϝϯτཝʹ͔͔Εͯ΋ • &lt;script&gt;ѱ͍.js&lt;/script&gt; • ͱͳΓѱ͍Javascript͕ແޮԽ͞ΕΔ •
  26. HEADER.PHPΛॻ͍ͯΈΑ͏ • <!DOCTYPE html> • <html <?php language_attributes(); ?> •

    <head> • <meta charset="<?php bloginfo( 'charset' ); ?>”> • <?php wp_head(); ?> • </head>
  27. NAVIGATION • wp_nav_menuʢʣΛ࢖༻͢Δ • ԼهΛfunctions.phpʹ͔͘ • register_nav_menus( array( • 'menu-1'

    => esc_html__( 'Primary', 'wbn' ), • ) );
  28. FOOTER.PHPΛॻ͍ͯΈΑ͏ • Copyright(ஶ࡞ݖදࣔʣ • <?php wp_footer() ?> • </body> •

    </html>
  29. SINGLE.PHPΛॻ͍ͯΈΑ͏ • while ( have_posts() ) : • the_post(); •

    the_post_navigation(); • comments_template();
  30. SIDEBAR.PHPΛॻ͍ͯΈΑ͏ • <aside id="secondary" class="widget-area"> • <?php dynamic_sidebar( 'sidebar-1' );

    ? > • </aside>
  31. FUNCTIONS.PHP • add_theme_support( 'title-tag' ); • λΠτϧλάΛ௥Ճͯ͘͠ΕΔ • add_theme_support( 'post-thumbnails'

    ); • ΞΠΩϟονը૾Λొ࿥
  32. FUNTIODNS.PHP 2 • CSS΍jsͳͲΛfunctions.phpͰ؅ཧ͍ͨ͠৔߹ • function wbn_scripts() { • wp_enqueue_style(

    'wbn-style', get_stylesheet_uri() ); • wp_enqueue_script( 'wbn-navigation', get_template_directory_uri() . '/js/ navigation.js', array(), '20151215', true ); • wp_enqueue_script( 'wbn-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
  33. FUNCTIONS.PHP 3 • ઌ΄Ͳ࡞ͬͨαΠυόʔΛfuntions.phpʹొ࿥ • function wbn_widgets_init() { • register_sidebar(

    array( • 'name' => esc_html__( 'Sidebar', 'wbn' ), • 'id' => 'sidebar-1', • 'description' => esc_html__( 'Add widgets here.', 'wbn' ), • 'before_widget' => '<section id="%1$s" class="widget %2$s">', • 'after_widget' => '</section>', • 'before_title' => '<h2 class="widget-title">', • 'after_title' => '</h2>', • ) );
  34. ॓୊ɿ͜ͷςϯϓϨʔτΛ ͔͍ͯΈΑ͏ • page.phpʢݻఆϖʔδΛදࣔ͢ΔςϯϓϨʔτʣ • singular.php(page.phpͱsingle.php͕ແ͍ࡍʹಡΈࠐ·ΕΔ (4.3લ͸index.php͕ಡΈࠐ· Εͯͨ)) • index.php

    • archive.php • category.php • author.php <?php get_template_part( ‘template/page’); ?> ʮςϯϓϨʔτ ύʔπʯͰݕࡧ
  35. THEME CHECK WordPress.org ͰఆΊΒΕ͍ͯΔςʔϚͷ඼࣭ ʹؔ͢ΔΨΠυϥΠϯʯΛຬ͍ͨͯ͠Δ͔Λ νΣοΫͰ͖ΔϓϥάΠϯ

  36. None
  37. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ʂ

  38. ͜ͷεϥΠυ͸ॳ৺ऀ޲͚ʹ࡞ͬͨͷͰ͸ͳ͘ɺ ॳ৺ऀ͕࡞ͬͨ΋ͷͳͷͰؒҧͬͯͨΓɺͨ͠ Β͝ࢦఠ͍ͩ͘͞ ΑΖ͓͘͠ئ͍͠·͢ɻ