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

WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わ...

h2ham
February 24, 2024
640

WordCamp Kansai 2024 ハム『ブロックエディタでWebサイトの制作がどう変わったのか?実装事例から見る現在のWordPressの設計と構築』

h2ham

February 24, 2024
Tweet

Transcript

  1. HTMLコーディング時 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

    <body> <header> ~ </header> <div>Contents</div> <footer> ~ </footer> </body> </html>
  2. Themeに <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php

    bloginfo( 'charset' ); ?>"> <?php wp_head(); ?> </head> <body> <?php get_header(); ?> <div>Contents</div> <?php get_header(); ?> <?php wp_footer(); ?> </body> </html>
  3. { "settings": [ { "title": "αΠζ (1.2em)", "icon": "editor-textcolor", "slug":

    "size-1-2", "styles": "font-size: 1.2em;" }, ~~ ུ ~~ { "title": "ϚʔΧʔ (μʔΫάϦʔϯ)", "icon": "editor-underline", "slug": "marker-darkgreen", "tag": "strong", "styles": "background: linear-gradient(transparent 50%, #50C8A7 100%);" }, ~~ ུ ~~ ] }
  4. 設計も制作も難易度増! - 運⽤も踏まえて仕様を詰める必要がある   - 運⽤時どんな⼊⼒が必要か   - 運⽤に合わせてどんなコンポーネントが必要か -

    ブロックエディターを理解する   - どんなブロックがあり何ができるのか   - そのブロックでどんなHTMLが出⼒されるか、スタイルがついているか   - コンポーネントを意識した設計とスタイル設計   - 場合によってカスタムブロックの作成⽅法も