作成したブロックがデフォルトカテゴリのいずれにも当てはまらないときやオリジナルブロックを複数作成していてデフォルトとは異なるのをハッキリ区別したいときに使えます。 ブロックカテゴリを追加する 実装にはblock_categories()を用いてfunctions.phpへ下記のように記述します。 'icon'の部分を指定するとカテゴリ名の横にアイコンが表示され、「Dashicons」のアイコンならスラッグを記述するだけで表示させることができます。 また、作成したブロックカテゴリはブロックがひとつも属していない場合はカテゴリが表示されないので、併せて属したいブロックのカテゴリ指定も作成するブロックカテゴリのスラッグ名（このサンプルコードの場合はexample-category）にしておきます。 add_filter( 'block_categories', 'add_block_catego
今回はWordPressのGutenbergで編集画面と実際の表示画面を同じ見た目にする設定方法について説明します。 説明する環境は以下 macOS Catalina v10.15.5Visual Studio Code v1.46.1wordpress v5.8.0 Gutenbergの編集画面と表示画面を同じ見え方にする設定方法 WordPressのGutenbergではブロックエディタが使われており、独自のテーマを作った場合、編集画面と実際の表示画面は同じ見え方になっていません。 同じ見た目にするためには、編集画面用のstyleシートを作成して読み込ませる必要があります。 編集画面用のstyleシートを作成する まずはブロックエディタ編集画面用のstyleシートを作成します。home.phpやsingle.phpと同じ階層に【block-style】の名前でフォルダを作成して、その中
WordPress：Gutenbergでデフォルト表示されているブロックをブラックリスト形式で非表示にする方法 - NxWorld
July 24, 2021 追記 バージョンアップによってフック変更・新ブロック追加・ブロックスラッグの変更などあったために、ここで紹介している内容をそのまま利用できない部分があります。 Ver 5.8以降でのブロック表示制御については、「WordPress：Gutenbergのデフォルトブロックを非表示にする方法（Ver 5.8対応）」を参考にしてください。 以前このブログで紹介した「WordPress：Gutenbergでデフォルト表示されているブロックを非表示にする方法」は、使いたいブロックを指定するホワイトリスト形式でしたが、逆に使いたくないブロックを指定するブラックリスト形式でブロックを非表示にする方法です。 ホワイトリスト形式での指定はPHPを利用しましたがブラックリスト形式の場合はJavaScriptを利用し、それぞれ下記のように指定することで対象ブロックを非表示にできます。
WordPress（Gutenberg）のカテゴリーやタグをラジオボタンに変更できるプラグインを紹介するよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
バックエンドエンジニアのハルです。 今回は、WordPressの新しい投稿エディタ「Gutenberg」カスタマイズの小ネタを。旧エディタでのカスタマイズ方法が使えなかったので、このプラグインが使いやすかったよの報告記事です。 タクソノミー（カテゴリー）は基本的に複数選択するものですが、たまにラジオボタンにしたいときがあります。 旧エディタの場合は直接jsでHTMLを変更してカスタマイズしてたりしてましたが、新しいエディタであるGutenbergからはその方法が使えず、簡単にできなくなってしまいました。 こうなったらプラグインを使ったほうが楽なので、いくつか試した結果、一番よさそうだと思ったプラグイン「Radio Buttons for Taxonomies」を使った方法をご紹介します。 サンプルのカスタム投稿とカスタムタクソノミーを用意する 練習用にカスタム投稿とカスタムタクソノミーを用
Slide for my presentation at WordCamp Osaka 2019, held on 6-7 December, 2019. WordCamp Osaka 2019 (2019年12月6-7日) 登壇スライド。 https://2019.osaka.wordcamp…
読みはじめる前に Gutenbergにオリジナルのブロックを追加する場合、かなりの知識量が必要でした。 具体的には以下のプログラミング言語の知識が必要です。 WordPressPHPJavaScript（React） 特に JavaScript（React）のスキルがないとオリジナルブロック作成はかなり厳しいものなのではないかと感じました。 本編でその理由を解説します。 Gutenberg ブロックの作成手順 STEP01. プラグインの作成 Gutenbergブロックはプラグインで作成するのが一般的のようです。 wp-content/plugins の下にディレクトリを作成します。 cd wp-content/plugins mkdir my-gutenberg-block my-gutenberg-block に移動しプラグインの定義を index.php に実装します。 <?php
テキスト等を入力、編集できるブロックを作成する方法です。ブロックの基本的な使い方については以下の記事で紹介しているので、まずはこちらを参考にしてください。 https://haniwaman.com/block-static/ この記事では以下のようなブロックが作るところまでを説明しています。 基本亭には公式チュートリアルをもとに説明していきます。 （公式） → Introducing Attributes and Editable Fields ブロックのコンポーネントを読み込む 動的なブロックを作成するには、wp_register_scriptの依存関係として、wp-editorを読み込む必要があります。 wp-editorの読み込み 今まではwp-blocksとwp-elementだけでしたが、そこにwp-editorを追加します。具体的には以下のようなコードとなります。 wp_re
【WordPress】Gutenberg Componentsを使ってプラグインの設定画面を作る - Qiita
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
カラーを追加する 現時点で12種類のグラデーションカラーがデフォルトとして用意されており、そこへ任意のカラーを追加したい場合はfunctions.phpへ下記のように記述します。 add_theme_support( 'editor-gradient-presets', array( array( 'name' => __( 'Vivid cyan blue to vivid purple', 'themeLangDomain' ), 'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', 'slug' => 'vivid-cyan-blue-to-vivid-purple', ), array( 'name' => __( 'Light green cyan to vivid g
概要 みなさんこんにちはcandleです。今回は最近メジャーバージョンアップグレードがあったwordpressのgutebergでmarkdownがかけるよという話をします。 主題の通りなのですが、これまでwordpressはmarkdownを書くならプラグインのJP MarkdownやMarkdown EditorやWP-Markdownなどのを使って書く必要がありました。しかしOSSであるがためにやはり更新が遅かったり他のプラグインと干渉してエラーが出たりしました。もちろんgutenbergもまだ十分に問題なく使えるわけではありませんが、標準で導入されたのは大きいと思います。 早速使ってみましょう。 前提 wordpressのバージョンが5.0.0以上である gutenbergのmarkdownを使う wordpressの管理画面から「記事一覧」 から「新規追加」ボタンを押します。 最
Gutenberg ブロックエディターの機能を拡張してブログの書きやすさを爆上げするプラグイン Snow Monkey Editor をリリースしました！
もともとブログ・メディア向けとを謳っていた Snow Monkey ですが、アップデートを重ねるにつれてコーポレートサイト向けの機能がどんどん強化され、ブログユーザー向けの強みが薄くなってきたな？と感じるようになってきました。 ブログ向けテーマには SWELL などの素晴らしいテーマがありますが、ブログとして Snow Monkey を使っているユーザーさんもいらっしゃいますし、Snow Monkey でブログをやる意味をもうちょっと強化したいな…という意図もあって、Snow Monkey Editor というプラグインをつくりました。 WordPress 公式ディレクトリで配布しているので、WordPress の管理画面からインストールできます。
WordPress の編集画面には、Gutenberg（グーテンベルク）というエディタが採用されています。Gutenbergは見出しや段落、リストなどをブロックと呼ばれる単位で追加していくことができ、直感的にデザインされたページを作成することができます。 このGutenbergで追加した見出しや段落には、デフォルトのスタイルが適用されます。編集する分にはこれでも十分ですが、更にテーマのデザインを適用することもできます。フロント側で表示されるデザインに近づけることができるので、とても便利です。ここでは、その方法についてご紹介します。 手順 ブロックエディタにスタイルを適用させる手順は以下になります。 テーマフォルダ内にブロックエディタ用のCSSファイルを作成functions.phpファイルに用意したCSSファイルを読み込むコードを追加 CSSファイル作成 エディタに追加したいスタイルを定義
![Gutenberg（グーテンベルク）のブロックエディタにスタイルを追加 - WordPressテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
WordPress スライダーを表示するブロックの作成 WordPress のブロックエディタ Gutenberg でスライダーのプラグイン Swiper を使ってスライダーを表示するカスタムブロックの作り方についての覚書です。 以下は(旧)ブロックの作成 チュートリアル（削除予定）などの古い情報を参考にしているため部分的に古い情報になっています。 ブロックの基本的な作成方法や環境の構築方法については以下を御覧ください。 関連ページ カスタムブロック MediaUpload で複数の画像を挿入 スライダーでアイキャッチ画像を表示するブロックを作成 Gutenberg ブロックの作成（JSX を使用しない場合） Gutenberg ブロック開発の環境構築 JSX を使った Gutenberg ブロックの作り方 ダイナミックブロックの作り方 カスタムカードブロックの作り方 Code-Prett
WordPress ブロックエディター（Gutenberg）のコアブロック一覧です。 設定できる項目もリストしています。※WordPress 5.3 時点。 一般ブロック（common） 名前 配置揃え 幅広/全幅 色設定 HTML アンカー
Gutenberg（グーテンベルグ）エディターでブロックの項目を非表示にするよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近七味より一味派なのがわかり、七味の黒い丸いやつが丸々入ってると歯が痛くなって毎回イラっとするアラサーのハルです。 今回はWordPressのGutenberg（グーテンベルグ）のエディターでデフォルトブロックの表示を制御する方法をまとめたいと思います。 グーテンベルグはデフォルトでたくさんのブロックが用意されている グーテンベルグエディターは、初期状態でたくさんのブロックが用意されています。 この記事を書いた時点（2020年1月）だと、 一般ブロック フォーマット レイアウト要素 ウィジェット 埋め込み の分類があり、それぞれに多くのブロックが用意されています。 プロジェクトによってはすべてを表示する必要はなく、ブロックの項目が邪魔になる場合もあります。 今回は、ホワイトリストで管理して、使うものだけ表示する方法が簡単だったので紹介したいと思います。 ホワイトリストで指定するソースコー
【JIN】ブログを簡単にサイト型にする方法｜ブロックエディタ（Gutenberg）での実装に完全対応！！｜りりまんブログ
本記事は『JINでブロックエディタを活用していて、サイト型へ変更したい人』へ向けた記事です。 おそらく一番分かりやすく且つ、丁寧に説明していますので、どなたでも設定可能になっています。 サイト型への変更で、筆者は「コード等の知識不足」および「クラシックエディとブロックエディタの違い」に翻弄（ほんろう）され、約10時間近くブログとにらめっこをしておりました。 無事変更は完了しましたが、終わってからふと思うと、おそらく設定だけなら30分もあれば完了する内容（デザイン除く）でした。 そのため今回は、苦労した部分を簡略化し分かりやすくまとめましたので、参考にしていただければ嬉しく思います。
「Classic Editor」を使っている場合ではなく、Wordpressの新しいブロックエディタ「Gutenberg」の「コードエディタ」を使った場合に、勝手に改行やpタグが消えてしまう場合の対処方法を紹介します。 検索すると、よく紹介されているのが「TinyMCE Advanced」プラグインの利用やfunctions.phpで「wpautop」をremoveするというものです。 Gutenbergではもっと簡単な対処方法があります（ちなみに、wpautopをremoveしてもうまくいきませんでした）。 WordPressのコードエディタで改行が消える・改行されない場合の対処方法 コードエディタで改行が消える場合の一番簡単な方法は「専用のコメントタグ」を使った書き方です。 下記の<!-- wp:html -->と<!-- /wp:html -->の専用コメントタグで挟んでいる部分は、
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指向のWebサイトを作成するためのモダンなWordPressテーマ開発スターターキット・「Theme Redone」
Theme RedoneはGutenberg指向のWebサイトを作成するためのモダンなWordPressテーマ開発スターターキットです。フレームワークに近いかもしれません。 テンプレートエンジンとしてLatteが採用されており、MVC指向のコードのために必要なすべてが揃えられてるそうで、独自のGutenbergブロック作成ソリューションとCLIが用意されています。 個人的にGutenbergは使い慣れれば便利なんですがとにかく顧客に不評で受け入れられないケースが多いので未だにClassic Editorを導入せざるを得ない現状です。本スターターキットで少し改善できると良いですね。 Theme RedoneGithub
以下は、Ella van Durpe が書いた WordPress.org 公式ブログの記事、「State of the Word: the story of the slides」を @mimitips、@nao、@nukaga、@atachibana で訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 WordCamp US 2019 で行われた マット・マレンウェッグ (Matt Mullenweg) 氏による State of the Word (訳注: マット・マレンウェッグが毎年行う基調講演) の中で、プレゼンテーションに使用したスライドが、Slides プラグインを使用した Gutenberg で作られていることが明かされました。WordPress を使ってスライドを作成するのは誰にでも当たり前の選択肢とは言えないので、この記事では、その過程を紹
Classic Editorサポート終了後の代替プラグインとして使える「Disable Gutenberg」 – ワードプレステーマTCD
Windows専用の無料FTPソフト「WinSCP」の使い方｜多様な暗号化通信も可能。 2024.09.11
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のインタビューで以下のように語っています。 すぐにブロック開発を習得できる人もいますが、やはり多くの人にとって大きな壁となっています。段階的な習得が必要になりますが、ドキュメントは、構成も表現も桁違いに改善できるはずです。もっといろいろなことができればと思ってい
10up - Gutenberg Best Practices | 10up - Gutenberg Best Practices
ReferenceThis is where you will find detailed information about how we approach building blocks at 10up. The reference documentation is structured into a few different sections. Quick accessTrainingThe purpose of this project is to help you build and customize (Gutenberg) blocks. This training applies to all engineering disciplines at 10up. I am ready!GuidesThis section of the Gutenberg Best Pract
Gutenberg ブロックエディター用のお問い合せフォームプラグイン Snow Monkey Forms をリリースしました！
Gutenberg ブロックエディター用のお問い合せフォームプラグイン Snow Monkey Forms をリリースしました。クラシックエディターでは使えません。 Snow Monkey 以外のテーマでも使えますが、Snow Monkey 以外のテーマでは余白などのバランスは調整が必要になると思います。 使い方 フォームをつくる とりあえず有効化してフォームの新規作成ページを開いてください。 1. 項目を追加する Snow Monkey Forms のフォームは次のような構造になっています。 フォーム ├ 項目 ├ ラベル ├ フォーム項目（input とか textarea とか） 入力画面エリアの一番下にある追加ボタンを押すと「項目」が追加されます。 2. フォーム項目を追加する 追加された「項目」内にある追加ボタンを押すと「フォーム項目」が追加されます。 3. フォーム項目の設定
Gutenbergブロック作成について 公式のチュートリアルに沿って、実際にカスタムブロックを作成してみます。 公式のチュートリアルはこちらです。 2020年1月7日現在では、日本語訳はありません。そのため、ちょっと主観を入れながら記事にしてみます。 (全ページ訳して書き溜めておいてから公開したかったのですが、時代に取り残される前に公開だけしておこうというわけで中途半端にも公開しておこうと思ったらすでに5月です) カスタムブロック作成の流れ カスタムブロック作成の流れは大雑把に書くと以下になります。 1. カスタムブロック登録用プラグインを作成する 2. ブロックをJavaScriptで作成する 3. 2で作成したJavaScriptをプラグインにて読み込み/登録する（ここはPHPで行う） カスタムブロックHelloWorld 公式が出しているチュートリアルでは、「Getting Star
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
Gutenbergのブロックには予め見栄えを容易に適用できるブロックスタイルが用意されているものがありますが、サイトのテイストに合わないなどの理由で不要な場合にそれらを削除する方法です。 イメージは左が「画像」ブロックと右が「引用」ブロックのブロックスタイルをそれぞれキャプチャしたもので、他のブロックにもこのようなスタイルがデフォルトで用意されているものがあります。 ただ、これらが不要ということであればwp.blocks.unregisterBlockStyle()を使用してブロックエディタで読み込んでいるJavaScriptにそれぞれ下記のように記述することで削除できます。 wp.domReady( () => { // 引用（デフォルト） wp.blocks.unregisterBlockStyle( 'core/quote', 'default' ); // 引用（大） wp.blo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress：Gutenbergにオリジナルのブロックカテゴリを追加する方法 - NxWorld
【Gutenberg】ブロックエディタの編集画面と、実際の表示画面を同じ見た目にする設定方法
【WordPress5.0～, GutenbergでもOK】公開済みの記事を修正し、レビュー待ちにする
Gutenberg 以降のテーマ作成に向けて、今学ぶべきこと
【WordPress】Gutenbergにオリジナルブロックを追加する
Gutenbergにオリジナルなブロックを作成する方法（動的編） | HPcode（えいちぴーこーど）
WordPress：Gutenbergでグラデーション設定部分をカスタマイズする方法 - NxWorld
wordpress gutenbergはmarkdown書けるよという話 – joppot
Gutenberg（グーテンベルク）のブロックエディタにスタイルを追加 - WordPressテックラボ - [SMART]
WordPress Gutenberg スライダーを表示するブロックの作り方
WordPress ブロックエディター（Gutenberg）ブロック一覧表 - Qiita
WordPressのコードエディタで改行が消える・改行されない場合【Gutenbergコードエディタ】
WordPressの記事一覧ブロック（Gutenberg）を自作する
WordPress：Gutenbergで新規追加時に予めブロックを挿入しておく方法 | NxWorld
State of the Word: Gutenberg ベースのプレゼンスライド
Gutenbergブロック作成（チュートリアル）と開発環境の準備 - Qiita
【WordPress】 Gutenberg関連のCSSまとめ - Qiita
WordPress 5.5のブロックエディター（Gutenberg） が出力するHTML一覧
タグをチェックボックスで選択できるようにする（Gutenberg＆Classicエディタ対応）
WordPress：Gutenbergにデフォルトで用意されているブロックスタイルを削除する方法