Category

WordPress

固定ページでGutenberg(ブロックエディタ)を無効化する方法

By | カスタマイズ

入力欄などカスタマイズしている場合など、新しい編集画面(Gutenberg)が邪魔になる事があります。

特定の投稿タイプでGutenbergを無効化したい場合は、functions.phpに下記のように記述します。
このサンプルコードは「固定ページ」のみ無効化されるようになります。

add_filter( 'use_block_editor_for_post_type', 'hide_block_editor', 10, 10 );
function hide_block_editor( $use_block_editor, $post_type ) {
  if ( $post_type === 'page' ) return false;
  return $use_block_editor;
}

WordPressの投稿編集画面をカスタマイズする

By | WordPress

WordPress5から投稿画面に、新しい編集エディタ「Gutenberg」に変わりました。
編集機能は以前より直感的になったり、簡単に記事がかけるようになりました。

みにくい「Gutenberg」

機能はよくなったのですが、タイトルの文字サイズなどアンバランスでみにくいのでCSSを使って調整したいと思います。

編集エディタ用の外部CSSを設定する

外部CSSを読み込むためには、functions.phpに次のコードを追記します。

add_editor_style( get_stylesheet_directory_uri() . '/css/editor-style.css' );
add_theme_support( 'editor-styles' );

ここではcテーマのcssファルダーにある「ditor-style.css」を読み込んでいます。

変更したい部分のCSSを追記

あとは外部CSSに、変更したい部分のスタイルを設定し実際に反映されている確認していきます。
例えば、タイトルの文字サイズを小さくしたければ、

.editor-post-title__block .editor-post-title__input { font-size: 21px; padding: 9px 14px; }

タイトルの文字の大きさが変わりました。あとはこれを繰り返し必要な変更を加えて胃kwばかんせいです。

Ward Press新編集エディタ(Gutenberg)の日本語化

By | WordPress

新しいWard Pressから編集エディタが新しい仕様に変更されました。
事前にプラグインの形で提供されていたものはちゃんとされていたのですが、日本語への対応が一部しかされていません。

一部日本語化していない

アップデートや新規インストールなどいろいろ試したのですが、日本語化されませんでした。
唯一、日本語で利用できるのは、プラグイン版の新しい編集エディタ(Gutenberg)を利用することのようです。
Gutenbergプラグインプラグインでは日本語化できているので、アップデートで近いうちに対応されてるとは思いますが、しばらくはプラグインを利用した方がいいようです。
Gutenbergプラグインを追加

 

WordPress新投稿エディタGutenbergのプラグイン対応確認

By | WordPress

WordPress5.0が12/7に配信されはじめました。
今回のアップデートでは、以前から予告されていた通り記事を作成する編集エディタがGutenberg(グーテンベルク)と呼ばれる新しいものに変更されました。

今回は、よく利用するプラグインでの対応状況を確認したいと思います。

 

高度なカスタムフィールドプラグイン Advanced Custom Fields

最新バージョンではWordPress5にも対応しているとのことですが、フィールドタイプにブロックエディタ(Gutenberg)はないようなのです。また、表示位置や画面の非表示などが新しいエディタではうまく反映されまあせん。Classic Editorプラグインを入れ従来のエディタにすると問題ないようです。
Advanced Custom Fields

 

カスタム投稿タイププラグイン Custom Post Type UI

WordPress5にはまだ対応していません。投稿タイプを追加すると新しい編集エディタ(Gutenberg)が適応されます。サポート項目の各表示非表示も機能するようです。Classic Editorプラグインを有効にすると、追加したカスタム投稿タイプも従来のエディタに切り替わります。現在Custom Post Type UIには編集エディタを従来とGutenbergに切り替える項目はないのですが、新しい編集エディタ(Gutenberg)はREST APIを使っているので「REST API で表示」の項目を”false”にすると従来のエディタに切り替わるので、REST APIが必要なければ投稿ごとにエディタを切り替えると言った使い方もできそうです。

Custom Post Type UI

 

投稿画面の編集機能拡張プラグインTinyMCE Advanced

最新バージョンではWordPress5にも対応しています。設定画面には新旧それぞれ設定できるようになっています。
新しい編集エディタ(Gutenberg)では、ブロックにClassicという項目がありこの編集機能の設定ができるようになっています。
高度な設定に「Add “Classic Paragraph” Block.」がありデフォルトではチェックが入っておりClassic Paragraphというブロックも追加されます。項目などはClassicと同じで、説明ではメリットがあると書かれてはいるのですが、使った感じではメリットがよくわかりませんでした。

ClassicParagraph

 

3つのプラグインを試してみたのですが、 意外と問題は無いように思いました。Advanced Custom Fieldsに関してもβ版ではカスタムブロックを追加できる機能など、が盛り込まれているので随時対応されていきそうです。今回は新規にテスト環境を用意しての確認だったので今度は既存のサイトデータを使って、切り替え時のデータの反映を確認していきます。

wordpress

wordpressのビジュアルエディターとテキストエディターの切り替え

By | その他

wordpressの投稿画面にはビジュアルとテキストの二つの編集モードが用意されています。 ビジュアルはTinyMCEというライブラリーが使われHTMLやCSSといったホームページ編集の知識がなくても簡単にページが作成できるように、ワードのような作成を補助する機能が、アイコンなどでわかりやすく用意されています。一方テキストはHTMLのソースコードをそのまま入力できより複雑で本格的なページを作成することができます。

Read More