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

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

Koji Kuno
September 07, 2019

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

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">