phpとかWordPressってなんなのか、メモ。

あんまり触れないでも大丈夫かと思っていましたが、WordPressをカスタマイズするということは、phpを少しは勉強しないといけないということでした。自分の頭を整理するために、phpについて少し。

「もしこうならば、こうしろ」といった条件付きの命令ができる。

「トップページではこうして、カテゴリーページではこう、個別の商品紹介ページではこうしたい」というのや、「もし続きがあるなら、ページ番号出したい」、「現在表示されてるページの項目だけ、class="◯◯"を付けたい」というのはphpでできる。これができるおかげで、ページがたくさんあるページをグループ分けして制御できる。いちいち全部htmlを書かなくて済むようになる。

データベースから何かを引っ張ってくる。

これがあるおかげで、「ある商品の、写真のサムネイルをここに出して、価格とコピーをここに書く」×100回が3行で済む。

WordPressphpで出来ている。

WordPressで作っているサイトでは、サーバにhtmlが一枚も置いていないのがすごいと思う。例えば、ひとつのカメラの商品ページを表示しているときは、

  • 個別記事ページなので、single.phpをベースにして、その中で、
  • ヘッダーに画像がいらないので、画像なしで縦幅を小さくしてるheader2.phpを読み込んで、
  • パンくずリストを呼び出す、
  • 該当記事のIDを基準に、写真、コピー、スペック、在庫数、価格を出力して、
  • paypalボタンも読み込む
  • 関連記事を読み込んで表示、
  • タグも表示する
  • sidebar.php, footer.phpを読み込む

という処理をやって、htmlができるので、それをユーザに送ってあげてる。だから、このhtmlを1枚作る条件を作り上げるのが、WordPressをカスタマイズするということの実質。
材料だけを全部揃えて置いて、注文を受けてからあらかじめ決められた手順で料理作る感じ。だからスペースが最小限で済む。htmlとcssだけだったら、あらかじめ全部作って待ち構えないといけない。弁当屋な感じ。もしヘッダーとかの共通部分を変更しないといけなくなれば全部作り替えないといけない。

約1ヶ月。どこまで来たか、あとどれだけあるか。

WordPressを始めてから約1ヶ月。だんだんブログに書かなくなってしまいましたが、進めております。現状は、こんな感じまで気ました。

残りの作業、把握出来ているもの。
UPまで。

  • 商品のコピーと本文を書く
  • カテゴリーページの写真を作る
  • 商品の値段決める
  • ペイパルの認証
  • ペイパルのボタンを大量発行
  • 返品ポリシーとかトラブル回避系を詰める
  • フッター作る
  • twitter,facebook対策考える、実施する
  • メールアドレス作る
  • コンタクトフォーム付ける
  • もろもろの自動返信系のメールを作る
  • 決済完了後の画面を作る
  • 使い方の説明ページ作る
  • サーバにUPする

UPしてから。

その後

960 grid system/横幅を960pxにすると、超割り切れて、デザインしやすい。

960と言う数字が、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480で割り切れることを利用して、サイトの横幅を960pxにして、設計することを、960 グリッド システムというらしい。今回の僕のサイトは、なんと950pxでやってます。どおりで、割り切れなくて、困るわけだ。

次に作るサイトはこれで行こう。
参考サイト:
グリッドデザインをするときに役立つサイトやツール|hereticanthem.com

カスタムフィールドの呼び出し方

4時間くらいかかってしまった。。。やりたかったのは、よくあるECサイトの写真付き商品のリストを作るということ。上から順番に、写真、商品名、コピー、価格を表示させたかった。イメージはこんな感じ。

管理画面の「投稿」ページ内で<span class="copy">とかを付けて呼び出しを制御しようと思いましたが、いくら調べてもそれが出来なさそうで、WordPressフォーラムで聞いてみました。すると、いつもお世話になっているkzさんという方がヒントを!

copy, price はカスタムフィールドを使うと良いです。

ヒントを頂きました!!

というわけで、カスタムフィールドを勉強。公式サイトなど呼んでましたが全然できません。すると、こちらのサイト、technolog.jp様に素晴らしい解説が。ここを呼んで、カスタムフィールドとはいったい何なのかから大体把握できました。

カスタムフィールドに、例えば以下のような情報を入れていた場合に、

キー
copy The Best Camera Ever!!
Price $100.99

コピー部分を呼び出すには、テーマ内では、呼び出したい場所に

<?php echo get_post_meta(1, copy, true): ?>

と書くと、「The Best Camera Ever!!」という文字がブラウザにちゃんと表示されます。
WordPressループの中で呼び出したい場合はちょっと違って、

<?php echo get_post_meta($post->ID, copy, true); ?>

と書くことで、表示されます。これをindex.phpやarchive.php内の好きな場所(ただしループ内)に埋め込むと、商品を100個掲載しても同じように、ちゃんとその記事の価格やコピーを呼び出してくれます。
single.phpにも同じように書きこめば、もちろん表示されます。

single.php内とarchive.php内で同じクラスが指定されてしまうと思うので、上記のphpコード自体をスパンでくくって、CSSでデザイン指定してあげればOKになるはずです。まだやってないけど。

サイドバーの実例を集めた

サイドバーがどうも上手くいかない。そもそも全体のデザインをやったはやったものの、コーディングの最中にいろんな事情で実現できず、いろいろ変わった結果、元から考えていたサイドバーが合わなくなってきた。

