WordPress Visual Editor에 사용자 정의 스타일을 추가하는 방법

WordPress Visual Editor에 사용자 정의 스타일을 추가하는 방법

WordPress 비주얼 편집기를 살펴보십시오. 콘텐츠의 형식을 지정하고 스타일을 지정할 수있는 몇 가지 표준 옵션이 있지만 게시물과 페이지를 약간 멋지게 보이게하기위한 사용자 지정 측면에서는 그리 많지 않습니다.


워드 프레스 에디터

이제 버튼 및 텍스트 블록과 같은 것을 만들기 위해 일부 CSS를 던지기 위해 WordPress의 텍스트 편집기와 Visual 편집기 사이를 앞뒤로 이동할 수 있지만 이것이 고통 스럽습니다. 코드 편집 경험이 많음 텍스트 편집기가 약간 위협적인 것 같습니다..

나만의 커스텀 스타일을 만들어 워드 프레스 편집기의 드롭 다운 메뉴에 놓고 필요할 때마다 사용하도록 선택하는 것이 더 쉬울까요? 예, 훨씬 더 쉬우므로 여기서하는 방법을 간략하게 설명하겠습니다. 이 과정을 가능한 한 간단하게 만들려고 노력하고 있지만 사용자 정의 스타일의 모든 이점을 찾으려면 약간의 CSS 지식이 필요합니다..

워드 프레스 비주얼 편집기에 사용자 정의 스타일을 추가하는 방법을 살펴 보겠습니다.

코드를 추가하여 WordPress Visual Editor에 사용자 정의 스타일 추가

이 첫 번째 옵션을 사용하려면 CSS를 통합하고 수정하는 방법에 대해 약간 알고 있어야하지만 기본 지식을 익히고 나중에이 지식을 사용할 수 있도록 약간의 연습을하겠습니다. 플러그인을 사용하여 사이트의 무게를 측정하지 않으려는 경우 좋은 옵션입니다.

요점은 WordPress 비주얼 편집기에 사용자 정의 스타일이 포함 된 새 드롭 다운 메뉴를 추가하여 편집기에서 요소를 선택한 다음 사용자 정의 스타일을 적용하는 기능입니다. 새로운 테마를 개발하는 중이라면 functions.php 아래 코드를 해당 파일에 저장하거나 이미 내장 된 테마로 작업중인 경우이 테마를 하위 테마의 functions.php 파일에 붙여 넣습니다..

myprefix_mce_buttons_1 ($ buttons) {
array_unshift ($ buttons, 'styleselect');
$ 버튼 반환;
}

add_filter ( 'mce_buttons_1', 'myprefix_mce_buttons_1');

WordPress 게시물 중 하나에서 편집기로 돌아 가면 편집기 맨 윗줄에 새로운 “형식”단추가 나타납니다. “mce_buttons_1에 어떻게 연결 되었습니까? 이렇게하면 형식 메뉴 버튼이 mce 편집기의 첫 번째 행에 배치됩니다. “mce_buttons_2″필터를 사용하여 두 번째 행에 배치하거나 “mce_buttons_3″을 사용하여 세 번째 행에 배치 할 수도 있습니다..

이제 메뉴 항목을 활성화 했으므로 이제 게시물에 사용할 사용자 정의 스타일을 추가 할 차례입니다. 아래에 나열된 코드를 가져 와서 functions.php 형식 드롭 다운에 2 개의 새로운 스타일을 추가하는 파일 –“테마 버튼”및“강조 표시”.

/ **
* mce 형식 드롭 다운에 사용자 정의 스타일 추가
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
함수 myprefix_add_format_styles ($ init_array) {
$ style_formats = 배열 ​​(
// 각 배열 자식은 자체 설정이있는 형식입니다. 원하는만큼 추가하십시오.
정렬(
'title'=> __ ( 'Theme Button', 'text-domain'), // 드롭 다운 제목
'selector'=> 'a', // 에디터에서 타겟팅 할 요소
'classes'=> 'theme-button'// CSS에 사용되는 클래스 이름
),
정렬(
'title'=> __ ( 'Highlight', 'text-domain'), // 드롭 다운 제목
'inline'=> 'span', // 선택된 내용을 둘러싸는 범위
'classes'=> 'text-highlight'// CSS에 사용되는 클래스 이름
),
);
$ init_array [ 'style_formats'] = json_encode ($ style_formats);
$ init_array를 반환;
}
add_filter ( 'tiny_mce_before_init', 'myprefix_add_format_styles');

드롭 다운 메뉴에서 다른 이름을 표시하도록 제목을 변경하고, 배열에서 항목을 추가 / 제거하는 등의 작업을 수행 할 수 있습니다.이 코드에서 거의 모든 내용을 수정하여 사용자 정의 형식 스타일을 표시 할 수 있습니다. 워드 프레스 코덱스 허용되는 매개 변수 및 리턴 값에 대한 자세한 설명.

이제 새로운 스타일이 생겼으므로 편집기에서 컨텐츠를 강조 표시하고 스타일을 적용 할 수 있습니다. “테마 버튼”형식에 선택기 매개 변수가 어떻게 포함되어 있습니까? 즉, 스타일은 해당 특정 선택기 (이 경우 “a”또는 “link”태그)에만 적용 할 수 있습니다. “Highlight”에 추가 한 두 번째 형식에는 선택기 매개 변수가 아니라 편집기에서 강조 표시 한 텍스트에 스타일을 적용하고 고유 한 클래스 이름으로 범위를 감싸도록 지시하는 “인라인”매개 변수가 있습니다. Total WordPress 테마에서 형식을 사용한 방법에 대한 예를 볼 수 있으므로 사용자가 편집기의 글 머리표에 체크리스트 모양을 쉽게 적용 할 수 있습니다..

