WordPress 비주얼 편집기에 사용자 정의 스타일을 추가 하시겠습니까? 사용자 정의 스타일을 추가하면 텍스트 편집기로 이동하지 않고도 서식을 빠르게 적용 할 수 있습니다. 이 기사에서는 WordPress 비주얼 편집기에 사용자 정의 스타일을 추가하는 방법을 보여줄 것입니다.
Remarque : 이 튜토리얼에는 CSS에 대한 기본 지식이 필요합니다.
언제 단축형 WordPress Visual Editor에 사용자 지정 스타일을 추가해야합니까?
기본적으로 WordPress의 시각적 편집기는 기본 서식 및 스타일 옵션을 제공합니다. 그러나 때로는 CSS 버튼을 추가할 수 있는 사용자 정의 스타일이 필요할 수도 있습니다. 내용, 후크 등
언제든지 비주얼 편집기에서 텍스트 편집기로 전환하고 사용자 정의 HTML 및 CSS 코드를 추가 할 수 있습니다. 그러나 일부 스타일을 정기적으로 사용하는 경우에는 쉽게 재사용 할 수 있도록 시각적 편집기에 추가하는 것이 좋습니다.
이렇게 하면 엄청난 시간을 절약할 수 있을 뿐만 아니라 항상 어디서나 동일한 스타일을 사용할 수 있습니다. 사이트 웹.
더 중요한 것은 사이트에서 기사를 편집하지 않고도 스타일을 쉽게 편집하거나 업데이트 할 수 있다는 것입니다.
이제 WordPress에서이 작업을 수행하는 방법을 알아 봅니다.
1 방법 : 플러그인으로 사용자 정의 스타일 추가
가장 먼저 할 일은 플러그인을 설치하고 활성화하는 것입니다. " TinyMCE 사용자 정의 스타일 ". 자세한 내용은 설치 방법에 대한 단계별 가이드를 참조하십시오. 워드 프레스 플러그인.
활성화 후 " 설정> 설정»TinyMCE 사용자 정의 스타일 플러그인 설정을 구성합니다.
플러그인을 사용하면 스타일시트 파일의 위치를 선택할 수 있습니다. 테마 또는 하위 테마 스타일을 사용하거나 사용자 지정 위치를 선택할 수 있습니다.
그런 다음 ""버튼을 클릭해야합니다 모든 설정을 저장 설정을 저장합니다.
이제 사용자 정의 스타일을 추가 할 수 있습니다. 스타일 섹션으로 스크롤하여 버튼을 클릭해야합니다 새 스타일 추가 ".
먼저 스타일의 제목을 입력해야합니다. 이 제목은 드롭 다운 메뉴에 표시됩니다. 그런 다음 정의해야합니다. 행, 블록 또는 선택 요소인지 여부.
그런 다음 CSS 클래스를 추가 한 다음 아래 스크린 샷과 같이 CSS 규칙을 추가합니다.
CSS 스타일을 추가 한 후 "모든 설정 저장"버튼을 클릭하여 변경 사항을 저장하십시오.
이제 기존 기사를 편집하거나 새 기사를 작성할 수 있습니다. 드롭 다운 메뉴에서 WordPress 비주얼 편집기의 두 번째 행에 서식이 표시됩니다.
편집기에서 텍스트를 선택한 다음 드롭 다운 메뉴에서 사용자 지정 스타일을 선택하여 적용하면됩니다.
이제 기사를 미리보고 사용자 정의 스타일이 올바르게 적용되는지 확인할 수 있습니다.
2 방법 : 비주얼 편집기에 스타일을 수동으로 추가
이 방법을 사용하려면 WordPress 파일에 코드를 수동으로 추가해야 합니다. 이 작업을 처음 수행하는 경우 추가 방법에 대한 자습서를 확인하십시오. 워드 프레스 플러그인.
1 단계 : WordPress Visual Editor의 드롭 다운 메뉴에서 사용자 정의 스타일을 추가하십시오.
먼저 WordPress 비주얼 편집기에 드롭 다운 메뉴를 추가합니다. 이 드롭 다운 메뉴를 통해 사용자 정의 스타일을 선택하고 적용 할 수 있습니다.
functions.php 파일이나 플러그인에 다음 코드를 추가해야합니다.
function wpb_mce_buttons_2 ($ 버튼) {array_unshift ($ 버튼, '스타일 선택'); 반환 $ 버튼; } add_filter ( 'mce_buttons_2', 'wpb_mce_buttons_2');
2 단계 : 드롭 다운 메뉴에서 옵션을 추가하는 방법
이제 방금 만든 드롭 다운 메뉴에 몇 가지 옵션을 추가해야합니다. 그런 다음 드롭 다운 메뉴의 형식에서 이러한 옵션을 선택하고 적용 할 수 있습니다.
이 튜토리얼에서는 세 가지 사용자 정의 스타일을 추가하여 내용 블록과 버튼.
다음 코드를 functions.php의 "functions.php"파일 또는 특정 플러그인에 추가해야합니다.
/ * * MCE 설정을 필터링하는 콜백 함수 * / function my_mce_before_init_insert_formats ($ init_array) {// style_formats 배열 정의 $ style_formats = array (/ * * 각 배열 자식은 자체 설정이있는 형식입니다. * 각 배열에 제목이 있습니다. , 블록, 클래스 및 래퍼 인수 * 제목은 형식 메뉴에 표시되는 레이블입니다. * 블록은 범위, div, 선택기 또는 인라인 스타일인지 여부를 정의합니다. * 클래스를 사용하면 CSS 클래스를 정의 할 수 있습니다. * 래퍼 여부에 관계없이 선택한 요소 주위에 새 블록 수준 요소 추가 * / 배열 ( 'title'=> 'Content Block', 'block'=> 'span', 'classes'=> 'content-block', 'wrapper'=> true,), array ( 'title'=> 'Blue Button', 'block'=> 'span', 'classes'=> 'blue-button', 'wrapper'=> true,), array ( 'title' => 'Red Button', 'block'=> 'span', 'classes'=> 'red-button', 'wrapper'=> true,),); // JSON ENCODED 배열을 'style_formats'에 삽입 $ init_array [ 'style_formats'] = json_encode ($ style_formats); return $ init_array; } // 'tiny_mce_before_init'에 콜백 첨부 add_filter ( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats');
이제 WordPress에 새 게시물을 추가하고 비주얼 편집기 드롭 다운 메뉴에서 형식을 클릭 할 수 있습니다. 이제 사용자 정의 스타일이 표시됩니다.
그러나 WordPress의 시각적 편집기에서 선택해도 아무런 차이가 없습니다.
3 단계 : CSS 스타일 추가
이제 마지막 단계는 사용자 정의 스타일에 CSS 스타일 규칙을 추가하는 것입니다.
이 CSS를 테마의 style.css 파일 또는 하위 테마의 파일에 추가해야합니다.
.content-block {border : 1px solid #eee; 패딩 : 3px; 배경 : #ccc; 최대 너비 : 250px; float : 오른쪽; 텍스트 정렬 : 가운데; } .content-block : 후 {clear : both; } .blue-button {배경색 : # 33bdef; -moz-border-radius : 6px; -webkit-border-radius : 6px; 테두리 반경 : 6px; 테두리 : 1px 단색 # 057fd0; 디스플레이 : 인라인 블록; 커서 : 포인트; 색상 : #ffffff; 패딩 : 6px 24px; 텍스트 장식 : 없음; } .red-button {배경색 : # bc3315; -moz-border-radius : 6px; -webkit-border-radius : 6px; 테두리 반경 : 6px; 테두리 : 1px 단색 # 942911; 디스플레이 : 인라인 블록; 커서 : 포인트; 색상 : #ffffff; 패딩 : 6px 24px; 텍스트 장식 : 없음; }
편집기 스타일 시트는 내용 비주얼 편집기에서. 이 파일의 위치를 찾는 방법을 보려면 설명서를 확인하세요.
테마에 스타일 시트 파일이없는 경우 언제든지 만들 수 있습니다. 새 CSS 파일을 만들고 이름을 " 사용자 정의 편집기-있는 style.css ".
이 파일을 테마의 루트 디렉토리에 업로드 한 다음이 코드를 테마의 "functions.php"파일에 추가해야합니다.
function my_theme_add_editor_styles () {add_editor_style ( 'custom-editor-style.css'); } add_action ( 'init', 'my_theme_add_editor_styles');
그게 다야. WordPress 비주얼 편집기에서 사용자 지정 스타일을 추가했습니다. 이제 옳다고 생각하는 사용자 지정을 할 수 있습니다.
이 튜토리얼을 좋아하는 소셜 네트워크에서 친구들과 공유하십시오.
