超入門サイトエディター / Easiest-introduction-of-Site-Editor

第3回 北陸合同 WordPressミートアップ @ 金沢市 での登壇資料です。

https://connpass.com/event/265203/

Transcript

1. 2022 12 10
   
   
   3 WordPress @
   

   View Slide

2. -
   Gifu WordPress Meetup
   
   
   Web
   
   
   WP.org
   
   
   Snow Monkey
   
   
   WordPress
   @Olein_jp
   @kunokoji / kunokoji.com
   

   View Slide

3. -
   Shift
   
   
   CoderDojo
   
   
   

   View Slide

4. 📣 📣
   FSE
   

   

   View Slide

5. 🚨
   
   
   
   

   View Slide

6. 🙋🙋
   
   
   
   

   View Slide

7. https://developer.wordpress.org/block-editor/getting-started/full-site-editing/
   You can think of Full Site Editing as the umbrella project
   name for various sub-projects within Gutenberg that make
   this vision possible.
   
   
   ——
   -
   
   
   Full Site Editing Gutenberg
   

   View Slide

8. View Slide

9. https://make.wordpress.org/core/
   20
   2
   2
   /
   07
   /
   2
   7
   /giving-fse-a-more-user-friendly-name/
   

   View Slide

10. https://wptavern.com/wordpress-rebrands-fse-as-site-editor
    

    View Slide

11. 🤔
    
    
    r
    …
    

    View Slide

12. View Slide

13. 
    
    WordPress
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. WordPress
    
    
    🤔
    

    View Slide

18. View Slide

19. View Slide

20. 🎨
    

    View Slide

21. ✨ ✨
    PHP
    
    
    HTML
    
    
    `index.php/single.php` `index.html/single.html`
    ϒϩοΫςʔϚͷfunctons.phpʹίʔυΛॻ͍ͯ
    
    
    ΧελϚΠβʔΛ࢖͑ΔΑ͏ʹͨ͠΋ͷ
    ΫϥγοΫςʔϚʹ theme.json ΍
    
    
    αΠτΤσΟλʔͳͲͷػೳΛ࠾༻ͨ͠΋ͷ
    

    View Slide

22. https://qiita.com/TetsuakiHamano/items/
    41
    6
    6
    dd
    0
    9
    3
    e
    2
    ba
    0 3
    c
    5
    7
    d
    7
    

    View Slide

23. View Slide

24. View Slide

25. 👆 👆
    /parts header.html
    
    
    /templates index.html single.html
    index.php single.php
    
    
    /patterns
    ʢҰ෦ɺϋΠϒϦουςʔϚܗࣜͰ΋ར༻Ͱ͖Δ΋ͷ΋͋Γ·͢ʣ
    

    View Slide

26. Patterns
    Block
    Block
    Block Block
    Templates
    Parts Parts
    

    View Slide

27. View Slide

28. View Slide

29. 1
    . WordPress
    
    
    Gutenberg
    
    
    2
    .WordPress.org/themes
    
    
    Twenty
    Twenty-Three
    

    View Slide

30. https://ja.wordpress.org/themes/cormorant/
    

    View Slide

31. View Slide

32. 👈
    👇
    👇
    

    View Slide

33. 
    
    
    
    
    
    
    / /
    
    
    

    View Slide

34. View Slide

35. WordPress
    
    
    
    
    
    
    

    View Slide

36. View Slide

37. View Slide