$30 off During Our Annual Pro Sale. View Details »

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

Koji Kuno
September 07, 2019

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

Koji Kuno

September 07, 2019
Tweet

More Decks by Koji Kuno

Other Decks in Programming

Transcript

  1. 5XFOUZ/JOFUFFO͔ΒಡΈղ͘
    ςʔϚ࡞੒࣌ͷ͓࡞๏
    ೥݄೔ʢ౔ʣ
    ΈΜͳͷ৿͗;ϝσΟΞίεϞε͓ͲΔελδΦ
    0MFJO%FTJHOٱ໺ߊ࢘

    View Slide

  2. ࣗݾ঺հ
    w ϑϦʔϥϯε8FC੍࡞ऀˏذෞࢢ
    w (JGV8PSE1SFTT.FFUVQڞಉΦʔΨφΠβʔ
    w $PEFS%PKPذෞνϟϯϐΦϯ
    w άϥϑΟοΫσβΠϯग़਎ɺ8FCؔ࿈ձࣾ
    Ͱͷۈ຿ྺͳ͠
    w 8FC͸ಠֶ8PSE1SFTTྺ೥Ҏ্
    w PMFJOEFTJHODPO!0MFJO@KQ
    w Շ༷͕࡛ۄʹ୯਎ෝ೚தʹ͖ͭՈࣄҭࣇଟ
    Ίͷੜ׆
    IUUQTQSPpMFTXPSEQSFTTPSHPMFJO

    View Slide

  3. 8PSE1SFTTͷެࣜςʔϚΛಡΈղ͍ͯ
    ࣮ࡍʢۀ຿ʣͷςʔϚ੍࡞ʹ໾ཱͯΒΕΔ
    ࡞๏Λ঺հ͠·͢ɻ
    ˞࿩ͤΔ࿩୊͕෯޿͗͢ΔͨΊɺΑΓৄ͘͠஌Γ͍ͨํ͸ΞϯΧϯϑΝϨϯεΛ׆༻͍ͯͩ͘͠͞ɻ

    View Slide

  4. ΞδΣϯμ
    w ςʔϚ։ൃͷ؀ڥʹ͍ͭͯ
    w ࠓ೔ͷ࿩ͷཧղɾ׆༻ʹඞཁͳ஌ࣝ
    w 5XFOUZ/JOFUFFOͷ಺෦ϑΝΠϧ
    w GVODUJPOTQIQΛಡΈղ͘
    w CPEZ@DMBTT

    w QPTU@DMBTT

    w ςʔϚΛ࡞Δʹ͋ͨͬͯͷཧ૝తͳߟ͑ํ

    View Slide

  5. ֬ೝ؀ڥ
    w ϩʔΧϧ։ൃ؀ڥʢ-PDBMCZqZXIFFMʣ
    w 8PSE1SFTT
    w 1)1
    w .Z42-
    IUUQTMPDBMCZqZXIFFMDPN

    View Slide

  6. ϓϥάΠϯ
    w 4IPX$VSSFOU5FNQMBUF
    w ද͍ࣔͯ͠ΔϖʔδʹͲΜͳϑΝΠ
    ϧ͕ಡΈࠐ·Ε͍ͯΔ͔Λ֬ೝͰ͖
    Δ
    w 8PSE1SFTT։ൃʢಛʹςʔϚ։ൃʣͰ
    ͸ඞध඼
    IUUQTKBXPSEQSFTTPSHQMVHJOTTIPXDVSSFOUUFNQMBUF

    View Slide

  7. ςʔϚϢχοτςετ
    ࢖͍ͬͯ·͔͢ʁ
    w ౤ߘ΍ݻఆϖʔδͷμϛʔσʔλ͕ఏڙ͞Ε͍ͯΔ
    w ༷ʑͳঢ়گΛ૝ఆͨ͠σʔλ
    w දࣔΛ֬ೝͯ͠ରԠ͕Ͱ͖Δ
    IUUQTXQEPDTPTEOKQςʔϚϢχοτςετ

    View Slide

  8. ඞཁͳࣄલ஌ࣝ
    w )5.-
    w $44
    w +BWB4DSJQU
    w 1)1
    BOENPSFZPVOFFE

    View Slide

  9. Θ͔Βͳ͍͜ͱ͸ஏ͔͍ͣ͜͠ͱͰ͸ͳ͍ɻ
    ͨͩɺௐ΂ͣʢֶ΅͏ͱͤͣʣΘ͔Βͳ͍ͱݴͬͯ
    ͍Δͷ͸ஏ͔͍ͣ͜͠ͱͩɻ
    Š,PKJ,VOP

    View Slide

  10. Θ͔Βͳ͍͜ͱ͸ௐ΂Α͏
    w )5.-ˠIUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-
    w $44ˠIUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44
    w +BWB4DSJQUˠIUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC
    +BWB4DSJQU
    w 1)1ˠIUUQTXXXQIQOFUNBOVBMKB
    w 8PSE1SFTTʹؔ͢Δ͜ͱˠIUUQTXQEPDTPTEOKQ

    View Slide

  11. ςʔϚ಺ϑΝΠϧҰཡʢલ൒ʣ
    ├ classes/
    ├ fonts/
    ├ inc/
    ├ js/
    ├ sass/
    ├ template-parts/
    ├ 404.php
    ├ archive.php
    ├ comments.php
    ├ footer.php
    ├ functions.php ##͜Ε͜Ε
    ├ header.php
    ├ image.php
    ├ index.php

    View Slide

  12. ςʔϚ಺ϑΝΠϧҰཡʢޙ൒ʣ
    ├ 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

    View Slide

  13. GVODUJPOTQIQDPEF
    DPEFIUUQTHJUIVCDPN8PSE1SFTTUXFOUZOJOFUFFOCMPCNBTUFSGVODUJPOTQIQ

    View Slide

  14. GVODUJPOTQIQͰ΍͍ͬͯΔ͜ͱ
    ޙํޓ׵ઃఆ຋༁ϑΝΠϧઃఆࣗಈϑΟʔυϦϯΫઃఆλΠτ
    ϧλάઃఆαϜωΠϧઃఆΧελϜϝχϡʔઃఆ)5.-࢖༻
    ڐՄઃఆΧελϜϩΰઃఆΧελϚΠβʔ΢ΟδΣοτ࠶ಡΈ
    ࠐΈઃఆ(VUFOCFSHσϑΥϧτελΠϧదԠઃఆ(VUFOCFSH෯
    ޿ɾશ෯ϘλϯදࣔઃఆΤσΟλʔελΠϧઃఆΤσΟλʔε
    λΠϧಡΈࠐΈઃఆ(VUFOCFSHϑΥϯταΠζઃఆ(VUFOCFSHΧ
    ϥʔύϨοτઃఆJGSBNFϨεϙϯγϒରԠઃఆ΢ΟδΣοτઃ
    ఆίϯςϯπ෯ઃఆεΫϦϓτಡΈࠐΈઃఆTLJQMJOLGPDVTpY
    ઃఆΧελϚΠβʔؔ࿈ઃఆ47(ΞΠίϯ༻ϑΝΠϧઃఆίϝ
    ϯτ༻΢ΥʔΧʔϑΝΠϧઃఆ֤छϑΝΠϧಡΈࠐΈઃఆ

    View Slide

  15. if ( ! function_exists() )
    if ( ! function_exists( 'twentynineteen_setup' ) ) :
    w ެࣜςʔϚͷίʔυΛಡΜͩ͜ͱ͕͋ΔਓͳΒݟͨ͜ͱ͋Δ͔
    ΋
    w ਌ςʔϚͱͯ͠ར༻͞ΕΔ͜ͱ͕͋ΔͳΒඞཁ
    w Ұൠతͳ੍࡞Ҋ݅Ͱ͸͋·Γඞཁͳ͍͔΋͠Εͳ͍͕ɺॻ͘บ
    Λ͚͓ͭͯ͘ͱྑ͍
    IUUQTXXXQIQOFUNBOVBMKBGVODUJPOGVODUJPOFYJTUTQIQ

    View Slide

  16. ࣗಈϑΟʔυϦϯΫ
    add_theme_support( 'automatic-feed-links' );
    w 344ϑΟʔυ΁ͷϦϯΫΛࣗಈͰઃஔͯ͘͠ΕΔ
    ࣗಈϑΟʔυϦϯΫ

    View Slide

  17. λΠτϧλάઃఆ
    add_theme_support( 'title-tag' );
    w ֤ϖʔδͷλΠτϧΛϑϨΩγϒϧʹදࣔͯ͘͠ΕΔ
    w IPPLΛར༻ͯ͠ΧελϚΠζ͢Δ͜ͱ΋Մೳ
    ؔ਺ϦϑΝϨϯεBEEUIFNFTVQQPSU

    View Slide

  18. αϜωΠϧઃఆ
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 1568, 9999 );
    w ౤ߘɾݻఆϖʔδͰΞΠΩϟονը૾ΛઃఆͰ͖ΔΑ͏ʹ͢Δ
    w set_post_thumbnail_size()Ͱ೚ҙͷαΠζͷը૾Λ༻ҙ
    ͢Δ͜ͱ΋Մೳ
    ؔ਺ϦϑΝϨϯεTFUQPTUUIVNCOBJMTJ[F
    ؔ਺ϦϑΝϨϯεBEEUIFNFTVQQPSU

    View Slide

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

    View Slide

  20. )5.-࢖༻ڐՄઃఆ
    add_theme_support(
    'html5',
    array(
    'search-form', 'comment-form', 'comment-list', 'gallery', 'caption',
    )
    );
    w ݕࡧϑΥʔϜɾίϝϯτϑΥʔϜɾίϝϯτϦετɾΪϟϥ
    ϦʔɾΩϟϓγϣϯͰ)5.-ϚʔΫΞοϓͷ࢓༷ΛڐՄ
    ؔ਺ϦϑΝϨϯεBEEUIFNFTVQQPSU

    View Slide

  21. (VUFOCFSHσϑΥϧτελΠϧదԠઃఆ
    add_theme_support( 'wp-block-styles' );
    w ͋Β͔͡Ί༻ҙ͞Ε͍ͯΔ(VUFOCFSH༻σϑΥϧτελΠϧΛద
    Ԡ͢Δ
    5IFNF4VQQPSU#MPDL&EJUPS)BOECPPL

    View Slide

  22. (VUFOCFSH෯޿ɾશ෯Ϙλϯදࣔઃఆ
    add_theme_support( 'align-wide' );
    w $44ରԠ͸ผ్ඞཁ
    5IFNF4VQQPSU#MPDL&EJUPS)BOECPPL

    View Slide

  23. ΤσΟλʔελΠϧઃఆɾಡΈࠐΈ
    add_theme_support( 'editor-styles' );
    add_editor_style( 'style-editor.css' );
    w ฤूը໘Ͱ࣮ࡍͷදࣔΛ֬ೝͰ͖ΔΑ͏ʹ͢ΔͨΊʹඞཁ
    w ҙ֎ͱରԠ͠ͳ͍ਓ͕ଟ͍
    &EJUPS4UZMF
    (VUFOCFSHରԠͷͨΊadd_theme_support( 'editor-styles' )ͰվΊͯઃఆ͢Δඞཁ͕͋Γ·͢

    View Slide

  24. (VUFOCFSHϑΥϯταΠζઃఆ
    add_theme_support(
    'editor-font-sizes',
    array(
    array(
    'name' => __( 'Small', 'twentynineteen' ),
    'shortName' => __( 'S', 'twentynineteen' ),
    'size' => 19.5,
    'slug' => 'small',
    ),
    ...
    )
    );

    View Slide

  25. (VUFOCFSHϑΥϯταΠζઃఆ
    w has-[slug-name]-font-sizeͱ͍͏$44Ϋϥε͕ཁૉʹ෇༩
    ͞ΕΔ
    w size͸ฤूը໘ͰͷσϑΥϧτ஋ࢦఆͷΈ
    w $44͸༻ҙ͢Δඞཁ͕͋Δ
    5IFNF4VQQPSU#MPDL&EJUPS)BOECPPL

    View Slide

  26. (VUFOCFSHΧϥʔύϨοτઃఆ
    add_theme_support(
    'editor-color-palette',
    array(
    array(
    'name' => __( 'Dark Gray', 'twentynineteen' ),
    'slug' => 'dark-gray',
    'color' => '#111',
    ),
    ...
    )
    );

    View Slide

  27. (VUFOCFSHΧϥʔύϨοτઃఆ
    w has-text-color has-[slug-name]-colorΫϥε͕෇༩͞
    ΕΔ
    w $44͸༻ҙ͢Δඞཁ͕͋Δ
    5IFNF4VQQPSU#MPDL&EJUPS)BOECPPL

    View Slide

  28. JGSBNFϨεϙϯγϒରԠઃఆ
    add_theme_support( 'responsive-embeds' );
    w JGSBNFͰૠೖ͞Εͨ΋ͷΛΛҡ࣋ͯ͠ϨεϙϯγϒରԠͤ͞
    Δ
    5IFNF4VQQPSU#MPDL&EJUPS)BOECPPL

    View Slide

  29. ίϯςϯπ෯ઃఆ
    $GLOBALS['content_width'] = apply_filters(
    'twentynineteen_content_width',
    640
    );
    w ը૾෯ͳͲΛͪ͜ΒͷαΠζʹ߹Θͤͯੜ੒ͯ͘͠ΕΔ
    $POUFOU8JEUI$PEFY

    View Slide

  30. εΫϦϓτಡΈࠐΈઃఆ
    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' );

    View Slide

  31. ελΠϧಡΈࠐΈઃఆ
    wp_enqueue_style(
    'twentynineteen-style', // ϋϯυϧ໊
    get_stylesheet_uri(), // ύε
    array(), // ґଘؔ܎
    wp_get_theme()->get( 'Version' ) // όʔδϣϯ
    );
    XQFORVFVFTUZMF
    c'VODUJPOc8PSE1SFTT%FWFMPQFS3FTPVSDFT

    View Slide

  32. +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

    View Slide

  33. TLJQMJOLGPDVTpYઃఆ
    w Ұ෦ͷϒϥ΢βͰɺtabΩʔͰૢ࡞͢Δͱ͖ʹɺinput focusͱvisual focus
    ͕Ұகͤͣɺskip to content͕͏·͘ಈ࡞͠ͳ͍όάΛमਖ਼͢ΔͨΊͷ΋ͷ
    w 8FCΞΫηγϏϦςΟʹߟྀͨ͠Βར༻͓ͯ͘͠ํ͕޷·͍͠ʢݸਓతݟղʣ
    w ʢͦ΋ͦ΋skip to contentΛઃஔ͍ͯ͠ͳ͍΋ͷ΋ଟ͍ʣ



    UXFOUZOJOFUFFOIFBEFSQIQBOEUXFOUZOJOFUFFOTUZMFDTT

    View Slide

  34. body_class()
    CPEZ@DMBTT
    c'VODUJPOc8PSE1SFTT%FWFMPQFS3FTPVSDFT

    View Slide

  35. ࢖͍ํ
    >
    ྫɿ౤ߘৄࡉϖʔδʢsingle.phpʣΛදࣔͨ͠৔߹

    View Slide

  36. ೚ҙΫϥεΛ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' );

    View Slide

  37. post_class()
    QPTU@DMBTT
    c'VODUJPOc8PSE1SFTT%FWFMPQFS3FTPVSDFT

    View Slide

  38. ࢖͍ํ
    >
    ྫɿ౤ߘৄࡉ
    id="post-1"
    class="post-1 post type-post status-publish
    format-standard hentry
    category-uncategorized entry">

    View Slide

  39. ೚ҙΫϥεΛpost_class()͔Βग़ྗ͢Δ
    post_class( 'class-name' );
    PS
    $classes = array(
    'class-name1', 'class-name2', 'class-name3'
    );
    post_class( $classes );
    PSIPPL

    View Slide

  40. डୗͰ81ςʔϚΛ࡞ΔࡍͷྲྀΕʢԶWFSʣ
    (JU)VCϦϙδτϦ࡞੒ʢडୗ͸QSJWBUFʣ
    ςεταʔόʔͰ؀ڥΛ༻ҙ
    ʢར༻͢ΔͱΘ͔͍ͬͯΔ΋ͷ͸શͯઃఆͯ͠ɺ"MMJOPOF81.JHSBUJPOͰ
    ϩʔΧϧ΁ʣ
    ϩʔΧϧ։ൃ؀ڥ༻ҙ
    w MPDBMCZqZXIFFM
    w ৗ༻Ξηοτ४උʢৗ༻NJYJOͳͲʣ
    w ֤ίϯύΠϧઃఆʢQSFQSPTOQNʣ
    ߏங։࢝ʢϞόΠϧϑΝʔετ'-0$44ʣ

    View Slide

  41. ೰·͍͜͠ͱ৭ʑ
    w ݻఆϖʔδͷϚʔΫΞοϓ͸page-[slug-name].phpͰ࡞
    Δʁ
    w ΧελϜ)5.-ϒϩοΫͰهड़͢Δʁ
    w ΧελϜϒϩοΫͷ੍࡞͸ඞཁʁ

    View Slide

  42. ੹೚Λ੍࣋ͬͨ࡞
    w 8PSE1SFTTΛ8PSE1SFTTͱͯ͠ར༻͢ΔͨΊʹ͸ɺ੹೚Λ࣋ͬͨઃܭ
    ͕ඞཁ
    w ςʔϚςϦτϦʔͱϓϥάΠϯςϦτϦʔ΁ͷཧղ
    w ϑϧϚʔΫΞοϓʢલड़ʣͰϖʔδΛߏஙͯ͠͠·͏͜ͱͷϦεΫ
    w ΫϥΠΞϯτ͕຤௕͘8PSE1SFTTΛར༻Ͱ͖Δ؀ڥΛͰ͖ΔݶΓ༻
    ҙ͢Δ੹೚
    ˠࠓ࡞͍ͬͯΔςʔϚ͔Β੾Γସ͑ͯ΋ΫϥΠΞϯτ͕ࠔΒͳ͍ઃܭ
    Λʂ

    View Slide

  43. 8PSE1SFTTςʔϚʹؔ͢Δօ͞Μͷ
    ҙݟΛΞϯΧϯϑΝϨϯεͰަ׵͠
    ·͠ΐ͏ʂ

    View Slide

  44. ͓ΘΓ

    View Slide