워드 프레스 의 글 편집기 스타일 을 수정 하 는 방법 에 대한 자세 한 설명

4827 단어 WordPress
사용자 정의 글 편집기 스타일
워드 프레스 테마 마다 글 스타일 이 다 르 지만 배경 에 있 는 시각 화 편집기 로 글 을 편집 할 때 스타일 은 일치 합 니 다.
그러나 WordPress 는 글 시각 화 편집기 에서 스타일 을 사용자 정의 하 는 기능 을 제공 합 니 다.이 기능 을 이용 하여 WordPress 시각 화 편집기 에서 CSS 스타일 을 사용자 정의 할 수 있 습 니 다.
시각 화 편집기 의 스타일 을 전단 과 같이 설정 하면 사용자 가 전단 에 표 시 된 결 과 를 직접 미리 볼 수 있 고 반복 적 인 디 버 깅 글 레이아웃 스타일 을 새로 고치 지 않 아 도 됩 니 다.
글 편집기 에 사용자 정의 CSS 스타일 시트 를 추가 하려 면 add 만 사용 하 십시오.editor_style()함수.
먼저 테마 루트 디 렉 터 리 에 editor-style.css 스타일 시트 파일 을 만 든 다음 functions.php 파일 에 추가 합 니 다.

/**
  *WordPress            
  *http://www.endskin.com/editor-style/
*/
function Bing_add_editor_style(){
  add_editor_style();
}
add_action( 'after_setup_theme', 'Bing_add_editor_style' );
이렇게 하면 editor-style.css 스타일 시트 는 시각 화 편집기 에 도 입 됩 니 다.editor-style.css 파일 에 CSS 를 쓰 면 시각 화 편집기 에 직접 나타 납 니 다.
20151215155213897.png (853×514)
사용자 정의 CSS 파일
그 밖 에 CSS 파일 의 경 로 를 사용자 정의 할 수 있 습 니 다.

/**
  *WordPress            
  *    CSS   
  *http://www.endskin.com/editor-style/
*/
function Bing_add_editor_style(){
  add_editor_style( 'css/custom-editor-style.css' );//           CSS      custom-editor-style.css   
}
add_action( 'after_setup_theme', 'Bing_add_editor_style' );
이렇게 하면 테마 디 렉 터 리 의"css/custom-editor-style.css"파일 을 호출 합 니 다.
외부 CSS 파일 가 져 오기
add_editor_style()함 수 는 외부 CSS 파일 도입 도 지원 합 니 다.

/**
  *WordPress            
  *   CSS   
  *http://www.endskin.com/editor-style/
*/
function Bing_add_editor_style(){
  add_editor_style( 'http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css' );//      CSS   
}
add_action( 'after_setup_theme', 'Bing_add_editor_style' );

