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
WordPress テーマ作成超入門
Search
RyoUozumi
June 09, 2018
Technology
0
170
WordPress テーマ作成超入門
@WordBench Nagoya 201806
How-to-create-wp-theme-firststep-WBN201806
RyoUozumi
June 09, 2018
Tweet
Share
More Decks by RyoUozumi
See All by RyoUozumi
ブログをスタートする人にオススメのプラグインとエディタの紹介
ryoraspp
0
120
ブロックエディター(Gutenberg)をもっと活用しよう! Aichi WordPress Meetup #5
ryoraspp
0
75
WordPress テーマ作成超入門
ryoraspp
0
72
WordPressを使う上で知っておくと 幸せ になること
ryoraspp
0
87
WordPressの関数から踏む一歩は初心者にとって大きな一歩! [WordFes Nagoya 2017 5216教室] #WordFes #WordFes03
ryoraspp
0
1.8k
大学生によるWordPress活用事例紹介 -1-大学生にこそ普及してほしいWordPress
ryoraspp
0
100
Other Decks in Technology
See All in Technology
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
160
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
220
普通のチームがスクラムを会得するたった一つの冴えたやり方 / the best way to scrum
okamototakuyasr2
0
100
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
480
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
2
460
「Linux」という言葉が指すもの
sat
PRO
4
140
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
260
AIをプライベートや業務で使ってみよう!効果的な認定資格の活かし方
fukazawashun
0
100
研究開発と製品開発、両利きのロボティクス
youtalk
1
530
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
230
slog.Handlerのよくある実装ミス
sakiengineer
4
420
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
320
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
74
5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Context Engineering - Making Every Token Count
addyosmani
3
57
It's Worth the Effort
3n
187
28k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Transcript
WORDPRESS ςʔϚ࡞ೖ ڕॅྒɹ@WordBench Nagoya 201806
ࣗݾհ • ڕॅྒ • ࠓͦ͜ଔۀ͍ͨ͠௨৴ͷେੜʢӳޠΛओʹษڧதʣ • δϟζτϥϯϖοτͱΨδΣοτ͕͖ • 20138݄29ΑΓݱryo.nagoyaͰWordPressσϏϡʔ •
Twitter:@ryoraspp • Facebook: https://www.facebook.com/blog.ryoraspp/
NHKʹग़ԋͨ͜͠ͱ
ͦͦςʔϚͬͯԿʁ
צҧ͍ͯ͠͠·͏ͷ
–ίτόϯΫ(σδλϧେࣙઘͷղઆ) “ςʔϚʢʪυΠπʫThemaʣ ߦಈ࡞ͳͲͷجௐͱͳΔߟ͑ɻओɻ·ͨɺจͷɺָۂͷओટͳͲɻ ʮڞಉݚڀͷςʔϚΛܾΊΔʯʮʹͱͬͯۀࡦ͕ࠓޙͷςʔϚʹͳΔʯ ग़యɹখֶؗ ”
ͬͪ͜ͷςʔϚͱ͍͏ҙຯͰͳ ͍ʂ ύιίϯۀքͰͷςʔϚͷҙຯ
–ίτόϯΫʢύιίϯͰࠔͬͨͱ͖ʹ։͘ຊͷղઆʣ “ςʔϚ ιϑτͷഎܠϘλϯɺϑΥϯτͳͲͷσβΠϯΛ·ͱΊͯมߋ͠ɺݟͨΛม͑Δػೳͷ͜ͱͰ͢ɻʮεΩϯʯ ͱݺͿ͜ͱ͋Γ·͢ɻΟϯυζ8ͷσεΫτοϓʹʮݸਓઃఆʯʹςʔϚͷઃఆ͕͋Γ·͢ɻ ग़యɹ(ג)ே৽ฉग़൛ൃߦʮύιίϯͰࠔͬͨͱ͖ʹ։͘ຊʯύιίϯͰࠔͬͨͱ͖ʹ։͘ຊʹ͍ͭͯɹใ ”
ͭ·ΓWORDPRESͷ ςʔϚ ݟͨΛม͑ΔػೳͰ͢ʂ
ςϯϓϨʔτ֊
https://wpdocs.osdn.jp/wiki/images/wp-template-hierarchy.jpg
HTMLͷ߹ <header> <body> <footer> style.css
ςʔϚͷ߹ header.php single.php footer.php style.css sidebar.php index.php page.php front-page.php archive.php
404.php functions.php
• index.php ͷςϯϓϨʔτϑΝΠϧ • archive.php ΞʔΧΠϒϖʔδΛදࣔ͢ΔςϯϓϨʔτϑΝΠϧ • single.php ݸผߘϖʔδΛදࣔ͢ΔςϯϓϨʔτϑΝΠϧ •
page.php ݻఆϖʔδΛදࣔ͢ΔςϯϓϨʔτϑΝΠϧ • front-page.php αΠτϑϩϯτϖʔδΛදࣔ͢ΔςϯϓϨʔτϑΝΠϧ • sidebar.php αΠυόʔΛදࣔ͢ΔςϯϓϨʔτϑΝΠϧ • header.php <?php get_header(); ?> ͷத • footer.php <?php get_footer(); ?> ͷத • functions.php ςʔϚͷػೳʢϓϥάΠϯͱಉ͜͡ͱ͕Ͱ͖Δʣ
͜͜Ͱ͜Μͳ͜ͱ͕ٙੜ·Ε·͢
ςϯϓϨʔτϑΝΠϧʹ ػೳ͔͚Δ functions.phpʹ ϓϥάΠϯʹ
ͱ͍͏͜ͱʂ
ςϯϓϨʔτϑΝΠϧʹػೳΛ͔͖͍ͨؾ࣋ͪ ͱ functions.phpʹػೳΛ͔͖͔͍ͨؾ࣋ͪ ͱ ϓϥάΠϯʹػೳΛॻ͖͍ͨؾ࣋ͪ ͕ ಉ࣌ʹ༙͖ىͬͯ͜͠·͏
ରॲ๏ • ςϯϓϨʔτϑΝΠϧʹςϯϓϨʔτλά Λओʹ • functions.phpʹςʔϚͷػೳΛ͔͘ • ϓϥάΠϯʹςʔϚʹؔ͢ΔҎ֎ͷ͜ͱΛ͔ ͘
͔͠͠ॳ৺ऀʹHOOKSͱ͍͏ٕज़Λ͏ͷ ͍͠ͷͰɺجૅతͳςΫχοΫΛʹ͚ͭΔ· ͰςʔϚςʔϚͷͨΊͷؔʢςϯϓϨʔτ λάʣΛ͔͘Α͏զຫ͠·͠ΐ͏ɻ
ςʔϚΛ࡞͍ͬͯ͜͏ʂ
ςʔϚΛ࡞͢Δલʹ • WordPressͷσόοάϞʔυΛ༗ޮԽ • ϓϥάΠϯʢShow Current Template ຢWP Extend ToolbarʣΛΠϯετʔϧ+༗ޮԽ
• ςʔϚϢχοτςετͷΠϯϙʔτ • style.cssͷίϝϯτʹςʔϚʹؔ͢Δ༰Λهड़
STYLE.CSSΛॻ͍ͯΈΑ͏ /* Theme Name: ςʔϚͷ໊લ Theme URI: ςʔϚͷαΠτ Description: ςʔϚͷઆ໌
Version: 0.1 όʔδϣϯ1ʹͯ͠(ͤͯ͞)ެ։͠Α͏ʂ Author: WBN ࣗͷ໊લΛΒ͠ΊΕΔ Author URI: ࣗͷαΠτ License: GNU General Public License v2 or later */ •
ςʔϚΛ࡞͢Δલʹ • <?php get_header(); ?> • header.phpΛಡΈࠐΉ • <?php get_sidebar();
?> • sidebar.phpΛಡΈࠐΉ • <?php get_footer(); ?> • footer.phpΛಡΈࠐΉ
Τεέʔϓॲཧ • Τεέʔϓॲཧͷඞཁੑ • ͠URLʹ༗ͳϦϯΫΛೖྗ͞ΕͯɺແԽͰ͖ɺXSSΛࢭͰ͖Δ • <?php echo esc_url( home_url(
'/' ) ); ?> • ྫ:<script>ѱ͍.js</script> • ݕࡧཝίϝϯτཝʹ͔͔Εͯ • <script>ѱ͍.js</script> • ͱͳΓѱ͍Javascript͕ແޮԽ͞ΕΔ •
HEADER.PHPΛॻ͍ͯΈΑ͏ • <!DOCTYPE html> • <html <?php language_attributes(); ?> •
<head> • <meta charset="<?php bloginfo( 'charset' ); ?>”> • <?php wp_head(); ?> • </head>
NAVIGATION • wp_nav_menuʢʣΛ༻͢Δ • ԼهΛfunctions.phpʹ͔͘ • register_nav_menus( array( • 'menu-1'
=> esc_html__( 'Primary', 'wbn' ), • ) );
FOOTER.PHPΛॻ͍ͯΈΑ͏ • Copyright(ஶ࡞ݖදࣔʣ • <?php wp_footer() ?> • </body> •
</html>
SINGLE.PHPΛॻ͍ͯΈΑ͏ • while ( have_posts() ) : • the_post(); •
the_post_navigation(); • comments_template();
SIDEBAR.PHPΛॻ͍ͯΈΑ͏ • <aside id="secondary" class="widget-area"> • <?php dynamic_sidebar( 'sidebar-1' );
? > • </aside>
FUNCTIONS.PHP • add_theme_support( 'title-tag' ); • λΠτϧλάΛՃͯ͘͠ΕΔ • add_theme_support( 'post-thumbnails'
); • ΞΠΩϟονը૾Λొ
FUNTIODNS.PHP 2 • CSSjsͳͲΛfunctions.phpͰཧ͍ͨ͠߹ • function wbn_scripts() { • wp_enqueue_style(
'wbn-style', get_stylesheet_uri() ); • wp_enqueue_script( 'wbn-navigation', get_template_directory_uri() . '/js/ navigation.js', array(), '20151215', true ); • wp_enqueue_script( 'wbn-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
FUNCTIONS.PHP 3 • ઌ΄Ͳ࡞ͬͨαΠυόʔΛfuntions.phpʹొ • function wbn_widgets_init() { • register_sidebar(
array( • 'name' => esc_html__( 'Sidebar', 'wbn' ), • 'id' => 'sidebar-1', • 'description' => esc_html__( 'Add widgets here.', 'wbn' ), • 'before_widget' => '<section id="%1$s" class="widget %2$s">', • 'after_widget' => '</section>', • 'before_title' => '<h2 class="widget-title">', • 'after_title' => '</h2>', • ) );
॓ɿ͜ͷςϯϓϨʔτΛ ͔͍ͯΈΑ͏ • page.phpʢݻఆϖʔδΛදࣔ͢ΔςϯϓϨʔτʣ • singular.php(page.phpͱsingle.php͕ແ͍ࡍʹಡΈࠐ·ΕΔ (4.3લindex.php͕ಡΈࠐ· Εͯͨ)) • index.php
• archive.php • category.php • author.php <?php get_template_part( ‘template/page’); ?> ʮςϯϓϨʔτ ύʔπʯͰݕࡧ
THEME CHECK WordPress.org ͰఆΊΒΕ͍ͯΔςʔϚͷ࣭ ʹؔ͢ΔΨΠυϥΠϯʯΛຬ͍ͨͯ͠Δ͔Λ νΣοΫͰ͖ΔϓϥάΠϯ
None
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ʂ
͜ͷεϥΠυॳ৺ऀ͚ʹ࡞ͬͨͷͰͳ͘ɺ ॳ৺ऀ͕࡞ͬͨͷͳͷͰؒҧͬͯͨΓɺͨ͠ Β͝ࢦఠ͍ͩ͘͞ ΑΖ͓͘͠ئ͍͠·͢ɻ