Zenn
🎨

Wordpressの投稿画面を見やすくカスタマイズする

2023/05/30に公開
WordPress
tech

私がwordpressでの開発時に使用している、投稿画面を見やすくする方法をご紹介いたします。
細かいスタイルというよりは、グループや段落など、階層がわかりやすいというようなスタイリングになります。
随時見やすいように更新中です。

投稿画面

Css

wp-content/themes/[テーマ名]/block_style.css

.editor-styles-wrapper.block-editor-writing-flow p,
.editor-styles-wrapper.block-editor-writing-flow h2,
.editor-styles-wrapper.block-editor-writing-flow h3,
.editor-styles-wrapper.block-editor-writing-flow h4,
.editor-styles-wrapper.block-editor-writing-flow h5,
.editor-styles-wrapper.block-editor-writing-flow li,
.editor-styles-wrapper.block-editor-writing-flow dl {
  padding: 5px;
  border: 1px solid #ddd;
  background-color: #fff;
}

.editor-styles-wrapper.block-editor-writing-flow dt,
.editor-styles-wrapper.block-editor-writing-flow dd {
  margin: 2px 0;
  border: 1px solid #ccc;
}

.editor-styles-wrapper.block-editor-writing-flow dt {
  background-color: #ccc;
}

.editor-styles-wrapper.block-editor-writing-flow figure {
  padding: 5px;
  border: 1px solid #ddd;
  background-color: #fff;
}

.editor-styles-wrapper.block-editor-writing-flow ul,
.editor-styles-wrapper.block-editor-writing-flow ol,
.wp-block-group__inner-container.block-editor-block-list__layout {
  padding: 5px 20px;
  background-color: #fafafa;
  border: 1px solid #eee;
}

functions.php

wp-content/themes/[テーマ名]/functions.php

function add_block_editor_styles()
{
  global $pagenow;

  if ($pagenow == 'post.php' || $pagenow == 'post-new.php' || $pagenow == 'edit.php') {
    wp_enqueue_style('block-style', get_stylesheet_directory_uri() . '/block_style.css');
  }
}
add_action('enqueue_block_editor_assets', 'add_block_editor_styles');

参考記事

管理画面にcssを読み込む実装につきましては、下記の記事を参考にさせていただきました
https://baigie.me/officialblog/2022/04/19/wordpress-tips-1/

Discussion