Skip to content

CHICPRO

  • Life Log
  • Cycling Log
  • Photo Log
    • Portrait
    • Landscape
    • Flower
    • Etc
  • Coding Log
  • Information

워드프레스 에디터에 테마 css 적용하기

2020-08-05 by 편리

최근에 테마 바꿈질에 정신을 못차리고 있는 요즘이지만.. 그 바꿈질을 하면서 간혹 어떤 테마는 에디터의 넓이라든가 폰트 등이 변경되는데 현재 사용 중인 테마는 적용이 되지 않기에 방법을 찾아보니 방법이 없는 것이 아니었다. 현재 테마는 기존 워드프레스의 클래식 에디터인 tinymce 에 대한 css 파일을 가지고 있지만 새롭게 바뀐 Gutenberg 에디터에 대한 css 파일은 존재하지가 않았다. 그래서 editor-block.css 파일을 생성하고 관련 스타일을 추가한 후에 아래 코드를 이용해 에디터 스타일을 적용해 줬다.

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'allium-fonts', allium_fonts_url() );
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap' );
    wp_enqueue_style( 'allium-block-editor', get_stylesheet_directory_uri() . "/editor-block.css", false, '1.0.0', 'all' );
}, 99 );

현재 테마인.. Allium 테마의 스타일을 참고해서 작성한 editor-block.css 파일의 코드는 아래와 같다.

.editor-default-block-appender textarea.block-editor-default-block-appender__content,
.editor-default-block-appender textarea.editor-default-block-appender__content,
.edit-post-visual-editor .block-editor-block-list__block,
.edit-post-visual-editor .editor-block-list__block {
	font-size: 16px;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.editor-default-block-appender textarea.block-editor-default-block-appender__content,
.editor-default-block-appender textarea.editor-default-block-appender__content {
	font-family: "Nunito Sans", sans-serif, 'Nanum Gothic';
}

.editor-post-title__block .editor-post-title__input {
	color: #020202;
	font-family: "Nunito Sans", sans-serif, 'Nanum Gothic';
  font-size: 38px;
  font-size: 2.375rem;
	font-weight: 700;
}

.edit-post-visual-editor h1,
.edit-post-visual-editor h2,
.edit-post-visual-editor h3,
.edit-post-visual-editor h4,
.edit-post-visual-editor h5,
.edit-post-visual-editor h6 {
	font-weight: 700;
}

.editor-block-list__block h1 {
  font-size: 32px;
  font-size: 2rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}

.editor-block-list__block h2 {
  font-size: 26px;
  font-size: 1.625rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}

.editor-block-list__block h3 {
  font-size: 23px;
  font-size: 1.4375rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}

.editor-block-list__block h4 {
  font-size: 16px;
  font-size: 1rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
}

.editor-block-list__block h5 {
  font-size: 12px;
  font-size: 0.75rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
  -webkit-text-stroke: .35px;
  /* Hack to fix thin text in Windows */
}

.editor-block-list__block h6 {
  font-size: 10px;
  font-size: 0.625rem;
  margin-bottom: 26px;
  margin-bottom: 1.625rem;
  -webkit-text-stroke: .35px;
  /* Hack to fix thin text in Windows */
}

/* Main column width */

.editor-styles-wrapper {
	max-width: 100% !important; /* Override where editor-style.css is affecting this. */
}

.wp-block {
  max-width: 829px; /* Based on one-column post width; 829px + 30px to account for padding. */
  padding: 1.875rem;
}

/* Alignments */

.edit-post-visual-editor .alignleft {
	margin-right: 1.5em;
}

.edit-post-visual-editor .alignright {
	margin-left: 1.5em;
}

/* List styles */
.edit-post-visual-editor ul.wp-block-gallery {
    margin: 0 0 30px 0;
    padding: 0;
}

/* Quotes */
.editor-styles-wrapper .wp-block-pullquote blockquote {
    border-left: none;
}

.wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
  color: #555;
  border-left: 6px solid #04bfbf;
  font-family: "Roboto", sans-serif;
  font-size: 21px;
  font-size: 1.3125rem;
  line-height: 1.3;
  margin: 0 auto 26px;
  margin: 0 auto 1.625rem;
  padding: 15px;
  padding: 0.9375rem;
  position: relative;
}

.wp-block-image figcaption {
  text-align:center;
  font-size:0.8em;
}

css 코드를 잘 다루는 것이 아니기 때문에 다른 테마의 코드를 가져다가 일부분만 수정한 것이라 제대로 된 것인지는 확인이 어렵다. 일단 적용은 되는 것으니 사용하면서 문제가 되는 부분이 있다면 차츰 수정하는 방향으로 하면 될 것 같다.

Post navigation

Previous Post:

MySQL에서 특정 row 기준으로 위 아래 row 구하기

Next Post:

워드프레스 속도를 더 빠르게 LiteSpeed Cache

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • SK 세븐모바일 유심 셀프교체
  • php 배열 연산에서 + 와 array_merge 의 차이
  • pcntl_fork 를 이용한 다중 프로세스 실행
  • 아이폰 단축어를 이용하여 주중 공휴일엔 알람 울리지 않게 하기
  • 구글 캘린더 전체일정 재동기화
  • OpenLiteSpeed 웹서버에 HTTP 인증 적용
  • OpenLiteSpeed 웹어드민 도메인 연결
  • WireGuard를 이용한 VPN 환경 구축
  • Ubuntu 22.04 서버에 OpenLiteSpeed 웹서버 세팅
  • 맥 vim 세팅

Recent Comments

  • 편리 on 업무관리용 그누보드 게시판 스킨
  • 임종섭 on 업무관리용 그누보드 게시판 스킨
  • 캐논 5D 펌웨어 | Dslr 펌웨어 업그레이드 방법 82 개의 베스트 답변 on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • Top 5 캐논 5D 펌웨어 Top 89 Best Answers on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • 편리 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 임팀장 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 편리 on Notepad++ NppFTP 플러그인 수동 설치
  • paul-j on Notepad++ NppFTP 플러그인 수동 설치
  • YS on Windows 10 iCloud 사진 저장 폴더 변경
  • 편리 on Docker를 이용한 Centos7 + httpd + php 5.4 개발환경 구축

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
© 2025 CHICPRO | Built using WordPress and SuperbThemes