2019/12/20 - WordPress 5.3でギャラリーやテーブルがfigureでラッピングされたので更新。 » BirdFIELD – WordPress テーマ | WordPress.org, 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。, このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。, Google Maps Photo Gallery位置情報付きの写真をGoogle Map上に表示するショートコード, Post Title Furigana記事タイトルのふりがなをカスタムフィールドに自動入力するプラグイン. Help us understand the problem. 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. enqueue_block_editor_assets で読み込んだCSS（ block-editor-style.css 等）の後. WP-multibyte-patchがイタリックを解除していたバグが修正されたのでその部分を削除。 WordPressの新しいブロックエディタを使い始めた方も多いだろう。昨年末にリリースされたWordPress 5.0より採用になったブロックエディタ(開発時のGutenberg)である。 .wp-block-gallery 2020/05/25 - WP v5.4.0 での見出しブロックの仕様変更に伴う更新。.wp-block-heading を [data-type="core/heading"] に変更。 2.「editor-style.css」でないテーマにCSSクラスメニュを適用させる方法 ＜対策方法＞ ①利用しているビジュアルエディタのCSSファイルを子テーマフォルダにコピーする。場所は子テーマディレクト直下でも可。 ②上記のファイル名を「editor-style.css」に変更する。 .wp-block-preformatted 初出はGutenberg 3.6で書いていましたが、バージョンの変更に伴い一部互換性がなくなりました。具体的には、, 2018/08/18 What is going on with this article? フロント側はあまり変更ないように見えながら、ダッシュボードの投稿画面はブロックエディタによって大きく変化した。正直とっつきづらい印象を持ちつつ、公式ディレクトリに登録しているテーマから対応してみた。, なお、以下に挙げる対応なしでもブロックエディタは使える。とはいえダッシュボードとフロントの見た目がかなり食い違ってしまうため、ユーザーが戸惑ってしまう心配がある。テーマを配布していたり、クライアント案件では対応をおすすめする。, 次にフロント画面をみながら、ダッシュボードの投稿画面の表示が同等になるように editor-style.css にスタイルを追加していく。この作業は旧バージョンと同じくコツコツと。ブロックエディタではさらにブロック特有のクラスが付与される。 このように wp-block- と付くクラスはWordPress 5.0以降に内包される theme.min.css にスタイルが定義されているので、そのまま利用すればいいかんじに表示される。テーマで上書きしてもよい。, フロントとダッシュボードの投稿画面で正しく同じように表示されるか？確認しながら追加する。, 動作確認には、プラグインの Block Unit Test for Gutenberg を使うと便利だ。 旧エディタからブロックに変換した場合も問題ない。, テーマタグとは style.css のTags に書いてあるキーワードだ。ダッシュボードからテーマを検索する際のフィルターに使われる。one-column や custom-header、translation-readyなど、あらかじめ用意されたタグのなかから、テーマの特徴を選んでアピールする。, カスタム投稿タイプでブロックエディタで使うには、register_post_type()に show_in_rest を追加する。これをやっておかないと、カスタム投稿タイプだけクラシックエディタになってしまうので、注意！, 使ってみたら、ブロックエディタ意外に便利だった。 add_theme_support( 'editor-styles' );によるエディタスタイルの適用に変更。以前はさらに強いスタイルがあって!important必須でしたが解消したため。 作成したCSSファイルにスタイルを書き込む このような手順を踏むことで、結構簡単に以下のようにビジュアルエディターに独自のスタイルを反映させることができます。 僕は、Simplicityというテーマを使っている … テーマ（子テーマ）フォルダ内にCSSファイルを作成する 3. 2018/12/7 - wp multibyte patchの更新に対応 テーマではまだまだ新旧エディタに対応する必要があるので面倒くさい。早くブロックエディタのみになってほしいな～, 今回、ブロックエディタに対応したテーマはこちら なおここでは、さらに幅広と全幅の画像やブロックの幅も指定しています。, 基本はそれぞのブロックのラッパークラス.wp-block-ホニャララを指定し、内部要素にスタイルを当てる形式です。以下のセレクタでスタイルを当てることができます。, WordPress 5.4.1 更新: 以前は .wp-block-heading 配下でしたが気がついたら無くなってましたので、data 属性ベースに変更しました。, WordPress 5.5.0 更新: [data-type="core/heading"] h* が h*[data-type="core/heading"] にさらに変更されています。, 追記(2020/05) 2019/7/3 - クラシックブロック用のスタイルについて追加 区切りや画像のブロックにはデフォルトでいくつかの「ブロックスタイル」が設定されています。これは、選択すると特定のクラスが付与され、予め仕込んでおいたスタイルが適用されるというものです。不要の場合は削除できます。こちらの記事でやり方を説明しています。, クラシックブロックは基本的なスタイル（文字など）は適用されますが、その内部の個々の要素はブロック用クラスが無いので手付かずの状態です。クラシックブロックには.wp-block-freeformクラスがついていますのでその内部を操作します。, フロント側と編集画面ではHTMLの構造に直接的な互換性はありません。scssなどでブロックごとにコンポーネント化したり、変数を共用するのがよいと思います。, 一番の問題点は、クラス無しでそのまま出力されるブロックがあることです。例えばp, h1, h2, h3, h4, h5, h6, ul, olはラッパーもクラスも無く出てきますが、それらは他のブロック内でも使われていたり、将来新しいブロックを追加したときに競合する可能性があります。, その他のブロックも .wp-block-ホニャララ クラスがラッパーに付くものと、

