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

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