Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Koji Kuno
December 10, 2022

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

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

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

Koji Kuno

December 10, 2022
Tweet

More Decks by Koji Kuno

Other Decks in Programming

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