クライアントワークのオリジナルテーマ制作

WordCamp Tokyo 2019 セッション。「クライアントワークのオリジナルテーマ制作 〜実務でのWebサイト構築の抑えどころ〜」の資料です。

Transcript

2. Profile தౡ
   ਅ༸ʢφΧγϚ
   Ϛαώϩʣ
   ผ໊
   
   ϖϯΪϯ
   5XJUUFS
   !LBOBLPHJ 8&#ܥΤϯδχΞɾσβΠφʔ
   ๺۠੺ӋͱϛϟϯϚʔͰ࢓ࣄ
3. Profile 8PSE1SFTT
   ࢓ࣄͷݱ৔Ͱαοͱ࢖͑Δ
   σβΠϯڭՊॻ
   ग़൛
   
   ٕज़ධ࿦ࣾ )5.-$44
   ׬શେࣄయ
   ग़൛
   
   ٕज़ධ࿦ࣾ
4. Profile • WP CSV Exporter • WP Theme Test • Adjust Admin Categories • WP Taxonomy Import • Check Copy ContentsʢCCCʣ ...߹ܭ11ϓϥάΠϯ
5. Profile ΠϚίί 2005 2019 ϑϦʔͷ8&#σβΠφʔ .PWBCMF5ZQF 8PSE1SFTT )5.-$44 1)1 +BWB4DSJQU 2012 ೥౓࢓ࣄͷׂ߹ σβΠϯ  ϑϩϯτΤϯυ  1)1  8PSE1SFTTؔ܎ 
6. ͣͬͱ
   ΫϥΠΞϯτϫʔΫ
   ΍ͬͯ·͢
7. ஌͓ͬͯ͘ͱ
   ݱ৔Ͱ໾ʹཱͭ5*14
8. ؅ཧόʔͷ
   ѹ౗తଘࡏײ
9. Admin Bar Position
10. ຊ൪αʔόʔͰ
    ςʔϚΛςετ͍ͨ͠
11. WP Theme Test
12. ౤ߘϖʔδͷ
    ΞʔΧΠϒ͕ͳ͍
13. WP Post Has Archive
14. "VUIPSϖʔδͷอޢ
15. wp-login.php
16. function author_page_redirect() { if( is_author() ) { wp_redirect( home_url()); exit; } } add_action( 'template_redirect', 'author_page_redirect' ); functions.php
17. Yoast SEO
18. ϒϩοΫΤσΟλʔ
19. ศརͳػೳ
20. ϚʔΫμ΢ϯ͕࢖͑Δ
21. ϒϩοΫͷίϐʔ͕Ͱ͖Δ
22. ࠶ར༻ϒϩοΫ
23. ؅ཧը໘ͱ
    ελΠϧΛ͋ΘͤΔ
