ホーム >  WordPress >  【WordPress】WordPressの特徴を把握する【下準備】


Posted:2014/06/16 6:00:19 PM|Category : WordPress

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


 前回、WordPressの下準備をする際のポイントは以下のことであると記述しました。

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

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

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

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

目次

1.テンプレートは融通が利かない
2.デフォルトウィジェットはマークアップできない
3.フロントエンドは実装前に完成させる

WordPressの特徴

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

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

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

wordpress072

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

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

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

WordPressの場合の対処法

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

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

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

対処法①

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

wordpress073

対処法②

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

wordpress074

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

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

対処法

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

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

<aside class=”widget widget_tag_cloud” id=”tag_cloud-2″>
<h3 class=”widget-title”>タグクラウド</h3>
<div class=”tagcloud”>
<a href=”#” class=”tag_link-7″ title=”2件のトピック” style=”font-size:
22pt;”>HELLO</a>
</div>
10  </aside>

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

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

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

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

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

サイトが崩れる原因

1.HTML/CSSのコーディングが不正

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

2.JavaScriptのコーディングが不正

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

3.テンプレート組み込みコーディング(phpなど)が不正

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

4.入力データの異常

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

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


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告