CKeditor를 워드프레스 댓글 편집기로 사용하기

워드프레스에서 CKeditor를 사용할 수 있도록 하는 CKEditor for WordPress와 "Ckeditor With Jquery"와 같은 플러그인이 있습니다. 이러한 플러그인을 사용하지 않고 직접 CKeditor를 다운로드하여 설치한 다음 댓글 시스템과 연결하는 것도 가능합니다. ("Ckeditor With Jquery" 플러그인을 jQuery를 통해 Textarea에 CKeditor를 연동시키는 플러그인입니다. 하지만 예상대로 작동하지 않았고 Ckeditor 버전도 3.6.5로 최신 버전과는 차이가 있습니다.)

CKeditor를 직접 설치하면 원하는 textarea에 쉽게 CKeditor를 사용할 수 있습니다. 그리고 Image Uploader 플러그인을 추가하면 이미지도 업로드가 가능하므로(유료 플러그인이 있음) KBoard 등의 플러그인의 textarea에 CKeditor를 연동시키면 그림 파일도 업로드가 가능할 것 같습니다. 이모티콘, 그림 파일 추가(URL), 표, 하이라이트(형광펜) 등 다양한 기능을 사용할 수 있고 코드 조각(코드 스니핏)도 텍스트 형식으로 삽입할 수 있습니다. 사실 CKeditor를 설치한 이유가 코드 스니핏 삽입 기능 때문입니다. 무심코 워드프레스 댓글에 PHP 코드를 추가하니 예상치 못한 오류가 발생한 적이 있습니다. 그래서 코드 스니핏 추가가 가능한 댓글 입력기를 찾다가 CKeditor를 알게 되었습니다. (비교적 최신 버전에서는 코드 스니핏 추가 기능을 지원합니다.)

CKEditor in WordPress Comments - full skin

CKeditor를 설치하는 방법:

  1. ckeditor.zip 파일을 다운로드합니다.
  2. ckeditor.zip 파일의 압축을 풉니다.
  3. 폴더째 사이트에 업로드합니다. 루트 디렉터리나 아무 디렉터리로 업로드해도 상관 없습니다.)
  4. CKeditor가 사용될 파일을 수정합니다.

ckeditor.zip 파일 다운로드

다음 사이트에서 최신 버전을 다운로드할 수 있습니다: http://ckeditor.com/download. 표준 패키지로 다운로드하면 무난합니다. (여기에 설치된 패키지는 Full Standard 버전입니다.)

Ckeditor에 사용할 플러그인을 선택하여 빌드하려면 다음 빌더 페이지에서 다운로드할 수 있습니다: http://ckeditor.com/builder.

comments.php 파일 수정

다음 두 코드를 comments.php 파일 맨 아래에 추가합니다:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

("ckeditor.js" 파일의 경로는 적절히 수정하시기 바랍니다.)

<script>

CKEDITOR.replace( 'comment' );
</script>

그리고 다음 코드를 함수 파일에 추가합니다:

add_filter( 'comment_form_field_comment', 'my_comment_form_field_comment' );

function my_comment_form_field_comment( $comment_field ) {

$comment_field = '<p class="comment-form-comment">' .
'<textarea id="comment" class="ckeditor" name="comment" cols="45" rows="8" aria-required="true"></textarea>' .
'</p>';
return $comment_field;
}

설치 방법은 이 페이지를 참고하시기 바랍니다.

Ckeditor에서 이미지 표시 문제

이렇게 설정하면 Ckeditor가 정상적으로 작동해야 하지만, 이미지가 제대로 표시되지 않거나 여러 가지 기능이 제대로 작동하지 않을 수 있습니다. 이는 워드프레스에서 특정 태그 사용을 사용하지 못하도록 차단하기 때문입니다. 이 문제를 해결하려면 kses.php(/wp-includes/ 폴더 아래에 있음)에서 다음과 같은 코드를 $allowedtags = array 아래에 추가합니다.

'img' => array ('alt' => array (), 'align' => array (), 'border' => array (), 'height' => array (), 'hspace' => array (), 'longdesc' => array (), 'vspace' => array (), 'src' => array ()),
'h1' => array(
'align' => true,
),
'h2' => array(
'align' => true,
),
'h3' => array(
'align' => true,
),
'pre' => array(
'width' => true,
),

다른 태그도 추가할 수 있습니다. 이제 정상적으로 작동할 것입니다. 스킨은 여러 가지가 있습니다. 마음에 드는 것으로 선택하여 다운로드 받으시기 바랍니다.
CKeditor skins

참고


5개 댓글

  1. 여기서 사용하시는 댓글은 어떤 플러그인인가요?

    워드프레스에서 회원 관리 + 댓글 회원을 연결하고 싶은데 조언 부탁드립니다!
    1. 안녕하세요?

      제 블로그를 방문해주셔서 감사합니다.
      댓글에 플러그인은 사용하지 않고요, Nicedit라는 HTML 에디터를 이용하고 있습니다.
      자세한 내용은 https://www.thewordcracker.com/basic/how-to-used-nicedit-in-wordpress/ 글을 참고해보세요.

      댓글은 회원만 가능하도록 설정할 수도 있고 누구나 달 수 있도록 허용할 수 있습니다.
      별도의 회원 관리 플러그인을 사용하면 회원 등록에서 관리까지 보다 체계적으로 할 수 있을 것 같은데요, WP-Members라는 유료 플러그인을 사용해도 되고, 아니면 유료 플러그인을 사용해도 됩니다. 그리고 회원 가입을 하도록 허용해야 한다는 법이 없으므로 이 사이트처럼 회원 가입은 받지 않고 댓글은 누구나 달 수 있도록 허용하는 것도 한 방법 같습니다. 어떤 용도로 사이트를 이용할 것인가를 생각하셔서 결정하시면 될 것 같습니다.

    2. 앞의 댓글에서 오류가 있었네요. WP-Members는 유료 플러그인이 아니라 무료 플러그인입니다. 참고하세요.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.