のように、要素に直接クラスが付くものが混在しているので注意が必要です。, なお、WordPress 5.2 まではギャラリーとテーブルがラッパー無しで出力されていましたが、5.3 からそれぞれ、

と

でラッピングされるようになり、少し自由度が向上しました。, 編集画面のオプション設定などは、ブロックエディター投稿画面カスタマイズあれこれ にまとめてあります。. function my_setup() {
 add_theme_support( 'wp-block-styles' ); add_theme_support( 'editor-styles' );
 add_editor_style( 'editor-style.css' ); add_action( 'after_setup_theme', 'my_setup' ); font-family: 'Raleway', 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial','Hiragino Sans', YuGothic, 'Yu Gothic', Meiryo, 'MS PGothic'; .editor-post-title__block,
.editor-post-title__input {. と、一番最後に読み込まれます。 特徴として、各セレクターの直前にブロックエディタ全体を囲っている .editor-styles-wrapper というクラスが自動的に挿入されます。 2018/11/20 - Gutenberg 4.4に対応 .wp-block-quote WordPress 5から導入されたブロックエディター(Guntenberg)のスタイルをカスタマイズする方法を探り続けています。, 2020/08/20 - WP v5.5.0 での見出しブロックの仕様変更に伴う更新。[data-type="core/heading"] h* をh*[data-type="core/heading"] に変更。 wp_enqueue_style( 'my-google-font', '//fonts.googleapis.com/css?family=Raleway', false, null, 'all' ); add_action( 'admin_enqueue_scripts', 'my_admin_enqueue_scripts' ); /* Make sure our non-latin font overrides don't overwrite the iconfont used in the classic editor toolbar */, .wp-block[data-type="core/freeform"] .mce-btn i {. エディタの文字色や背景色はbodyに対して設定します。ただしブロックエディタは同じHTML内のため競合を防ぐため、実際には.editor-style-wrapperクラスに置換され適用されます。, このように書かれたスタイルシートは WordPress 側で次のように変換され、編集画面に直接埋め込まれます。, body は実際の編集領域である.editor-style-wapperに、その他のセレクタは、.editor-style-wapper の子として再配置されます。, デフォルトでは Noto Serif が当たっていますが、これも同様にbodyに指定すればOKです。ただしタイトルは編集領域外のため、別の対応が必要です。, ブロックエディターのデフォルトでは編集領域の幅が 610px 固定で狭いです。さらにブロック選択時のパディングを考えると実質 580px しかありません。今回はそれを実質 800px に拡大にしてみましょう。 オフシャルのテーマサポートをもとにした情報に更新しました。特にカラム幅の指定を改良しています。幅広画像や全幅画像にも対応しました。 ビジュアルエディターに独自のスタイルを適用させる主な手順は以下の3手順です。 1. functions.phpファイルに独自スタイル用のコードを書く（１行） 2. 以下、editor-style.cssを生成するためeditor-style.scssの編集内容を示していきます。 エディタの文字色や背景色はbodyに対して設定します。ただしブロックエディタは同じHTML内のため競合を防ぐため、実際には.editor-style-wrapperクラスに置換され適用されます。 ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。 WordPress 5から「Gutenberg」は「ブロックエディター」に名前が変わるので差し替え。 Why not register and get more from Qiita? 2018/10/10 - Gutenberg 3.9 に対応 .wp-block-table 'supports' = array( 'title','editor', 'thumbnail', 'custom-fields' ), 鳥山@sysbirdが書いてます。 » Block Unit Test for Gutenberg – WordPress プラグイン | WordPress.org, ブロックエディタはデフォルトでなぜか font-family が Noto Serif(明朝体) になっている。, テーマで使っていないフォントは無効にしないと、違和感がある。テーマと同じ font-family で上書きしたほうがいよいだろう。, editor-style.css で宣言したcssは、ダッシュボードの投稿画面では .editor-styles-wrapper に内包される。つまり、ここで body に書いたスタイルは、投稿画面の .editor-styles-wrapper body に適用される。, 投稿タイトルだけはなにがなんでも Noto Serif になってしまうので、ピンポイントで font-family を上書きする。, テーマでGoogleフォントを使っている場合は、ダッシュボードでもGoogleフォントを有効にしておこう。, 運用の途中からブロックエディタに切り替えた場合、新規投稿からブロックエディタが採用される。過去の投稿は旧エディタ(クラシックエディタ)で表示される。その際にアイコンが文字化けしまった。, なお、プラグインの Classic Editor を利用する場合は問題ない。 太字にした4つ目は、テーマ導入後に自分でデザイン追加した場合など、 「editor-style.css」への反映を忘れているパターンが多い ので注意しましょう。 さて、ポイントは次。 一番のポイントは「コンテンツの幅」をビジュアルエディタ上で同じに合わせること editor-style.css で宣言したcssは、ダッシュボードの投稿画面では .editor-styles-wrapper に内包される。 つまり、ここで body に書いたスタイルは、投稿画面の .editor-styles-wrapper body に適用される。 投稿タイトルだけはなにがなんでも Noto Serif になってしまうので、ピンポイントで font-family を上書き … また、エディタの背景色はテーマサポートでの指定だとフッタ部分がおかしくなるので、独自のクラスに当てています。, なお、フロント側と編集側ではDOM構造やCSSの当たり方が異なるため、フロント専用の調整が必要です。, これで editor-style.css が取り込まれ、.editor-style-wrapperクラス以下に再構成され、編集画面に直接設定されます。, 以下、editor-style.cssを生成するためeditor-style.scssの編集内容を示していきます。 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がうまく効かない場合の対処法.

Outlook アカウント設定 コマンド 17, Se 単価 相場 2018 総務省 17, アルファ 税理士 法人 6, Exile オーディション ファイナリスト 11, Android 通知バー 消えない 4, Toto オクターブ 内覧会 4, Big Dipper 1 和訳 Lesson7 13, ボルボ 天井 張替え 費用 4, パチンコ 釘 通報 4, 男 ベタ惚れ 片思い 35, 通勤 混雑 コロナ 11, Pso2 ウォンド 能力付け 19, ヤマダ電機 電子 レンジ 配送 料金 8, イラストレーター 建築 使い方 6, The Banana Monkeys キス 12, 不思議のクロニクル 振リ返リマセン勝ツマデハ 片道勇者 違�%8 8, 工業高校 留 年 4, Bmw 118d 動画 4, Maglok Safe 開け方 13, β2ミクログロブリン Nag 乖離 8, Au Pay 障害 4, 天草 出身 宝塚 17, 乃木坂 26枚目 いつ 53, Wf 1000xm3 途切れる 13, 新 青春の門 完結 10, ドア クローザー Nhn D4x16 4, 父 プレゼント 誕生日 4, Dell ノートパソコン ヒンジ修理 6, Iphone 100均 イヤホン 13, Dtab 荒野 行動 ラグ い 4, テレビ 転倒防止 ベルト ソニー 5,