hijiriworld Web

WordPressには自動整形機能があるのはご存知だと思います。
エディタから入力した値はpタグやbrタグなどで自動整形されて出力されます。

“自動整形をさせたくない場合はthe_contentにフックしてwpautopを取り除けばいいじゃん”とかいう話ではありません。

エディタ以外にも、ファイルアップロードボタンで記事に挿入した画像にはスタイルを定義するクラスが付加されて出力されます。

これら「WordPressのテーマ作成時には必ず指定しておきたいネイティブCSS」について考察します。

エディタ

まずビジュアルエディタの使い方。

さて、上記のように入力した値は以下のような構造で出力されます。

<p>あああ</p>
<p>
	いいい
	<br />
	ううう
</p>

ビジュアルエディタ上での見た目と出力された見た目を同じにするため、すなわち、段落としてのスタイルを定義するならば、pタグのスタイルは以下のようになるでしょう。

> テーマ/style.css

p {
	display: block;
	margin: 1em 0;
}

TinyMCE

ビジュアルエディタのTinyMCEも考慮するべきでしょう。

それぞれのボタンで挿入されるタグのスタイルも指定しておきましょう。
最初にリセットCSSをしない場合は不要です。

strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 40px;
	-webkit-margin-end: 40px;
}

※管理画面ではdelタグに対して color: red; が指定されていますが、これはどうかなと思います。ここは、管理画面のスタイルシートをハックした方がいいでしょう。

画像

メディアアップロードボタンから画像をアップロードする場合、「配置」「サイズ」の指定によって、imgタグに自動的にクラスが付加されます。

すべての画像

配置

これらのクラスに対するスタイル定義は必須です。

.aligncenter {
	display: block;
	margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }

サイズ

選択したサイズに応じたクラスが付加されますが、同時にwidth属性とheight属性も出力されるので、サイズだけのスタイル指定は不要です。

<img class="aligncenter size-medium wp-image-130" title="danbo" src="..." alt="" width="300" height="200">

リンクURL

リンクURLで添付ファイル投稿URLを指定した場合、リンク先の画像では、wp-image-{ID}クラスの替わりに、attachment-{size}クラスが付加されます。

リキッドレイアウトやレスポンシブデザインを考慮するならば、投稿記事内のすべての画像、および、添付ファイル投稿URLの画像に対して以下スタイルを定義するのが良さそうです。

img[class*="wp-image-"],
img[class*="attachment-"] {
	max-width: 100%;
	height: auto;
}

clearfixの必要性

これだけではまだ不十分です。
記事に挿入した画像の配置を、右寄せもしくは左寄せにした場合、floatが設定されます。
そうすると、以下のように親要素であるpタグの高さが確保されなくなってしまいます。

だからと言って、pタグにclearfixのスタイルを定義してしまうと、後続の要素が回り込まなくなってしまいます。

ということで、最後のネイティブCSSは、the_contentなどの親要素に対してclearfixのスタイルを定義するということになりそうです。

clearfixのスタイル定義は以下の通り

.clearfix {
	overflow: hidden;
	zoom: 1;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

マークアップ例を示すとこうなります↓

<article>
	<?php if (have_posts()) : ?>
		<?php while (have_posts()) : the_post(); ?>
			<h2><?php the_title(); ?></h2>
			<div class="clearfix"><?php the_content(); ?></div>
		<?php endwhile; ?>
	<?php else : ?>
		Not Found
	<?php endif; ?>
</article>

まとめ

テーマ作成時には必ず指定しておきたいWordPressのネイティブCSS

> テーマ/style.css

/* editor */

p {
	display: block;
	margin: 1em 0;
}
strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 40px;
	-webkit-margin-end: 40px;
}

/* img */

.aligncenter {
	display: block;
	margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }

img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto;
	max-width: 100%;
}

/* clearfix */

.clearfix {
	overflow: hidden;
	zoom: 1;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

おまけ

私がテーマを作成する際には、以下の構造に従ってstyle.cssを記述するようにしています。

@charset "utf-8";

/* Theme info */

/* Reset CSS */

/* WordPress Native Styles */

/* OOCSS */

/* Theme Styles */