WEBのお勉強とその他趣味的な感じで

まずは、コメントツールバーの内容を整理してみましょう。
投稿・コメントビジュアルエディタ（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;
}

以上が、一連の変更内容です。

また時間があったら、絵文字追加してみようかと思っています。

« 続きを隠す