[Gutenberg]リッãƒãƒ†ã‚ストã®ãƒ„ールãƒãƒ¼ã«ç‹¬è‡ªã®ãƒ„ールãƒãƒ¼ãƒœã‚¿ãƒ³ã¨ãƒ‰ãƒãƒƒãƒ—ãƒ€ã‚¦ãƒ³ã‚’è¿½åŠ ã™ã‚‹æ–¹æ³•
import { BlockFormatControls } from '@wordpress/block-editor' import { ToolbarDropdownMenu } from '@wordpress/components' import { applyFormat, removeFormat, } from '@wordpress/rich-text' import classnames from 'classnames' export const CustomToolbarDropdown = props => { const { formatTypeName, // フォーマットタイプå (例 : my-plugin/my-custom-format) formatTitle, // フォーマットã®ã‚¿ã‚¤ãƒˆãƒ« formatClass, // ラップã™ã‚‹HTMLã‚¿ã‚°ã«æŒ¿
![[Gutenberg]リッãƒãƒ†ã‚ストã®ãƒ„ールãƒãƒ¼ã«ç‹¬è‡ªã®ãƒ„ールãƒãƒ¼ãƒœã‚¿ãƒ³ã¨ãƒ‰ãƒãƒƒãƒ—ãƒ€ã‚¦ãƒ³ã‚’è¿½åŠ ã™ã‚‹æ–¹æ³•](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ca7ab16ff0650dfb31c218a8807ad309bbbca95/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fdigipress.info%2F_wp%2Fwp-content%2Fuploads%2F2022%2F02%2Fcreat-custom-toolbar-popover.png)
Adding options and controls to an existing Gutenberg block - Marie Comet
Lire la version en français This article explains how to add options and controls to existing blocks in the WordPress editor, Gutenberg, and save them in the attributes. The procedure is different from adding controls when creating custom blocks, as we will only use filters to hook to existing blocks. The filters available in the editor work like PHP filters (add_filter, apply_filters). It’s best
メニュータグ wp_nav_menu をカスタマイズã—ã¦ãƒ¡ã‚¬ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã®ç¤Žï¼ˆã„ã—ãšãˆï¼‰ã‚’築ã | WordPressカスタマイズ事例ã€100ウェブ】
WordPressã®ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã¯ã‚¿ã‚° wp_nav_menu ã§ã‚³ãƒ³ãƒˆãƒãƒ¼ãƒ«ã§ãã¾ã™ãŒã€ä¸€èˆ¬çš„ãªã€€ul liæ§‹é€ ã®ã‚‚ã®ã—ã‹ç”Ÿæˆã§ãã¾ã›ã‚“。 ãã®ãŸã‚ã€liã®ä¸ã«ã•ã‚‰ã«divæ§‹é€ ã‚’æŒã¤ã‚ˆã†ãªãƒ¡ã‚¬ãƒ¡ãƒ‹ãƒ¥ãƒ¼ãªã©ã‚’生æˆã—よã†ã¨ã™ã‚‹ã¨ã€ã‚«ã‚¹ã‚¿ãƒ ウォーカーã¨ã„ã†è‡ªç”±ã«ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã‚’カスタマイズã§ãる機能を使ã†å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ ãã“ã§ä»Šå›žã¯ã€ãã®ã‚«ã‚¹ã‚¿ãƒ ウォーカーã¨ã„ã†æ©Ÿèƒ½ã‚’使ã£ã¦ã€ãƒ¡ã‚¬ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã‚’作るãŸã‚ã«2階層目ã®liã®ä¸ã«divæ§‹é€ ã‚’æŒãŸã›ã¦ã¿ã¾ã™ã€‚ ã¾ãšã€ãƒ†ãƒ¼ãƒžã®header.phpãªã©ãƒ¡ãƒ‹ãƒ¥ãƒ¼ã‚’表示ã•ã›ãŸã„å ´æ‰€ã«ä»¥ä¸‹ã‚’記述ã—ã¾ã™ã€‚ <?php wp_nav_menu( array( 'menu' => 'mainMenu', //メニュー管ç†ç”»é¢ã§ç™»éŒ²ã—ãŸãƒ¡ãƒ‹ãƒ¥ãƒ¼å 'container' => '', 'container_id' => '', 'container_class' => '', 'm
WordPress Gutenbergã®ãƒªãƒƒãƒãƒ†ã‚ストツールãƒãƒ¼ã«ãƒ‰ãƒãƒƒãƒ—ãƒ€ã‚¦ãƒ³ãƒ¡ãƒ‹ãƒ¥ãƒ¼ãƒœã‚¿ãƒ³è¿½åŠ â€“ セルティスラボ
WordPressã®ãƒ–ãƒãƒƒã‚¯ã‚¨ãƒ‡ã‚£ã‚¿ã®ãƒªãƒƒãƒãƒ†ã‚ストツールãƒãƒ¼ã«æ–°ãŸãªãƒ‰ãƒãƒƒãƒ—ãƒ€ã‚¦ãƒ³ãƒ¡ãƒ‹ãƒ¥ãƒ¼ãƒœã‚¿ãƒ³ã‚’è¿½åŠ ã™ã‚‹æ–¹æ³•ã‚’紹介ã—ã¾ã™ ブãƒãƒƒã‚¯ã‚¨ãƒ‡ã‚£ã‚¿ (Gutenberg) ã«ãªã£ã¦ã‹ã‚‰ã€ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã®é›£æ˜“度ãŒã‚ãŒã‚Šã€Gutenberg用ã®é–‹ç™ºç’°å¢ƒã‚’構築ã—ã¦ã€React, Webpack, Babel ç‰ã‚’使ã‚ã–ã‚‹å¾—ãªã„状æ³ã«ãªã£ã¦ãã¦ã„ã¾ã™ã€‚ ãŸã ã€ãƒ–ãƒãƒƒã‚¯ã‚¨ãƒ‡ã‚£ã‚¿ã®ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºæƒ…å ±ã¯ã¾ã å°‘ãªã„ã§ã™ã—〠Webpack, Babel ç‰ã‚’使ã†ã¨ãƒˆãƒ©ãƒ³ã‚¹ãƒ‘イル後ã®ã‚³ãƒ¼ãƒ‰ã—ã‹å…¬é–‹ã•ã‚Œãªã„å ´åˆã‚‚多ãã€ã‚ªãƒ¼ãƒ—ンソースã¨è¨€ã„ãªãŒã‚‰è‚心ã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ãŒè¦‹ã‚Œãªã‹ã£ãŸã‚Šã€è¦‹ã‚Œã¦ã‚‚ 手軽ã«è©¦ã›ãªã„å ´åˆã‚‚多ã„ã®ã§ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã®æ•·å±…ãŒã ã„ã¶é«˜ããªã£ã¡ã‚ƒã£ã¦ã„ã¾ã™ (>_<) ãã“ã§ã€ä»Šå›žã¯ã“れらã®é–‹ç™ºç’°å¢ƒãŒãªãã¦ã‚‚コピãºã§è©¦ã›ã‚‹ã‚³ãƒ¼ãƒ‰ã‚’紹介ã—ã¾ã™ ã„ããªã‚Šå®Ÿã‚µã‚¤ãƒˆã® functions.php を編集ã›ãšã«ã¾ãšã¯ãƒ
Before Gutenberg – リッãƒãƒ†ã‚ストã®ãƒ„ールãƒãƒ¼ã«ãƒœã‚¿ãƒ³ã‚’è¿½åŠ ã™ã‚‹ – Capital P – WordPressメディア
ã“ã‚Œã¾ã§ç´¹ä»‹ã—ã¦ããŸã‚ˆã†ã«ã€Gutenbergã§ã¯ãƒ–ãƒãƒƒã‚¯ã«RichTextコンãƒãƒ¼ãƒãƒ³ãƒˆã‚’è¿½åŠ ã™ã‚‹ã“ã¨ãŒã§ãる。ãŸã¨ãˆã°ã€ã‚¤ãƒ³ãƒ©ã‚¤ãƒ³è¦ç´ ãŒãã‚Œã«è©²å½“ã™ã‚‹ã€‚ã“ã®ã‚µã‚¤ãƒˆSnow Monkey Blocksã§ã¯ã€ã€Œè›å…‰ãƒšãƒ³ã€ã¨ã„ã†æ©Ÿèƒ½ãŒã‚ã‚Šã€ã“ã®ã‚ˆã†ã«ãƒã‚¤ãƒ©ã‚¤ãƒˆã‚’æ–½ã™ã“ã¨ãŒã§ãã‚‹ãŒã€è¦ã™ã‚‹ã«ãã†ã„ã†ã‚‚ã®ã 。 ã‚る程度HTMLã«è©³ã—ã„æ–¹ãªã‚‰ã°ã€ã€Œãªã‚“らã‹ã®ã‚¯ãƒ©ã‚¹åã‚’ã¤ã‘ãŸspanタグを挿入ã§ãるよã†ã«ã—ã¦ã„ã‚‹ã®ã ã‚ã†ã€ã¨æ°—ã¥ãã ã‚ã†ã€‚今回ã¯ãã®ã‚„ã‚Šæ–¹ã«ã¤ã„ã¦ãƒªã‚½ãƒ¼ã‚¹ã‚’æä¾›ã—ãŸã„。 å˜ä¸€ã®ã‚¿ã‚° 上ã§ç´¹ä»‹ã—ãŸè›å…‰ãƒšãƒ³ã®ã‚ˆã†ãªã‚‚ã®ã¯ãã‚Œã»ã©é›£ã—ããªã„。Snow Monkey Blocksã§ã¯ span.smb-highlighter を付与ã™ã‚‹ã“ã¨ã§å¯¾å¿œã—ã¦ã„る。ã“ã®ãŸã‚ã®APIãŒregisterFormatTypeã¨ã„ã†APIãªã®ã ãŒã€ã¾ã 文書化ã•ã‚Œã¦ã„ãªã„アンドã‚ュメンテッドãŸã‚ã€ã‚µãƒ³ãƒ—ルコードãª
WordPress – è³¼èªè€…ãŒãƒã‚°ã‚¤ãƒ³å¾Œã«ãƒªãƒ€ã‚¤ãƒ¬ã‚¯ãƒˆã•ã›ã‚‹æœ€è‰¯ã®æ–¹æ³•
会員サイトã«ãŠã„ã¦ã€ä¼šå“¡ï¼ˆè³¼èªè€…）ã®ãƒã‚°ã‚¤ãƒ³å¾Œã«ãƒ€ãƒƒã‚·ãƒ¥ãƒœãƒ¼ãƒ‰ã¸è¡Œã‹ã›ãšã€ä»»æ„ã®ãƒšãƒ¼ã‚¸ã¸ãƒªãƒ€ã‚¤ãƒ¬ã‚¯ãƒˆã•ã›ã‚‹æ–¹æ³•ã§ã™ã€‚ プラグインãªã©ã«ã‚ˆã‚Šã‚¦ã‚£ã‚¸ã‚§ãƒƒãƒˆã‚„ä»»æ„ã®ãƒšãƒ¼ã‚¸ã‹ã‚‰ãƒã‚°ã‚¤ãƒ³ã—ã¦ã‚‚らã†å ´åˆã¯è‰¯ã„ã®ã§ã™ãŒã€WordPressã®é€šå¸¸ã®ãƒã‚°ã‚¤ãƒ³ãƒšãƒ¼ã‚¸ã‹ã‚‰ãƒã‚°ã‚¤ãƒ³ã™ã‚‹ã¨ãƒ—ãƒãƒ•ã‚£ãƒ¼ãƒ«ãƒšãƒ¼ã‚¸ã«é·ç§»ã—ã¦ã—ã¾ã„ã¾ã™ã€‚ é·ç§»ã—ã¦ã‚‚良ã„よã†ã«ã€æ¨©é™ã”ã¨ã«ç®¡ç†ç”»é¢è‡ªä½“をカスタマイズã™ã‚‹æ–¹æ³•ã‚‚ã‚ã‚Šã¾ã™ãŒã€ç®¡ç†è€…以外ã®ãƒ€ãƒƒã‚·ãƒ¥ãƒœãƒ¼ãƒ‰ã®å¿…è¦æ€§ãŒç‰¹ã«ãªã„å ´åˆã¯ã€ãƒªãƒ€ã‚¤ãƒ¬ã‚¯ãƒˆã•ã›ã‚‹ã»ã†ãŒæ‰‹ã£å–ã‚Šæ—©ã„ã§ã™ã€‚ ã„ã‚ã„ã‚模索ã—ã€ä½¿ç”¨ã™ã‚‹ã‚¢ã‚¯ã‚·ãƒ§ãƒ³ãƒ•ãƒƒã‚¯ã«ã‚ˆã£ã¦ã¯ãƒ—ラグインã®å‹•ä½œã«å½±éŸ¿ã‚’与ãˆã‚‹å ´åˆã‚‚ã‚ã‚Šã¾ã—ãŸãŒã€æœ€è‰¯ã®æ–¹æ³•ã‚’見ã¤ã‘ã¾ã—ãŸã€‚ ã¾ãšè©¦ã—ãŸã®ã¯ functions.php ã«è¨˜ã™ä¸‹è¨˜ã®ã‚³ãƒ¼ãƒ‰ã§ã™ã€‚ <?php if ( !is_super_admin() ) { add_action( 'admin_init', '
Gutenbergã§å¤‰ã‚ã‚‹ エディタカスタマイズ / wco2018
WordCamp Osaka 2018
WordPress ã•ãらサーãƒãƒ¼ã§ãƒžãƒ«ãƒã‚µã‚¤ãƒˆã«ã—ãŸã‚‰ãƒªãƒ€ã‚¤ãƒ¬ã‚¯ãƒˆãƒ«ãƒ¼ãƒ—ã§ã‚µãƒ–サイトã®ç®¡ç†ç”»é¢ã«ãƒã‚°ã‚¤ãƒ³ã§ããªã‹ã£ãŸä»¶ - ã‹ã‚‚メモ
WordPressã®ãƒžãƒ«ãƒã‚µã‚¤ãƒˆã‚’作æˆã™ã‚‹æ¡ˆä»¶ãŒã‚ã£ã¦ã€ã•ãらã®ãƒ¬ãƒ³ã‚¿ãƒ«ã‚µãƒ¼ãƒãƒ¼ã«WordPressをインストールã—ã¦ãƒžãƒ«ãƒã‚µã‚¤ãƒˆã®è¨å®šã‚’è¡Œã„ã¾ã—ãŸã€‚ メインサイトã®ãƒˆãƒƒãƒ—ã‚’/ã«ã—ã¦ã€ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªåž‹ã§ãƒžãƒ«ãƒã‚µã‚¤ãƒˆã‚’インストールã—ãŸã¾ã§ã¯è‰¯ã‹ã£ãŸã®ã§ã™ãŒã€ã‚µãƒ–サイトを作æˆã—ã¦ã‚µãƒ–サイトã®ç®¡ç†ç”»é¢ã«ã‚¢ã‚¯ã‚»ã‚¹ã—よã†ã¨ã™ã‚‹ã¨ãƒªãƒ€ã‚¤ãƒ¬ã‚¯ãƒˆãƒ«ãƒ¼ãƒ—ãŒç™ºç”Ÿã—管ç†ç”»é¢ã«ã‚¢ã‚¯ã‚»ã‚¹ã§ããªã„状æ³ã«ãƒãƒžã£ã¦ã—ã¾ã„ã¾ã—ãŸã€‚(サブサイトãã®ã‚‚ã®ã¯ãƒªãƒ€ã‚¤ãƒ¬ã‚¯ãƒˆãƒ«ãƒ¼ãƒ—ãŒç™ºç”Ÿã™ã‚‹ã“ã¨ç„¡ã表示ã•ã‚Œã¦ã„ã¾ã—ãŸ... ã‚µã‚¤ãƒˆæ§‹æˆ /site-root <- サイトã®ãƒ«ãƒ¼ãƒˆã®ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒª |- .htaccess |- index.php |- /wordpress <- WordPress本体 |- wp-config.php ãƒãƒƒãƒˆãƒ¯ãƒ¼ã‚¯æœ‰åŠ¹åŒ–ã®éš›ã«å‡ºåŠ›ã•ã‚Œã‚‹ .htpaccess ã«è¨˜å…¥ã™ã‚‹ã‚³ãƒ¼ãƒ‰ã«å•é¡ŒãŒã‚ã£ãŸ ã•ãらã®ãƒ¬ãƒ³ã‚¿
WordPressã§è¨˜äº‹ã‚’投稿ã—ãŸçž¬é–“ã«å¤–部ã«ãƒ¡ãƒ¼ãƒ«ã‚’é€ä¿¡ã™ã‚‹æ–¹æ³•
WordPressã§è¨˜äº‹ã‚’投稿ã—ãŸã“ã¨ã‚’メールã§ãŠçŸ¥ã‚‰ã›ã—ãŸã„å ´åˆãŒã‚ã‚Šã¾ã™ã€‚ã¾ãŸã€ãƒ¡ãƒ¼ãƒ«ã‚’é€ä¿¡ã™ã‚‹ã“ã¨ã§ã€IFTTTãªã©ã®å¤–部サービスã¨é€£æºã—ã€å³åº§ã«ã‚¢ã‚¯ã‚·ãƒ§ãƒ³ã‚’èµ·ã“ã™ã“ã¨ã‚‚å¯èƒ½ã¨ãªã‚Šã¾ã™ã€‚IFTTTã¨ã®é€£æºã«ã¤ã„ã¦ã¯åˆ¥è¨˜äº‹ã§ã”紹介ã—ã¾ã™ãŒã€ä»Šå›žã¯WordPressã§è¨˜äº‹ã‚’投稿ã—ãŸéš›ã«ã€ç‰¹å®šã®ãƒ¡ãƒ¼ãƒ«ã‚¢ãƒ‰ãƒ¬ã‚¹ã«å¯¾ã—ã¦ãƒ¡ãƒ¼ãƒ«ã‚’é€ä¿¡ã™ã‚‹æ–¹æ³•ã‚’ã”紹介ã—ã¾ã™ã€‚ 記事ã®æŠ•ç¨¿ã‚’契機ã«ãƒ¡ãƒ¼ãƒ«ã‚’é€ä¿¡ã™ã‚‹æ–¹æ³• 記事を投稿ã—ãŸçž¬é–“ã«å¤–部ã¸ãƒ¡ãƒ¼ãƒ«ã‚’é€ä¿¡ã™ã‚‹ãŸã‚ã®WordPressã®ãƒ—ラグインã¯æ•°å¤šãå˜åœ¨ã—ã¾ã™ãŒã€ä»Šå›žã¯ãƒ—ラグインを使用ã›ãšã«è‡ªå‰ã§ç”¨æ„ã—ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ functions.phpã®ç·¨é›† 実ã¯ã€WordPressを使用ã™ã‚‹ã¨ç°¡å˜ã«ãƒ¡ãƒ¼ãƒ«é€ä¿¡ã§ãã¾ã™ã€‚以下をfunctions.phpã®æœ«å°¾ã«è¿½åŠ ã—ã¦ãã ã•ã„。 add_action( 'transition_post_status', funct
WordPressプラグイン開発 超入門
WordPressプラグイン開発 超入門 1. WordPressプラグイン開発 超入門 åˆåŒä¼šç¤¾ 緑ＩＴ事務所 代表 å°æ± 隆 2014å¹´5月29æ—¥ ギークカフェ関内 〜もãã‚‚ã会 ï¼ ã•ãらWORKS＜関内＞ 2. WordPressプラグインã¨ã¯ 2 3. 例①Embed OSM 投稿や固定ページ㫠OpenStreetMap㮠地図を埋ã‚込む 3 å…¬å¼ã‚µã‚¤ãƒˆã§å…¬é–‹ä¸ï¼ wordpress.org/plugins/embed-osm/ OpenStreetMap 4. 例② WP Sgv ï‚´SPARQLクエリã®çµæžœã‚’Sgvizlerã§å¯è¦–化 4 SELECT DISTINCT ?slabel, SUM(?e) AS ?energy WHERE { ?cell qb:dataSet toukei:h23-2-2-B ; qbproperty:refEnergy energy:電力 ;
[2018/06/02 WordCamp Osaka 2018]より幸ã›ã«ãªã‚Œã‚‹WordPressã®é‹ç”¨ãƒŽã‚¦ãƒã‚¦
WordCamp Osaka 2018
![[2018/06/02 WordCamp Osaka 2018]より幸ã›ã«ãªã‚Œã‚‹WordPressã®é‹ç”¨ãƒŽã‚¦ãƒã‚¦](https://cdn-ak-scissors.b.st-hatena.com/image/square/4117b92958b215927885f217c75923efb740dd24/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F1e5aee553e464c69bcd9a49daf26cf55%2Fslide_0.jpg%3F10149837)
メンテナンス
ランã‚ング
ãŠçŸ¥ã‚‰ã›
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Gutenberg: Get All Attributes From «core/image» Block
Accessible WordPress Page builder - TPGi
Self-Hosted Plugin Update for WordPress
https://technote.space/wordpress/add-dropdown-to-richtext-toolbar
GitHub - 10up/insert-special-characters: A Special Character inserter for the WordPress block editor (Gutenberg).
Gutenberg Components: Modal - Igor Benić
Gutenberg Editor - Add Button to the Toolbar | WebOmnizz
https://technote.space/wordpress/add-button-to-gutenberg
Custom Redirect After Login for User "Groups" in WordPress | Geoff Franklin
{{#tags}}- {{label}}
{{/tags}}