Advanced Custom Fields Proを用いたGutenbergのブロック開発 - Qiita
Gutenbergが嫌われている件について WordPress5.0にてGutenbergが搭載されてから早4年が経ちました。 今ではGutenbergをフル活用した「フルサイトエディター (FSE)」なるものが実装されつつあり、もはやWordPressを使用する人にとって、Gutenbergの理解は必須です。 しかし、、、世の中はGutenbergが嫌いな人が多い印象を抱きます Gutenberg内の機能開発が活発であり、運用の工数がかかる クラス名が勝手に割り振られてしまい、CSSでの制御が難しい アップデートによりブロックの見た目が崩れることがある Classic Editorよりも、投稿画面のカスタマイズがしにくい カスタムフィールドを設置しても、場所が見にくい（ページ下部とサイドバーにしか出せない）ので編集しにくい などが主に嫌われる理由だと思います。 ※余談ですが、フルサイトエ
WordPressの新エディタ「Gutenberg」徹底ガイド（2024年版）
WordPressの新エディタ「Gutenberg」徹底ガイド（2024年版） 2018年12月にWordPressのブロックエディタ「Gutenberg」が発表されたとき、これをどう期待すれば良いのかがわかりませんでした。確かに、ベータ版で遊ぶ時間は十分にありました。しかし、実際の立ち上げがどれくらいスムーズに進むのか、ユーザーや開発者がどれくらい新しいエディタを受け入れるのかは予測できませんでした。 今回の記事を最初に公開してから2年以上が経過し、Gutenbergエディタは大きな成長を遂げました。MVP（Minimum Viable Product、実用最小限の製品）としての発表から、より成熟したプロジェクトへと進化し、今や、最終的な目標「WordPressのための統一されたフルサイト編集体験を実現する」に近づきつつあります。 この最近の変化を受け、今回の記事ではGutenbergエ
WordPressのページ編集をより効率化できる「再利用ブロック機能」を知ってますか？ | knowledge / baigie
エンジニアの酒井です。突然ですが、みなさんはWordPressの「再利用ブロック」をご存知でしょうか？WordPressでページを編集していると、中の文章や画像だけ変えて同じパーツを使いまわしたい場面って、よくありますよね。そんなときに活躍するのがこの「再利用ブロック」という機能です。 この「再利用ブロック」という機能を利用すると、あるページで一度作成したパーツをテンプレートとして登録し、それを他のページで呼び出して繰り返し利用できるようになります。 この記事では、以下のような「吹き出し」の作成を例に、再利用ブロックの使い方を説明していきます。 再利用ブロックの登録は以下の流れで行っていきます。 1. デフォルトのブロックを組み合わせる まずはレイアウトを組みます。吹き出しの完成形を見てみると左右にカラムが分かれているので、カラムの「50 / 50」を追加します。 すると、左右のカラムごと
WordPressのブロックエディタのチューニング - シナプス技術者ブログ
システム開発課の今門です。 前回はWordPressの新しいエディタ、ブロックエディタとはどんなものなのかを紹介しました。 今回はブロックエディタのチューニングについて話します。 現在、WordPressのコア開発の中心はブロックエディタになっています。アップデートがあるたびに、ブロックエディタの新しい機能が追加され、ブロックの数も増えています。 高機能・多機能になるのはもちろん喜ばしいことですが、管理画面のUIも複雑になり、一部の機能しか使わないような場合には、操作性はすこぶる悪くなってしまいます。必要なもののみを取り入れ、不必要なものを表示しないようにチューニングすることで、操作性は格段に向上します。 そのためのTipsをいくつかご紹介します。 [Tips 1] 特定の投稿タイプのみ、ブロックエディタを有効にする [Tips 2] 必要なブロックのみを表示する [Tips 3] ブロッ
日本語でも使いやすい！フルサイト編集に対応した無料WordPressテーマ
2021年12月7日 Wordpress WordPressでは2018年から「ブロック」と呼ばれる要素のかたまりを組み合わせてコンテンツを作っていくブロックエディターが利用できるようになりました。今回はテンプレートファイルはいじらず、WordPressの管理画面（ダッシュボード）でブロックを組み合わせるだけでWebサイトを作成できるフルサイト編集機能にフォーカスします！ ↑私が10年以上利用している会計ソフト！ フルサイト編集とは？ フルサイト編集（FSE＝Full Site Editingとも呼ばれます）は、投稿やページだけでなく、ヘッダーやフッター、サイドバー、ナビゲーションメニューなど、Webサイト内のあらゆる部分にブロックを使って構成できる機能です。つまり、これまでは投稿やページのコンテンツ部分のみブロックに対応していましたが、フルサイト編集機能のついたテーマであれば、Webサイ
ブロックパターンの作り方
以下は、Beatriz Fialho が書いた WordPress.org 公式ブログの記事「So you want to make block patterns?」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 テーマやプラグインなど、WordPress のブロックエディターで何かを作ったことがある人は、ブロックパターンについても聞いたことがあるかもしれません。 WordPress に同梱されているパターンを眺めていて、これについて短い記事を書くのも良いかなと思いました。パターンは知っているととても便利なショートカットなのですが、一体何なのかとか、使う場面を知らない方も多いと思います。 ブロックパターンとは パターンはあらかじめ配置されたブロックの集まりで、多様に組み合わせたり配置を変えることができるので、美しいコンテンツをもっと簡単に作れるようになりま
【WordPress】ブロックパターンおすすめのプラグイン | バシャログ。
こんにちは。koyaです。 テレワークを機に自宅を引っ越しました。 自宅にいる時間が長くなると広い部屋が欲しくなりますよね。通勤時間を気にしなくていいので物件探しも幅が広くてよかったです。 OculusQuestやSwitchを所持していても狭い部屋だとやれることが限られていたのでとても快適です。 今回はWordPress5.5で追加された「ブロックパターン」を使う上で外せないと思っているプラグインの紹介をします。 そもそも「ブロックパターン」とは？ カスタムフィールドで言う繰り返しフィールドのようなもので、事前に設定した複数のブロックを一括で呼び出すことができます。 似たようなページを複数作る際に、同じブロックを何度も組む必要性が無くなるので非常に便利です。 ブロックパターンのオススメプラグイン Custom Block Patterns こちらのプラグインを使用することで、記事作成と同
【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」ー後編 | バシャログ。
こんにちは、koyaです。 今回は前回の続きを書きます。 前回のおさらい 前回はプラグインでブロックのフィールドを作成するところまでをやりました。 上の画像のようにブロックエディタ上のフィールドに値を入力して、いざブロックに反映しようとすると画像のようなエラーが出た状態になっている状態で終わりました。 ブロックエディタでのエラーの解消 上記のエラー文では「Block rendered as empty.block-lab-editor__ssr」と表示されています。 ブロックをレンダリングしようとしましたが中身が空でした。と言われていますね。 プラグイン入力した状態では入力画面は作りましたが、ブロックの中身やデザインは設定されていない状態です。 これを解消するためにブロックの中身を作成していきます。 ブロックはテーマディレクトリの下にblocksディレクトリを作成し、その中にブロックごとに
【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」 | バシャログ。
こんにちは、koyaです。 在宅勤務で自宅PCでAdobe製品を開きながら作業することが多くなり、メモリが足りなくなってしまったので16GBから48GBにアップグレードしました。めちゃくちゃ快適です。 最近はChromeだけでもメモリをたくさん使ってしまうので16GBだと足りなくなってしまいましたね… 今回はブロックエディタに独自のブロックを追加する事が出来る「Block Lab」を紹介します。 インストール プラグインの追加から検索、または以下のサイトからダウンロードしてインストールします。 wordpress.org 公式サイト 使用方法 インストールをするとサイドバーの一番下に「Block Lab」が追加されるので、ここからメニューを開くことが出来ます。 All Blocksを開くとデフォルトで「Example Block」が下書き状態で追加されています。 「Example Bloc
Gutenberg（グーテンベルグ）エディターでブロックの項目を非表示にするよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近七味より一味派なのがわかり、七味の黒い丸いやつが丸々入ってると歯が痛くなって毎回イラっとするアラサーのハルです。 今回はWordPressのGutenberg（グーテンベルグ）のエディターでデフォルトブロックの表示を制御する方法をまとめたいと思います。 グーテンベルグはデフォルトでたくさんのブロックが用意されている グーテンベルグエディターは、初期状態でたくさんのブロックが用意されています。 この記事を書いた時点（2020年1月）だと、 一般ブロック フォーマット レイアウト要素 ウィジェット 埋め込み の分類があり、それぞれに多くのブロックが用意されています。 プロジェクトによってはすべてを表示する必要はなく、ブロックの項目が邪魔になる場合もあります。 今回は、ホワイトリストで管理して、使うものだけ表示する方法が簡単だったので紹介したいと思います。 ホワイトリストで指定するソースコー
WordPress（Gutenberg）のカテゴリーやタグをラジオボタンに変更できるプラグインを紹介するよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
バックエンドエンジニアのハルです。 今回は、WordPressの新しい投稿エディタ「Gutenberg」カスタマイズの小ネタを。旧エディタでのカスタマイズ方法が使えなかったので、このプラグインが使いやすかったよの報告記事です。 タクソノミー（カテゴリー）は基本的に複数選択するものですが、たまにラジオボタンにしたいときがあります。 旧エディタの場合は直接jsでHTMLを変更してカスタマイズしてたりしてましたが、新しいエディタであるGutenbergからはその方法が使えず、簡単にできなくなってしまいました。 こうなったらプラグインを使ったほうが楽なので、いくつか試した結果、一番よさそうだと思ったプラグイン「Radio Buttons for Taxonomies」を使った方法をご紹介します。 サンプルのカスタム投稿とカスタムタクソノミーを用意する 練習用にカスタム投稿とカスタムタクソノミーを用
Gutenbergで既存のブロックにカスタム設定を追加する方法
Posted: 2019.03.12 / Category: WordPress / Tag: Gutenberg Gutenbergはサイドバーに「高度な設定」というクラス名を入力できる欄があるのですが、これだとクラス名を覚えていなくてはいけなくて、制作者以外の人に入力してもらうのが難しいですよね。 ということで今回はサイドバーに設定項目を追加してボタンでクラスの切り替えをできるようにしてみます。 動作環境 WordPress 5.1 Create Guten Block Create Guten Blockの導入は下記も参考にしてください。 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する 完成イメージ 段落のマージンをボタンで切り替えて調節できるようにしてみます。 コンポーネントの読み込み 最初に必要なコンポーネントを読み込みます。 blo
WordpressのGutenbergでできるカスタマイズ・開発に役立つことをまとめてみる - Qiita
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の第一引数にブロック要素の名前を入れるのですが、「名前空間/ブロック名」という形式で指定する必要がありま
WordPress Gutenbergブロック開発 | ARCHETYP BLOG | Webビジネスに関するUI/UXデザイン｜株式会社アーキタイプ｜ARCHETYP Inc.
こんにちは！3児のパパエンジニアの笹垣です。弊社では、WordPressをベースにしたサイト制作についてもよくご相談をいただくのですが、今回はWordPressバージョン5から導入された「Gutenberg」のカスタムブロック開発について備忘録も兼ねてご紹介します。 はじめに WordPressバージョン5が正式リリースされてから4か月。 最新機種の登場はもちろん、Mac OSやiOSのバージョンアップが大好物な自分にとって、WordPress v5リリース時はそこそこ興奮したのを覚えています。 WordPress 5.0 “ベボ” v4以前のWysiwygエディター（Classic Editor）は“ブログ”という側面が強く、エディターのツールバーと改行を駆使して記事を書く形で、行間の調整に苦労したり編集者ごとのトンマナの統一が難しく、案件によってはカスタムフィールドを複数作成して回避す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to change the default HTML output of a Gutenberg block in WordPress?
Joomunited | JoomlaとWordPressの品質拡張