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

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

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

994f01c8ef076d1b44d3f57b55be97c9?s=128

Masahiro NAKASHIMA

November 02, 2019
Tweet

Transcript

  1. None
  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[F1VCMJTIJOH ύϒϦογϯάͷຽओԽ

  46. XPSEQSFTT 8PSEQSFTT 8PSE1SFTT º º ˓ ϫʔυϓϨεͷਖ਼͍͠௲Γ

  47. ΢ΟυΡε ΢Οτε ΢Οζ ϫΠζ ϫΠυ XJEUIͷಡΈํ    

  48. ஌ࣝͷౕྴʹͳΒͳ͍ ஌ࣝΛ*OQVUͨ͜͠ͱͰၗຫʹͳΓ ৽͍͠ػձΛଛࣦ͢Δ

  49. ͭͳ͛Δɻ

  50. 5IBOLT