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
Toro_Unit (Hiroshi Urabe)
May 20, 2017
Technology
3
900
WordPress テーマ作成再入門
WordBench 長野 vol.9 での登壇資料です。
Toro_Unit (Hiroshi Urabe)
May 20, 2017
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.2k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.4k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.5k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
360
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
400
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
520
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
830
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.1k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.8k
Other Decks in Technology
See All in Technology
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
660
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
290
コンテナのトラブルシューティング目線から AWS SAW についてしゃべってみる
kazzpapa3
1
110
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
150
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
170
Forget efficiency – Become more productive without the stress
ufried
0
150
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.6k
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
9
2.1k
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
290k
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Automating Front-end Workflow
addyosmani
1365
200k
The Cult of Friendly URLs
andyhume
78
6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Code Reviewing Like a Champion
maltzj
519
39k
Six Lessons from altMBA
skipperchong
26
3.5k
Documentation Writing (for coders)
carmenintech
65
4.4k
Into the Great Unknown - MozCon
thekraken
31
1.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Transcript
WordPress ςʔϚ࡞࠶ೖ Toro_Unit / 2017.05.20 @ WBNagano vol.9 1
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) • দຊࢢࡏॅ 10 • ϑϦʔϥϯε
• Frontend Engineer / Plugin Developer / Web Designer • WordBench ϞσϨʔλʔ Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 2
Plugins Developer • Custom Post Type Permalinks • Active install:
80,000 + • Downloads: 380,000 + • Simple Post Type Permalinks • Powerful Posts Per Page • Responsive Slide • etc... 3
Theme Developer Vanilla 4
Other Contribution • 4.3 ~ 4.5, 4.7 ίΞߩݙऀ • WordCamp
Kansai 2016 / Tokyo 2016 ࣮ߦҕһ • WordCamp Kansai 2017 ηογϣϯνʔϜ Ϧʔμʔ • Speaker • WordCamp Kansai 2015, 2016 / Tokyo 2015, 2016 • WordBench Tokyo • WordBench Osaka • etc... 5
ςʔϚ࡞ͬͨ͜ͱ͋Δਓ! 6
WordPressͷਪ͍ͯ͠ΔςʔϚͷ࡞ ΓํΛͬͯΔਓ! 7
ʮผʹಈ͍ͯΔ͔Βྑ͘ͳ͍ʁʯ 8
ʮ͍ʁ(Җѹ)ʯ 9
ਪ͞Εͳ͍࡞ΓํΛ͍ͯ͠Δͱɾɾɾ • ϓϥάΠϯ͕ͳΜ͔มͳಈ͖͢Δɾɾɾɻ • ຊͷ௨Γʹ࡞ͬͨͷʹ͏͔͝ͳ͍ɾɾɾɻ • ϦχϡʔΞϧΊͪΌͪ͘Ό͍ͨΜɾɾɾɻ • ηΩϡϦςΟϗʔϧʹͳͬͨΓɾɾɾɻ 10
͋ΔϓϥάΠϯ࡞ऀͷ 11
ඇਪͷ࡞Γํͯ͠ΔςʔϚͰͷςετɺͯ͠ͳ͍͠ɺͰ͖ ͳ͍͠ɺ͢Δؾͳ͍ɻ ͍ͬͯ͏͔Ͳ͏ͬͯςετ͢Ε͍͍ͷΑʁ 12
ʮΑ͘Βͳ͍͚ͲɺͱΓ͋͑ͣಈ͍ͯΔ͔Βɾɾɾʯ ΄ΜͱʹͦΕͰେৎʁ 13
ςʔϚͷ࡞ΓํΛ͓͞Β͍ɻ 14
1. ςϯϓϨʔτͷछྨ 15
σϑΥϧτςʔϚ Twenty Seventeen ΛݟͯΈΑ͏ɻ 16
͙͑ͬ 17
େৎɻ 18
ςʔϚͷ࠷খߏ • index.php • style.css ͜Ε͚ͩʂ 19
͡Ό͊ͳΜͰ͋Μͳʹɾɾɾ 20
ͱ͍͏Θ͚ͰςϯϓϨʔτͷΈΛ͓͞Β͍͠·͠ΐ͏ɻ 21
1-1 ςϯϓϨʔτ֊ 22
ςϯϓϨʔτ֊ͱʁ WordPressͷςϯϓϨʔτ͕બ͞ΕΔΈɻ ݱࡏදࣔ͞Ε͍ͯΔϖʔδͷঢ়ଶʹ߹ΘͤͯςϯϓϨʔτ͕ݕ ࡧ͞ΕΔɻ 23
24
ྫ1 ΧςΰϦʔ ID:2, εϥοά: news ͷ߹ɻ 1. category-news.php 2. category-2.php
3. category.php 4. archive.php 5. index.php ͷॱʹςϯϓϨʔτ͕ݕࡧ͞Εɺݟ͔ͭͬͨͷ͕ద༻͞ΕΔɻ 25
ྫ2 ϒϩάߘͷ߹ɻ 1. single-post.php 2. single.php 3. singular.php 4. index.php
ͷॱʹςϯϓϨʔτ͕ݕࡧ͞Εɺݟ͔ͭͬͨͷ͕ద༻͞Ε Δɻ 26
ৄ͘͠ɺςϯϓϨʔτ֊ - WordPress Codex ຊޠ ൛ WordPress Codex: WordPress ͷΦϯϥΠϯ
υΩϡϝϯτɺWiki. 27
1-2 ςϯϓϨʔτϞδϡʔϧ 28
ڞ௨෦ΛผͷςϯϓϨʔτʹग़དྷΔɻ • header.php : get_header() • footer.php : get_footer() •
sidebar.php :get_sidebar() • searchform.php : get_search_form() • comments.php : comments_template() 29
get_template_part() ΦϦδφϧͷςϯϓϨʔτΛݺͼग़͢ɻ ྫ • get_template_part('template-parts/hoge'); template-parts/hoge.php Λݺͼग़͢ɻ • get_template_part('template-parts/hoge', 'piyo');
template-parts/hoge-piyo.php Λݺͼग़͢ɻ 30
ͷ࠷খߏ • index.php • single.php • page.php • header.php •
footer.php ͔͜͜Βద֦ٓு͍ͯ͘͠ɻ 31
2. CSS ͱ JS ͷಡΈࠐΈ 32
Α͋͘Δτϥϒϧ • ʮͳΜ͔jQuery͕2ճݺͼग़͞ΕͯΔɾɾɾɾʯ 33
͜͏ͯ͠·ͤΜʁ <head> <link href="<?php echo get_stylesheet_uri(); ?>"> <link href="<?php echo
get_template_directory_uri() . '/common.css'; ?>> <?php wp_head();?> </head> <script src="jquery.js"></script> <?php wp_footer();?> </body> • wphead, wpfooter ςʔϚʹඞͣೖΕΔౕɻ 34
ਪ͞ΕΔΓํ header.php <head> <?php wp_head();?> </head> footer.php <?php wp_footer();?> </body>
35
functions.php function my_enqueue_scripts() { //include css wp_enqueue_style( 'my-style', get_stylesheet_uri() );
wp_enqueue_style( 'my-common', get_template_directory_uri() . '/common.css', array( 'my-style' ), '1.0.0' ); //include js wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/scripts.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' ); 36
wp_enqueue_style ɺwp_enqueue_script Λ͏ͱ WordPress͕ྑ͍ײ͡ʹ CSS Λ JS ಡΈࠐΜͰ͘ΕΔɻ jQuery, underscore,
Backbone.js, masonry WordPress ʹଂ͞Ε͍ͯΔɻ ؔϦϑΝϨϯε/wp enqueue script - WordPress Codex ຊޠ൛ 37
3. σʔλͷແԽ αχλΠζ / Τεέʔϓ 38
͋Γ͕ͪͳϠόΠίʔυ <?php //ΧελϜϑΟʔϧυͷΛऔಘ $hoge = get_post_meta( get_the_ID(), 'hoge', ture );
?> <!-- class ଐੑΛՃ --> <h1 class="<?php echo $hoge;?>"></h1> 39
͠ΧελϜϑΟʔϧυʹෆਖ਼ͳσʔλ͕ೖͬͯΔͱ... ྫ͑ɺ">͜Μʹͪ͜Μʹͪ!! Έ͍ͨͳจࣈྻɻ <h1 class="">͜Μʹͪ͜Μʹͪ!!"></h1> 40
41
͍ʂ 42
ݟ͕ͨյΕΔ͚ͩͳΒ·ͩ͠ෆਖ਼ͳJSͱ͔ΛຒΊࠐ·ΕΔ ڪΕ.... • Ϣʔβʔ͕มͳίʔυΛίϐϖͨ͠߹ɻ • WordPressͷύεϫʔυ͕ྲྀग़߹ɻ • etc... ͍ΘΏΔ XSSͷ੬ऑੑ
43
ਖ਼͘͠σʔλͷແԽΛ͠Α͏ɻ <?php $hoge = get_post_meta( get_the_ID(), 'hoge', ture );?> <div
class="<?php echo esc_attr( $hoge );?>"></div> ෆਖ਼ͳσʔλ͕ೖͬͯେৎɻ <h1 class="">͜Μʹͪ͜Μʹͪ!!"></h1> 44
WordPressʹ༻ҙ͞Ε͍ͯΔαχλΠζͷؔ • esc_html: ௨ৗͷςΩετ • esc_attr: HTMLଐੑ • esc_url: URL/ϝʔϧΞυϨεͳͲ
• esc_textarea: textareaཁૉ • esc_js: ΠϯϥΠϯJS • wp_kses: ಛఆͷHTMLλάΛڐՄ͢Δ߹ 45
4. ϓϥάΠϯςϦτϦʔ 46
• ΞΫηεղੳ • ࠂίʔυ • γΣΞϘλϯ • ΧελϜߘλΠϓ/λΫιϊϛʔ • SEOपΓͷ͍Ζ͍Ζɾɾɾ
47
αΠτΛϦχϡʔΞϧͨ͠Β͖͑ͨ!!! 48
·͍ͣʂ 49
ςʔϚΛม͑Δͱ͍Ζ͍Ζಈ͔ͳ͘ͳΔ… 50
·͍ͣ!!! 51
ςʔϚςϦτϦʔ WEBαΠτͷݟͨɻ ϓϥάΠϯςϦτϦʔ WEBαΠτͷػೳɻ -> ػೳϓϥάΠϯͰʂ 52
ϓϥάΠϯͷ࡞Γํɾɾɾʁ • wckansai2016/plugin-hands-on 53
ϊϯϓϩάϥϚʔͷͨΊͷWordPressϓϥάΠϯ࡞ೖ https://www.slideshare.net/mignonstyle/make-wordpress-plugin 54
αΠτͷ֦ுੑΛඈ༂తʹߴ ΊΔ WordPressϓϥάΠϯ ։ൃͷόΠϒϧ 55
5. ςʔϚͷݕূ 56
ςʔϚνΣοΫϓϥάΠϯ Theme Check — WordPress Plugins 57
58
ߦّͷѱ͍ςʔϚ 59
60
ͪͳΈʹ • WordPressͷཧը໘͔ΒμϯϩʔυͰ͖ΔςʔϚ (ެࣜσ ΟϨΫτϦ ܝࡌςʔϚ)શͯ͜ͷςετ͕௨ͬͯΔɻ • ྑ͘ղΒͳ͍ςʔϚΛ͏͘Β͍ͳΒɺެࣜσΟϨΫτϦ͔ ΒςʔϚΛ୳ͦ͏ɻ 61
6.υΩϡϝϯτ 62
Theme Developer Handbook • ӳޠ͚ͩͲͦ͜·Ͱ͜͠ͱॻ͍ ͯͳ͍ͷͰҙ֎ʹಡΊΔɻ 63
WordPress Codex ຊޠ൛ • ςϯϓϨʔτλάͷ༷ͳͲ͜͜ Ͱ֬ೝɻ 64
_s • WordPress.com ͷӡӦݩͷ Automattic ͕։ൃ͍ͯ͠Δϕʔες ʔϚɻ͜ΕΛϕʔεʹCSSΛՃɺ HTMLΛฤूͯ͠ςʔϚΛ࡞Δͱ͍͏ ํ๏͋Δɻ 65
τϥϒϧ͕ى͖Δલʹਖ਼͍ࣝ͠Λɻ ϓϩάϥϛϯάʹࣗ৴͕ແ͍ͳΒɺͳ͓͞Βɺ͜͏͍ͬͨͷʹै͏͖ɻ 66
ͦͯ͠ 67
WordPress ίϛϡχςΟͷࡒ࢈Λ׆༻͠Α͏ɻ ͜Ε͕ WordPressͷҰ൪ͷڧΈɻ 68
ࠔͬͨΒϑΥʔϥϜͰ࣭ͯ͠ΈΑ͏ɻ • https://ja.wordpress.org/support/ • WordPress ͷެࣜͷαϙʔτϑΥʔ ϥϜɻ • ͪΌΜͱ࣭͢Δͱ݁ߏղ͕ͭ ͘ɻ
• ϑΥʔϥϜΛݕࡧ͢Δͱ͕͑͋ͬ ͨΓ͢Δ͜ͱΑ͋͘Δɻ 69
tips • titleλάΛςʔϚʹॻ͘ͷඇਪʹɻ add_theme_support('title-tag') Λ͍·͠ΐ͏ɻ • ࠷ۙ get_theme_file_uri ͱݴ͏͕ؔՃ͞Εͨɻ •
ςʔϚΧελϚΠβʔ • etc... ·ͩ·ͩԞ͕ਂ͍ɻ 70
more...? 71
ΤϯδχΞͷͨΊͷ WordPress։ൃೖ 72
ϊϯϓϩάϥϚʔͷͨΊͷWordPress ςʔϚ࡞εςοϓΞοϓज़ https://www.slideshare.net/ mignonstyle/wordpress-stepuptips 73
and.. Let's Join WordBench! wordbench.org 74
and... 75
76
WordCamp Kyoto 2017 • 06/24, 25 • ژେֶ ࠃࡍՊֶΠϊϕʔγϣϯ౩ WordCamp
is... ੈքத֤ͰߦΘΕ͍ͯΔ WordPress ͷΧϯϑΝϨϯεɻຊͰ Ұ൪େ͖͍WordPressͷΠϕϯτɻࠓژͱ౦ژʹͯ։࠵ɻ 77
78
͓ΘΓɻ Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site:
https://torounit.com 79