【WordPress】WordPressの特徴を把握する【下準備】

　・WordPressで利用されることを意識する。

　・デザインとコーディングをあらかじめWordPressとの相性を考える。

　・トラブル回避するため、実装前に完成度を高める。

　よいサイトを作るには、WordPressの特徴を理解し、相性のいいHTML/CSSをコーディングする必要があります。
では特徴とは一体何でしょうか？

目次

WordPressの特徴

1.テンプレートは融通が利かない

　静的WEBサイトでは、ヘッダーやフッターなどのサイト共通部分を全て管理するのに対し、WordPressは本文やタイトルなど変化のある部分だけを管理します。しかし、WordPressはサイトの部品をテンプレート化するため文字数がオーバーした場合の細かい対処がしずらくなりました。

　例えば、記事のタイトル文字が1行に収まらなかった場合装飾からはみ出てしまいます。

静的WEBサイトの場合の対処法

　静的WEBサイトであれば、単純に文字サイズを小さくして対処します。

<h1 class=”title-size”>ウェブのお仕事の管理者が贈る・・・</h1>

WordPressの場合の対処法

　WordPressの場合は、太字の部分のマークアップ言語がタイトルとして記事へ自動的に挿入されます。

<h1 class=”title-size”> <?php the_title(); ?> </h1>

これでは、文字サイズを変えるための要素を加えることはできません。

対処法①

　タイトル入力欄にHTMLタグを入れる方法があります。ただし、どこからが投稿タイトルなのか煩雑になってしまいます。

対処法②

　タイトルが長くて開業しても問題にないデザインを予め作ります。文字量に依存する装飾を付けないことが一番です。

2.デフォルトウィジェットはマークアップできない

　デフォルトウィジェットとは、最初からWordPressに備わっているブログパーツのことです。例えば、サイト内検索やタグクラウドやカレンダーです。このデフォルトウィジェットは、WordPressのコアファイルにマークアップ（記述）されているため、なかなかカスタマイズできません。

対処法

　ウィジェットも結局はHTMLです。よって、最初からそのHTML（ウィジェット）が含まれることを前提にHTML/CSSを作成します。そのために、ウィジェットがどのようなコーディングで作られているか把握する必要あります。

デフォルトウィジェット「タグクラウド」が出力するHTML

　太字の部分が出力されることが決まっているHTMLセットです。意識してCSSを調整すれば、ある程度意図通りにデザインできます。HTMLコーディングを意のままにすることは困難ですが、ウィジェットの出力を把握すれば建設的に開発を進めることができます。

3.フロントエンドは実装前に完成させる

　「フロントエンドを完成させる」とは、HTMLで静的なサイトを作って動作確認することです。フロントエンドの完成度が低いままPHPファイルなどのテンプレートを組み込んでしまうと修正が大変です。

フロントエンド：HTML、CSS、JavaScript

　完成度が低いと、サイドメニューなどが崩れてしまいます。例えば、サイトが崩れてしまう場合以下のような考えられます。

サイトが崩れる原因

１．HTML/CSSのコーディングが不正

　この時点で正しくブラウザが表示されているか注意しましょう。

２．JavaScriptのコーディングが不正

　ミスの内容として、メニュー表示のスクリプト異常が原因として多いです。

３．テンプレート組み込みコーディング（phpなど）が不正

　WordPress関数の記述ミスやタグの挿入漏れなどの組み込みミスが原因として多いです。

４．入力データの異常

　本文が無い、または参照データが管理できていない場合があります。

　フロントエンドさえ完成させれば、原因１と２の可能性はゼロに等しくなります。３と４に絞って調べられる状態にしましょう。