비주얼 에디터 이용하기

  1. 기사의 편집화면에서 비주얼 에디터를 이용해서 WYSIWYG(위지윅, What you see is what you get) 편집화면이 출력화면과 동일하게 보이는 것) 방식으로 편집할 수 있다. 이때 에디터 스타일시트를 이용하면 비주얼 에디터에서 편집중인 기사를 생성되는 페이지와 같은 디자인으로 표시해서 보다 알기 쉽게 편집할 수 있다.
  2. 에디터 스타일 시트(editor-style.css)를 준비한다.
    [sample] 테마 폴더로 업로드한다.
  3. 기사의 본문에 적용한 설정 복사하기
    style.css에서 기사의 본문에 적용할 설정 부분을 editor-style.css에 복사한다. 기사의 제목과 카테고리 등은 편집화면에 표시되지 않기 때문에 제목과 카테고리에 적용한 설정은 복사할 필요가 없다.
  4. 에디터 스타일시트 활성화하기
    function.php에 add_editor_style()의 설정을 추가한다. editor-style.css가 적용된다. 단, 비주얼 에디터에서 편집하는 기사의 가로 길이는 브라우저 화면의 가로 길이에 의해 변하기 때문에 생성되는 페이지와는 1 줄에 들어가는 글자 수가 다르다.
  5. 기사의 가로 길이 지정하기
    비주얼 에디터에서는 표시하는 기사의 길이를 지정할 수 있다. 가로 길이는 .mceContentBody{max-width:~};로 지정한다. 콘텐츠 부분의 가로 길이와 같이 ‘550px’로 지정한다.

function.php

<?php

(생략)

// 에디터 스타일시트
add_editor_style();

?>

editor-style.css

.mceContentBody {max-width: 550px}

body {font-family: dotum, “굴림”, Gulim, Arial, sans-serif, }

a {text-decoration: none;
color: #0c8bcd}

a img {border: none}

p {font-size: 14px;
line-height: 1.6}

.aligncenter {display: block;
margin-left: auto;
margin-right: auto}

.alignleft {float: left;
margin-right: 10px;
margin-bottom: 10px}

.alignright {float: right;
margin-left: 10px;
margin-bottom: 10px}

.wp-caption {border: solid 1px #aaaaaa;
text-align: center;
padding-top: 5px}

“비주얼 에디터 이용하기”에 대한 한개의 댓글

답글 남기기