24. ؅ཧը໘ͱελΠϧΛ͋ΘͤΔ ϑϩϯτ ؅ཧը໘
25. function my_editor_suport() { add_theme_support( 'editor-styles' ); add_editor_style( 'assets/css/editor-style.css' ); } add_action( 'after_setup_theme', 'my_editor_suport' ); functions.php
26. h2 { font-size: 24px; color: #70462E; } strong { color: #70462E; font-weight: bold; } em { font-style: italic; font-weight: bold; } editor-style.css ←ཁૉηϨΫλͰࢦఆ
27. .content h2 { font-size: 24px; color: #70462E; } .content strong { color: #70462E; font-weight: bold; } .content em { font-style: italic; font-weight: bold; } styles.css singular.php <div class=“content”> <?php the_content() ?> </div>
28. ؅ཧը໘ͱελΠϧΛ͋ΘͤΔ TUZMFTDTT FEJUPSTUZMFDTT ࣅͨΑ͏ͳهड़͕ॏෳͯ͠͠·͏
29. TBTTσΟϨΫτϦ DTTσΟϨΫτϦ σΟϨΫτϦߏ੒ TUZMFTDTT FEJUPSTUZMFDTT TUZMFTTDTT FEJUPSTUZMFTDTT @DPOpHTDTT DPNQPOFOUTσΟϨΫτϦ @DPOUFOUTDTT @IPHFTDTT
30. @import “_config"; h2 { font-size: 24px; color: #70462E; } strong { color: #70462E; font-weight: bold; } em { font-style: italic; font-weight: bold; } editor-style.scss styles.scss @import “_config"; @import "components/_content"; components/ _content.scss .content { @import "../editor-style.scss"; }
31. σΟϨΫτϦߏ੒ TUZMFTDTT FEJUPSTUZMFTDTT @DPOpHTDTT DPNQPOFOUTσΟϨΫτϦ @DPOUFOUTDTT ؅ཧը໘ʹ༻ʹهड़ @IPHFTDTT classͷதʹimport
32. ϒϩοΫΛ
    ΧελϚΠζ
33. ࠷৽هࣄͷ౤ߘ
34. Advanced Posts Blocks
35. UIFNF UFNQMBUFQBSUT CMPDLT BEWBODFEQPTUTCMPDLT QPTUQIQ σΟϨΫτϦߏ੒ QPTUTQIQ DIJMESFOQIQ ෳ਺౤ߘϒϩοΫɹɹtemplate-parts/blocks/advanced-posts-blocks/posts.php ݸผ౤ߘϒϩοΫɹɹtemplate-parts/blocks/advanced-posts-blocks/post.php ࢠ౤ߘϒϩοΫɹɹɹtemplate-parts/blocks/advanced-posts-blocks/children.php
36. template-parts/blocks/advanced-posts-blocks/posts.php <div class="row"> <?php if ( $query->have_posts() ) : ?> <?php while ( $query->have_posts() ) : $query->the_post(); ?> <div class="col-md-4"> <article <?php post_class('news'); ?>> <div class="news_pic"> <?php the_post_thumbnail('medium'); ?> </div> <h2><?php the_title(); ?></h2> </article> </div> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php endif; ?> </div>
37. ϒϩοΫΛ࡞Δ
38. Block Lab
39. 1.blocks/{name}/preview.php 2.blocks/preview-{name}.php 3.blocks/preview.php 4.blocks/{name}/block.php 5.blocks/block-{name}.php 6.blocks/block.php Block Lab ͷςϯϓϨʔτ֊૚
40. ϒϩοΫΤσΟλʔ࣌୅ͷ
    σβΠϯ
41. ϒϩοΫΛ೺Ѳͨ͠
    σβΠϯ
42. ϫʔΫϑϩʔ σβΠϯ )5.- 8PSE1SFTT ϫΠϠʔ ϫΠϠʔ
    ʢϒϩοΫΤσΟλʔʣ σβΠϯ )5.-
    աڈʹͭͬͨ͘ϒϩοΫΛར༻ɺ
    ඞཁ࠷௿ݶͷ)5.-੍࡞ 8PSE1SFTT
    աڈʹͭͬͨ͘ϒϩοΫΛར༻ɺ
    ඞཁ࠷௿ݶͷϒϩοΫ੍࡞ ͜Ε·Ͱ ϒϩοΫΤσΟλʔ ϫΠϠʔ
    ʢϒϩοΫΤσΟλʔʣ σβΠϯ
    ϔομʔɺϑολʔͳͲ )5.-
    ඞཁ࠷௿ݶͷ)5.-੍࡞ 8PSE1SFTT
    ඞཁ࠷௿ݶͷϒϩοΫ੍࡞ ϒϩοΫΤσΟλʔ ରԠςʔϚ
43. ϒϩοΫΛࢿ࢈ʹ͢Δ
44. ͍͞͝ʹ
45. %FNPDSBUJ[F
    1VCMJTIJOH ύϒϦογϯάͷຽओԽ
46. XPSEQSFTT
    8PSEQSFTT
    8PSE1SFTT º
    º
    ˓ ϫʔυϓϨεͷਖ਼͍͠௲Γ
47. ΢ΟυΡε
    ΢Οτε
    ΢Οζ
    ϫΠζ
    ϫΠυ XJEUIͷಡΈํ
    
    
    
    
48. ஌ࣝͷౕྴʹͳΒͳ͍ ஌ࣝΛ*OQVUͨ͜͠ͱͰၗຫʹͳΓ
    ৽͍͠ػձΛଛࣦ͢Δ
49. ͭͳ͛Δɻ
50. 5IBOLT