WordPressのエディタで出力されるタグを調べてみる

WordPressのエディタで出力されるタグを調べて、設定しておいた方がよいCSSを考えてみました。

サンプルコード

エディタで設定できるスタイルを一通り試してみて、ページ上に出力してみます。

PHP

<div class="wysiwyg">
<?php the_content(); ?>
</div>

エディタ用にスタイルを当てたかったので、.wysiwyg内に出力するようにしています。

それぞれ以下のようなタグで出力されました。

HTML

<div class="wysiwyg">
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
<pre>整形済みテキスト</pre>
<p><strong>太字</strong></p>
<p><em>イタリック</em></p>
<ul>
<li>番号なしリスト</li>
<li>番号なしリスト</li>
</ul>
<ol>
<li>番号付きリスト</li>
<li>番号付きリスト</li>
</ol>
<blockquote><p>引用</p></blockquote>
<p style="text-align: left;">左寄せ</p>
<p style="text-align: center;">中央揃え</p>
<p style="text-align: right;">右寄せ</p>
<p><a href="https://cly7796.net/blog/">リンク</a></p>
<p><span id="more-23"></span></p>
<p><del>打消し</del></p>
<hr />
<p><span style="color: #ff0000;">テキスト色1</span></p>
<p><span style="color: #ff6600;">テキスト色2</span></p>
<p><span style="color: #33cccc;">テキスト色3</span></p>
<p style="padding-left: 30px;">インデント</p>
<p><img class="alignnone size-thumbnail wp-image-24" src="" alt="" width="150" height="150" /></p>
<p><img class="size-thumbnail wp-image-25 alignleft" src="" alt="" width="150" height="150" /></p>
<p><img class="size-thumbnail wp-image-26 aligncenter" src="" alt="" width="150" height="150" /></p>
<p><img class="size-thumbnail wp-image-27 alignright" src="" alt="" width="150" height="150" /></p>
</div>

テキストの中央揃えや右寄せ、インデント、文字色の指定にはstyleが直接指定されるようです。
画像は配置なしで.alignnone、左寄せで.alignleft、中央揃えで.aligncenter、右寄せで.alignrightがclassにつきます。

実際に使用するスタイルなどによって変更は必要ですが、基本的には以下のような設定があるとよさそうです。

CSS

.wysiwyg:after {
	content: "";
	display: block;
	clear: both;
}
.wysiwyg h1 {
	font-size: 2.0em;
}
.wysiwyg h2 {
	font-size: 1.5em;
}
.wysiwyg h3 {
	font-size: 1.17em;
}
.wysiwyg h4 {
	font-size: 1.0em;
}
.wysiwyg h5 {
	font-size: 0.83em;
}
.wysiwyg h6 {
	font-size: 0.67em;
}
.wysiwyg pre {
	display: block;
	font-family: Consolas, Monaco, monospace;
}
.wysiwyg strong {
	font-weight: bold;
}
.wysiwyg em {
	font-style: italic;
}
.wysiwyg ul {
	list-style: outside disc;
	margin-left: 2em;
}
.wysiwyg ol {
	list-style: outside decimal;
	margin-left: 2em;
}
.wysiwyg blockquote {
	display: block;
	margin: 1em 40px;
}
.wysiwyg a {
	color: #00f;
}
.wysiwyg del {
	text-decoration: line-through;
}
.wysiwyg hr {
	display: block;
	border: none;
	border-top: #9a9a9a 1px solid;
	border-bottom: #eeeeee 1px solid;
}
.wysiwyg .alignright {
	float: right;
	margin-left: 1em;
}
.wysiwyg .alignleft {
	float: left;
	margin-right: 1em;
}
.wysiwyg .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

画像の左寄せや右寄せでfloatを使うので、全体を囲う.wysiwygにclearfixを適用しています。