Gutenberg（グーテンベルク）で特定のブロックの有無を判定する方法【WordPress】 ｜ 株式会社ティウェブ
こんにちは、ティウェブ藤園です。 今回は、WordPressのブロックエディタ「Gutenberg」を使用したときの便利なカスタマイズ方法をご紹介します。 目次 Gutenbergとは？特定のブロックがあったときに、指定の処理をする関数 完成形解説「関数の作成」解説「パラメータ（引数）が使えるようにする」解説「判別する条件の作成」関数の使用例まとめ Gutenberg（グーテンベルク）とは？ 正式に公開されてしばらく経ちますが、Gutenberg（グーテンベルク）とは、WordPress5.0以降のあたらしいエディタ（編集画面）ことです。 💡それ以前の旧エディタのことはClassicエディタと呼びます。 以前のものと見た目も作りも違いますが、Gutenbergはいわゆるブロックエディタという種類のもので、エディタ内に「文章を書く」のではなく、「ブロック（要素）を積み上げてページをつくる」
WordPress5.5 ブロックパターンを簡単に登録やメンテナンスできるようにする
WordPress 5.5 (2020年8月11日リリース予定) ではブロックエディタが大きく変わり、そのなかで「ブロックパターン」という機能が追加されました。 WordPress 5.5 から利用できる「ブロックパターン」 が めちゃ いいかもしれない 現段階では WordPressコアが用意したブロックパターンしか使えませんが、自分でブロックパターンを登録・メンテナンスできたらすごく使いやすくなりますよね。 そこで自分でブロックパターンを登録・メンテナンスできるようにするTipsを2つ紹介します。 ユーザーブロックパターン ブロックパターン登録用のカスタム投稿タイプを作ってWordPressコアのブロックパターンリストに読み込ませます。 コード 以下のコードを my-plugin.php に張り付けてみてください。 /** * ユーザーブロックパターン * * @since 5.5.0
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
Gutenbergでサイドバーに選択式のCSSクラス設定を追加する
完成したコード「実現したいこと」を踏まえた上で完成したコードがこちらです。 /*! * 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
【 WordPress】不要なブロックを非表示にするプラグイン「CoBlocks」 | バシャログ。
こんにちは、koyaです。 最近はWordPressの勉強を主にしています。 みなさんブロックエディタは使用していますか？ まだ馴染む事が出来ず、あまり使用していない方が多いと思います。 今回はそんなブロックエディタから、不要なブロックを非表示にするプラグイン「CoBlocks」についてまとめます。 ブロックエディタについて ブロックエディタについてはyanagimachiが基本的なことについてまとめているので、以下の記事をご覧になってください。 参考 【WordPress】Gutenberg入門①Gutenbergってどんなもの？ | バシャログ。 【WordPress】Gutenberg入門②ブロック：一般ブロック | バシャログ。 【WordPress】Gutenberg入門③ブロック：フォーマット | バシャログ。 Yanagimachiの記事を見てわかる通り、使えるブロックの種類
WordPress：Gutenbergに便利なブロックを追加してくれるプラグイン 10＋ - NxWorld
Gutenbergでより凝ったレイアウトを簡単に作成できたり、いろいろと細かく設定ができるブロックをさらに追加してくれるプラグインのまとめです。 中には特定のテーマ向けとして作られているプラグインもあるので一般的なテーマでは一部ブロックが使えないとか機能が制限されている場合もあるものの、基本的にはどのテーマでも利用することができます。 また、容易にブロックを追加できるだけでなく、オリジナルブロックを自作しようと思っているときに作り方などの参考にもなると思います。 紹介しているブロック数・機能・設定については、このエントリー公開時のものになります。 Snow Monkey Blocks プラグイン名にも含まれている「Snow Monkey」というテーマ向けとして作成されたプラグインで、作者が日本の方なのでブロックの使い方や更新情報などについても日本語でチェックすることができます。 テーマと併
【最新版図解】Gutenbergの使い方！初心者でもわかるWordPressブロックエディターの基本操作 | wp.geek
※Windowsの場合、CommandキーをCtrlキーに変更 複数のブロックをまとめて操作する ブロックを複数選択した状態でも、上記と同じ方法で複数のブロックを複製・挿入・削除できます。 また、ブロック上部のツールバーで、ブロックのグループ化もできます。 複数のブロックに対して一括で移動や装飾をしたい時は、グループ化で1つの塊にすると便利です。 ブロックタイプを変更する 段落ブロックを見出しブロックに変更するなど、ブロックタイプの変更も可能です。 変更したいブロックを選択し、ブロック上部ツールバーの一番左のボタンを押すと、互換性の高いブロックの候補が出てきます。 使用履歴からブロックを作成する 記事編集スペース内に表示されている「＋」ボタンをクリックすると、最近使用したブロックが6つまで表示されます。 また、ブロックに「/」を入力しても、同様にブロックの使用履歴が表示されます。 ブロック
Before Gutenberg – 再利用ブロックの使い道を考えよう – Capital P – WordPressメディア
この再利用ブロックはおそらくカスタム投稿タイプとして登録されることになるようだ。 「JSONからインポート」とあるとおり、JSONでインポート・エクスポートできる。 次回以降はこの再利用ブロックはブロック一覧から呼び出すことができる。 さて、以上で再利用ブロックの作り方については終わりだ。続いて、その使い道を考えよう。 再利用ブロックの使い方 再利用ブロック＝作るのが面倒なブロック まず考えられるのが、「作るのが面倒なブロック」として登録していくことだ。「面倒」の定義も色々あるのだが、たとえばコンタクトフォームのようなものを考えてみよう。 筆者やCapital Pの読者のような方々にとって、「コンタクトフォームを作成してショートコードを貼り付ける」という作業はそれほど大変だとは思えないだろうが、文章を書くことをメインにしているライターなどにとっては触るのが怖い作業のはずだ。 普通の人はこれ
【WordPress】Gutenberg入門②ブロック：一般ブロック | バシャログ。
明けましておめでとうございます。 年末年始に引きこもっていたら、寒さへの耐性がなくなってしまったyanagimachiです。 慌ててユニクロの極暖を買ってきました。 さて、今回はGutenbergのブロックについて勉強していきたいと思います。 ※WordPress5.0.2で確認 Gutenbergエディタ右上の「ブロックを追加」で出てくる 一般ブロック フォーマット レイアウト要素 ウィジット 埋め込み とブロックを選択しているときにのみ出る インライン要素 の6つの種類のブロックがあるようです。 段落 サイドバーでの説明：ブロックを使って、いろいろな物語を組み立ててください。 タグ：p できる：テキスト（左寄せ、中央寄せ、右寄せ）、太字、イタリック、リンク、打ち消し サイドバーでできる：文字サイズ（小、通常、大、特大）、ドロップキャップ（先頭文字を大きくする）、背景色、文字色、追加CS
【WordPress】Gutenberg入門①Gutenbergってどんなもの？ | バシャログ。
いきなり寒くなりましたね。年末年始まで風邪をひかずに頑張りたいyanagimachiです。 さて先日、WordPress5.0 “Bebo”が出ました。もう5.0.1も出ています。 今回の大きな変更といえば新しいエディタ「Gutenberg（グーテンベルク）」です。 今までのビジュアルエディタやテキストエディタ、よくあるWYSIWYGエディタとは違い、ブロックベースのエディタです。いわゆる見たまま編集ができるようになり、だいぶ見た目が変わりました。 今までのエディタ Gutenberg 今までの投稿はどうなるの？ タイトル＋本文＋カテゴリのシンプルな投稿で比較してみます。 ビジュアルエディタで入力した簡単なHTMLの場合 ビジュアルエディタで入力した簡単なもの（タグでいうとp,em,strong,ol,ul,li,blockquote使用）の場合、Gutenbergに変えたところ、本文が全
WordPressエディタ「Gutenberg」の使い方！誰でも直感的なデザインに！ | WordPressやWebデザインなど紹介 Ocadweb
WordPress5.0から新エディタ「Gutenberg（グーテンベルク）」。 WordPress4.9.8以降のバージョンなら利用できるので、利用されている方もいらっしゃるかもしれませんが、WordPressで記事を制作されている方はかなり良いエディタになると思っています。 実際使ってみてどうだったか。Gutenberg（グーテンベルク）の使い方を紹介していきたいと思います。 ※この記事はWordPress4.9.8、Gutenberg（グーテンベルク）バージョン4.2.0のものを記載しています。 ※WordPress5.0では、Gutenberg（グーテンベルク）が標準となっています。旧エディタを使う場合は、プラグイン「Classic Editor」をインストールする必要があります。 目次 WordPressエディタ「Gutenberg」とは WordPressエディタ「Gutenb
WordPress：Gutenbergの概要・チュートリアル・関連リソースなどがまとめられているサイト | NxWorld
近々本格的にリリースが予定されているWordPressの新エディタ「Gutenberg（ブロックエディタ）」の概要・チュートリアル・関連リソースなどが掲載されていたりまとめているサイトの備忘録です。 リリース後、より開発者向けとかスニペット情報を中心に掲載するようなサイトもいろいろ出てきそうな気はしますが現時点で目についたものです。 October 01, 2020 追記 一部サイト名・リンク先を修正しました。 「Gutenberg News」はクローズしたようなので削除しました。 Gutenberg Handbook WordPress.orgでGutenbergについて掲載されているページで、概要や設計解説をはじめ、API・テンプレート・ブロック作成・関連リファレンスなどがまとめられています。
Gutenberg のカスタムブロックを勉強するためにインストールした Advanced Gutenberg プラグインが予想以上に便利だった | 今村だけがよくわかるブログ
Gutenberg のカスタムブロックを勉強するためにインストールした Advanced Gutenberg プラグインが予想以上に便利だった 僕が作って配布している WordPress テーマ Nishiki を Gutenberg に対応したので、次は「テーマ専用のブロックを作ろうかな〜」と思って、巷の Gutenberg 関連の情報を探していたら・・・ Advanced Gutenberg という、すごくいいプラグインがあることを知りました。 投稿や固定ページの本文内でこんなことができるこれまで WordPress の投稿や固定ページの本文内で少し手の込んだことをしようとすると、途端に難易度が高くなってしまった経験はありませんか。 例えば、本文内で「タブコンテンツ」を作りたいとします。 色々とやり方はありますが、HTML や JavaScript などのコードを書いたり、ショートコー
テーマ を Gutenberg に対応させる時、最低限やっておく事 – ねんでぶろぐ
WordPress5.0では新しいエディタ「ブロックエディタ」が搭載されます。 公開画面では「ブロックエディタ」で入力したコンテンツはテーマ側が対応していなくても だいたい表示するようになっています。 【ブロックエディタ 公開画面】 管理画面(編集画面)では、テーマ のデザイン(公開画面) と同じデザインで編集できるようにする事で ユーザーは簡単にイメージ通りのコンテンツを作成する事ができます。 しかし デフォルト(ブロックエディタ非対応テーマ) では 管理画面(編集画面)では テーマのデザイン(公開画面)と だいぶん違う状態になっていますので それぞれテーマ側で対応しなくてはなりません。 【ブロックエディタ 編集画面(非対応)】 ※基本表示幅は 580px になっています。「Gutenberg を試してみよう」画像が大きいのは「幅広」設定になっているためです。 【ブロックエディタ 編集画
WordPressブロックエディターの使い方とテーマ対応状況 | 使い方ガイド
WordPress 5.0 に搭載された新しいブロックエディター Gutenberg（グーテンベルク）についてご紹介します。 LIQUID PRESS は、ブロックエディターと相性が良いため、様々な便利な使い方があります。 ブロックエディターとは？ ブロックエディター Gutenberg（グーテンベルク）は、WordPress 5.0 に搭載されたエディターです。 WordPress 4.9.8 からはプラグイン「Gutenberg」をインストールして利用することもできます。 ブロックエディター Gutenbergでは、ブロックという機能によって、見出し、文章、画像などの要素を組み合わせて作成することができます。 ブロックエディターとも呼ばれ、HTMLを記述しなくても、リッチなページを簡単に作成できるようになります。 Gutenbergの名前の由来は、活版印刷を発明した、ヨハネス・グーテン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://technote.space/wordpress/add-dropdown-to-richtext-toolbar
WordCamp Osaka 2019 h2ham (´ ºムº `)
Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット
WordPress：Gutenberg（ブロックエディタ）を無効化する方法 | NxWorld
WordPressの新エディタ「Gutenberg」の見た目を記事に合わせる方法