初めてWordPressを使ってみようという人の為の予備知識

今回は WordPress そのものについて、知ってる範囲でまとめてみました。WordPress って何？という漠然とした疑問を持ってる人、または、初めて WordPress を使う！という人向けの記事です。

1. WordPress って何？

そもそも WordPress って何でしょう？Wikipedia で、WordPress を検索してみると、以下のように載っています。

WordPress（ワードプレス）はデータベース管理システムにMySQLを利用し、PHPで書かれたオープンソースのブログソフトウェアである。b2/cafelogというソフトウェアの後継として開発された。GNU General Public License（GPL）の下で配布されている。

Wikipedia

となっています。でも、初めての人にはちょっと分かりにくいのかなーと …。もっと平たく言うとこんな感じでしょうか …。

WordPress は、MySQL（まいえすきゅーえる）というデータベース（データを保管するもの）を使ったオープンソースのブログソフトウェアです。WordPress 自体は、PHP（ぴーえいちぴー）というプログラム言語で書かれています。ライセンスはGPL。GPLライセンスとは、使用者に対して、コードを含めた再配布や、改変を認めているライセンスです。

WordPress は、PHP（プログラム言語） + MySQL（データベース）で作られたブログソフトウェアです。間違いありません！インターネットを検索すると、みんなのブログやツイッターなどで、WordPress についていろいろ見かけると思います。でも、Wikipedia では上記のように掲載されていますが、WordPress には大きく分けてふたつあるかも …。

つづく

webデザインレシピ

http://webdesignrecipes.com/first-time-wordpress/ 　より

CSSは分かるけど jQuery は苦手 … という人へ part3

3. いろんなセレクタの書き方

前述した通り、jQuery で指定できるセレクタは、CSS のセレクタで馴染みのあるものばかりです。jQuery には CSS のセレクタエンジンがついてるので、当然と言えば当然ですけど … Javascript が苦手な私にとっては、とっても嬉しい仕様です。

セレクタの例

• $(“#navi”) … idセレクタ
• $(“.navi”) … クラスセレクタ
• $(“a img”) … 子孫セレクタ
• $(“p.warnig, p.attention”) … グループセレクタ

みんな CSS で馴染みのあるものばかりですねー。これならそんなに難しくなさそうです。標準の Javascript では、getElementsByTagName や、getElementById で取得していたセレクタも、上記のように簡単に指定することができます。

他にも CSS で利用しているセレクタがたくさん使えます。IE6では使用できなかった、隣接セレクタや属性セレクタも、jQuery では利用できるんです。

セレクタの例

• $(“ul>li”) … チャイルドセレクタ
• $(“ul+li”) … 隣接セレクタ
• $(“h3~h3″) … 間接セレクタ
• $(“a[target='_blank']“) … 属性セレクタ

3.1. フィルタ

ざーっとセレクタを見てきましたけど、要素をさらに簡単に指定する為の、フィルタという仕組みも jQuery では用意されています。便利ですねー。

フィルタの例

• $(“li:first”) … 一番始めの要素
  （この場合は <li> タグが複数、たくさんある … と仮定しています。）
• $(“li:last”) … 一番最後の要素
• $(“li:even”) … 偶数番目の要素
• $(“li:odd”) … 奇数番目の要素

一番最初のリストだけボーダートップをなくすとか、奇数番目の li タグの背景色だけ変える … など、アイデア次第で CSS 的な使い方もできちゃいます。IE6でもOKなので、jQueryを使ってクロスブラウザ … という使いかもありなんですねー。もちろんフィルタはもっとたくさんありますので、下記リンクを参照してみてください！

jQuery 日本語リファレンス：セレクタ、フィルタ
jQuery 日本語リファレンス … jQuery 1.4.0 以降更新されてませんが、セレクタは参考になると思います！

Selectors jQuery API

webデザインレシピ

http://webdesignrecipes.com/jquery-beginners-guide-for-web-design/ 　より

CSSは分かるけど jQuery は苦手 … という人へ part2

2. CSSと似ている jQuery の書き方

それでは実際に、jQuery のコードを見てみます。下記のコードは先ほど紹介した、1行のコードと基本的には同じです。

jQuery

1.	$("p").css( "color", "red" );

では、コードを分解して見てみましょう！まず (“p”) の部分は、要素を指定するところ。上記のコードでは、HTML 上の全ての <p>タグが対象となります。CSS でも要素を指定して装飾していきますよね。そんな感覚で、まずは対象の要素を指定します。CSS のセレクタと感覚は同じです！

それに続く .css(“color”, “red”) の部分では、先ほど指定した要素に対して、何らかの処理を加える部分です。メソッド（と引数）と呼ばれています。要素に対して、何かの処理を加える。この書き方は、CSS と似ていますよね！

なので CSS を書くのに慣れている Webデザイナーさんなら、ちょっと親しみやすいんじゃないかなーと思います。

2.1. jQuery の基本的な書き方

$(“p”).css( “color”, “red” );

$(“セレクタ”) . メソッド(パラメータ);

jQuery の基本的な書き方は、セレクタを指定して、メソッドをドット（.）でつなげます。メソッドにはパラメータ（引数）を記述する事もあります。これが jQuery のコードの書き方の基本形です。上記のコードでは、セレクタに <p> タグを使いましたが、セレクタで指定できる書き方は、CSS で馴染みのあるものばかりです！

つづく

webデザインレシピ

http://webdesignrecipes.com/jquery-beginners-guide-for-web-design/ 　より