Gutenbergにはテンプレート機能があり、利用するブロックを制限することが可能です。このテンプレート機能を使うことで、「Advanced Custom FieldsAdvanced Custom Fields」でやっていたような限定的な入力欄をブロック上に再現することができるようになりました。 この記事では、Gutenbergにはテンプレート機能を使って店舗情報を繰り返すといったエディタを作ってみます。 ACFをブロックのテンプレート機能で代替できると聞いてやってみたら、できた…！すごい！ ブロック作るの楽しい☺️ ↓は導入文と店舗情報の繰り返しブロック以外は無効化した例 pic.twitter.com/l2JNNAYF4D — はにわまん (@haniwa008) April 24, 2020 今回紹介する内容ともっとも近いWordPressドキュメントになります。こちらも合わせてご

TopicsregisterBlockType 関数 ブロック名 ブロック構成 title description (オプション) category icon (オプション) keywords (オプション) styles (オプション) attributes (オプション) example (オプション) variations (オプション) supports (オプション) transforms (オプション) parent (オプション) ancestor (オプション) Block Hooks (オプション) ブロックコレクション registerBlockCollection 関数 Namespace Settings Title Icon ブロック登録 API リファレンス 注意: このページで説明した関数は、クライアントサイドの JavaScript でのみブロックを登録でき

We’ve implemented initial support for plugins in ChatGPT. Plugins are tools designed specifically for language models with safety as a core principle, and help ChatGPT access up-to-date information, run computations, or use third-party services. In line with our iterative deployment philosophy, we are gradually rolling out plugins in ChatGPT so we can study their real-world use, impact, and safety

FAQPageという構造化データをご存知ですか？ FAQPage構造化データを実装するとGoogle検索一覧でアコーディオンが出るようになります。表示されるようになるとクリック率が120%アップしたウェブサイトもあるとかで、SEOにはかなり有用なパーツ です。 FAQPage構造化データは実装しても必ず表示されるわけではありません。ですが、実装する価値はあります。 このFAQPage構造化データ、もっと気軽にWordPressで取り扱えないかなーと思い、Gutenbergでブロックを作ってみました。 今回はブロックエディタでFAQが手軽に作れ、さらに構造化データを出力するブロック作成方法についてご紹介します。 かみーゆ/フロントエンドエンジニア 資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経て

WordPress 5.8 では FSE（Full Site Editing / フルサイト編集）関連の機能がいろいろと導入されています。 どの機能を試してみるにも CSS が深くかかわってくるため、改めて、テーマの種類ごとにエディタとフロントに適用されるCSSの構成を確認してみました。 ※確認には WordPress 5.8 RC1 を使っています。 テーマの種類 - ブロックテーマとクラシックテーマ まず、現在のWordPressのテーマは、 FSEに対応した「ブロックテーマ」と、FSEに対応していない「クラシックテーマ」 に分類されます。 クラシックテーマは PHP で作成された従来型のテーマのことで、『WordPressレッスンブック 5.x対応版』や『グーテンベルク時代のWordPressノート』で作っているテーマもこちらになります。 そして、クラシックテーマであっても、Word

こんにちは！ニョグです。 SNS上で主に作字作品の投稿をしております(Twitter→@nyogu_design、instagram→ nyogu_design) ここでいう作字は、自分でオリジナルの文字デザインを作ることとします。 自分なりに文字デザインを作るってめちゃ楽しい。 作字を始めたきっかけは、会社でのデザイン業務が上手くいかず、何か表現の幅を広げるような練習をしようと思ったことからです。 今回は、僕個人の体験談として読んでいただけますと幸いです。 引き出し不足法学部出身、ちょっとお絵描き好きなぐらいで、大学4年から独学でデザイナーを目指し始めました。80社以上デザイン系の会社に落ちても、諦めきれずに勉強期間を延長して、なんとかインハウスのグラフィックデザイナーになれました(これについてはいつか詳しく…)。 入社したはいいものの、表現力が圧倒的に足りないことを実感しました。デザイ

プラグイン「Bulk Media Register」を使用して、wordpressで直接アップロードした画像をメディアライブラリに登録する方法を解説します。 FTPソフトやファイルマネージャーを使って画像をサーバーにアップロードすると、wordpressのメディアライブラリに登録されません。 画像がメディアライブラリに登録されなくて不便と感じている方は本記事を参考にして下さい。

2022年からドイツで急増！ Webサイト運営者に送りつけられる警告書※本記事は、ドイツでWebサイトを運営している人に向けて書かれています。 2022年の秋になって、Google Fontsの使用によるGDPR（EU一般データ保護規則）違反について、Webサイト運営者が警告書を受け取るケースがドイツで急増していると聞きました。私自身Google FontsをWebサイトに使うことが多いので、何が問題なのか、どう対応すれば良いのかを調べました。ここに簡単にまとめてみましたので、ドイツでWebサイトをお持ちの方、これから作ろうとしている方の参考になれば幸いです。 Google Fontsの何が問題なのか？Google Fontsには、洗練されたデザインのフォントが非常に沢山あり、しかも簡単かつ無料でWebサイトで使うことができるので、愛用される方は多いでしょう。 手っ取り早く使うには、Goo

WordPress Tavernは6月20日(米国時間)、「WordPress.org Strongly Urges Theme Authors to Switch to Locally Hosted Webfonts – WP Tavern」において、WordPress.orgのテーマチームがWebフォントの使用を停止し、ローカルでホストされているWebフォントを使用するようにテーマを更新することを強く推奨していると伝えた。 WebフォントはEU一般データ保護規則(GDPR: General Data Protection Regulation)に抵触するリスクがあるとして、今後はリモートでホストされているWebフォントの使用そのものを禁止する可能性もあると指摘されている。 WordPress.org Strongly Urges Theme Authors to Switch to L

WordPressサイトエディター対応のブロックテーマ開発（基本編） WordPressのオリジナルテーマには大きく分けて2種類の作り方があります。PHPファイルを使ってサイトの各画面を実装するクラシックテーマと、サイトエディターを使って自由にサイトの構成要素を編集することができるブロックテーマです。 この記事では、ブロックテーマ開発の基本についてご紹介します。なお、この記事の内容はWordPress 6.1時点の内容をもとにしています。 ブロックテーマとは ブロックテーマとは、WordPress 5.9にて導入された新しいWordPressテーマの形式です。相対的に、画面ごとにPHPファイルを用意する従来の形式はクラシックテーマと呼ばれています。 ブロックと呼ばれる部品を使ってサイト全体が構成されていることが特徴で、テーマを利用するユーザーがブロックをサイトエディターで組み替えることで、

stylelintをSCSSとVSCode(Stylelint拡張機能)に導入しようと思ったんだけど、14系[1]には破壊的変更[2] が含まれてるらしく、ドキュメント通りにやってもエラーが出てしまったり、ネットで検索しても出てくる記事が13系以前のものだったりして苦労した。何とか導入することができたのでどうやったかを記録したいと思う。 やりたいこと SCSSにstylelintを導入する yarn stylelint hogehoge.scssとかやったらSCSSファイルにstylelintを実行できる プロパティのソートもやってくれる VSCodeにstylelint拡張機能を導入する エディタ上にリアルタイムでエラーを出してくれる 保存時に自動で修正してくれる 結論 インストール yarn add -D stylelint stylelint-config-standard-scss

自作のプラグイの更新を管理したい！そんな方にはPlugin Update Checkerが便利です。今回はその使い方をまとめました。 かみーゆ/フロントエンドエンジニア 資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。 Read More