체크리스트

이제 맞춤 형식을 사용할 수 있지만 스타일을 지정하기 위해 사이트에 맞춤 CSS를 추가하기 전까지는 다르게 보일 것입니다. 테마 (자신의 테마를 빌드하는 경우) 또는 하위 테마의 스타일 시트를 찾아 다음 CSS 코드를 파일에 붙여 넣어야합니다..

.테마 버튼 {
디스플레이 : 인라인 블록;
패딩 : 10 15px;
색상 : #fff;
배경 : # 1796c6;
텍스트 장식 : 없음;
}
.테마 버튼 : 마침표 {
텍스트 장식 : 없음;
불투명도 : 0.8;
}
.텍스트 강조 표시 {
배경 : # FFFF00;
}

이제 프런트 엔드의 새 형식에 스타일을 추가하여 적용 할 때 라이브 스타일을 볼 수 있습니다. 예이! 그러나 스타일을 적용 할 때 실제 편집기에서 스타일을 보는 것도 좋지 않습니까? 이렇게하려면 WordPress에서 “편집기 스타일 시트”기능을 사용해야합니다. 당신이 당신의 자신의 테마를 구축한다면 당신은 당신의 테마에 “editor-style.css”라는 새로운 CSS 파일을 만들고 싶을 것입니다 (사용자 정의 CSS로 아래 스 니펫을 편집하기 위해 원하는 이름을 지정할 수 있습니다) 형식에 추가 한 다음 아래 함수를 추가하여 백엔드에로드하십시오..

함수 myprefix_theme_add_editor_styles () {
add_editor_style ( 'editor-style.css');
}
add_action ( 'init', 'myprefix_theme_add_editor_styles');

다른 사람의 테마로 작업하는 경우 자녀 테마에 이것을 추가해야합니다. 부모 테마와 충돌하지 않거나 부모 테마에 이미 CSS 파일이있는 경우 고유 한 이름을 지정하십시오. 편집기는 실제로 그것을 복사하여 자식 테마에 붙여 넣을 수 있습니다 (위의 PHP 코드를 추가하지 않고) 새 테마를 추가하십시오. WordPress는 부모 테마의 편집기 CSS 파일을로드하기 전에 먼저 자식 테마를 확인하고 그것을 찾으면 자식 테마에서 대신로드.

멋진 플러그인으로 WordPress Visual Editor에 사용자 정의 스타일 추가

코드를 가지고 놀 시간이 없거나 스스로 알아낼 수 없다면 좋은 소식이 있습니다. 코드를 사용하지 않고 위에서 방금 수행 한 작업을 정확하게 완료 할 수있는 플러그인이 있습니다..

TinyMCE 커스텀 스타일 플러그인

간단히 검색, 설치 및 활성화 TinyMCE Custom Styles 플러그인 WordPress 사이트에서 활성화하십시오..

TinyMCE 사용자 정의 스타일 설정

이동 설정> TinyMCE 교수 스타일 WordPress 대시 보드의 왼쪽에 있습니다. 여기에서 플러그인 설정을 수정합니다.

TinyMCE 사용자 정의 스타일 설정

플러그인을 사용하면 스타일 시트의 위치 또는 배치 할 위치를 선택할 수 있습니다. 새 사용자 정의 디렉토리를 작성하는 것이 좋습니다. 세 번째 옵션을 선택하고 디렉토리 이름을 지정한 다음 페이지를 아래로 이동하여 설정 저장 다음 단계로 진행하기 전에 옵션.

TinyMCE 사용자 정의 스타일 추가

설정을 저장 한 후 아래로 스크롤하여 New 새 스타일 추가 버튼을 선택하십시오..

TinyMCE 사용자 정의 스타일 옵션

여기에서 원하는 스타일을 원하는대로 사용자 지정할 수 있습니다. 기본적으로 CSS 코드를 생성하는 간단한 웹 기반 편집기입니다. 드롭 다운 메뉴에 표시 할 제목을 입력하십시오. 선택기, 인라인 또는 블록 유형 중 원하는 것을 선택하십시오. CSS 클래스와 스타일을 채우려면 위의 스크린 샷을 자유롭게 사용하거나 드롭 다운 메뉴를 사용하여 계획 한 내용에 따라 나만의 스타일을 만드십시오. 완료되면 페이지 하단의 설정 저장을 클릭하십시오..

TinyMCE 사용자 정의 스타일 형식

이제 편집기에서 새로운 사용자 정의 스타일이 어떻게 보이는지 살펴볼 차례입니다. 새 게시물이나 페이지를 열고 Visual 편집기의 왼쪽에서 형식 드롭 다운 메뉴를 찾으십시오. 두 번째 줄에 나타납니다. 드롭 다운 메뉴를 클릭하면 방금 만든 새로운 스타일이 나타납니다.

사용중인 TinyMCE 사용자 정의 스타일 형식

Big Blue Button 옵션 또는 작성한 항목을 클릭하여 편집기에 표시하십시오. 그것을 사용하려면 단순히 서식을 지정할 텍스트를 강조 표시 한 다음 옵션을 클릭하십시오.!

결론

지금은 여기까지입니다! 새로운 스타일링을 사용하는 방법에 대한 자세한 내용은 워드 프레스 코덱스 페이지 이 주제에 전념.

WordPress 비주얼 편집기에 사용자 정의 스타일을 추가하는 방법에 대한 질문이 있으면 의견 섹션에 알려주십시오. 사이트를 좀 더 멋지게 보이도록 만든 특이한 스타일을 자유롭게 공유하십시오.!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me