WordPress ブロックエディター（Gutenberg）ブロック一覧表 - Qiita
WordPress ブロックエディター（Gutenberg）のコアブロック一覧です。 設定できる項目もリストしています。※WordPress 5.3 時点。 一般ブロック（common） 名前 配置揃え 幅広/全幅 色設定 HTML アンカー
WordPress ブロックエディター（Gutenberg）のコアブロック一覧です。 設定できる項目もリストしています。※WordPress 5.3 時点。 一般ブロック（common） 名前 配置揃え 幅広/全幅 色設定 HTML アンカー
【JIN】ブログを簡単にサイト型にする方法｜ブロックエディタ（Gutenberg）での実装に完全対応！！｜りりまんブログ
本記事は『JINでブロックエディタを活用していて、サイト型へ変更したい人』へ向けた記事です。 おそらく一番分かりやすく且つ、丁寧に説明していますので、どなたでも設定可能になっています。 サイト型への変更で、筆者は「コード等の知識不足」および「クラシックエディとブロックエディタの違い」に翻弄（ほんろう）され、約10時間近くブログとにらめっこをしておりました。 無事変更は完了しましたが、終わってからふと思うと、おそらく設定だけなら30分もあれば完了する内容（デザイン除く）でした。 そのため今回は、苦労した部分を簡略化し分かりやすくまとめましたので、参考にしていただければ嬉しく思います。
WordPressのコードエディタで改行が消える・改行されないけど、どうすればよいか。 「Classic Editor」を使っている場合ではなく、Wordpressの新しいブロックエディタ「Gutenberg」の「コードエディタ」を使った場合に、勝手に改行やpタグが消えてしまう場合の対処方法を紹介します。 検索すると、よく紹介されているのが「TinyMCE Advanced」プラグインの利用やfunctions.phpで「wpautop」をremoveするというものです。 Gutenbergではもっと簡単な対処方法があります（ちなみに、wpautopをremoveしてもうまくいきませんでした）。 WordPressのコードエディタで改行が消える・改行されない場合の対処方法 コードエディタで改行が消える場合の一番簡単な方法は「専用のコメントタグ」を使った書き方です。 下記の<!-- wp:h
WordPressのテーマに組み込むブロックを作ってみました。 今回作ったのはGutenberg用の一覧出力ブロックです。ブロック用に環境構築し、WordPress管理画面（エディター側）は@wordpress/scriptsを使ってReactでREST APIでカテゴリーを取得したりしながら構築、フロント部分はPHPで出力してみました。 とーっても長いので目次を利用してすっ飛ばして読んでください。 かみーゆ/フロントエンドエンジニア 資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハ
Gutenbergを利用している投稿タイプでの新規追加時に予め任意のブロックを挿入しておく方法で、毎回決まった文章やレイアウトを使うときに便利です。 February 01, 2021 追記 'core/heading'の'level'指定の記述方法が誤っていたので修正しました。 みぞれ（@xxmiz0rexx）さん、ご指摘ありがとうございます。 特定の投稿タイプにブロック挿入する クラシックエディタで同じように予めコンテンツを挿入したい場合は「投稿エディタに予めテキストなどを挿入しておく」で紹介している方法などで可能ですが、Gutenbergではこの方法だとクラシックブロックを利用した形で挿入されます。 これをGutenbergらしくそれぞれブロックとして挿入したい場合は、functions.phpへ下記のように記述することで実装でき、下記サンプルコードの場合は「投稿」に見出しが2パター
Gutenbergのブロックには予め見栄えを容易に適用できるブロックスタイルが用意されているものがありますが、サイトのテイストに合わないなどの理由で不要な場合にそれらを削除する方法です。 イメージは左が「画像」ブロックと右が「引用」ブロックのブロックスタイルをそれぞれキャプチャしたもので、他のブロックにもこのようなスタイルがデフォルトで用意されているものがあります。 ただ、これらが不要ということであればwp.blocks.unregisterBlockStyle()を使用してブロックエディタで読み込んでいるJavaScriptにそれぞれ下記のように記述することで削除できます。 wp.domReady( () => { // 引用（デフォルト） wp.blocks.unregisterBlockStyle( 'core/quote', 'default' ); // 引用（大） wp.blo
Gutenberg指向のWebサイトを作成するためのモダンなWordPressテーマ開発スターターキット・「Theme Redone」
Theme RedoneはGutenberg指向のWebサイトを作成するためのモダンなWordPressテーマ開発スターターキットです。フレームワークに近いかもしれません。 テンプレートエンジンとしてLatteが採用されており、MVC指向のコードのために必要なすべてが揃えられてるそうで、独自のGutenbergブロック作成ソリューションとCLIが用意されています。 個人的にGutenbergは使い慣れれば便利なんですがとにかく顧客に不評で受け入れられないケースが多いので未だにClassic Editorを導入せざるを得ない現状です。本スターターキットで少し改善できると良いですね。 Theme RedoneGithub
Classic Editorサポート終了後の代替プラグインとして使える「Disable Gutenberg」 – ワードプレステーマTCD
画像圧縮、キャッシュ、リビジョン削除などサイト高速化が可能なWordPressプラグイン「WP-Optimize」 2025.01.09
YouTube動画の埋め込みをレスポンシブ対応する方法（WordPressのGutenbergでの対応も！） | CONNECRE
デモ まずはデモをご確認ください。 DEMO CSSで対応する2種類の方法 aspect-ratioで対応させる方法 aspect-ratioはアスペクト比を指定するcssです。 アスペクト比とは縦横の比率のことです。 現在の一般的な考え方でいうと最近のテレビは16:9、スマートフォンは2:1、タブレットは4:3が基本的なアスペクト比となっております。 ※iPhone13は9:19.5となっており、Androidはそれよりも縦長の端末があるので一概に2:1とはいえませんが… アスペクト比を指定することでレスポンシブ対応させる方法は以下の通りです。 YouTubeで取得した下記の埋め込みコードをレスポンシブ対応させます。 <iframe width="560" height="315" src="https://www.youtube.com/embed/ame0P8WQJoA" title
WordPressのBlockでWeb Componentsを使ってGutenbergのReact地獄から脱出しましょう！ - Qiita
WordPressのBlockでWeb Componentsを使ってGutenbergのReact地獄から脱出しましょう！JavaScriptWordPressWebComponentsReactGutenberg ハイサイ！オースティンやいびーん 概要 WordPressのGutenbergの主要な機能、BlockをWeb Componentsで実装する方法を紹介します。 Gutenbergとは WordPressのブログ体験をよりモダンで快適なものにするために、WordPressチームは数年前から大掛かりな新機能開発に取り掛かっています。 そのプロジェクトと追加される機能をすべてGutenbergと呼んでいます。 その主な機能は、投稿などで再利用が可能になるBlockです。 上級開発者は、プラグインでBlockを開発して追加することもできます。 Block開発の問題 Block開発を試
Gutenbergブロック開発徹底解説
多くの開発者が、Gutenbergのブロックやアプリ開発を始めるハードルの高さに不満を抱いています。習得の難易度が高い理由は、開発環境のインストールと設定の複雑さにあります。しかも、ブロック開発には、JavaScript、Node.js、React、Reduxの深い知識が必要です。 WordPress公式のブロックエディターハンドブックは有用なリソースですが、開発者向けの膨大な情報の中で、初心者が迷子になることはほぼ間違いないでしょう。 Gutenbergプロジェクトのリード開発者Matías Ventura氏は、WP Tavernのインタビューで以下のように語っています。 すぐにブロック開発を習得できる人もいますが、やはり多くの人にとって大きな壁となっています。段階的な習得が必要になりますが、ドキュメントは、構成も表現も桁違いに改善できるはずです。もっといろいろなことができればと思ってい
Gutenbergブロック作成について 公式のチュートリアルに沿って、実際にカスタムブロックを作成してみます。 公式のチュートリアルはこちらです。 2020年1月7日現在では、日本語訳はありません。そのため、ちょっと主観を入れながら記事にしてみます。 (全ページ訳して書き溜めておいてから公開したかったのですが、時代に取り残される前に公開だけしておこうというわけで中途半端にも公開しておこうと思ったらすでに5月です) カスタムブロック作成の流れ カスタムブロック作成の流れは大雑把に書くと以下になります。 1. カスタムブロック登録用プラグインを作成する 2. ブロックをJavaScriptで作成する 3. 2で作成したJavaScriptをプラグインにて読み込み/登録する（ここはPHPで行う） カスタムブロックHelloWorld 公式が出しているチュートリアルでは、「Getting Star
Gutenberg ブロックエディター用のお問い合せフォームプラグイン Snow Monkey Forms をリリースしました！
Gutenberg ブロックエディター用のお問い合せフォームプラグイン Snow Monkey Forms をリリースしました。クラシックエディターでは使えません。 Snow Monkey 以外のテーマでも使えますが、Snow Monkey 以外のテーマでは余白などのバランスは調整が必要になると思います。 使い方フォームをつくるとりあえず有効化してフォームの新規作成ページを開いてください。 1. 項目を追加するSnow Monkey Forms のフォームは次のような構造になっています。 フォーム ├ 項目 ├ ラベル ├ フォーム項目（input とか textarea とか）入力画面エリアの一番下にある追加ボタンを押すと「項目」が追加されます。 2. フォーム項目を追加する追加された「項目」内にある追加ボタンを押すと「フォーム項目」が追加されます。 3. フォーム項目の設定「フォーム項
Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
デフォルト：クラスなし 小 ： has-small-font-size 標 準： has-normal-font-size 中 ： has-medium-font-size 大 ： has-large-font-size 特 大： has-huge-font-size カスタムに数字を入力した場合はstyle属性で出力される（ 以下、100 を指定した場合 ） <p style="font-size:100px">, <h1 style="font-size:100px"> ■ 指定すると共通で has-text-color がつく 黒： has-black-color シアンブルーグレー： has-cyan-bluish-gray-color 白： has-white-color ピンク： has-pale-pink-color 赤： has-vivid-red-color オレン
Gutenberg（グーテンベルク）で特定のブロックの有無を判定する方法【WordPress】 ｜ 株式会社ティウェブ
こんにちは、ティウェブ藤園です。 今回は、WordPressのブロックエディタ「Gutenberg」を使用したときの便利なカスタマイズ方法をご紹介します。 目次 Gutenbergとは？特定のブロックがあったときに、指定の処理をする関数 完成形解説「関数の作成」解説「パラメータ（引数）が使えるようにする」解説「判別する条件の作成」関数の使用例まとめ Gutenberg（グーテンベルク）とは？ 正式に公開されてしばらく経ちますが、Gutenberg（グーテンベルク）とは、WordPress5.0以降のあたらしいエディタ（編集画面）ことです。 💡それ以前の旧エディタのことはClassicエディタと呼びます。 以前のものと見た目も作りも違いますが、Gutenbergはいわゆるブロックエディタという種類のもので、エディタ内に「文章を書く」のではなく、「ブロック（要素）を積み上げてページをつくる」
デフォルトのタグはフリー入力式 デフォルトの投稿画面のタグ部分はこの様にフリーに記述する方式になっています。 一応、クラシックエディタだと「よく使われているタグから選択」という機能はありますが、Gutenbergにはそれすらない様子。。。 実際のコードをコピペするだけ 以下のコードをそのままfunctions.phpにコピペするだけです。簡単！ functions.php //投稿のタグをチェックボックスで選択できるようにする function change_post_tag_to_checkbox() { $args = get_taxonomy('post_tag'); $args -> hierarchical = true;//Gutenberg用 $args -> meta_box_cb = 'post_categories_meta_box';//Classicエディタ用 re
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのコードエディタで改行が消える・改行されない場合【Gutenbergコードエディタ】
WordPressの記事一覧ブロック（Gutenberg）を自作する
WordPress：Gutenbergで新規追加時に予めブロックを挿入しておく方法 | NxWorld
WordPress：Gutenbergにデフォルトで用意されているブロックスタイルを削除する方法
Gutenbergブロック作成（チュートリアル）と開発環境の準備 - Qiita
【WordPress】 Gutenberg関連のCSSまとめ - Qiita
WordPress 5.5のブロックエディター（Gutenberg） が出力するHTML一覧
タグをチェックボックスで選択できるようにする（Gutenberg＆Classicエディタ対応）