（追記）前提条件 なんか意図せずはてブに載っちゃったり、議論が白熱したいる感じがありまして、言葉足らずで誤解を生むとあれなので、この記事の前提条件を追記しておきたいと思います。 ブロックエディターになったことで、これまでよりも開発・保守の難易度があがる。これまでなんとなく WordPress を触っていた制作会社は使いやすい編集画面をつくるのが難しくなるかも。それを既存のブロックプラグインで補うというのは全然アリ。ブロックエディターにちゃんと追従している無料/有料テーマがちゃんとあって、それらを使うとエディターがめちゃ快適。ただし、すべての無料/有料テーマがブロックエディターに対応しているというわけではもちろんなくて、エスケープすらまともにしていないようなテーマも未だにある。つまり、オリジナルも無料/有料テーマもダメなものはダメで、良いものは良い。この記事はあくまで「WordPress を
WordPressの小ネタ集 - Qiita
この記事は、「CMS Advent Calendar 2023」の21日目の記事で、WordPress に関してもしかするとあまり知られていないかもしれない事を、とりとめもなく独断でまとめたものです。 特に、ここ数年 WordPress に触れておらず、今の WordPress はどうなっているのか? という事を知りたい方向けの情報も少し盛り込んでいます。 クラシックエディターはいつまで使えますか ? Classic Editor プラグインの説明には、この記事を書いている時点で「Classic Editor は公式な WordPress プラグインであり、少なくとも2024年まで、または必要なくなるまでの間、完全にサポート・保守されます。」と記載されています。 それでは2025年以降、クラシックエディターが使えなくなる可能性があるのでしょうか ? 自分は、クラシックエディターは残り続ける
テーマ不要になるか？WPのテンプレートプラグイン「LIQUID BLOCKS」 | WordPressやWebデザインなど紹介 Ocadweb
WordPressのGutenberg（グーテンベルク）が導入されてから、htmlなどの知識がなくてもおしゃれなホームページが簡単にできるようになりました。 WordPressテーマは不要になるのか？ WordPress関連のブログ記事でもテーマは不要になるのではないかという意見もでています。（実際には現在、WordPressテーマは必要になります。しかし、いろんなテーマを選ばなくても簡単におしゃれなホームページができるようになるのでは。。。という意味です。） とはいえ、配置やデザインを考えたり、詳細な使い方を勉強したりせずにもっと簡単に作りたいという方に、今回紹介するテンプレートが用意されているWordPressプラグイン「LIQUID BLOCKS」を紹介します。このプラグインのイメージ画像は英語表記されていますが、製作者は日本人のため、もちろん日本語対応。またWordPress公式の
JavaScript敗北者のためのPHPブロック製造手法が続々登場 – Capital P – WordPressメディア
Gutenbergで導入されたブロックは、WordPressの投稿編集体験を根底から覆すものであり、それはとくに投稿画面に多くのメタボックスを作成していたカスタムフィールド製造業者に打撃を与えた。これまで投稿本文（多くの場合は消されている）＋メタボックスというレイアウトだったものが、すべてブロックの並びとしてブロックエディターに統合されてしまったからである。 では、これまでメタボックスを作成していた人々はどうなるのかというと、JavaScript（React + ESNext）での開発に移行していくことになる。Capital Pでもこれまで何度かに渡ってその手法をお伝えしてきた。 しかしながら、TypeScriptで敗北することはおろか、それ以前のJavaScriptに敗北してしまってなかなかGutenbergに移行できていない人は多いのではないだろうか。そんな悩みは万国共通のようで、PH
2021年12月7日 Wordpress WordPressでは2018年から「ブロック」と呼ばれる要素のかたまりを組み合わせてコンテンツを作っていくブロックエディターが利用できるようになりました。今回はテンプレートファイルはいじらず、WordPressの管理画面（ダッシュボード）でブロックを組み合わせるだけでWebサイトを作成できるフルサイト編集機能にフォーカスします！ ↑私が10年以上利用している会計ソフト！ フルサイト編集とは？ フルサイト編集（FSE＝Full Site Editingとも呼ばれます）は、投稿やページだけでなく、ヘッダーやフッター、サイドバー、ナビゲーションメニューなど、Webサイト内のあらゆる部分にブロックを使って構成できる機能です。つまり、これまでは投稿やページのコンテンツ部分のみブロックに対応していましたが、フルサイト編集機能のついたテーマであれば、Webサイ
【超簡単】WPでブロックエディタを自作できる、ACFとは？手順も解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！「御徒町」を「つれづれまち」と読んでいたバックエンドエンジニアのまうみです。 今回はみんな大好きなWordPressプラグイン「Advanced Custom Fields PRO」（以下、ACFと省略）を使った、自作ブロックエディタの設定方法を紹介したいと思います。 ブロックエディタを自作する方法はいくつかあります。しかし、Reactの知識やjsをbuildするための環境構築が必要ですし、WordPressの実装経験がある方でも、ハードルが高い印象を受けるかもしれません。 また、WordPress本体のアップデートに合わせてメンテナンスをしていく必要もあります。いくらブロックエディタ自体の利便性が良くても、制作やメンテナンスにコストがかかるのは極力避けたいですよね。 そういったハードルをACFを使用することで解決し、簡易的にブロックエディタを開発することが可能です。ゼロからブ
【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」 | バシャログ。
こんにちは、koyaです。 在宅勤務で自宅PCでAdobe製品を開きながら作業することが多くなり、メモリが足りなくなってしまったので16GBから48GBにアップグレードしました。めちゃくちゃ快適です。 最近はChromeだけでもメモリをたくさん使ってしまうので16GBだと足りなくなってしまいましたね… 今回はブロックエディタに独自のブロックを追加する事が出来る「Block Lab」を紹介します。 インストール プラグインの追加から検索、または以下のサイトからダウンロードしてインストールします。 wordpress.org 公式サイト 使用方法 インストールをするとサイドバーの一番下に「Block Lab」が追加されるので、ここからメニューを開くことが出来ます。 All Blocksを開くとデフォルトで「Example Block」が下書き状態で追加されています。 「Example Bloc
内部ブロック名：core/paragraph ブロックの選択方法 入力欄の横にある[+]マークをクリックして、「一般ブロック」から「段落」をクリックします。 なお、ブロックのデフォルトは段落になっているので、選択しなくて […]
WordPressブロックエディターの登場 WordPress 5.0 からブロックエディター（Gutenberg）が登場し、エディター環境が大きく変わりました。 コードを一切書かなくても「ブロック」によって、リッチなデザインのページが簡単に作成できるようになりましたが、 既存エディター（クラシックエディター）との違いに、少々戸惑っている方も少なくないかもしれません。 ブロックテンプレートとは ブロックエディターには、ブロックテンプレートという仕組みがあります。 ブロックをひとつひとつ作成していくのは結構面倒ですが、複数のブロックを組み合わせたものをテンプレートとして利用することで、作業を効率化することができます。 しかし、ブロックテンプレートを作成するのもまた面倒です。 LIQUID BLOCKS とは そこで、今回ご紹介するのが、WordPress公式プラグイン「LIQUID BLOC
『グーテンベルク時代のWordPressノート テーマの作り方 2（ランディングページ＆ワンカラムサイト編）』ではJavaScriptファイルを用意してブロックスタイルを追加する方法を紹介しましたが、最新のGutenberg（バージョン6.2）ではPHPだけでも簡単に追加できるようになりました。 たとえば、functions.phpに次のように register_block_style() の設定を追加すると、見出しブロックに「デザイン01」と「デザイン02」の２つのブロックスタイルが追加され、見出しのデザインを切り替えることができるようになります。 register_block_style( 'core/heading', array( 'name' => 'design01', 'label' => 'デザイン01', 'inline_style' => '.is-style-desi
WordPress公式 無料 無料ダウンロード またはWP管理画面から LIQUID BLOCKS で検索 New コピペで使える！ブロックパターンギャラリーをリリースしました！ WordPressブロックテンプレート＆ブロックパターン LIQUID BLOCKS は、WordPressブロックエディターがさらに便利になる、ブロックテンプレートプラグインです。 WordPress最新のブロックエディター（Gutenberg）に対応。ブロックパターン作成対応。どのテーマでもご利用可能。AMP対応。 デザイン済ブロックテンプレート：37種類 ブロックエディターのブロックテンプレート作成デモ。ダミーテキストは英語ですが、多言語（英語、日本語、スペイン語）に対応しています。 Hot Google の AMP for WordPress 公式サイトに掲載されました！ LIQUID BLOCKS の特
WordPress 5.5 (2020年8月11日リリース予定) ではブロックエディタが大きく変わるようです。そのなかで、かなり気になる「ブロックパターン」という機能がありましたのでご紹介いたします。 これをうまく利用すると今まで「再利用ブロック」を流用してユーザーに使ってもらっていたブロックのデザイン・レイアウトの雛形を「ブロックパターン」に登録して使えるようになります。 ※この記事は WordPress5.5 beta1 でテストしています。 ※ブロックパターンはまだ開発中であり、APIは変更される可能性があります。 ブロックパターンとは ブロックエディタに慣れてくるとブロックを1つだけ使用するのではなく いくつものブロックを組み合わせて使用するようになってきますよね。 そこで慣れてない人でも簡単にブロックを組み合わせ、あらかじめ作っておいたデザイン・レイアウトを1クリックで利用できる
WordPress 5.5 (2020年8月11日リリース予定) ではブロックエディタが大きく変わり、そのなかで「ブロックパターン」という機能が追加されました。 WordPress 5.5 から利用できる「ブロックパターン」 が めちゃ いいかもしれない 現段階では WordPressコアが用意したブロックパターンしか使えませんが、自分でブロックパターンを登録・メンテナンスできたらすごく使いやすくなりますよね。 そこで自分でブロックパターンを登録・メンテナンスできるようにするTipsを2つ紹介します。 ユーザーブロックパターン ブロックパターン登録用のカスタム投稿タイプを作ってWordPressコアのブロックパターンリストに読み込ませます。 コード 以下のコードを my-plugin.php に張り付けてみてください。 /** * ユーザーブロックパターン * * @since 5.5.0
【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」ー後編 | バシャログ。
こんにちは、koyaです。 今回は前回の続きを書きます。 前回のおさらい 前回はプラグインでブロックのフィールドを作成するところまでをやりました。 上の画像のようにブロックエディタ上のフィールドに値を入力して、いざブロックに反映しようとすると画像のようなエラーが出た状態になっている状態で終わりました。 ブロックエディタでのエラーの解消 上記のエラー文では「Block rendered as empty.block-lab-editor__ssr」と表示されています。 ブロックをレンダリングしようとしましたが中身が空でした。と言われていますね。 プラグイン入力した状態では入力画面は作りましたが、ブロックの中身やデザインは設定されていない状態です。 これを解消するためにブロックの中身を作成していきます。 ブロックはテーマディレクトリの下にblocksディレクトリを作成し、その中にブロックごとに
ブロックエディタが抜群に使いやすくなるプラグイン「Snow Monkey Editor」 | バシャログ。
こんにちは。koyaです。 先日今シーズン最後のスノーボードをするために越後湯沢まで行きましたが、ボードやシューズが泥まみれになってしまいました。 例年であれば4月末まで営業しているようなゲレンデも3月末には営業終了していそうです。ただでさえコロナで外出が億劫なのに暖冬も重なって今年は散々でした。 今回紹介する「Snow Monkey Editor」はブロックエディタで記事を書く際に欲しい機能が詰め込まれているプラグインです。 ダウンロードはこちらから出来ます→Snow Monkey Editor Snow Monkeyというとテーマの方をイメージしますが、こちらのプラグインはSnow Monkeyのテーマでなくても使用可能です。 Snow Monkey Editorはインストールをすると記事編集画面の右側に「スタイル」とスノーモンキーアイコンがついたブロック表示設定項目が追加されます。
WordPress JSX を使った Gutenberg ブロックの作り方 WordPress のブロックエディタ Gutenberg で JSX を使って独自のブロックを作成する方法について。 JSX を使用するための環境構築は @wordpress/scripts（wp-scripts）を使っています。基本的なブロックの作成方法、JSX の基本的な使い方、WordPress のコンポーネントの使い方、webpack.config.js を使った環境のカスタマイズ（複数のエントリーポイントの設定方法）などについての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 以下はすでに Node.js がインストールされていて、WordPress のローカル環境が設定済みであることを前提にしています。また、コマンド
registerBlockStyleでブロックに独自のスタイルを追加する – Capital P – WordPressメディア
これまでブロックの作成方法などについて触れてきたが、Twenty Twentyなどに見られるように、WordPressコアやプラグインの提供するブロック機能に依存し、あくまでスタイルの拡張に徹底するというのも一つの戦略ではある。 カスタムブロックについて「自分はプログラマーではないのでちょっと……」などと思っている人でも手軽にできる、ブロックスタイルの追加方法を説明する。 スタイルの登録 Gutenbergのデフォルトブロックのうち、たとえば区切り線は「スタイル」という概念がある。 区切り線、要するに hr はスタイルを選ぶことができる。 この実装がどうなっているかというと、スタイルを選ぶごとにCSSのクラスが付与されるという形だ。hrを例にとると、デフォルトで以下の3種類。 上から順に、次の様なクラスが割り当てられている。 クラスなしあるいは is-style-defaultis-sty
WordPress Gutenberg ブロックの作成 ブロックエディタ Gutenberg で独自のブロックタイプを作成（自作）するための基本的なことについての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 2024年時点での情報でのカスタムブロックの作り方は以下を御覧ください。 WordPress Highlight.js カスタムブロックの作成 WordPress Highlight.js カスタムブロック サンプル 環境構築などはせずに、独自のブロック（カスタムブロック）を作成する方法を掲載しています。内容的には主に日本語の公式リファレンスの「ブロック」を元にしています。 以下で作成するブロックは単純なもので、JSX も使用しないので環境構築（Babel の設定など）の必要はありませんが、ローカル
Free Gutenberg and WooCommerce WordPress Theme - Blocksy
Lightning Fast Feels fast and numbers confirm that, it is ranked at the top in most speed testing tools. Gutenberg Ready Built from scratch to be 100% compatible with the Gutenberg editor and blocks. Code Splitting Load JavaScript behavior when you really need it using webpack’s support for dynamic imports. eCommerce Ready Easily build and customize your online store in minutes and start selling l
ブロックエディター開発入門
WordPressのブロックエディター（ Gutenberg ）をカスタマイズするために抑えておきたいポイントをまとめた入門書です。 - ブロックエディター関連のテーマサポート機能紹介 - ブロックスタイルの作成方法 - ブロックバリエーションの作成方法 - ブロックパターンの作成方法 - カスタムブロックの作成方法 - ダイナミックブロックの作成方法 などについて解説しています。 ※ 初心者向けのため、ビルドが必要なコードは一切使用していません。 そろそろブロックエディター開発もできるようになりたい人 公式のチュートリアルの難易度が高くて一度挫折してしまった人 におすすめの一冊です。
まだ「ブロックエディターが使いにくい」とか言ってる人は、まずは黙ってこの記事を読んでみてください。 「バージョンアップデートしたらバグった！」と言ってる人をちょくちょく見かけますが、それはテーマかプラグインが原因の可能性が大きいです。WordPressが悪いみたいな言い方はやめて、テーマ・プラグイン開発者にどうバグったのか報告してあげましょう。 デフォルトスタイルが選べるようになった 頻繁に使うブロックスタイルをあらかじめセットできるようになりました。 例えば、『SWELL』では画像ブロックに影をつけたり線をつけたりできるスタイルが選択できるのですが、「影あり」のスタイルをデフォルトスタイルに登録することで、次回以降、初めから影が付いた状態で画像ブロックが配置されるようになります。 デフォルトスタイルをセットしている様子 ブロックの移動にアニメーションがついた ブロックを移動させる時にアニ
完成したコード「実現したいこと」を踏まえた上で完成したコードがこちらです。 /*! * Copyright (c) 2020 kusamura * https://web.monogusa-note.com/ * Released under the GPL license. * see http://www.gnu.org/licenses/gpl-2.0.html * * 参考: https://www.webopixel.net/wordpress/1499.html */ //コンポーネントの読み込み const { Fragment } = wp.element; const { addFilter } = wp.hooks; const { PanelBody, SelectControl } = wp.components; const { InspectorControls
プラグインを作成 独自のブロックはプラグインで作成するのが一般的なようです。 プラグインの詳しい作り方については以下をご参考ください。 https://haniwaman.com/my-plugin/ my-gutenbergをpluginsフォルダ内に作成してindex.phpを作成して以下を記述します。 「My Gutenberg」というプラグインがプラグイン一覧に表示されるようになるので、有効化しておきます。 Gutenbergブロックの作成方法 ブロック用のスクリプトを登録ブロックの定義を登録ブロックの内容を登録 1.ブロック用のスクリプトを登録と2.ブロックの定義を登録はinitをフックにしてregisterを登録します。3.ブロックの内容を登録については、JavaScriptで記述していきます。 ブロック用のスクリプトを登録 WordPressでスクリプトを登録するためのwp_
WordPress5.0から導入された新しいエディタ「Gutenberg(ブロックエディタ)」ですが、慣れると非常に便利で使い勝手が良いです。一度慣れてしまうと旧エディタには戻れないですね。 Gutenbergで記事を書く際、編集画面の見出しや本文にはGutenberg用のデフォルトスタイルが当たっています。すごく見にくいわけではないですが、なるべく実際にブログを表示した時に近い状態で編集したいと思う方は多いのではないでしょうか。 そんなわけで今回は、Gutenbergの編集画面に独自のスタイル(CSS)を適用する方法をご紹介したいと思います。この方法を使えば、実際の表示と同じような見た目で記事を編集することができるようになります。 Gutenbergの編集画面に独自のスタイルを適用する方法 Gutenbergの編集画面に独自のスタイルを適用する方法は、2通りの方法がありますので、それぞれ
WordPress 5.8 をチェックしています
WordPress5.8 Beta が 公開されました。 WordPress5.8 は 2021年7月20日に リリースされる予定なので いろいろチェックをしています。 その中の WordPress5.8 で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 リリースまでのスケジュールは WordPress 5.8 Development Cycle に載っています。 WordPress 5.8 Beta1 https://wordpress.org/news/2021/06/wordpress-5-8-beta-1/ WordPress 5.8 Beta2 https://wordpress.org/news/2021/06/wordpress-5-8-beta-2/ WordPres
WordPress5.7 をチェックしています
WordPress5.7 RC1 が 公開されました。 WordPress5.7 は 2021年3月9日に リリースされる予定なので いろいろチェックをしています。 その中の WordPress5.7 で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 リリースまでのスケジュールは WordPress 5.7 Development Cycle に載っています。 WordPress 5.7 RC1 https://wordpress.org/news/2021/02/wordpress-5-7-release-candidate/ WordPress 5.7 RC2 https://wordpress.org/news/2021/03/wordpress-5-7-release-can
WordPress5.2以降は「ブロックマネージャー」から非表示にしたいブロックを設定可能でしたが、WordPress5.9より「設定」→ブロック→表示ブロックへ移動しました。 WordPress5.9以降であれば「設定」からブロックの非表示設定ができます。 投稿・固定ページ編集画面にて、右上の歯車アイコンの右の三点リーダをクリックすると、メニューが表示されるので「設定」をクリックしてください。 「ブロック」タブに切り替えて「表示ブロック」にて、非表示にしたいブロックのチェックを外してください。 ただ、この方法の場合、設定を知っている人なら誰でも変更できるので、使おうと思えば使えてしまいます・・・ プラグイン「 Disable Gutenberg Blocks – Block Manager 」を使う プラグイン「 Disable Gutenberg Blocks – Block Mana
Gutenberg ブロック開発の基本
目的 手を動かしながら、ブロック開発の流れを理解する。ブロック開発の用語を知る。 本記事をもとに社内勉強会を行いました。その際の動画アーカイブもご参考ください。 開発環境 DockerNodeJS（NPM） ブロックを作っていく 例として、アラートブロックを作っていきます。 画像のように、サイドバーからブロックの背景色を切り替えることができます。 ボイラープレートを作成 下のコマンドで、ブロックの雛形ができます。
#この記事は？ Wordpressの新エディタGutenbergをいじってて よく使いそうだと思ったコンポーネントをまとめていきます 追記編集していきます TextControl と TextareaControl テキスト編集のコンポーネント。 onChangeでイベントオブジェクトじゃなく中身の文字列だけが渡されるようになってるので、値の取り出しとかしなくていいので普通にtextareaとか書いちゃうより楽です。 const {TextControl, TextareaControl} = wp.components; registerBlockType('myPlugin/myBlock',{ edit({attributes,className,setAttributes}){ return [ <TextControl onChange={(newText1)=>setAttri
WordPress 5.5のリリースに伴いGutenbergへ新たに追加されたブロックパターンのカスタマイズで、デフォルトで用意されているブロックパターンやパターンカテゴリで不要なものを削除したり、逆にオリジナルのブロックパターンやパターンカテゴリを追加する方法です。 ブロックパターンを削除する ボタンを2つ横並びにしたブロックやイメージ・テキストのカラムブロックなど、ブロックパターンには予めデフォルトパターンとして10種類が用意されています。 それらが不要な場合はunregister_block_pattern()を用いてfunctions.phpへ下記のように記述します。 add_action( 'init', 'remove_default_block_pattern' ); function remove_default_block_pattern() { $patterns =
みなさん、「フルサイト編集」という言葉を聞いたことがありますか？これは近い将来、WordPress で実現される機能の１つです。 そして、今まで WordPress で使われてきたテーマの作り方とは大きく変わることでも、少しずつ注目されてきています。 ここでは、この記事を執筆時の最新情報をもとに、フルサイト編集に対応したテーマ（ブロックテーマと呼ばれます）を作ってみたいと思います。 掲載ならびに参考にしている情報は、執筆時での最新のものとなりますので、この記事を読んで実際に同じように試してみようと考えて見える方は、そのタイミングでの最新情報も確認していただくようお願い致します。 準備 最低限の準備は以下のようにしています。 ローカル開発環境（Localを利用）WordPress Beta Tester plugin を使って WordPress 5.8 RC1 をインストール済みプラグイン
WordPress 関連リンク JavaScript ビルド環境のセットアップ（@wordpress/scripts） @wordpress/create-block パッケージ ブロックの作成 チュートリアル（create-block） JavaScript Build Setup（英語） @wordpress/create-block（英語） Create a Block Tutorial（英語） @wordpress/scripts (wp-script) npm 関連リンク @wordpress/scripts @wordpress/create-block 関連ページ Node.js を Mac にインストール（nodebrew の使い方） npm の基本的な使い方 webpack の基本的な使い方 React を使ってみる（基本的な使い方） このページ以外にも以下のようなブロッ
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WordPressの「Gutenbergエディタ」とは、2018年にリリースされたWordPress5.0から、デフォルト搭載されているエディタの名前である。単に「ブロックエディタ」と呼ばれることも多い。 簡単に言うと、以下のように「ブロック」を配置していくことで、記事を完成させることができる。 それ以前のエディタ（クラシックエディタ）とは画面構成や操作感が大幅に変わったため、エディタ変更当初は「使いにくい」「従来のエディタに戻したい」という声が圧倒的に多かったように記憶している。 しかしGutenbergエディタはアップデートを繰り返し、現在ではかなり直感的に操作できる優秀で使いやすいエディタに進化している。 特に、今回3章で紹介してい
Gutenbergでオリジナルのブロックパターン登録方法 - ブロックエディター私的マニュアル（α）
Gutenbergでオリジナルのブロックパターン登録方法 Posted: 2020/7/16 Updated: 2020/7/16 これはプラグイン版のGutenberg（ver 8.5.1）を有効化して確認しています。UI等は変更になる可能性が大いにあります！（現に、8.4からブロック選択のUIが変わっています） プラグインを入れれば同様の動作は確認できますが、開発版とも言えるものなので、本番環境へ導入するのは相当の理由がない限り控えましょう。 前回のブログで、WordPress 5.5 に新しく「ブロックパターン」が追加されることを紹介しました。 今回は、自分で新しいブロックパターンを登録する方法をご紹介します。 ブロックエディターハンドブックには、パターンの登録・削除・パターンのカテゴリー登録・パターンのカテゴリー削除の方法が載っています。 パターンを登録する register_bl
WordPress 5.5 をチェックしています
WordPress5.5 Beta1 が 公開されました。 WordPress5.5は 2020年8月11日に リリースされる予定なので いろいろチェックをしています。 その中で WordPress5.5で気がついたところを取り上げていきます。 これから追加・変更があるかもですので、説明や画像等がリリース時と違う場合もありますが随時チェックしていく予定です。 リリースまでのスケジュールは WordPress 5.5 Development Cycle に載っています。 WordPress 5.5 Beta 1 https://wordpress.org/news/2020/07/wordpress-5-5-beta-1/ WordPress 5.5 Beta 2 https://wordpress.org/news/2020/07/wordpress-5-5-beta-2/ WordPre
Gutenbergの大きな特徴のひとつとして、コードがわからない人でも自由且つ簡単に好きな見栄え・レイアウトを実装できるというものがありますが、それを何らかの理由で制限したいときに使える方法です。 特に毎回決められた項目のみ入力するような作りの投稿タイプやページがある場合に便利だと思います。 ブロックの操作はtemplate_lockというプロパティで制限することができます。 template_lockを指定しないデフォルトの状態ではブロックの追加・削除・移動など自由に操作することができますが、allでそれらを完全に制限し、insertはブロックの追加・削除はできませんが移動はできるという制限をかけます。 具体的な使用例として、例えばとあるサイトで「イベント」という投稿タイプを作成し、そこでは基本的に下記内容の情報しか入力しないので他のブロックは必要ないという仕様だったとします。 キャッチ
WordPress：ブロックを組み合わせた様々な見栄えをコピペで配置できる「Gutenberg Template Library」 - NxWorld
「Gutenberg Template Library」は、Gutenbergの各ブロックを組み合わせることで作成できる様々な見栄えをまとめたコレクションサイトです。 別途CSSを追記したりプラグインを併用するものもありますが、サイトでよくある見栄えをコピペで簡単に配置できます。 サイトではイメージのように様々なテンプレートがキャプチャ付きで並んでおり、現時点で172パターン用意されています。 また、各テンプレートは「ヒーロー」「プライス」「特徴」など下記の14カテゴリーに分かれており、ページ上部にあるナビゲーションで絞り込んで閲覧することができます。 Hero Testimonial Team Stats Pricing Logos Gallery Features FAQ Content Contact Card Slider CTA コピペで実装できる 一覧から配置したいテンプレート
ファイルの作成 この例ではファイルの作成及び JavaScript 環境の構築は create-block を使って行っています。 カスタムブロックをプラグインとして作成するので、ターミナルでプラグインディレクトリに移動して npx コマンド「 npx @wordpress/create-block 」を実行します。 以下では対話モードで実行していますが、slug とオプションを指定して実行することもできます。 関連ページ：Gutenberg ブロック開発の環境構築 $ npx @wordpress/create-block return //create-block を対話モードで実行 npx: 217個のパッケージを33.092秒でインストールしました。 //対話的にオプションを設定 //ファイルの出力先ディレクトリ名に使用される文字列（slug）を指定 ? The block slu
Gutenberg使用時に不要項目を非表示にして、表示切り替えオプションからも削除する方法です。 同様のことをクラシックエディタで行う際はremove_meta_box()を用いていましたが、Gutenbergの場合はremove_post_type_support()やunregister_taxonomy_for_object_type()を用います。 デフォルトではイメージ右側のように様々な項目が用意されていますが、サイト構成的に不要なものがあって非表示（機能削除）にしたい場合は、functions.phpへ下記のように記述します。 add_action( 'init', 'remove_block_editor_options' ); function remove_block_editor_options() { remove_post_type_support( 'post',
ただ、この方法の場合はドロップダウンでまとめることはできません。 Gutenberg プラグイン v5.3 または WordPress v5.2 からはデフォルトのボタンとともにドロップダウンにまとまるようになりましたが、独自のボタンだけでまとめたいこともあるでしょう。 ここでは独自のドロップダウンに追加する方法を紹介します。 BlockFormatControls ボタンなどを追加できる場所はいくつか用意されています。 ツールバーへ追加するには『BlockControls』または『BlockFormatControls』を使用します。 デフォルトのツールバーボタンよりも後ろに追加する場合は『BlockFormatControls』を使用します。 registerFormatType は RichText.ToolbarControls Slot を利用するための Fill を生成するよう
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress を使った制作案件の今後。オリジナルでつくるか、無料/有料テーマを使うか
日本語でも使いやすい！フルサイト編集に対応した無料WordPressテーマ
ブロックエディター私的マニュアル - ブロックエディター私的マニュアル（α）
テーマ不要！？WordPressブロックテンプレート「LIQUID BLOCKS」 – LIQUID BLOG
GutenbergのブロックスタイルをPHPで簡単に追加する | エビスコム - EBISUCOM
WordPress無料ブロックテンプレート＆ブロックパターン LIQUID BLOCKS | プラグイン
WordPress 5.5 から利用できる「ブロックパターン」 が めちゃ いいかもしれない
WordPress5.5 ブロックパターンを簡単に登録やメンテナンスできるようにする
WordPress JSX を使った Gutenberg ブロックの作り方
WordPress Gutenberg ブロックの作成
WordPress5.3でのブロックエディターの変更点まとめ【Gutenberg】 | WEMO
Gutenbergでサイドバーに選択式のCSSクラス設定を追加する
Gutenbergにオリジナルなブロックを作成する方法（静的編） | HPcode（えいちぴーこーど）
Gutenberg(ブロックエディタ)の編集画面に独自のスタイル(CSS)を適用する方法
Gutenberg（ブロックエディタ）で不要なブロックを隠す方法３選
Wordpress Gutenberg よく使いそうなコンポーネントまとめ - Qiita
WordPress：Gutenbergのブロックパターンやパターンカテゴリを追加・削除する方法 - NxWorld
フルサイト編集に対応したブロックテーマを作ってみる | オレインデザイン
WordPress Gutenberg ブロック開発の環境構築
WordPressエディタ「Gutenberg（グーテンベルグ）」の使い方を全解説
WordPress：Gutenbergのブロック操作を制限する方法 | NxWorld
WordPress Gutenberg ダイナミックブロックの作り方
WordPress：Gutenbergの不要項目を非表示にする
Gutenbergのツールバーにドロップダウンを追加する | Technote
dl.ndl.go.jp
kamikouryaku.net
rocketnews24.com
shikiho.toyokeizai.net
news.yahoo.co.jp
young-machine.com