【超簡単】WPでブロックエディタを自作できる、ACFとは？手順も解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！「御徒町」を「つれづれまち」と読んでいたバックエンドエンジニアのまうみです。 今回はみんな大好きなWordPressプラグイン「Advanced Custom Fields PRO」（以下、ACFと省略）を使った、自作ブロックエディタの設定方法を紹介したいと思います。 ブロックエディタを自作する方法はいくつかあります。しかし、Reactの知識やjsをbuildするための環境構築が必要ですし、WordPressの実装経験がある方でも、ハードルが高い印象を受けるかもしれません。 また、WordPress本体のアップデートに合わせてメンテナンスをしていく必要もあります。いくらブロックエディタ自体の利便性が良くても、制作やメンテナンスにコストがかかるのは極力避けたいですよね。 そういったハードルをACFを使用することで解決し、簡易的にブロックエディタを開発することが可能です。ゼロからブ
【WordPress】ブロックパターンおすすめのプラグイン | バシャログ。
こんにちは。koyaです。 テレワークを機に自宅を引っ越しました。 自宅にいる時間が長くなると広い部屋が欲しくなりますよね。通勤時間を気にしなくていいので物件探しも幅が広くてよかったです。 OculusQuestやSwitchを所持していても狭い部屋だとやれることが限られていたのでとても快適です。 今回はWordPress5.5で追加された「ブロックパターン」を使う上で外せないと思っているプラグインの紹介をします。 そもそも「ブロックパターン」とは？ カスタムフィールドで言う繰り返しフィールドのようなもので、事前に設定した複数のブロックを一括で呼び出すことができます。 似たようなページを複数作る際に、同じブロックを何度も組む必要性が無くなるので非常に便利です。 ブロックパターンのオススメプラグイン Custom Block Patterns こちらのプラグインを使用することで、記事作成と同
【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」 | バシャログ。
こんにちは、koyaです。 在宅勤務で自宅PCでAdobe製品を開きながら作業することが多くなり、メモリが足りなくなってしまったので16GBから48GBにアップグレードしました。めちゃくちゃ快適です。 最近はChromeだけでもメモリをたくさん使ってしまうので16GBだと足りなくなってしまいましたね… 今回はブロックエディタに独自のブロックを追加する事が出来る「Block Lab」を紹介します。 インストール プラグインの追加から検索、または以下のサイトからダウンロードしてインストールします。 wordpress.org 公式サイト 使用方法 インストールをするとサイドバーの一番下に「Block Lab」が追加されるので、ここからメニューを開くことが出来ます。 All Blocksを開くとデフォルトで「Example Block」が下書き状態で追加されています。 「Example Bloc
WordPress公式プラグイン「Shinobi Blocks」リリースのご案内 | Fantastech（ファンタステック）
僕が開発しているWordPressプラグイン「Shinobi Blocks」が公式プラグインとして登録されたので、ご案内します。 WordPress公式プラグインとしてのリリースはShinobi Reviewsに続き2つ目となります。プラグイン画面で検索できるのはやっぱり気持ち良いものがありますね笑 僕が開発しているWordPressプラグインたち Shinobi BlocksはGutenbergのブロックプラグインで、主な特徴は自動的に構造化データが出力されることです。 Googleで検索した時、検索結果に「明らかに目立つ記事」がヒットすることありますよね？ 横長のカルーセルが表示されたり、開閉できるアコーディオンが表示されたり。あれが誰でもできるようになります。 僕の観測範囲では、この構造化データもセットで表示してくれるブロックプラグインが皆無だったんですよね。海外製のが1つあったくら
ブロックエディタが抜群に使いやすくなるプラグイン「Snow Monkey Editor」 | バシャログ。
こんにちは。koyaです。 先日今シーズン最後のスノーボードをするために越後湯沢まで行きましたが、ボードやシューズが泥まみれになってしまいました。 例年であれば4月末まで営業しているようなゲレンデも3月末には営業終了していそうです。ただでさえコロナで外出が億劫なのに暖冬も重なって今年は散々でした。 今回紹介する「Snow Monkey Editor」はブロックエディタで記事を書く際に欲しい機能が詰め込まれているプラグインです。 ダウンロードはこちらから出来ます→Snow Monkey Editor Snow Monkeyというとテーマの方をイメージしますが、こちらのプラグインはSnow Monkeyのテーマでなくても使用可能です。 Snow Monkey Editorはインストールをすると記事編集画面の右側に「スタイル」とスノーモンキーアイコンがついたブロック表示設定項目が追加されます。
カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない
ここのところ、記事も書かずに何をしていたかというと、いわゆるWordPressでの実験を試みておりました。そのうちの一環として取り組んでいたのが、WordPress 5.0から正式採用された新エディタ「Gutenberg」のカスタマイズ。 そんなカスタマイズ作業をする中で、これは楽になると感じたのが「Block Lab」というプラグインです。 カスタムフィールド的に実装可能 Block Lab 公式サイト 当ブログメディアの執筆環境は、しばらく前からブラウザ環境にしていたわけですが、それに伴って裏側を整備していて、例えばフキダシレイアウトや注釈、追記といったレイアウト、さらには外部リンクや内部リンクをカードタイプで表示させるといったことをショートコードで実装していました。 それらのショートコードは執筆画面でもしっかり展開されるよう、Shortcake(Shortcode UI)というプラグ
【 WordPress】不要なブロックを非表示にするプラグイン「CoBlocks」 | バシャログ。
こんにちは、koyaです。 最近はWordPressの勉強を主にしています。 みなさんブロックエディタは使用していますか？ まだ馴染む事が出来ず、あまり使用していない方が多いと思います。 今回はそんなブロックエディタから、不要なブロックを非表示にするプラグイン「CoBlocks」についてまとめます。 ブロックエディタについて ブロックエディタについてはyanagimachiが基本的なことについてまとめているので、以下の記事をご覧になってください。 参考 【WordPress】Gutenberg入門①Gutenbergってどんなもの？ | バシャログ。 【WordPress】Gutenberg入門②ブロック：一般ブロック | バシャログ。 【WordPress】Gutenberg入門③ブロック：フォーマット | バシャログ。 Yanagimachiの記事を見てわかる通り、使えるブロックの種類
WordPress ブロックエディター(Gutenberg)カスタマイズあれこれ - Qiita
WordPress 5.0から導入されたブロックエディター(Gutenberg)のカスタマイズ方法や、関連するオプション、新しく導入された設定について見ていきます。オフィシャルの テーマサポート の内容をベースに、独自の情報を追加しています。 更新履歴 2021/06/11 - ブロックフォントサイズの shortName が無くなったので削除。ブロックパターンの削除、カスタム単位、カスタム行間について追加。 2021/01/10 - グラデーション設定を追加。 2020/06/19 - 投稿タイプ別に使えるブロックを制限する方法を追加。 2020/05/24 - ブロックスタイルの削除について追加。 2020/04/22 - 後方互換性についての注意を追加。ダークモードの記載追加。 2020/02/20 - Gutenberg 7.5 でインラインの文字色編集が追加されたので記載。 20
WordPress：Gutenbergブロックの表示・非表示を簡単に設定できるプラグイン「Disable Gutenberg Blocks – Block Manager」 - NxWorld
「Disable Gutenberg Blocks – Block Manager」は、その名の通りGutenbergの一部ブロックを非表示にすることができるプラグインです。 デフォルトのブロックだけでなく、プラグインで追加されたブロックについても表示・非表示を設定することができます。 紹介している内容やキャプチャなどは、WordPress Ver 5.0.3とDisable Gutenberg Blocks – Block Manager Ver 1.0.8で使用した際のものになります。 インストール・有効化 管理画面のプラグインから「Disable Gutenberg Blocks – Block Manager」を検索してインストール、もしくは「Disable Gutenberg Blocks – Block Manager」からファイルをダウンロードして環境にアップロード。 プラグ
WordPress：Gutenbergに便利なブロックを追加してくれるプラグイン 10＋ - NxWorld
Gutenbergでより凝ったレイアウトを簡単に作成できたり、いろいろと細かく設定ができるブロックをさらに追加してくれるプラグインのまとめです。 中には特定のテーマ向けとして作られているプラグインもあるので一般的なテーマでは一部ブロックが使えないとか機能が制限されている場合もあるものの、基本的にはどのテーマでも利用することができます。 また、容易にブロックを追加できるだけでなく、オリジナルブロックを自作しようと思っているときに作り方などの参考にもなると思います。 紹介しているブロック数・機能・設定については、このエントリー公開時のものになります。 Snow Monkey Blocks プラグイン名にも含まれている「Snow Monkey」というテーマ向けとして作成されたプラグインで、作者が日本の方なのでブロックの使い方や更新情報などについても日本語でチェックすることができます。 テーマと併
WordPress：Gutenberg用CSSを読み込んだり設定する方法 - NxWorld
フロントへのデフォルトスタイル適用やエディタ上で任意のスタイル適用など、Gutenberg用のCSSを読み込んだり設定する方法です。 フロントでGutenbergのデフォルトスタイルを適用 Gutenbergには一部ブロック（例えば「引用」や「テーブル」など）に適用させるデフォルトスタイルとしてCSSがあらかじめ用意されているのですが、それをフロント（公開記事）にも適用させたい場合は、下記のようにfunctions.phpへadd_theme_support( 'wp-block-styles' );を追記します。 フロント・エディタともに見栄えはすべて自身で作るのであれば必要ないとは思いますが、ある程度はデフォルトをそのまま使用する場合向けです。 add_action( 'after_setup_theme', 'nxw_setup_theme' ); function nxw_setu
テーマ を Gutenberg に対応させる時、最低限やっておく事 – ねんでぶろぐ
WordPress5.0では新しいエディタ「ブロックエディタ」が搭載されます。 公開画面では「ブロックエディタ」で入力したコンテンツはテーマ側が対応していなくても だいたい表示するようになっています。 【ブロックエディタ 公開画面】 管理画面(編集画面)では、テーマ のデザイン(公開画面) と同じデザインで編集できるようにする事で ユーザーは簡単にイメージ通りのコンテンツを作成する事ができます。 しかし デフォルト(ブロックエディタ非対応テーマ) では 管理画面(編集画面)では テーマのデザイン(公開画面)と だいぶん違う状態になっていますので それぞれテーマ側で対応しなくてはなりません。 【ブロックエディタ 編集画面(非対応)】 ※基本表示幅は 580px になっています。「Gutenberg を試してみよう」画像が大きいのは「幅広」設定になっているためです。 【ブロックエディタ 編集画
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hyper Editor