考えていること

  • 当初よりも、白っぽいサイトになりそうです
  • 当初、座布団がたくさんありそうだったけど、線とフォントの大きさと色で整理する感じになる。(フォントの種類はまたあとで検討。今はgeorgia中心。細かい字はhelvetica)
  • サイドバーも真っ白にはしたくない
  • 全体がのっぺりしちゃうのを避けたい
  • 何かを敷くっていうのは重くなりすぎる
  • なんか、アクセントがあった方がいい。多分、色。今のところ赤、金、黒、灰しかない。
  • 色をかえるのは、文字か線か箱か、、、。

以下、参考サイトのサイドバー写真集。

Acne OnlineShop

  • フォントの種類、大きさを変えてる。
  • アスタリスクを使ってる。
  • 静かすぎる印象。

annascholz.com

  • 情報の切り分けの線はいいかも。

DKNY

  • インデントで整理。今回はパス。

White+Warren

  • 右揃え。ほぼナビゲーションだからちょっと違うか。

NINE WEST

  • 中央揃え!なんかいいかも。コンテンツ部分とはリズムが変わる感じか。
  • 赤いのもいい。もっと派手でもいい。

Hokuo Design .net

  • ラベルみたいなのと、グリッドで。これでもいいかも。

vesess.com

  • 好きだけど、軽い。

cynosura

なんかすごかったので蛇足で。何のサイトだかわかんない。

一通り見たけど決まんなかった。どうしよう。はやくしないと。

パンくずリストプラグイン

パンくずリストプラグインyoast breadcrumbの設定方法。

  • インストール、アクティブ化する
  • 個別記事ページに付けるならsingle.php内に。
  • デフォルトには、prev/nextのナビがあるので、それをコメントアウトして、以下のコードを記入。
<!-- pankuzu list -->
	<?php if (function_exists('yoast_breadcrumb')){
		yoast_breadcrumb('<p id="breadcrumb">','</p>');
	} ?>
  • 管理画面の設定→yoast_breadcrumbから各種設定。難しいことはない。

以上。

スライドショーjQueryプラグインをWordPressで使う!

スライドショーを入れるためにシンプルなjQueryプラグインを入れました。かなり時間がかかってしまいましたが、WordPressフォーラムで助けていただいてやっとこさ、実装できました。下記、メモがわりにWordPressjQueryを使う方法を。今回使ったのは、pikachooseですが、他のものでも同じような感じになる。以下の方法は、WordPressフォーラムで、kzさんという方が教えてくれました

  • WordPressには、もとからjQueryが入っているので、本体をダウンロードしたりサーバにアップする必要はない。
  • テーマフォルダ直下に「pikachoose」フォルダ作成。
  • そのフォルダに、画像達と pikachoose-min.js, styles.css をコピー。
  • header.php の wp_head() 直前に以下を追加。
wp_enqueue_style('pikachoose', get_bloginfo('template_url') . '/pikachoose/styles.css');
wp_enqueue_script('pikachoose', get_bloginfo('template_url') . '/pikachoose/pikachoose-min.js', array('jquery'), false, true);
  • footer.php の wp_footer() 直後に以下を追加。
<script language="javascript">
//<![CDATA[
jQuery(document).ready(function($){
  $("#pikame").PikaChoose();
  $("#pikame_user").PikaChoose({user_thumbs:true, show_prev_next:false});
});
//]]>
</script>
<||
-スライドショーを表示したい箇所に、以下を記入。
>||
<div class="pikachoose">
Basic example
	<ul id="pikame">
		<li><img src="1.jpg"/><span><a href="http://www.pikachoose.com">Now you can have links!</a></span></li>
		<li><img src="2.jpg"/><span>Or any html you want inside of captions!</span></li>
		<li><img src="3.jpg"/><span> Donec in ante. Donec pretium. </span></li>
		<li><img src="4.jpg"/><span> Aliquam erat volutpat. </span></li>
		<li><img src="5.jpg"/><span> In ornare, neque ut malesuada hendrerit.</span></li>
		<li><img src="6.jpg"/><span> Aliquam condimentum dolor sed elit. </span></li>
		<li><img src="7.jpg"/><span> Aliquam condimentum dolor sed elit.</span></li>
		<li><img src="8.jpg"/><span> Ut non magna at purus cursus facilisis.</span></li>
		<li><img src="9.jpg"/><span> Nunc semper dapibus erat. Nulla hendrerit.</span></li>
		<li><img src="10.jpg"/><span> Nunc semper dapibus erat. Nulla hendrerit.</span></li>
	</ul>
</div>

<div class="pikachoose">
User defined thumbs example
	<ul id="pikame_user">
		<li><img ref="1.jpg" src="user.jpg"/><span><a href="http://www.pikachoose.com">Now you can have links!</a></span></li>
		<li><img ref="2.jpg" src="user.jpg"/><span> Set custom thumbnails.</span></li>
		<li><img ref="3.jpg" src="user.jpg"/><span> Or let PikaChoose make them for you!. </span></li>
		<li><img ref="4.jpg" src="user.jpg"/><span> Integer id dolor a erat sagittis volutpat. </span></li>
		<li><img ref="5.jpg" src="user.jpg"/><span> Aliquam erat volutpat. </span></li>
</div>
  • 上記のコードの画像のパスをすべて

src="/pikachoose/1.jpg"
ref="/pikachoose/1.jpg"
のように変更(1.jpg 部分は各画像ファイル名に変える)。

これで、プラグインで設定されているデフォルトの形のスライドショーが出てくるので、あとはjavascriptcssのコードを読みながら、デバッグソフトを使いながら少しずつ希望の形とスピードに整えていく。<<