Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TwentyNineteenから読み解くテーマ作成時のお作法
Search
Koji Kuno
September 07, 2019
Programming
1.1k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
TwentyNineteenから読み解くテーマ作成時のお作法
Koji Kuno
September 07, 2019
More Decks by Koji Kuno
See All by Koji Kuno
unitoneが楽しくなるまでの道のり
oleindesign
0
120
WordPress 6.5 の新機能紹介
oleindesign
0
160
How to deal with WordPress themes in the future
oleindesign
0
1.8k
WordPress(再)入門 - 運用・学習編
oleindesign
0
260
WordPress(再)入門 - カスタマイズ編
oleindesign
0
280
WordPress(再)入門 - コンテンツ作成方法編
oleindesign
0
240
WordPress(再)入門 - テーマ・プラグイン編 / introduction-to-wordpress-again-theme-plugin
oleindesign
0
250
WordPress(再)入門 - 基本設定編 / introduction-to-wordpress-again-basic-settings
oleindesign
0
530
WordPress(再)入門 - 基礎知識・環境編
oleindesign
2
1.1k
Other Decks in Programming
See All in Programming
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
pluu
0
220
Terraform標準の組織で AWS CDKをどう使うか
mu7889yoon
1
520
Android CLI
fornewid
0
220
AWS DevOps AgentのAzure接続機能を検証して見えた活用法/Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
masakiokuda
1
230
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
rick_ds
0
580
Claude Code全社展開のためにやったことn選~プラグイン302個・コミッター271人を支えるために~
kenchan
5
1.5k
源内ハンズオン概要編
hideg
0
180
ここ半年くらいでAIに作らせたR用ツール
eitsupi
0
380
楽しそうなつよつよエンジニアと目が死んでる僕/A brilliant engineer having a blast, and dead-eyed me.
3l4l5
2
180
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
0
1.8k
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
gotok365
3
2.8k
PostgreSQL 18で考えるUUID主キー
kazuhiro1982
0
470
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.3k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
280
A Soul's Torment
seathinner
6
3.4k
Paper Plane
katiecoart
PRO
2
53k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
330
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Unsuck your backbone
ammeep
672
58k
Un-Boring Meetings
codingconduct
0
390
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ςʔϚʹؔ͢Δօ͞Μͷ ҙݟΛΞϯΧϯϑΝϨϯεͰަ͠ ·͠ΐ͏ʂ
͓ΘΓ