네,그렇습니다.그리고 워드 프레스 편집기 플러그 인 두 가 지 를 추천 합 니 다.
워드 프레스 플러그 인 에 대한 CKEditor
워드 프레스 프로필 에 대한 CKEditor
CKEditor 편집 기 는 외국인 의 강력 한 부 텍스트 편집기 입 니 다.CKEditor for WordPress 는 WordPress 를 위 한 맞 춤 형 버 전 으로 기본 편집 기 를 교체 할 수 있 습 니 다.두 개의 피 부 를 선택 할 수 있 습 니 다.댓 글 상자 에 편집 도구 모음 을 추가 하 는 것 을 지원 합 니 다.CKFinder 파일 업로드 컨트롤 에 맞 춰 더 많은 기능 을 수행 할 수 있 습 니 다.
워드 프레스 기능 에 대한 CKEditor:
기본 워드 프레스 편집기 대신 CKEditor 를 사용 합 니 다댓 글 상자 에 편집 도구 모음 을 추가 할 수 있 습 니 다
  • CKEditor 를 통 해 특별한 스타일 의 컬러 문 자 를 발표 할 수 있 음(선택 가능)
  • 내 장 된 파일 관리 및 업로드 관리자,CKFinder 지원-AJAX 파일 브 라 우 저
  • 내 장 된 워드 프레스 의"read more"태그(1)
  • 투표 삽입 Wp-Polls 에 대한 통합(3)앨범 플러그 인 NextGEN Gallery 통합(5)평 점 플러그 인 GD Star Rating 통합(4)Viper's Video Quicktags 플러그 인 통합(2)
  • 워드 프레스 미디어 단추 에 대한 통합
  • 자체 적 으로 설정 할 수 있 는 출력 형식
  • 맞 춤 형 도구 모음 단추
  • 맞 춤 형 피부
    기타
    20151215155417201.png (650×471)
    KEditor 자체 에 유연 한 설정 옵션 이 있 습 니 다.필요 에 따라 설정 할 수 있 습 니 다.파일 업로드 컨트롤 CKFinder 를 소개 합 니 다.
    CKFinder 파일 업로드 컨트롤 설치
    CKEditor 에는 강력 한 파일 업로드 플러그 인 CKFinder 가 있 습 니 다.CKEditor 의 업로드 기능 을 강화 합 니 다.기본적으로 설치 되 어 있 지 않 습 니 다.CKFinder PHP 버 전 을 다운로드 하 는 데 접근 할 수 있 습 니 다.http://ckfinder.com/download
    ckfinder 폴 더 의 내용 을 CKEditor for wordpress 플러그 인 디 렉 터 리 의"ckfinder"루트 디 렉 터 리 에 업로드 합 니 다.
    기 존 폴 더 의 config.php 파일 을 삭제 하고 ckfinderconfig.php 를 config.php 로 변경 합 니 다.
    이 때 배경 CKEditor-Upload Options 를 방문 하여 관련 설정 을 하면 됩 니 다.
    CKEditor 와 CKFinder 다운로드
    워드 프레스 다운로드 에 대한 CKEditor:http://wordpress.org/extend/plugins/ckeditor-for-wordpress/
    CKFinder 다운로드:http://ckfinder.com/download
    Kindeditor for WordPress 플러그 인(내 국 인 습관 에 부합)
    Kindeditor 편집 기 는 국민 이 개발 한 간단 하고 효율 적 이 며 사용 하기 쉬 운 편집기 로 google code prettify 가 내장 되 어 있 으 며 코드 를 간단하게 삽입 할 수 있 습 니 다.그 밖 에 판 선 해 형 들 은 이 를 워드 프레스 플러그 인 으로 만 들 었 다.Kindeditor for WordPress.비교적 좋 은 것 은 원 키 로 조판 할 수 있 고 자체 테이프 의 이미지 업로드 기능 을 사용 할 수 있 으 며 코드 하 이 라이트 삽입,시각 화 삽입요약 버튼 등등.
    20151215155444524.png (615×174)
    워드 프레스 설치 용 Kindeditor
    1.배경 플러그 인 설치 인터페이스 에서 Kindeditor 온라인 설 치 를 검색 하거나 Kindeditor for WordPress 를 다운로드 할 수 있 습 니 다.
    2.플러그 인 을 사용 하면 설정-Kindeditor 설정 에서 프론트 코드 하 이 라 이 트 를 사용 할 지 설정 할 수 있 습 니 다.스타일 을 선택 할 수 있 습 니 다.
    20151215155555280.png (614×200)
    체험 하 다.
    저 는 3.5.1 환경 에서 테스트 를 했 습 니 다.Kindeditor for WordPress 가 편집기 의 폭 을 고정 시 킨 것 같 습 니 다.브 라 우 저 를 줄 이면 편집기 가 크기 를 바 꾸 지 않 고 오른쪽 부분 텍스트 가 직접 가 려 지 는 것 을 발견 할 수 있 습 니 다.플러그 인 작성 자가 이 문 제 를 해결 하 기 를 바 랍 니 다.
    워드 프레스 에 대한 Kindeditor 를 다운로드

    좋은 웹페이지 즐겨찾기