WordPress의 게시물 편집기는 이름에서 알 수 있듯이 게시물과 콘텐츠를 편집할 수 있도록 합니다. 기본적으로 사용자 정의 CSS 클래스를 추가할 수 없습니다. 사용자 정의 CSS 스타일이나 클래스를 추가하려면 "텍스트" 모드로 전환하여 HTML 코드에 추가하는 것이 유일한 방법입니다.
WordPress는 사용자 정의가 가능하기 때문에 WordPress 게시물 편집기에 사용자 정의 스타일 옵션을 추가하여 삶을 더 쉽게 만드는 방법이 있습니다. 이러한 사용자 정의 옵션을 사용하면 몇 번의 클릭으로 CSS 스타일을 적용할 수 있습니다. 더 이상 텍스트 모드로 전환하거나 더 보기 좋게 만들기 위해 게시물에 들어가는 모든 CSS 클래스를 기억할 필요가 없습니다.
WordPress 포스트 편집기에 사용자 정의 스타일 옵션을 추가할 수 있는 몇 가지 방법이 있습니다. 첫 번째는 무료 플러그인을 사용하는 것이고 두 번째는 코드 스니펫을 추가하는 것입니다. 두 방법 모두 매우 유사하게 작동하므로 편한 방법을 따르세요.
참고 :진행하기 전에 기본 HTML 및 CSS를 알고 CSS 클래스, 블록 수준 요소, HTML 요소, 속성 등을 이해할 수 있다고 가정합니다.
1. 플러그인 사용
WordPress 포스트 편집기에서 사용자 정의 스타일 옵션을 추가하는 가장 쉬운 방법은 TinyMCE Custom Styles라는 플러그인을 사용하는 것입니다.
이 플러그인의 좋은 점은 사용자 정의 CSS 스타일을 추가할 수 있는 편집기 스타일시트를 자동으로 생성한다는 것입니다. 이것은 포스트 에디터 내부에 적용된 링크, 이미지, 폼, 버튼 등과 관련된 프론트엔드 스타일을 보고 싶을 때 매우 유용합니다.
1. 시작하려면 다른 WordPress 플러그인과 마찬가지로 TinyMCE Custom Styles를 다운로드, 설치 및 활성화하십시오. 활성화 후 "설정 -> TinyMCE Custom Styles"로 이동하여 플러그인 설정 페이지로 이동합니다.
2. 바로 플러그인은 편집기 스타일시트 파일을 배치할 위치를 선택하라는 오류 메시지를 표시합니다. 테마에 따라 세 가지 옵션 중에서 선택할 수 있습니다. 해당 옵션을 주의 깊게 읽고 자신에게 적합한 옵션을 선택하십시오. 제 경우에는 사용자 지정 Genesis 하위 테마를 사용하고 있기 때문에 두 번째 옵션을 선택했습니다. "모든 설정 저장" 버튼을 클릭하여 변경 사항을 저장하십시오.
3. 아래로 스크롤하여 "새 스타일 추가" 버튼을 클릭합니다. 이제 스타일 이름을 입력하고 유형(예:인라인, 블록 또는 선택기)을 선택하고 유형 값을 입력한 다음 CSS 클래스를 입력합니다.
4. 맨 오른쪽에서 요소가 "래퍼"인지 여부를 선택하는 것을 잊지 마십시오. 이 옵션을 선택하면 스타일이 포스트 편집기에서 선택한 블록 수준 요소 주위에 새 블록 수준 요소를 생성합니다.
5. 원하는 경우 "CSS 스타일" 범주 아래에 나타나는 "새 스타일 추가"를 클릭하여 사용자 정의 CSS 스타일을 직접 추가할 수도 있습니다. 그러나 테마 디렉토리에 있는 "editor-style.css" 파일에 이러한 스타일을 추가하는 것이 좋습니다(두 번째 단계에서 저처럼 두 번째 옵션을 선택한 경우). 쉽게 관리할 수 있습니다.
6. 완료되면 페이지 끝에 나타나는 "모든 설정 저장" 버튼을 클릭합니다.
7. 그게 다야. 이제부터 게시물 편집기에 "형식"이라는 새로운 드롭다운 메뉴가 표시됩니다. 해당 드롭다운 메뉴에서 미리 구성된 다른 옵션과 함께 새로 추가된 사용자 정의 스타일 옵션을 찾을 수 있습니다. 스타일을 사용하려면 해당 스타일을 클릭하기만 하면 필요한 CSS 코드가 자동으로 포스트 편집기에 추가됩니다. 텍스트 모드에서 해당 코드를 볼 수 있습니다.
8. editor-style.css 파일에 필요한 스타일을 추가했다면, 드롭다운 메뉴에서 스타일 옵션을 사용할 때 해당 스타일이 포스트 에디터에 반영됩니다.
앞으로 플러그인을 비활성화하거나 제거해도 편집기 스타일시트는 삭제되지 않습니다. 그러나 더 이상 게시물 편집기에서 사용자 정의 옵션에 액세스할 수 없습니다.
2. 수동 방법
플러그인을 사용하고 싶지 않다면 "functions.php" 파일에 간단한 코드 조각을 추가하여 동일한 결과를 얻을 수 있습니다. 여기에는 두 부분이 있습니다. 하나는 도구 모음에 버튼을 추가하여 CSS 코드를 삽입하는 부분이고, 다른 하나는 CSS 스타일을 포스트 편집기에서 라이브로 만드는 부분입니다.
도구 모음에 사용자 정의 CSS 스타일 버튼 추가
"functions.php" 파일 끝에 다음을 추가합니다. 이 코드는 실제로 WordPress 자체에서 제공합니다.
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {
// Define the style_formats array
$style_formats=array(
// Each array child is a format with it's own settings
array(
'title' => '.translation',
'block' => 'blockquote',
'classes' => 'translation',
'wrapper' => true,
),
array(
'title' => '⇠.rtl',
'block' => 'blockquote',
'classes' => 'rtl',
'wrapper' => true,
),
array(
'title' => '.ltr⇢',
'block' => 'blockquote',
'classes' => 'ltr',
'wrapper' => true,
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );에 콜백 연결 스타일 옵션을 반영하도록 코드를 사용자 정의해야 합니다. 위의 코드에서 각 배열은 별도의 스타일 옵션입니다. "제목" 옆에 스타일 제목, "블록" 옆에 블록 유형, "클래스" 옆에 CSS 클래스를 입력하고 요소가 래퍼인 경우 "래퍼" 옆에 "true"를 입력합니다. 그렇지 않은 경우 "거짓"을 입력하십시오.
새로운 스타일 옵션을 추가하고 싶을 때마다 배열을 복제하고 필드를 수정하기만 하면 됩니다. 제 경우에는 "Blue Button" 옵션을 반영하기 위해 첫 번째 배열을 채웠습니다.
사용자 정의가 끝나면 수정된 "functions.php" 파일을 저장하고 서버에 업로드하십시오.
편집자 스타일시트 만들기
"editor-style.css"라는 이름의 파일을 만듭니다. 이제 포스트 에디터에서 보고 싶은 관련 CSS 스타일을 추가하세요. "editor-style.css" 파일에서 생성하는 CSS 클래스는 위의 스타일 옵션 코드의 CSS 클래스와 일치해야 한다는 것을 잊지 마십시오.
이제 테마의 "functions.php" 파일을 열고 다음 코드를 추가합니다.
//Add custom editor stylesheet
function mte_add_editor_styles() {
add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'mte_add_editor_styles' ); "editor-style.css" 및 "functions.php" 파일을 모두 서버에 업로드합니다. 할 일이 그것뿐입니다. 이제부터 WordPress 게시물 편집기에서 사용자 정의 스타일 옵션을 사용할 수 있습니다.
적용된 스타일을 실시간으로 확인할 수 있습니다.
WordPress 게시물 편집기에서 사용자 정의 스타일 옵션을 추가하기 위해 위의 방법을 사용하는 것에 대한 생각과 경험을 아래에 댓글로 남겨주세요.