'supports' = array( 'title','editor', 'thumbnail', 'custom-fields' ), 鳥山@sysbirdが書いてます。
WP-multibyte-patchがイタリックを解除していたバグが修正されたのでその部分を削除。 By following users and tags, you can catch up information on technical fields that you are interested in as a whole, By "stocking" the articles you like, you can search right away. 区切りや画像のブロックにはデフォルトでいくつかの「ブロックスタイル」が設定されています。これは、選択すると特定のクラスが付与され、予め仕込んでおいたスタイルが適用されるというものです。不要の場合は削除できます。こちらの記事でやり方を説明しています。, クラシックブロックは基本的なスタイル（文字など）は適用されますが、その内部の個々の要素はブロック用クラスが無いので手付かずの状態です。クラシックブロックには.wp-block-freeformクラスがついていますのでその内部を操作します。, フロント側と編集画面ではHTMLの構造に直接的な互換性はありません。scssなどでブロックごとにコンポーネント化したり、変数を共用するのがよいと思います。, 一番の問題点は、クラス無しでそのまま出力されるブロックがあることです。例えばp, h1, h2, h3, h4, h5, h6, ul, olはラッパーもクラスも無く出てきますが、それらは他のブロック内でも使われていたり、将来新しいブロックを追加したときに競合する可能性があります。, その他のブロックも .wp-block-ホニャララ クラスがラッパーに付くものと、
のように、要素に直接クラスが付くものが混在しているので注意が必要です。, なお、WordPress 5.2 まではギャラリーとテーブルがラッパー無しで出力されていましたが、5.3 からそれぞれ、 と でラッピングされるようになり、少し自由度が向上しました。, 編集画面のオプション設定などは、ブロックエディター投稿画面カスタマイズあれこれ にまとめてあります。. 2018/12/5 - WordPress 5.0RC2 に更新 add_theme_support( 'editor-styles' );によるエディタスタイルの適用に変更。以前はさらに強いスタイルがあって!important必須でしたが解消したため。 テーマ（子テーマ）フォルダ内にCSSファイルを作成する 3. 2018/11/20 - Gutenberg 4.4に対応 Help us understand the problem. と、一番最後に読み込まれます。 特徴として、各セレクターの直前にブロックエディタ全体を囲っている .editor-styles-wrapper というクラスが自動的に挿入されます。 » BirdFIELD – WordPress テーマ | WordPress.org, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, Google Maps Photo Gallery位置情報付きの写真をGoogle Map上に表示するショートコード, Post Title Furigana記事タイトルのふりがなをカスタムフィールドに自動入力するプラグイン. .wp-block-quote 2.「editor-style.css」でないテーマにCSSクラスメニュを適用させる方法 ＜対策方法＞ ①利用しているビジュアルエディタのCSSファイルを子テーマフォルダにコピーする。場所は子テーマディレクト直下でも可。 ②上記のファイル名を「editor-style.css」に変更する。 you can read useful information later efficiently. What is going on with this article? Why not register and get more from Qiita? .wp-block-table 2020/05/25 - WP v5.4.0 での見出しブロックの仕様変更に伴う更新。.wp-block-heading を [data-type="core/heading"] に変更。 エディタの文字色や背景色はbodyに対して設定します。ただしブロックエディタは同じHTML内のため競合を防ぐため、実際には.editor-style-wrapperクラスに置換され適用されます。, このように書かれたスタイルシートは WordPress 側で次のように変換され、編集画面に直接埋め込まれます。, body は実際の編集領域である.editor-style-wapperに、その他のセレクタは、.editor-style-wapper の子として再配置されます。, デフォルトでは Noto Serif が当たっていますが、これも同様にbodyに指定すればOKです。ただしタイトルは編集領域外のため、別の対応が必要です。, ブロックエディターのデフォルトでは編集領域の幅が 610px 固定で狭いです。さらにブロック選択時のパディングを考えると実質 580px しかありません。今回はそれを実質 800px に拡大にしてみましょう。 このページをご覧になっている方の中には、「そろそろ開発現場でも Gutenberg の導入をすすめることになったけど、どうしたら独自のデザインや仕様に合わせることができるのか？」という問題に直面している方もいらっしゃるでしょう。ここでまとめていることは、基本的に WordPress 側が用意している範囲の基本設定やカスタマイズ方法です。これ以上のより複雑なことをしたいときにはカスタムブロックを自作するか、気の利いたブロックを追加するプラグインを利用することを検討しましょう。 … オフシャルのテーマサポートをもとにした情報に更新しました。特にカラム幅の指定を改良しています。幅広画像や全幅画像にも対応しました。 WordPressの新しいブロックエディタを使い始めた方も多いだろう。昨年末にリリースされたWordPress 5.0より採用になったブロックエディタ(開発時のGutenberg)である。 また、エディタの背景色はテーマサポートでの指定だとフッタ部分がおかしくなるので、独自のクラスに当てています。, なお、フロント側と編集側ではDOM構造やCSSの当たり方が異なるため、フロント専用の調整が必要です。, これで editor-style.css が取り込まれ、.editor-style-wrapperクラス以下に再構成され、編集画面に直接設定されます。, 以下、editor-style.cssを生成するためeditor-style.scssの編集内容を示していきます。 2018/12/7 - wp multibyte patchの更新に対応 続いて、editor-style.cssを作成してテーマディレクトリ直下にアップロードします。 editor-style.cssの中身は以下のようにします。エディタには.editor-styles-wrapperというクラスが付いているので、.editor-styles-wrapperを使ってスタイルを適用します。 旧エディタからブロックに変換した場合も問題ない。, テーマタグとは style.css のTags に書いてあるキーワードだ。ダッシュボードからテーマを検索する際のフィルターに使われる。one-column や custom-header、translation-readyなど、あらかじめ用意されたタグのなかから、テーマの特徴を選んでアピールする。, カスタム投稿タイプでブロックエディタで使うには、register_post_type()に show_in_rest を追加する。これをやっておかないと、カスタム投稿タイプだけクラシックエディタになってしまうので、注意！, 使ってみたら、ブロックエディタ意外に便利だった。 WordPress5.0から導入された新しいエディタ「Gutenberg(ブロックエディタ)」ですが、慣れると非常に便利で使い勝手が良いです。一度慣れてしまうと旧エディタには戻れないですね。, Gutenbergで記事を書く際、編集画面の見出しや本文にはGutenberg用のデフォルトスタイルが当たっています。すごく見にくいわけではないですが、なるべく実際にブログを表示した時に近い状態で編集したいと思う方は多いのではないでしょうか。, そんなわけで今回は、Gutenbergの編集画面に独自のスタイル(CSS)を適用する方法をご紹介したいと思います。この方法を使えば、実際の表示と同じような見た目で記事を編集することができるようになります。, Gutenbergの編集画面に独自のスタイルを適用する方法は、2通りの方法がありますので、それぞれご紹介いたします。, 1つ目の方法は、after_setup_themeフックにCSSファイルの読み込みを追記するやり方です。functions.phpに以下を追記します。, after_setup_themeは、以前”Gutenbergの「幅広」と「全幅」に対応させる方法“という記事で紹介していますが、すでにafter_setup_themeフックを使った記述がある場合は、そこに「add_theme_support( ‘editor-styles’ );」と「add_editor_style( ‘editor-style.css’ );」を追加してあげればOKです。, functions.phpにCSSファイル読み込み用のコードを追加したら、「editor-style.css」を作成してテーマディレクトリ直下にアップロードします。, editor-style.cssの中身は、以下のように記述します。特にクラスを指定する必要はありません。, なお、エディタ内のコンテンツ部分の横幅を変更したい場合は、以下のように.wp-blockの最大横幅を変更します。, 2つ目の方法は、enqueue_block_editor_assetsフックでCSSファイルを読み込むやり方です。, functions.phpに以下を追加することで、編集画面でeditor-style.cssが読み込まれるようになります。, 続いて、editor-style.cssを作成してテーマディレクトリ直下にアップロードします。, editor-style.cssの中身は以下のようにします。エディタには.editor-styles-wrapperというクラスが付いているので、.editor-styles-wrapperを使ってスタイルを適用します。, なお、エディタ内のコンテンツ部分の横幅を変更したい場合、パターン1とは違って細かい調整が必要です。, 他の部分を変更したい場合は、ブラウザのデベロッパーツールを使って該当箇所のクラスを確認しながら変更していきましょう。, いちいち.editor-styles-wrapperを追加しなくて良いので、パターン1のやり方がわかりやすいですね。, どちらの方法でも、編集画面に独自のスタイルを適用することができるので、状況に合わせて使い分けてください。, ちなみに、旧エディタで独自のスタイルを適用したい場合は、functions.phpに以下を追記します。, その上で、editor-style.cssをテーマディレクトリ直下にアップロードします。editor-style.cssの中身は以下のような感じです。, 投稿や固定ページをクリック一発で複製できるようになるWordPressプラグイン「Post Duplicator」, imgタグで設置したSVGファイルをインラインSVGに変換してくれるJavaScriptライブラリ「deSVG」, Twitterアカウントがシャドウバン(Shadowban)されているか確認できるWEBサービス「Twitter Shadowban Test」, カスタム投稿やカスタムタクソノミーの一覧をウィジェットで表示することができるWordPressプラグイン「Custom Post Type Widgets」, GoogleドライブでWEBサイト(HTML/CSS)が公開できるようになりました。, table-layout:fixed;を指定してもテーブルのwidthがうまく効かない場合の対処法.
