Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
TwentyNineteenから読み解くテーマ作成時のお作法
Koji Kuno
September 07, 2019
Programming
1
780
TwentyNineteenから読み解くテーマ作成時のお作法
Koji Kuno
September 07, 2019
Tweet
Share
More Decks by Koji Kuno
See All by Koji Kuno
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
oleindesign
0
110
WordPress 5.9 について
oleindesign
0
65
Gifu WordPress Meetup #40 での登壇資料 / gifuwpmeetup40
oleindesign
0
68
技術を何にどう使うか/how-to-use-technology-for-what
oleindesign
0
140
WordPressをこれから学ぼうとしている全ての方に伝えたいオススメの方法 / Recommendations-I-would-like-to-share-with-all-those-who-are-about-to-learn-WordPress
oleindesign
1
370
シビックプライド講座 第2回 ことばとメディアを武器に。-対話の道具箱としてのメディコス- /20201103-civic-pride
oleindesign
0
100
テイクアウト岐阜を立ち上げて得られた学びとその後/Lessons Learned from Launching Takeout Gifu and Beyond
oleindesign
3
35
「テイクアウト岐阜」を立ち上げて得られた学び / what i could learn from action of released TakeOut Gifu
oleindesign
0
250
「テイクアウト岐阜」の作り方 /how-to-make-takeout-gifu
oleindesign
0
360
Other Decks in Programming
See All in Programming
Rust on Lambda 大きめCSV生成
atsuyokota
1
400
Lookerとdbtの共存
ttccddtoki
0
640
Now in Android Overview
aosa4054
0
400
ふんわり理解するcontext
rukiadia
1
180
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.7k
SwiftUIで「意図」を伝える / swiftui_intention
uhooi
2
150
料理の注文メニューの3D化への挑戦
hideg
0
290
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
1901drama
0
180
動画合成アーキテクチャを実装してみて
satorunooshie
0
550
RustのWebフレームワーク周りの概観
hayao
0
180
YATA: collaborative documents and how to make them fast
horusiath
1
160
More Than Micro Frontends: 3 Further Use Cases for Module Federation @DWX 2022
manfredsteyer
PRO
0
380
Featured
See All Featured
The Invisible Side of Design
smashingmag
290
48k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Pencils Down: Stop Designing & Start Developing
hursman
113
9.8k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
4 Signs Your Business is Dying
shpigford
169
20k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.5k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Writing Fast Ruby
sferik
612
57k
Infographics Made Easy
chrislema
233
17k
Why Our Code Smells
bkeepers
PRO
324
55k
Docker and Python
trallard
27
1.6k
Transcript
5XFOUZ/JOFUFFO͔ΒಡΈղ͘ ςʔϚ࡞࣌ͷ͓࡞๏ ݄ʢʣ ΈΜͳͷ͗;ϝσΟΞίεϞε͓ͲΔελδΦ 0MFJO%FTJHOٱߊ࢘
ࣗݾհ w ϑϦʔϥϯε8FC੍࡞ऀˏذෞࢢ w (JGV8PSE1SFTT.FFUVQڞಉΦʔΨφΠβʔ w $PEFS%PKPذෞνϟϯϐΦϯ w άϥϑΟοΫσβΠϯग़ɺ8FCؔ࿈ձࣾ Ͱͷۈྺͳ͠
w 8FCಠֶ8PSE1SFTTྺҎ্ w PMFJOEFTJHODPO!0MFJO@KQ w Շ༷͕࡛ۄʹ୯ෝதʹ͖ͭՈࣄҭࣇଟ Ίͷੜ׆ IUUQTQSPpMFTXPSEQSFTTPSHPMFJO
8PSE1SFTTͷެࣜςʔϚΛಡΈղ͍ͯ ࣮ࡍʢۀʣͷςʔϚ੍࡞ʹཱͯΒΕΔ ࡞๏Λհ͠·͢ɻ ˞ͤΔ͕෯͗͢ΔͨΊɺΑΓৄ͘͠Γ͍ͨํΞϯΧϯϑΝϨϯεΛ׆༻͍ͯͩ͘͠͞ɻ
ΞδΣϯμ w ςʔϚ։ൃͷڥʹ͍ͭͯ w ࠓͷͷཧղɾ׆༻ʹඞཁͳࣝ w 5XFOUZ/JOFUFFOͷ෦ϑΝΠϧ w GVODUJPOTQIQΛಡΈղ͘ w
CPEZ@DMBTT w QPTU@DMBTT w ςʔϚΛ࡞Δʹ͋ͨͬͯͷཧతͳߟ͑ํ
֬ೝڥ w ϩʔΧϧ։ൃڥʢ-PDBMCZqZXIFFMʣ w 8PSE1SFTT w 1)1 w .Z42- IUUQTMPDBMCZqZXIFFMDPN
ϓϥάΠϯ w 4IPX$VSSFOU5FNQMBUF w ද͍ࣔͯ͠ΔϖʔδʹͲΜͳϑΝΠ ϧ͕ಡΈࠐ·Ε͍ͯΔ͔Λ֬ೝͰ͖ Δ w 8PSE1SFTT։ൃʢಛʹςʔϚ։ൃʣͰ ඞध
IUUQTKBXPSEQSFTTPSHQMVHJOTTIPXDVSSFOUUFNQMBUF
ςʔϚϢχοτςετ ͍ͬͯ·͔͢ʁ w ߘݻఆϖʔδͷμϛʔσʔλ͕ఏڙ͞Ε͍ͯΔ w ༷ʑͳঢ়گΛఆͨ͠σʔλ w දࣔΛ֬ೝͯ͠ରԠ͕Ͱ͖Δ IUUQTXQEPDTPTEOKQςʔϚϢχοτςετ
ඞཁͳࣄલࣝ w )5.- w $44 w +BWB4DSJQU w 1)1 BOENPSFZPVOFFE
Θ͔Βͳ͍͜ͱஏ͔͍ͣ͜͠ͱͰͳ͍ɻ ͨͩɺௐͣʢֶ΅͏ͱͤͣʣΘ͔Βͳ͍ͱݴͬͯ ͍Δͷஏ͔͍ͣ͜͠ͱͩɻ ,PKJ,VOP
Θ͔Βͳ͍͜ͱௐΑ͏ w )5.-ˠIUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.- w $44ˠIUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC$44 w +BWB4DSJQUˠIUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC +BWB4DSJQU w 1)1ˠIUUQTXXXQIQOFUNBOVBMKB
w 8PSE1SFTTʹؔ͢Δ͜ͱˠIUUQTXQEPDTPTEOKQ
ςʔϚϑΝΠϧҰཡʢલʣ ├ classes/ ├ fonts/ ├ inc/ ├ js/ ├
sass/ ├ template-parts/ ├ 404.php ├ archive.php ├ comments.php ├ footer.php ├ functions.php ##͜Ε͜Ε ├ header.php ├ image.php ├ index.php
ςʔϚϑΝΠϧҰཡʢޙʣ ├ 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
GVODUJPOTQIQDPEF DPEFIUUQTHJUIVCDPN8PSE1SFTTUXFOUZOJOFUFFOCMPCNBTUFSGVODUJPOTQIQ
GVODUJPOTQIQͰ͍ͬͯΔ͜ͱ ޙํޓઃఆ༁ϑΝΠϧઃఆࣗಈϑΟʔυϦϯΫઃఆλΠτ ϧλάઃఆαϜωΠϧઃఆΧελϜϝχϡʔઃఆ)5.-༻ ڐՄઃఆΧελϜϩΰઃఆΧελϚΠβʔΟδΣοτ࠶ಡΈ ࠐΈઃఆ(VUFOCFSHσϑΥϧτελΠϧదԠઃఆ(VUFOCFSH෯ ɾશ෯ϘλϯදࣔઃఆΤσΟλʔελΠϧઃఆΤσΟλʔε λΠϧಡΈࠐΈઃఆ(VUFOCFSHϑΥϯταΠζઃఆ(VUFOCFSHΧ ϥʔύϨοτઃఆJGSBNFϨεϙϯγϒରԠઃఆΟδΣοτઃ ఆίϯςϯπ෯ઃఆεΫϦϓτಡΈࠐΈઃఆTLJQMJOLGPDVTpY ઃఆΧελϚΠβʔؔ࿈ઃఆ47(ΞΠίϯ༻ϑΝΠϧઃఆίϝ
ϯτ༻ΥʔΧʔϑΝΠϧઃఆ֤छϑΝΠϧಡΈࠐΈઃఆ
if ( ! function_exists() ) if ( ! function_exists( 'twentynineteen_setup'
) ) : w ެࣜςʔϚͷίʔυΛಡΜͩ͜ͱ͕͋ΔਓͳΒݟͨ͜ͱ͋Δ͔ w ςʔϚͱͯ͠ར༻͞ΕΔ͜ͱ͕͋ΔͳΒඞཁ w Ұൠతͳ੍࡞Ҋ݅Ͱ͋·Γඞཁͳ͍͔͠Εͳ͍͕ɺॻ͘บ Λ͚͓ͭͯ͘ͱྑ͍ IUUQTXXXQIQOFUNBOVBMKBGVODUJPOGVODUJPOFYJTUTQIQ
ࣗಈϑΟʔυϦϯΫ add_theme_support( 'automatic-feed-links' ); w 344ϑΟʔυͷϦϯΫΛࣗಈͰઃஔͯ͘͠ΕΔ ࣗಈϑΟʔυϦϯΫ
λΠτϧλάઃఆ add_theme_support( 'title-tag' ); w ֤ϖʔδͷλΠτϧΛϑϨΩγϒϧʹදࣔͯ͘͠ΕΔ w IPPLΛར༻ͯ͠ΧελϚΠζ͢Δ͜ͱՄೳ ؔϦϑΝϨϯεBEEUIFNFTVQQPSU
αϜωΠϧઃఆ add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 1568, 9999 ); w ߘɾݻఆϖʔδͰΞΠΩϟονը૾ΛઃఆͰ͖ΔΑ͏ʹ͢Δ
w set_post_thumbnail_size()ͰҙͷαΠζͷը૾Λ༻ҙ ͢Δ͜ͱՄೳ ؔϦϑΝϨϯεTFUQPTUUIVNCOBJMTJ[F ؔϦϑΝϨϯεBEEUIFNFTVQQPSU
ΧελϜϝχϡʔઃఆ register_nav_menus( array( 'menu-1' => __( 'Primary', 'twentynineteen' ), 'footer'
=> __( 'Footer Menu', 'twentynineteen' ), 'social' => __( 'Social Links Menu', 'twentynineteen' ), ) ); w ཧը໘ˠ֎؍ˠϝχϡʔͰϝχϡʔΛ͑ΔΑ͏ʹͳΔ w Ϣʔβʔ͕มߋͰ͖ΔΑ͏ʹͳΔ w σβΠϯ༷ʹΑͬͯΧελϚΠζ͕ඞཁʹͳΔ߹͋Δ <8PSE1SFTT>ΧελϜϝχϡʔػೳͷઃఆͱઃஔͱॻ͖ग़͞ΕΔιʔείʔυΛ͔Γ͘͢հ͠·͢ ؔϦϑΝϨϯεSFHJTUFSOBWNFOVT
)5.-༻ڐՄઃఆ add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', )
); w ݕࡧϑΥʔϜɾίϝϯτϑΥʔϜɾίϝϯτϦετɾΪϟϥ ϦʔɾΩϟϓγϣϯͰ)5.-ϚʔΫΞοϓͷ༷ΛڐՄ ؔϦϑΝϨϯεBEEUIFNFTVQQPSU
(VUFOCFSHσϑΥϧτελΠϧదԠઃఆ add_theme_support( 'wp-block-styles' ); w ͋Β͔͡Ί༻ҙ͞Ε͍ͯΔ(VUFOCFSH༻σϑΥϧτελΠϧΛద Ԡ͢Δ 5IFNF4VQQPSU#MPDL&EJUPS)BOECPPL
(VUFOCFSH෯ɾશ෯Ϙλϯදࣔઃఆ add_theme_support( 'align-wide' ); w $44ରԠผ్ඞཁ 5IFNF4VQQPSU#MPDL&EJUPS)BOECPPL
ΤσΟλʔελΠϧઃఆɾಡΈࠐΈ add_theme_support( 'editor-styles' ); add_editor_style( 'style-editor.css' ); w ฤूը໘Ͱ࣮ࡍͷදࣔΛ֬ೝͰ͖ΔΑ͏ʹ͢ΔͨΊʹඞཁ w
ҙ֎ͱରԠ͠ͳ͍ਓ͕ଟ͍ &EJUPS4UZMF (VUFOCFSHରԠͷͨΊadd_theme_support( 'editor-styles' )ͰվΊͯઃఆ͢Δඞཁ͕͋Γ·͢
(VUFOCFSHϑΥϯταΠζઃఆ add_theme_support( 'editor-font-sizes', array( array( 'name' => __( 'Small', 'twentynineteen'
), 'shortName' => __( 'S', 'twentynineteen' ), 'size' => 19.5, 'slug' => 'small', ), ... ) );
(VUFOCFSHϑΥϯταΠζઃఆ w has-[slug-name]-font-sizeͱ͍͏$44Ϋϥε͕ཁૉʹ༩ ͞ΕΔ w sizeฤूը໘ͰͷσϑΥϧτࢦఆͷΈ w $44༻ҙ͢Δඞཁ͕͋Δ 5IFNF4VQQPSU#MPDL&EJUPS)BOECPPL
(VUFOCFSHΧϥʔύϨοτઃఆ add_theme_support( 'editor-color-palette', array( array( 'name' => __( 'Dark Gray',
'twentynineteen' ), 'slug' => 'dark-gray', 'color' => '#111', ), ... ) );
(VUFOCFSHΧϥʔύϨοτઃఆ w has-text-color has-[slug-name]-colorΫϥε͕༩͞ ΕΔ w $44༻ҙ͢Δඞཁ͕͋Δ 5IFNF4VQQPSU#MPDL&EJUPS)BOECPPL
JGSBNFϨεϙϯγϒରԠઃఆ add_theme_support( 'responsive-embeds' ); w JGSBNFͰૠೖ͞ΕͨͷΛΛҡ࣋ͯ͠ϨεϙϯγϒରԠͤ͞ Δ 5IFNF4VQQPSU#MPDL&EJUPS)BOECPPL
ίϯςϯπ෯ઃఆ $GLOBALS['content_width'] = apply_filters( 'twentynineteen_content_width', 640 ); w ը૾෯ͳͲΛͪ͜ΒͷαΠζʹ߹Θͤͯੜͯ͘͠ΕΔ $POUFOU8JEUI$PEFY
εΫϦϓτಡΈࠐΈઃఆ 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' );
ελΠϧಡΈࠐΈઃఆ wp_enqueue_style( 'twentynineteen-style', // ϋϯυϧ໊ get_stylesheet_uri(), // ύε array(), //
ґଘؔ wp_get_theme()->get( 'Version' ) // όʔδϣϯ ); XQFORVFVFTUZMF c'VODUJPOc8PSE1SFTT%FWFMPQFS3FTPVSDFT
+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
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
body_class() CPEZ@DMBTT c'VODUJPOc8PSE1SFTT%FWFMPQFS3FTPVSDFT
͍ํ <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">
ҙΫϥεΛ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' );
post_class() QPTU@DMBTT c'VODUJPOc8PSE1SFTT%FWFMPQFS3FTPVSDFT
͍ํ <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">
ҙΫϥεΛpost_class()͔Βग़ྗ͢Δ post_class( 'class-name' ); PS $classes = array( 'class-name1', 'class-name2',
'class-name3' ); post_class( $classes ); PSIPPL
डୗͰ81ςʔϚΛ࡞ΔࡍͷྲྀΕʢԶWFSʣ (JU)VCϦϙδτϦ࡞ʢडୗQSJWBUFʣ ςεταʔόʔͰڥΛ༻ҙ ʢར༻͢ΔͱΘ͔͍ͬͯΔͷશͯઃఆͯ͠ɺ"MMJOPOF81.JHSBUJPOͰ ϩʔΧϧʣ ϩʔΧϧ։ൃڥ༻ҙ w
MPDBMCZqZXIFFM w ৗ༻Ξηοτ४උʢৗ༻NJYJOͳͲʣ w ֤ίϯύΠϧઃఆʢQSFQSPTOQNʣ ߏங։࢝ʢϞόΠϧϑΝʔετ'-0$44ʣ
·͍͜͠ͱ৭ʑ w ݻఆϖʔδͷϚʔΫΞοϓpage-[slug-name].phpͰ࡞ Δʁ w ΧελϜ)5.-ϒϩοΫͰهड़͢Δʁ w ΧελϜϒϩοΫͷ੍࡞ඞཁʁ
Λ੍࣋ͬͨ࡞ w 8PSE1SFTTΛ8PSE1SFTTͱͯ͠ར༻͢ΔͨΊʹɺΛ࣋ͬͨઃܭ ͕ඞཁ w ςʔϚςϦτϦʔͱϓϥάΠϯςϦτϦʔͷཧղ w ϑϧϚʔΫΞοϓʢલड़ʣͰϖʔδΛߏஙͯ͠͠·͏͜ͱͷϦεΫ w ΫϥΠΞϯτ͕͘8PSE1SFTTΛར༻Ͱ͖ΔڥΛͰ͖ΔݶΓ༻
ҙ͢Δ ˠࠓ࡞͍ͬͯΔςʔϚ͔ΒΓସ͑ͯΫϥΠΞϯτ͕ࠔΒͳ͍ઃܭ Λʂ
8PSE1SFTTςʔϚʹؔ͢Δօ͞Μͷ ҙݟΛΞϯΧϯϑΝϨϯεͰަ͠ ·͠ΐ͏ʂ
͓ΘΓ