Slide for my presentation at WordCamp Osaka 2019, held on 6-7 December, 2019. WordCamp Osaka 2019 (2019å¹´12æ6-7æ¥) ç»å£ã¹ã©ã¤ãã https://2019.osaka.wordcampâ¦
Slide for my presentation at WordCamp Osaka 2019, held on 6-7 December, 2019. WordCamp Osaka 2019 (2019å¹´12æ6-7æ¥) ç»å£ã¹ã©ã¤ãã https://2019.osaka.wordcampâ¦
{ if (! this.initialized) { search.start(); this.initialized = true; } if (value) { setTimeout(() => { this.$el.querySelector('input').focus(); }, 100); } }); }, }" x-dialog x-model="searchModalIsOpen" x-cloak class="fixed inset-0 z-10" @keydown.slash.meta.window="searchModalIsOpen = !searchModalIsOpen" @keydown.k.meta.window="searchModalIsOpen = !searchModalIsOpen" @keydown.escape.window="searchM
Wordpress5.0ãªãªã¼ã¹ããæ¨æºã¨ãã£ã¿ã¼ã¨ãªã£ãGutenergã®ã«ã¹ã¿ãã¤ãºãçµæ§å å®ãã¦ããã®ã§èªåã主ã«ä½¿ã£ã¦ãããã®ã使ãäºå®ã®ãã®ãã¡ã¢ã éæè¿½å ãã¦ããäºå®ã§ãã éçºç°å¢ Wordpress 5.0 create-guten-block 1.13.0 npm 6.4.1 node 10.13.0 ãããã¯ã®ã«ã¹ã¿ãã¤ãºãããå ´åãcreate-guten-blockã使ãã¨ã»ã¨ãã©è¨å®ãè¡ãå¿ è¦ãªãéçºãã§ãã¾ãã å®è£ æ¹æ³ãªã©ãã¡ãã§ã¾ã¨ãã¦ã¾ãã ãããã¯ã®ã«ã¹ã¿ãã¤ãº ç¬èªã®ãããã¯è¦ç´ ã®è¿½å ãæ¢åã®ãããã¯ã®ã«ã¹ã¿ãã¤ãºã«ã¤ãã¦ã ãããã¯ã®è¿½å registerBlockType颿°ã§ç¬èªã®ãããã¯è¦ç´ ãç»é²ãã¾ãã registerBlockTypeã®ç¬¬ä¸å¼æ°ã«ãããã¯è¦ç´ ã®ååãå ¥ããã®ã§ããããåå空é/ãããã¯åãã¨ããå½¢å¼ã§æå®ããå¿ è¦ãããã¾
ãã¦ãããã¾ã§Before Gutenbergã®é£è¼ã§ã¯ããããã¯ã®ä½ãæ¹ãªã©ã説æãã¦ããããç´ç²ã«Reactã ãã使ãããå ´åãReactã³ã³ãã¼ãã³ããä½ãæ¹æ³ã«ã¤ãã¦ã¯èª¬æãã¦ããªãã£ããä»åã¯ãã®æ¹æ³ã説æãããã ãã¤ã³ã1. Reactããã³ReactDOMã¯å梱ããã¦ãã WordPress 5.0以éãReactããã³ReactDOMã¯å梱ããã¦ããããããã£ã¦ãèªåã®ãã©ã°ã¤ã³ãªããã¼ããªãã«å«ããå¿ è¦ã¯ãªãããã¨ãã°ã my-script.js ãèªåã®ãã©ã°ã¤ã³ã®JSã ã¨ããã¨â¦â¦ <?php // wp-elementãæå®ããã¨ãreactããreact-domãããå ¥ã£ã¦ããã // ä¾åé¢ä¿ã« wp-element ãæå®ããã wp_enqueue_script( 'my-plugin-js', 'path/to/my-script.js', [ 'wp-
WordPress 5 ããå°å ¥ããããããã¯ã¨ãã£ã¿ã® Gutenberg 㯠JavaScript ã§è¨è¿°ãããããã³ãã¨ã³ãã®ããã¸ã§ã¯ãã§ã Node.js ã®ããã±ã¼ã¸ããã¼ã¸ã£ã¼ã® npm ã§ç®¡çããã¦ãã¾ããGutenberg ã¯åä¸ã®ããã±ã¼ã¸ã§ã¯ãªãã夿°ã®ããã±ã¼ã¸ããæ§æããã¦ãã巨大ããã¸ã§ã¯ãã§ããGitHub ã®ãªãã¸ããªãè¦ã¦ã¿ãã¨ã./packages ã¨ãããã©ã«ãã®ä¸ã«å¤§éã®ããã±ã¼ã¸ã忢±ããã¦ããã®ãåããã¾ãã ããããã® npm ããã±ã¼ã¸ã 1 ã¤ã®ãªãã¸ããªã«å梱ããã¦ãã ãã®ããã« 1 ã¤ã®ãªãã¸ããªã®ä¸ã«è¤æ°ã®ããã±ã¼ã¸ã忢±ãããªãã¸ããªã®éç¨æ¹æ³ã¯ monorepo (ã¢ãã¬ãã»ã¢ããªã)ã¨å¼ã°ãã¦ãã¾ãããã®è¨äºã§ã¯ãã¢ãã¬ãã®ã¡ãªãããã¢ãã¬ããå®ç¾ããããã®ãã¼ã«ã§ãã Lerna ãç´¹ä»ãã¾ãã ã¢ãã¬ãã®ã¡ãªããã»ãã¡ãªã
Gutenbergã«å¯¾å¿ãããã¼ããå©ç¨ãã¦ããå ´åã¯ç¹ã«å°ããªãããWordPress 5.0ã§ã«ã¹ã¿ã ãã¼ãã使ã£ã¦ããå ´åã対å¿ãå¿ è¦ã«ãªããä»åã¯ãã®æéããã³ãªã½ã¼ã¹ãç´¹ä»ãããã æ°ãã«è¿½å ãããæ§ã ãªãããã¯ã«å¯¾å¿ Gutenbergãã追å ããããããã¯ã¯æä½éã®ã¹ã¿ã¤ã«ãå½ãã£ã¦ããã®ã ãããªã³ã¯ãªã©ã¯ã³ã³ããªã¯ããèµ·ãããã¨ãããããã¨ãã°ãããã¡ã¤ã«ãã¨ãããããã¯ãæ¿å ¥ããå ´åãçè ãèªåã®ããã°ã§å©ç¨ãã¦ãããªãªã¸ãã«ãã¼ãâKyomâã§ã¯ã次ã®ããã«å¤ãªæãã«ãªã£ã¦ãã¾ã£ãã ããã¦ã³ãã¼ãããªã³ã¯ãè¦ããªãã ãã®CSSèªä½ãä¿®æ£ãããã¨ã¯ããã»ã©æéã§ã¯ãªãããããããããã¾ã¾ã§æ³å®ãã¦ããªãã£ãããã©ã«ãã¹ã¿ã¤ã«ããçµæ§ããããããããã«ã¯ãªã¼ããåºåãç·ããã¿ã³ãã«ãã¼ç»åâ¦â¦ ãããã«å¯¾å¿ããå ´åãã¾ã¨ãã¦ããããã«ã¯Gutenberg Block U
ã¡ã¸ã£ã¼ã¢ãããã¼ãã«ãããWordpress5.0ã§ã¯ã徿¥ã®ãã¸ã¥ã¢ã«ã¨ãã£ã¿ãããããã¯åã®ã¨ãã£ã¿ã§ããGutenbergï¼ã°ã¼ãã³ãã«ã¯ï¼ã«å¤ããã¾ããã âGutenbergâ ã¨ã¯ãWordPress ã®æ°ããã¨ãã£ã¿ã¼ä½é¨ãä½ãåºãããã®ããã¸ã§ã¯ãåã§ãããã®ããã¸ã§ã¯ãã®ã´ã¼ã«ã¯ã誰ã§ããªãããªæç¨¿ã®ã¬ã¤ã¢ã¦ããã§ãããããªãããã°æç¨¿ãåºå®ãã¼ã¸ç·¨éã«ãããæ°ããä½é¨ãä½ããã¨ã«ããã¾ãã Gutenbergã®ç¹å¾´ å°ãªããã©ã°ã¤ã³ã§ããå¤ããå®ç¾ ã¢ãã³ã§ããã«ãã¡ãã£ã¢éè¦ã®ã¬ã¤ã¢ã¦ãã使 ãã¹ã¦ã®ç»é¢ãµã¤ãºã¨ç«¯æ«ã§åä½ å®éã®ãµã¤ãã¨åæ§ã«è¡¨ç¤ºãããã¨ãã£ã¿ã¼ Gutenbergã®åé¡ç¹ã¨ã¯ï¼ ä¸è¦ä¾¿å©ã§é²åããããã«è¦ããã¨ãã£ã¿Gutenbergã§ãããåé¡ç¹ãããã¨ããã°ãç¾å¨ã®ãã¸ã¥ã¢ã«ã¨ãã£ã¿ã§ã«ã¹ã¿ãã¤ãºããã¦ããæ¹ã¯ããããã®äºææ§ããªããªã£ãã
Weâve made some big upgrades to the editor. Our new block-based editor is the first step toward an exciting new future with a streamlined editing experience across your site. Youâll have more flexibility with how content is displayed, whether you are building your first site, revamping your blog, or write code for a living. Building with Blocks The new block-based editor wonât change the way any o
ä»å¹´ãã¢ããã³ãã«ã¬ã³ãã¼ã®å£ç¯ããã£ã¦ããã12/24ã¾ã§æ¯æ¥ããã°ãæ´æ°ããäºå®ã§ããããã¡ãããçè ä¸äººã§ã¯ããªãè¾ããã®ãããã®ã§ãCapitalistã®çããã«ããå©åããé¡ããããã ãã¦ä¸çºç®ã®å 容ã ããä¾ã«ãã£ã¦Gutenbergãã¿ã§ãããååããã¾ãã«è¤éãªå 容ã ã£ãããããã»ã¨ãã©åå¿ããªãã£ãããã£ã¦ãä»åã¯ã·ã³ãã«ãªå 容ã«ã¨ã©ããããä»åã¯ããããã¯ã®ã¢ã¤ã³ã³ãã«ã¹ã¿ã SVGã«ããæ¹æ³ã§ããã ãã®çãä¸ã®ãã¢ãã£ãªã¨ã¤ããã¿ãããªãã¤ã ã«ã¹ã¿ã ãããã¯ã®ã¢ã¤ã³ã³ãããã㣠ããã¾ã§ã®é£è¼ãèªãã§ããæ¹ãªããåç¥ã®éããã«ã¹ã¿ã ãããã¯ã使ããå ´åãã¢ã¤ã³ã³ãæå®ãããã¨ãã§ããã registerBlockType( 'capitalp/block', { title: 'Capital Pã®ãããã¯', icon: '', // âãã category:
å æ¥RC1ããªãªã¼ã¹ãããããããWordPress 5.0ã®ãªãªã¼ã¹ãè¿ã¥ãã¦ãããã¨ãã£ã¦ããã¾ã ãªãªã¼ã¹æ¥ã確å®ãã¦ããªãã®ã ãâ¦â¦ãä»åã¯ãã©ã°ã¤ã³ããã¼ãä½è ã«ã¨ã£ã¦æ°ã«ãªããäºææ§ã®ä¿ã¡ããã«ã¤ãã¦ã¡ãã£ã¨ãããã£ããã¹ãç´¹ä»ãããã çè ã¯ããã¤ãã®ãã©ã°ã¤ã³ããªãªã¼ã¹ãã¦ããã®ã ãããã®ãã¡ã®ä¸ã¤ã«Hamazonã¨ãããã®ããããããã¯Amazon, DMM, PHG(itunes)ã®ã¢ãã£ãªã¨ã¤ãã³ã¼ããå·®ãè¾¼ããã®ã ãå®è£ ã¯ã·ã§ã¼ãã³ã¼ãã ããShorcakeã«å¯¾å¿ãã¦ããã®ã§ããã¸ã¥ã¢ã«ã¨ãã£ã¿ã§ã使ããã¨ãã§ããã ãã¸ã¥ã¢ã«ã¨ãã£ã¿ã¼ã«ã対å¿ãã¦ãããShorcakeãå ¥ãã¦ããªãå ´åã¯ãã ã®ã·ã§ã¼ãã³ã¼ããæ¿å ¥ã ãã¦ããããGutenbergã«å¯¾å¿ããããã®ã ããGutenbergã§ã·ã§ã¼ãã³ã¼ãããã¸ã¥ã¢ã«ã¨ãã¦è¡¨ç¤ºããææ®µã¯æä¾ããã¦ããªãã®ã§ããããã¯ã
WordPressã®æ°ããã¨ãã£ã¿Gutenbergã¯ç´ä½æ²æãçµã¦Reactã§ã®éçºãç¶ãã¦ããã2018å¹´5æãããã®ãªãªã¼ã¹ãç®æãã¦ããããã ãæ°ããAPIãæ´åããã¤ã¤ãããã«ã¹ã¿ã ãã£ã¼ã«ãè£½é æ¥çãéæ¼ãããã¡ã¿ããã¯ã¹ãæ°ããAPIãæ´åããã¤ã¤ããã ãã¦ããããã«ãããæç¨¿ç·¨éç»é¢ã«æ°ããæä»£ã訪ãããã¨ã¯ééããªãã®ã§ããããã©ã®ããã«ä½ã£ã¦ããã®ãã«ã¤ãã¦ç¥ã£ã¦ããã®ã¯æªããã¨ã§ã¯ãªãã Reactã«é¢ããåæç¥è ä»åã®è¨äºã§ã¯ãã¾ã詳細ã«ç«ã¡å ¥ããªãããReactã¯æ¨ä»ã®Javascriptéçºãç½å¼ããã©ã¤ãã©ãªã§ããã2010å¹´ããã®Javascriptéçºã¨ã¯å§åçã«éã£ã¦ãããå§åçã«å¤ãã£ãç¹ã¨ãã¦ã次ã®ãããªãã®ãããã npmã使ã£ãããã±ã¼ã¸ç®¡çãnpm install ã¨ããã³ãã³ãããªãã§ãããããããªãã¾ã¾æãããã¦ãã人ãå¤ãã ãããåºæ¬
home ãã¶ã¤ãã¼ãºããã° web ãã¶ã¤ã³ WordPress ã« Gutenbergããã£ã¦ããã¤ã¡!ã¤ã¡!ã¤ã¡! â ACF & ã«ã¹ã¿ã æç¨¿ã¿ã¤ã & ããã¹ãã¨ãã£ã¿ã¼ã«HTML⦠WordPress 4.9.8ããªãªã¼ã¹ããã¦ããããã Gutenberg ã®è¶³é³ãèããã¦ããå£ç¯ã«ãªãã¾ããã Gutenberg ã¨ããåã®éããWordPress ã«ããã¦ã¯å¤§ããªå¤é©ã§ãããã¨ã¯ééããªãã¨æãã ä»ã¾ã§ã®ã¨ãã£ã¿ã¼ã§ã¯å®ç¾ãé£ããã£ã表ç¾ããããã»ã©ãªãã©ã·ã¼ã®ãªãã¦ã¼ã¶ã¼ã§ãå®ç¾ã§ããå¯è½æ§ãããã ãã¡ããä»ã¾ã§ã®ã¨ãã£ã¿ã¼ãä½¿ãæ £ãã¦ãã人ã«ã¨ã£ã¦ã¯ãã¡ãã£ã¨æ¸æãããç¥ããªããã©ãæ £ããã¾ã§ã«ããã»ã©æéã¯ããããªãæ°ãããã ã§ãå®éã©ãããã¨ãã£ã¿ã¼ãªã®ãã¨ãããã¨ã¯ã使ã£ã¦ã¿ãªãã¨ããããããªãã®ã§ããGutenbergãããã¼ãã«ããã¤ãã³ãã Word
WordPressã®æ¬¡æã¨ãã£ã¿ã¼ãGutenbergãã使ããç¶æ ãªããæç¨¿ãåºå®ãã¼ã¸ã®ç·¨éç»é¢ã§ä½¿ããã¨ãã§ããã¨æãã¾ãã ãã® Gutenberg ãã«ã¹ã¿ã æç¨¿ã¿ã¤ãã§ãä½¿ãæ¹æ³ãããã¾ãã Gutenberg ãã«ã¹ã¿ã æç¨¿ã¿ã¤ãã§ãä½¿ãæ¹æ³Gutenberg 㯠REST API ãå©ç¨ãã¦ããã®ã§ãã«ã¹ã¿ã æç¨¿ã¿ã¤ãã§ REST API ã使ããããæå¹ã«ããå¿ è¦ãããã¾ãã ã«ã¹ã¿ã æç¨¿ã¿ã¤ãã§ REST API ãæå¹ã«ããæ¹æ³æè¿ã§ã¯ã«ã¹ã¿ã æç¨¿ã¿ã¤ãã®ä½æã管çç»é¢ã§ããã£ã¨ä½æã§ãããã©ã°ã¤ã³ã人æ°ã§ãããå®éã«ã³ã¼ããæ¸ãã¦ã«ã¹ã¿ã æç¨¿ã¿ã¤ãã使ãã¦ããæ¹ã¯ãregister_post_typeã颿°ã使ã£ã¦ããã¯ãã»ã»ã»ã ãªã®ã§ãregister_post_typeãã®ãã©ã¡ã¼ã¿ã¼ã«ä»¥ä¸ã®ã³ã¼ããå«ããã¨ãã«ã¹ã¿ã æç¨¿ã¿ã¤ãã REST API ã«å¯¾å¿ã§
ãã®é£è¼ã§ã¯Gutenbergããªãªã¼ã¹ãããåã«ãã£ã¦ããã¹ããã¨ãã¾ã¨ãã¦ããã®ã ããGutenbergãããããããã£ã¨ã大ããªå¤æ´ç¹ã¨ãã¦ãReactã®å°å ¥ããããããã«ãããæ¬¡ã®æ°ããè¦ç´ ãå°å ¥ãããã ES6/ES Next React + JSX ãã¦ã以ä¸ã®æ¦å¿µã«ã¤ãã¦æ £ã親ããã§ãã人ã¯ç¹ã«é©ãã¯ãªãã ããããããã¾ã§jQueryãããã§ããJavaScriptãå¦ãã§ããªãã£ãæ¹ã¯æ¬ç¨¿ãèªãã§ä»å¾ã®åèã«ãã¦ã»ããã TL;DR ES6ã¨ã¯ãæ°ããJavaScriptã ãããã©ã¦ã¶äºææ§ã®ããã«è²ã 工夫ããå¿ è¦ãããã WordPressã§ã¯ES5ã«ããè¨æ³ãæä¾ãã¦ããããES6(ESNext)ã§æ¸ãã¹ãã§ããã æ«æãã人ã¯ãã¼ã«é¡ã®ç»å ´ãå¾ ã¤ããWebã¢ã»ã³ãã©ã¼ã«è»¢è·ãããã ã¡ãªã¿ã«ãTL;DRã¨ã¯ãâToo Long, Donât Readâã®ç¥ã§ãé·æãã
ã©ã³ãã³ã°
ã©ã³ãã³ã°
ã¡ã³ããã³ã¹
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}