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

TwentyNineteenから読み解くテーマ作成時のお作法

Avatar for Koji Kuno Koji Kuno
September 07, 2019

 TwentyNineteenから読み解くテーマ作成時のお作法

Avatar for Koji Kuno

Koji Kuno

September 07, 2019
Tweet

More Decks by Koji Kuno

Other Decks in Programming

Transcript

  1. ࣗݾ঺հ w ϑϦʔϥϯε8FC੍࡞ऀˏذෞࢢ w (JGV8PSE1SFTT.FFUVQڞಉΦʔΨφΠβʔ w $PEFS%PKPذෞνϟϯϐΦϯ w άϥϑΟοΫσβΠϯग़਎ɺ8FCؔ࿈ձࣾ Ͱͷۈ຿ྺͳ͠

    w 8FC͸ಠֶ8PSE1SFTTྺ೥Ҏ্ w PMFJOEFTJHODPO!0MFJO@KQ w Շ༷͕࡛ۄʹ୯਎ෝ೚தʹ͖ͭՈࣄҭࣇଟ Ίͷੜ׆ IUUQTQSPpMFTXPSEQSFTTPSHPMFJO
  2. ςʔϚ಺ϑΝΠϧҰཡʢલ൒ʣ ├ classes/ ├ fonts/ ├ inc/ ├ js/ ├

    sass/ ├ template-parts/ ├ 404.php ├ archive.php ├ comments.php ├ footer.php ├ functions.php ##͜Ε͜Ε ├ header.php ├ image.php ├ index.php
  3. ςʔϚ಺ϑΝΠϧҰཡʢޙ൒ʣ ├ package.json ├ package-lock.json ├ page.php ├ postcss.config.js ├

    print.scss ├ print.css ├ readme.txt ├ screenshot.png ├ search.php ├ single.php ├ style.scss ├ style.css ├ style-editor.scss ├ style-editor.css ├ style-editor-customizer.scss ├ style-editor-customizer.css ├ style-rtl.css
  4. if ( ! function_exists() ) if ( ! function_exists( 'twentynineteen_setup'

    ) ) : w ެࣜςʔϚͷίʔυΛಡΜͩ͜ͱ͕͋ΔਓͳΒݟͨ͜ͱ͋Δ͔ ΋ w ਌ςʔϚͱͯ͠ར༻͞ΕΔ͜ͱ͕͋ΔͳΒඞཁ w Ұൠతͳ੍࡞Ҋ݅Ͱ͸͋·Γඞཁͳ͍͔΋͠Εͳ͍͕ɺॻ͘บ Λ͚͓ͭͯ͘ͱྑ͍ IUUQTXXXQIQOFUNBOVBMKBGVODUJPOGVODUJPOFYJTUTQIQ
  5. αϜωΠϧઃఆ add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 1568, 9999 ); w ౤ߘɾݻఆϖʔδͰΞΠΩϟονը૾ΛઃఆͰ͖ΔΑ͏ʹ͢Δ

    w set_post_thumbnail_size()Ͱ೚ҙͷαΠζͷը૾Λ༻ҙ ͢Δ͜ͱ΋Մೳ ؔ਺ϦϑΝϨϯεTFUQPTUUIVNCOBJMTJ[F ؔ਺ϦϑΝϨϯεBEEUIFNFTVQQPSU
  6. ΧελϜϝχϡʔઃఆ register_nav_menus( array( 'menu-1' => __( 'Primary', 'twentynineteen' ), 'footer'

    => __( 'Footer Menu', 'twentynineteen' ), 'social' => __( 'Social Links Menu', 'twentynineteen' ), ) ); w ؅ཧը໘ˠ֎؍ˠϝχϡʔͰϝχϡʔΛ࢖͑ΔΑ͏ʹͳΔ w Ϣʔβʔ͕มߋͰ͖ΔΑ͏ʹͳΔ w σβΠϯ࢓༷ʹΑͬͯ͸ΧελϚΠζ͕ඞཁʹͳΔ৔߹΋͋Δ <8PSE1SFTT>ΧελϜϝχϡʔػೳͷઃఆͱઃஔͱॻ͖ग़͞ΕΔιʔείʔυΛ෼͔Γ΍͘͢঺հ͠·͢ ؔ਺ϦϑΝϨϯεSFHJTUFSOBWNFOVT
  7. )5.-࢖༻ڐՄઃఆ add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', )

    ); w ݕࡧϑΥʔϜɾίϝϯτϑΥʔϜɾίϝϯτϦετɾΪϟϥ ϦʔɾΩϟϓγϣϯͰ)5.-ϚʔΫΞοϓͷ࢓༷ΛڐՄ ؔ਺ϦϑΝϨϯεBEEUIFNFTVQQPSU
  8. ΤσΟλʔελΠϧઃఆɾಡΈࠐΈ add_theme_support( 'editor-styles' ); add_editor_style( 'style-editor.css' ); w ฤूը໘Ͱ࣮ࡍͷදࣔΛ֬ೝͰ͖ΔΑ͏ʹ͢ΔͨΊʹඞཁ w

    ҙ֎ͱରԠ͠ͳ͍ਓ͕ଟ͍ &EJUPS4UZMF (VUFOCFSHରԠͷͨΊadd_theme_support( 'editor-styles' )ͰվΊͯઃఆ͢Δඞཁ͕͋Γ·͢
  9. (VUFOCFSHϑΥϯταΠζઃఆ add_theme_support( 'editor-font-sizes', array( array( 'name' => __( 'Small', 'twentynineteen'

    ), 'shortName' => __( 'S', 'twentynineteen' ), 'size' => 19.5, 'slug' => 'small', ), ... ) );
  10. (VUFOCFSHΧϥʔύϨοτઃఆ add_theme_support( 'editor-color-palette', array( array( 'name' => __( 'Dark Gray',

    'twentynineteen' ), 'slug' => 'dark-gray', 'color' => '#111', ), ... ) );
  11. εΫϦϓτಡΈࠐΈઃఆ function twentynineteen_scripts() { wp_enqueue_style( 'twentynineteen-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version'

    ) ); wp_style_add_data( 'twentynineteen-style', 'rtl', 'replace' ); if ( has_nav_menu( 'menu-1' ) ) { wp_enqueue_script( 'twentynineteen-priority-menu', get_theme_file_uri( '/js/priority-menu.js' ), array(), '1.1', true ); wp_enqueue_script( 'twentynineteen-touch-navigation', get_theme_file_uri( '/js/touch-keyboard-navigation.js' ), array(), '1.1', true ); } wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' ); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } } add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );
  12. ελΠϧಡΈࠐΈઃఆ wp_enqueue_style( 'twentynineteen-style', // ϋϯυϧ໊ get_stylesheet_uri(), // ύε array(), //

    ґଘؔ܎ wp_get_theme()->get( 'Version' ) // όʔδϣϯ ); XQFORVFVFTUZMF c'VODUJPOc8PSE1SFTT%FWFMPQFS3FTPVSDFT
  13. +4ಡΈࠐΈઃఆ wp_enqueue_script( 'twentynineteen-priority-menu', // ϋϯυϧ໊ get_theme_file_uri( '/js/priority-menu.js' ), // ύε

    array(), // ґଘؔ܎ ex) array( 'jquery' ) '1.1', // όʔδϣϯ true // ϑολʔʹग़ྗ͢Δ৔߹͸true ); add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' ); // wp_enqueue_scripts ʹϑοΫ 1MVHJO"1*"DUJPO3FGFSFODFXQFORVFVFTDSJQUTm8PSE1SFTT$PEFY XQFORVFVFTDSJQU c'VODUJPOc8PSE1SFTT%FWFMPQFS3FTPVSDFT
  14. TLJQMJOLGPDVTpYઃఆ w Ұ෦ͷϒϥ΢βͰɺtabΩʔͰૢ࡞͢Δͱ͖ʹɺinput focusͱvisual focus ͕Ұகͤͣɺskip to content͕͏·͘ಈ࡞͠ͳ͍όάΛमਖ਼͢ΔͨΊͷ΋ͷ w 8FCΞΫηγϏϦςΟʹߟྀͨ͠Βར༻͓ͯ͘͠ํ͕޷·͍͠ʢݸਓతݟղʣ

    w ʢͦ΋ͦ΋skip to contentΛઃஔ͍ͯ͠ͳ͍΋ͷ΋ଟ͍ʣ <a class="skip-link screen-reader-text" href="#content"> <?php _e( 'Skip to content', 'twentynineteen' ); ?> </a> UXFOUZOJOFUFFOIFBEFSQIQBOEUXFOUZOJOFUFFOTUZMFDTT
  15. ࢖͍ํ <body <?php body_class(); ?>> ྫɿ౤ߘৄࡉϖʔδʢsingle.phpʣΛදࣔͨ͠৔߹ <body class=" post-template-default single

    single-post postid-1 single-format-standard wp-embed-responsive singular image-filters-enabled">
  16. ೚ҙΫϥεΛbody_class()͔Βग़ྗ͢Δ body_class('class-name1 class-name2'); PS // if ( is_***() ) ͳͲͰࣗ༝ʹৼΓ෼͚ΒΕΔ

    function add_my_class_names( $classes ) { $classes[] = 'class-name'; return $classes; } add_filter( 'body_class', 'add_my_class_names' );
  17. ࢖͍ํ <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> ྫɿ౤ߘৄࡉ <article

    id="post-1" class="post-1 post type-post status-publish format-standard hentry category-uncategorized entry">