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
830
TwentyNineteenから読み解くテーマ作成時のお作法
Koji Kuno
September 07, 2019
Tweet
Share
More Decks by Koji Kuno
See All by Koji Kuno
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
140
超入門サイトエディター / Easiest-introduction-of-Site-Editor
oleindesign
0
110
Walk-Through WordPress 6.1
oleindesign
0
40
超入門フルサイト編集/easiest introduction of full site editing
oleindesign
0
160
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
oleindesign
0
170
WordPress 5.9 について
oleindesign
0
82
Gifu WordPress Meetup #40 での登壇資料 / gifuwpmeetup40
oleindesign
0
99
技術を何にどう使うか/how-to-use-technology-for-what
oleindesign
0
170
WordPressをこれから学ぼうとしている全ての方に伝えたいオススメの方法 / Recommendations-I-would-like-to-share-with-all-those-who-are-about-to-learn-WordPress
oleindesign
1
420
Other Decks in Programming
See All in Programming
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
350
tidy_rpart
bk_18
0
600
What's new in Shopware 6.5
shyim
0
110
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
なぜRubyコミュニティにコミットするのか?
luccafort
0
310
新卒でサービス立ち上げから Hasuraを使って3年経った振り返り
yutorin
0
230
和暦を正しく扱うための暦の話
nagise
10
6.5k
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
290
Remix + Cloudflare Pages + D1 で ポケモン SV のレンタルチームを検索できるアプリを作ってみた
kuroppe1819
4
1.4k
Listかもしれない
irof
1
280
jq at the Shortcuts
cockscomb
1
430
Becoming an Android Librarian (Android World Wide 2023 Jan)
skydoves
1
210
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
A better future with KSS
kneath
230
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
9.1k
The Language of Interfaces
destraynor
149
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6.7k
How to name files
jennybc
47
73k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
Navigating Team Friction
lara
177
12k
Transcript
5XFOUZ/JOFUFFO͔ΒಡΈղ͘ ςʔϚ࡞࣌ͷ͓࡞๏ ݄ʢʣ ΈΜͳͷ͗;ϝσΟΞίεϞε͓ͲΔελδΦ 0MFJO%FTJHOٱߊ࢘
ࣗݾհ w ϑϦʔϥϯε8FC੍࡞ऀˏذෞࢢ w (JGV8PSE1SFTT.FFUVQڞಉΦʔΨφΠβʔ w $PEFS%PKPذෞνϟϯϐΦϯ w άϥϑΟοΫσβΠϯग़ɺ8FCؔ࿈ձࣾ Ͱͷۈྺͳ͠
w 8FCಠֶ8PSE1SFTTྺҎ্ w PMFJOEFTJHODPO
[email protected]
w Շ༷͕࡛ۄʹ୯ෝதʹ͖ͭՈࣄҭࣇଟ Ίͷੜ׆ IUUQTQSPpMFTXPSEQSFTTPSHPMFJO
8PSE1SFTTͷެࣜςʔϚΛಡΈղ͍ͯ ࣮ࡍʢۀʣͷςʔϚ੍࡞ʹཱͯΒΕΔ ࡞๏Λհ͠·͢ɻ ˞ͤΔ͕෯͗͢ΔͨΊɺΑΓৄ͘͠Γ͍ͨํΞϯΧϯϑΝϨϯεΛ׆༻͍ͯͩ͘͠͞ɻ
ΞδΣϯμ w ςʔϚ։ൃͷڥʹ͍ͭͯ w ࠓͷͷཧղɾ׆༻ʹඞཁͳࣝ w 5XFOUZ/JOFUFFOͷ෦ϑΝΠϧ w GVODUJPOTQIQΛಡΈղ͘ w
[email protected]
w
[email protected]
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()
[email protected]
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()
[email protected]
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ςʔϚʹؔ͢Δօ͞Μͷ ҙݟΛΞϯΧϯϑΝϨϯεͰަ͠ ·͠ΐ͏ʂ
͓ΘΓ