글보기
망보드
망보드에 TinyMCE 적용하기 및 한글폰트 적용 + 기본폰트 변경하기
2023-11-21조회수18

망보드는 기본적으로 '스마트 에디터 2.0'이라는 놈을 제공합니다.

상당히 편리하고 꽤나 쓸만합니다. 그리고 망보드에서 제공하는 유료 플러그인을 몇개 설치해 놓으면

페이지 빌더가 아님에도 불구하고 꽤나 강력한 성능이 나옵니다. 정말 글 쓰기 좋습니다.

하지만, 딱 하나 약점이 있는데, 로컬에서 동영상을 올리고 이를 제대로 재생하기가 너무나 힘듭니다.

딱 하나 가능한 방법은, 미디어 라이브러리에 운영자나 관리자급이 동영상을 올리고,

그걸 글쓸 때 주소를 받아서 붙여넣기 하는 식으로 하는 수 밖에 없지요.

하지만, 그렇게 되면 일반 유저는 결국 로컬 동영상을 업로드하지 못한다는 말과 같습니다.

그래서 그 대안으로 TinyMCE 에디터를 사용합니다. 그리고 어떻게 보면 스마트 에디터2.0보다 나은 성능과 환경을 제공하기도 하니 대안이라기 보다는 취향따라 선택이라고 하는 것이 좋겠군요.

( 1 ) TinyMCE 설치하기

스크린샷 2023-11-21 210725.jpg스크린샷 2023-11-21 210747.jpg
스크린샷 2023-11-21 210805.jpg

어쨋든 다음의 3개 플러그인을 쪼로록 설치한 다음 바로 활성화 시킵니다.

그리고, Mangboard -> 게시판 관리 -> 해당 게시판의 설정 -> 에디터 설정에 가보면 저렇게 에디터를 선택할 수 있습니다.

스크린샷 2023-11-21 211311.jpg

여기서 WP에디터를 골라줍니다. 

그리고 해당 게시판에 가서 글쓰기를 눌러보면 에디터 화면이 벌써 바뀌어 있는것을 볼 수 있습니다.

하지만, 좀 어색한게 하나 있는데, 바로 한글폰트가 없다는 겁니다. 

그러니 한글폰트도 여기에 집어넣어 줍니다.

( 2 ) TinyMCE에 한글폰트 넣어주기

워드프레스 제어판의 설정 -> TinyMCE config 에 들어갑니다. 그럼 하단부에 Edit Otption 이 있는데, 거기다가 아래의 내용을 집어 넣으면 됩니다.

Name 

font_formats

Value

굴림체=Gulim;돋움체=Dotum;바탕체=Batang;궁서체=Gungsuh;나눔고딕=nanumgothic;나눔명조=Nanum Myoungjo;나눔붓글씨=nanumbrushscript;

그러면 이렇게 됩니다.

스크린샷 2023-11-21 211957.jpg

그리고 저장을 하면 벌써 해결입니다. 다시 게시판의 글쓰기로 돌아가 보면 폰트 종류가 이렇게 변해 있습니다.

스크린샷 2023-11-21 212056.jpg

여기까지만 해도 좋습니다만, 딱 하나 더 맘에 안드는게 있는데

기본폰트가 엉뚱한게 잡혀 있어서 글 쓸때마다 폰트를 저렇게 열고 변경해 주려니 번거롭습니다.

그러니 기본 폰트도 변경합시다.

( 3 ) TinyMCE 기본 폰트 변경하기

이건 FTP의 도움을 받아야 합니다. FTP를 접속해서 다음 폴더를 찾아 갑니다.

/wp-includes/js/tinymce/skins/wordpress/wp-content.css

여기에 있는 wp-contents.css 를 수정해 주면 됩니다.

파일을 열고 12~13번째 줄을 보시면 Body의 폰트 종류를 정의하는 곳이 나옵니다. 그걸 바꿔줍시다.

wp-content.jpg

저기서 몸체 폰트가 Georgia 로 되어 있는데 저걸 나눔고딕으로 바꾸면 됩니다.

font-family: “Nanumgothic”, “Nanum gothic” , sans-serif;

아니면 Open Sans로 수정하셔도 됩니다.

font-family: “Open Sans”, “Helvetica Neue”, Helvetica, Arial, sans-serif;

그럼 이제 끝났습니다. 그냥 새로 고침하지 마시고 ‘강력 새로고침’ 해서 캐시 몽땅 리셋한 후에 다시 보시면 됩니다.

여기까지 했는데 어라 그대로인대요? 하시는 분들은 99%의 확률로 캐시 안비워서

변경전의 모습이 계속 로드 되고 있는겁니다.

#망보드#에디터#TinyMCE#로컬업로드
댓글
자동등록방지
(자동등록방지 숫자를 입력해 주세요)
망보드 2023-12-01
망보드 에디터에서 목차 만들기 ( 앵커 )
목차 :: 1. 목차 형태 만들기 ( 리스트 작성 )2. 목차의 각 항목마다 링크 설정3. 원하는 지점에 앵..
망보드 2023-12-01
모바일 홈페이지 화면 코드
이번에 아바다 AVADA를 쓰게 되면서 가장 좋은 점 중의 하나가,손쉽게 컴퓨터/태블릿/폰 상태를 눈으로 보..
망보드 2023-11-30
망보드 + AVADA 테마 적용시 검색 템플릿 적용 방법 [2]
사이트 다 만들어 놓고 나서 젤 마지막으로 적용 했던게, 바로 전체 검색 템플릿 설치였습니다.워드프레스 자체..
No image
망보드 2023-11-29
secret 망보드 유료 개발 결과 정리
비밀글입니다
망보드 2023-11-23
망보드에 설치한 TinyMCE에 로컬 업로드 ( 사진, 동영상 ) 적용하기
이전 글에서 망보드에 TinyMCE를 어떻게 적용하는지를 설명드렸습니다.https://wisehobbies...
망보드 2023-11-21
망보드에 TinyMCE 적용하기 및 한글폰트 적용 + 기본폰트 변경하기 [1]
망보드는 기본적으로 '스마트 에디터 2.0'이라는 놈을 제공합니다.상당히 편리하고 꽤나 쓸만합니다. 그리고 ..
망보드 2023-11-19
대표이미지가 없는 경우 자동으로 이미지 설정
웹진형태의 게시판일 경우 대표이미지를 설정하지 않거나 글 작성시 이미지를 아무것도 넣지 않으면 나중에 리스트..
망보드 2023-11-19
회원가입 및 회원정보 페이지 수정 - 이메일,휴대폰,주소 등등 삭제
파일을 뜯어 고쳐도 되지만 숏코드를 활용하여 주소, 전화번호, 휴대폰 등등 쓸데없는 정보를 기입하지 않도록 ..