CKEditorを導入したが、コメントで使用するには、
Wordpressではセキュリティの関係で制限をしてあるため、
使用できるＨＴＭＬタグを調整する必要があります。
CKEditorについては⇒投稿・コメントビジュアルエディタ（CKEditor）
その前に、CKEditorの使い方で忘れそうなのでメモ
改行するするとき、
Enterのみ：HTMLタグ「p」となり、少し間の開いた改行になる。
Shift+Enter：HTMLタグ「br 」となり改行、間が開かない。
WordPressのコメントのテキストボックスの下部には、
「次のHTMLタグと属性が使えます・・・」
と記載があります。デフォルトのままだと、この制限のため、
絵文字や文字色の変更が出来ません。
この制限を調整する方法をご紹介します。
何でも解除してしまうのも、問題があるので
良く考えて調整しましょう。
まずは、コメントツールバーの内容を整理してみましょう。
投稿・コメントビジュアルエディタ（CKEditor）で書いたのですが、
「ckeditor.config.js」を変更します。
このサイトの場合は、「記事投稿」、「ページ作成」の場合は「Full」
コメントの場合は、「WordpressFull」にしてあります。
「ckeditor.config.js」内の「config.toolbar_WordpressFull」の内容を変更します。
設定変更する前のコメントツールバーと照らし合わせながら、作業をすれば
なんとなく分かります。
参考までに当サイトは
// WordPress full toolbar config.toolbar_WordpressFull = [ ['Source'], ['Undo','Redo'], ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], '/', ['Link','Unlink'], ['Font','FontSize'], ['TextColor','BGColor'], ['Smiley','HorizontalRule','SpecialChar'], ['Maximize', 'ShowBlocks'] ];
上から、
ソース、ビジュアルエディタの切り替えボタン
元に戻す、やり直し
太字、斜体、下線、打ち消し線、[区切り線]、添え字、上付き文字
段落番号、箇条書き、[区切り線]、インデント解除、インデント、ブロック引用
[改行]
リンク挿入/編集、リンク削除
フォント、サイズ
テキスト色、背景色
絵文字、横罫線、特殊文字挿入
最大化、ブロック表示
テーマをword2003にして、比較的wordっぽくし、
良く使いそうなものを選別しました。
また、セキュリティ上まずそうなもの（objectタグ、フラッシュなど）や、
ＨＴＭＬ構文上無秩序に使ってほしくないもの（見出し文字など）は、
未使用としました。
使用しているHTMLタグ,属性は、
太字：strong
斜体：em
下線：u
打ち消し線：strike
添え字：sub
上付き文字：sup
段落番号：ol,li
箇条書き：ul,li
インデント解除、インデント：p 属性：style（margin-left: 40px（この数字を変化）)
ブロック引用：blockquote
リンク挿入/編集、リンク削除：a, 属性：href, target, title, relなど
フォント：span 属性：style（font-family）
サイズ：span 属性：style（font-size）
テキスト色：span 属性：style（color）
背景色：span 属性：style（background-color）
絵文字：img 属性：alt, height, src, widthなど
横罫線：hr
以上のHTMLタグ、属性を使えるように変更する。
その方法は、
wp-includes内のkses.phpを書き換える
$allowedtagsの内容で、コメント内で使用できるHTMLタグ、属性を制限しているようです。
$allowedposttagsが、投稿で使えるタグのようですので、これを参考にしながら
追加していきます。もともとあって、コメントアウトしてあるものもありました。
参考までの当サイトの場合は
/**
* Kses allowed HTML elements.
*
* @global array $allowedtags
* @since 1.0.0
*/
$allowedtags = array(
'a' => array(
'href' => array (),
'target' => array (),
'rel' => array (),
'title' => array ()),
'abbr' => array(
'title' => array ()),
'acronym' => array(
'title' => array ()),
'b' => array(),
'blockquote' => array(
'cite' => array ()),
'br' => array(),
'cite' => array (),
'code' => array(),
'del' => array(
'datetime' => array ()),
// 'dd' => array(),
// 'dl' => array(),
// 'dt' => array(),
'em' => array (), 'i' => array (),
// 'ins' => array('datetime' => array(), 'cite' => array()),
'li' => array(),
'ol' => array(),
'p' => array(
'class' => array (),
'align' => array (),
'dir' => array(),
'lang' => array(),
'style' => array ()),
'span' => array (
'class' => array (),
'dir' => array (),
'align' => array (),
'lang' => array (),
'style' => array (),
'title' => array ()),
'q' => array(
'cite' => array ()),
'strike' => array(),
'strong' => array(),
'sub' => array(),
'sup' => array(),
'u' => array(),
'ul' => array(),
'hr' => array (
'align' => array (),
'class' => array (),
'noshade' => array (),
'size' => array (),
'width' => array ()),
'img' => array(
'alt' => array (),
'align' => array (),
'border' => array (),
'class' => array (),
'height' => array (),
'hspace' => array (),
'longdesc' => array (),
'vspace' => array (),
'src' => array (),
'style' => array (),
'width' => array ()),
);
以上で、コメント欄のカスタマイズは終了です。
ただ、このままでは、
「次のHTMLタグと属性が使えます・・・」
の文字がたくさん増えてしまいとても邪魔です。
ここに文字を出さなくしてもいいのですが、確認も出来なくなるので、
CSSで隠すことにしました。
方法は、使っているCSS（テーマのフォルダにあるstyle.cssなど）に
下記の項目を追加
.form-allowed-tags {
display:none;
}
以上が、一連の変更内容です。
また時間があったら、絵文字追加してみようかと思っています。
