WordBench 長野 vol.9 での登壇資料です。
WordPress ςʔϚ࡞࠶ೖToro_Unit / 2017.05.20 @ WBNagano vol.91
View Slide
Toro_Unit෦ ߛ (͏Β ͻΖ͠)• দຊࢢࡏॅ 10• ϑϦʔϥϯε• Frontend Engineer / Plugin Developer / Web Designer• WordBench ϞσϨʔλʔGithub: @torounitTwitter: @Toro_UnitFacebook: fb.me/torounitBlog: https://torounit.com2
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 DeveloperVanilla4
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
σϑΥϧτςʔϚ TwentySeventeen ΛݟͯΈΑ͏ɻ16
͙͑ͬ17
େৎɻ18
ςʔϚͷ࠷খߏ• index.php• style.css͜Ε͚ͩʂ19
͡Ό͊ͳΜͰ͋Μͳʹɾɾɾ20
ͱ͍͏Θ͚ͰςϯϓϨʔτͷΈΛ͓͞Β͍͠·͠ΐ͏ɻ21
1-1 ςϯϓϨʔτ֊22
ςϯϓϨʔτ֊ͱʁWordPressͷςϯϓϨʔτ͕બ͞ΕΔΈɻݱࡏදࣔ͞Ε͍ͯΔϖʔδͷঢ়ଶʹ߹ΘͤͯςϯϓϨʔτ͕ݕࡧ͞ΕΔɻ23
24
ྫ1 ΧςΰϦʔ ID:2, εϥοά: news ͷ߹ɻ1. category-news.php2. category-2.php3. category.php4. archive.php5. index.phpͷॱʹςϯϓϨʔτ͕ݕࡧ͞Εɺݟ͔ͭͬͨͷ͕ద༻͞ΕΔɻ25
ྫ2 ϒϩάߘͷ߹ɻ1. single-post.php2. single.php3. singular.php4. 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
͜͏ͯ͠·ͤΜʁ• wphead, wpfooter ςʔϚʹඞͣೖΕΔౕɻ34
ਪ͞ΕΔΓํheader.phpfooter.php
functions.phpfunction my_enqueue_scripts() {//include csswp_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 jswp_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
͋Γ͕ͪͳϠόΠίʔυ//ΧελϜϑΟʔϧυͷΛऔಘ$hoge = get_post_meta( get_the_ID(), 'hoge', ture );?>39
͠ΧελϜϑΟʔϧυʹෆਖ਼ͳσʔλ͕ೖͬͯΔͱ...ྫ͑ɺ">͜Μʹͪ͜Μʹͪ!! Έ͍ͨͳจࣈྻɻ͜Μʹͪ͜Μʹͪ!!">40
41
͍ʂ42
ݟ͕ͨյΕΔ͚ͩͳΒ·ͩ͠ෆਖ਼ͳJSͱ͔ΛຒΊࠐ·ΕΔڪΕ....• Ϣʔβʔ͕มͳίʔυΛίϐϖͨ͠߹ɻ• WordPressͷύεϫʔυ͕ྲྀग़߹ɻ• etc...͍ΘΏΔ XSSͷ੬ऑੑ43
ਖ਼͘͠σʔλͷແԽΛ͠Α͏ɻෆਖ਼ͳσʔλ͕ೖͬͯେৎɻ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-on53
ϊϯϓϩάϥϚʔͷͨΊͷWordPressϓϥάΠϯ࡞ೖhttps://www.slideshare.net/mignonstyle/make-wordpress-plugin54
αΠτͷ֦ுੑΛඈ༂తʹߴΊΔ WordPressϓϥάΠϯ։ൃͷόΠϒϧ55
5. ςʔϚͷݕূ56
ςʔϚνΣοΫϓϥάΠϯTheme Check — WordPress Plugins57
58
ߦّͷѱ͍ςʔϚ59
60
ͪͳΈʹ• WordPressͷཧը໘͔ΒμϯϩʔυͰ͖ΔςʔϚ (ެࣜσΟϨΫτϦ ܝࡌςʔϚ)શͯ͜ͷςετ͕௨ͬͯΔɻ• ྑ͘ղΒͳ͍ςʔϚΛ͏͘Β͍ͳΒɺެࣜσΟϨΫτϦ͔ΒςʔϚΛ୳ͦ͏ɻ61
6.υΩϡϝϯτ62
Theme DeveloperHandbook• ӳޠ͚ͩͲͦ͜·Ͱ͜͠ͱॻ͍ͯͳ͍ͷͰҙ֎ʹಡΊΔɻ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-stepuptips73
and..Let's Join WordBench!wordbench.org74
and...75
76
WordCamp Kyoto 2017• 06/24, 25• ژେֶ ࠃࡍՊֶΠϊϕʔγϣϯ౩WordCamp is...ੈքத֤ͰߦΘΕ͍ͯΔ WordPress ͷΧϯϑΝϨϯεɻຊͰҰ൪େ͖͍WordPressͷΠϕϯτɻࠓژͱ౦ژʹͯ։࠵ɻ77
78
͓ΘΓɻThanks!Github: @torounitTwitter: @Toro_UnitFacebook: fb.me/torounitWEB Site: https://torounit.com79
torounit
rynsuke
naohachi89
jark
oracle4engineer
.jpg){kind=avatar}
oshanqq
baseballyama
sugawani
masaaki_k
bun913
dahatake
minorun365
keiko713
erikaheidi
chriscoyier
jmmastey
sferik
kastner
lara
denniskardys
soudai
kneath
philnash
hatefulcrawdad
brianwarren