CoComina– Web design and Programing –

alt属性に入れるテキストは明確にする

僕が見た中でこういうのを見たことがあります。

		<img src="example.jpg" alt="">
		

alt属性が空欄ですね。
このままではalt属性に何を入れたらいいのかわかりません。

サイト名なのか？ 記事のタイトルなのか？ はたまた何か指定のテキストがあるのか？ などなど、迷ってしまいます。

WordPress（ダッシュボード）で画像をアップするとその画像に紐付ける情報を入力する項目は複数あります（下記画像参照）

もしもこの中からalt属性に表示したいテキストがあるのなら下記のように明確に記載しておくと親切かと思います。

		<img src="example.jpg" alt="ここにサイト名が入ります">
		<img src="example.jpg" alt="画像のキャプションを入れてください">
		

下記の様な例はちょっと混乱するかもしれないので避けた方がいいかと思います。

		<img src="example.jpg" alt="キャプション">
		

		<img src="example.jpg" alt="タイトル">
		

キャプションがダッシュボードから入力したキャプションのことを指してるのか？
タイトルがサイト名のことを指してるのか？記事名のことを指してるのか？などプチ混乱しちゃいます。

アイキャッチ画像がある時と無い時を想定しておく

この記事でも使用していますがWordpressではアイキャッチ画像と言って「その記事のテーマを表現した画像」を記事毎に登録できる機能があります。

アイキャッチ画像は主に下記の3タイプのページで表示するケースがよくあります。

• Topページ（アイキャッチ画像付きで最新記事をいくつか表示するパターン）
• アーカイブページ（記事の一覧がズラーッと並んだ時に表示するパターン）
• 記事詳細ページ（記事詳細ページの上部に表示）

通常はアイキャッチ画像を表示するWordpressのテンプレートタグでアイキャッチ画像を表示させます。
ただ、記事によってはアイキャッチ画像が不要な場合がありますよね。

アイキャッチ画像がありきの考えだけでコーディングをすると、アイキャッチ画像が不要・設定忘れの場合にアイキャッチを表示するHTMLが出力されず抜け落ちた感じになってしまいます
（下記画像参考）

■アイキャッチがある状態

■アイキャッチが無い状態

はい。アイキャッチの部分がぽっかり空いてしまっていますね。
WordPressだけでなく動的サイトの場合、「常に同じHTMLを表示するわけでは無い」ということを頭に入れておく必要があります。

主にこの状態を防ぐ方法としては下記の2通りのやり方があります。

• アイキャッチ画像が登録されてない場合は代替画像を表示する（代替画像を用意する必要あり）
• アイキャッチ画像がある場合と無い場合の両方を想定してコーディングしておく

主にこの方法でカバーしきれます。クライアントに納品後はクライアント自身が更新するケースが主だと思いますので様々なことを想定して破綻しないデザインやコーディングを行うことが大切ですね。

カスタムメニューのaタグにはクラスをつけない

カスタムメニューとは？

WordPressでは管理画面からメニュー（ナビゲーション）を作成・設定することができます。

設定したカスタムメニューはWordpressのテンプレートタグwp_nav_menuにて出力するのですが、
下記のようなHTMLで出力されます。

		<div class="menu-menu-container">
			<ul id="menu-menu-1" class="menu">
				<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="#">Home</a></li>
				<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="#">Category</a></li>
				<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="#">Page</a></li>
			</ul>
		</div>
		

自動的にulやliが出力されていろんなクラスがついてますね。
WordPressのデフォルトの機能でカスタムメニューのliタグに管理画面で個別にクラスを付与することができますが、
aタグには個別にクラスを付与することはできません。

（カスタムすればいけるかもしれませんが僕はご存知ありませぬ）

なので、僕はaタグに個別にクラスが設定されている場合は、liにクラスを設定し、調整してもらいます。

動的部分には必ずコメントを残す

記事の一覧の表示させる時などは、同じHTMLをコピペして記述しますよね。Wordpressの様な動的にHTMLを出力する場合、複数回にわたって同じHTMLを表示する場合はループと言って同じ処理を繰り返すことができます。

例えば、下記の様な記事の一覧を表示するHTMLがあったとします（クラス名などに意味はありません）

	<div class="article-box">
		<a href="#">
			<p><span class="mark">NEW</span></p>
			<p><img src="example" alt="ここには記事のタイトルが入る"></p>
			<h2>ここに記事のタイトルを表示</h2>
			<p>記事本文の抜粋を90文字表示</p>
		</a>
	</div>
	

HTMLを見慣れている人にはどこからどこまでがコピペされてるかなどすぐにわかりますが、下記の様に一言コメントを添えてあげると親切です。

	<!-- 記事を30件表示 -->
	<!-- ここから1件分の記事始まり -->
	<div class="article-box">
		<a href="#">
			<p><span class="mark">NEW</span></p><!-- 最新の記事にだけNEWを表示 -->
			<p><img src="example" alt="ここには記事のタイトルが入る"></p>
			<h2>ここに記事のタイトルを表示</h2><!-- 文字数は20文字で区切って...を表示 -->
			<p>記事本文の抜粋を90文字表示</p><!-- 抜粋文字は90文字で区切って...を表示 -->
		</a>
	</div>
	<!-- ここで1件分の記事終わり -->
	

など、コメントを添えてあげるとすぐにどの部分が動的処理が必要なのかがすぐにわかります。

エラーメッセージは表示しておく

どのwebサイトにも必ずと言っていいほどお問い合わせフォームがあります。
最近ではjavascript（jQuery）で入力された値が条件にマッチしているかをチェックするのが主ですが、ここではPHPでチェックする場合に絞っています（JSでチェックするならWordpress関係ないので）

その際に、必須項目に入力されてない時や正しい入力形式でない時などにエラーメッセージを表示してユーザーに知らせます。
エラーメッセージは通常は表示されておらず、入力された値が指定した条件を満たしてない時だけ表示します。

つまり、条件によって表示・非表示が切り替わるということです。

■エラーメッセージが無い初期の状態

■エラーメッセージがある状態

この時にエラーメッセージは初めから表示した状態でコーディングしておきましょう。
それにより、エラーメッセージを表示したらレイアウトが破綻するという事態を事前に防ぐことができます。