タグ: Wordpress

WordPressってなに？
全然違うお仕事してる友人から聞かれます。

制作者向けのWordPressのお話って、ちょっと調べるとわかりやすいまとめがわんさかあって毎日毎日感謝でいっぱいです。
で、制作者のためのお話しではなく、WordPressってなんなのか、WordPressでどんなサイトが作れて、他のWebサイトとどんな違いがあるのか、
ディレクション経験0の私が、「Web制作者ではない」人向けに、上手にわかりやすく説明できるようになりたい、、、と思い、まだまだ勉強中で悪戦苦闘してる身ですが、考えてみました。

「WordPressって最近よく耳にするので、WordPress勉強始めるぞっ！でもWordPressってなんじゃいっ！」って初心者の制作者様にもちょっと参考になりますように。。。

目次

• 1、ホームページの更新作業について
• 2、CMSとは
• 3、WordPressで、サイトを更新する方法
• 4、WordPressでの更新コンテンツ具体例
• 5、まとめ

1、ホームページの更新作業について

最近私のまわりでも、会社のホームページほしい、とか、
自分で作ってるんだけど、なかなか更新していくのがむずかしいよう、という話をちょろちょろ聞きます。

例えばこういうサイト。
どシンプルなコーポレートサイトを例に。

この中の、この部分。

最近のWebサイトってTOPページにこういう表示、良くありますよね。
このNews&Topicsを更新したい！なんてあると思います。

方法の一つとしては、
更新作業全部、制作会社に任せちゃうカタチにする。
このときのメリットとしては、依頼するだけでめんどっちい作業自体は全部お任せできます。
デメリットは、依頼する会社にもよると思いますが、
制作会社に支払う更新費の問題はもちろん、更新までに時間がかかったり、やっぱり修正、ってなったときに同じ作業を踏むのにいちいち依頼かけるのがめんどうだったり、など。

他の方法は、自分で更新しちゃう。
ただ、更新するにはHTMLをいじらなきゃいけないので、まずその為に、HTMLとサーバーにUPして公開するための最低限の知識なんかが必要です。

一般的な例として上でご紹介したようなサイトの「News&Topicsを更新する作業」を、ざっと確認してみます！

①まずは追加、修正ファイルを確認！！

Webサイトを閲覧する際、そのサイトがそれぞれどういう構成になってるか、全部で何ページあるのかって、見てる側は、いちいち気にしないですよねぇ。
でも制作する側、更新していく側からする、と全体のページ数、それぞれのページのつながり方はとっても重要だったりします

この「News&Topics」という項目に限定して言うと、このサイトでは、
まずトップページに最新5件を表示しています。

なので、まずはトップページのNews&Topicsに公開したい情報を追加します。
そのかわり、一番下の古い情報を削除、、、とかそういった作業が必要になります。

また、「最新情報」の一覧ページがある場合は、ここも忘れずに。
今回の場合、グローバルナビの「最新情報」ボタンをクリックすると、
過去の更新情報の一覧が出てくる作りになってます。

ここのページも一番上に新しい情報を追加します。

あと、情報の詳細ページです。
タイトルだけでなく、なかみ（詳細）が表示されるページです。
これは「ページの修正」ではなく「ページを追加」しなきゃですね。

そして、この詳細ページはいままでに更新した、そしてこれから更新していく、各情報ごとに1ページずつあるはずですので、どんどんどんどん増えていく感じになります。

以上、このサイトではNews&Topicsに1件の情報を追加するのに3つのHTMLファイルをいじることになります。

②HTMLをいじる

HTMLってこんな感じです。
先ほどのコーポレートサイトのトップページのNews&Topicsの部分のみのHTMLの記述。

<div id="News">
<h2><img src="/images/topics.gif" alt="News＆Topics" width="600" height="35" /></h2>
<div id="NewsBox">
<dl class="NewsStyle1">
<dt><span>トピックス</span>2010.10.09</dt>
<dd><a href="/news/sample1.html">サンプルタイトル①サンプルタイトル①サンプルタイトル①</a></dd>
</dl>
<dl class="NewsStyle2">
<dt><span>ニュース</span>2010.10.09</dt>
<dd><a href="/news/sample2.html">サンプルタイトル②サンプルタイトル②サンプルタイトル②</a></dd>
</dl>
<dl class="NewsStyle1">
<dt><span>レポート</span>2010.10.09</dt>
<dd><a href="/news/sample3.html">サンプルタイトル③サンプルタイトル③サンプルタイトル③</a></dd>
</dl>
<dl class="NewsStyle2">
<dt><span>ニュース</span>2010.10.09</dt>
<dd><a href="/news/sample4.html">サンプルタイトル④サンプルタイトル④サンプルタイトル④</a></dd>
</dl>
<dl class="NewsStyle1">
<dt><span>レポート</span>2010.10.09</dt>
<dd><a href="/news/sample5.html">サンプルタイトル⑤サンプルタイトル⑤サンプルタイトル⑤</a></dd>
</dl>
</div>
</div>

これ、だいぶシンプルなソースで、htmlの知識がある方にとっては、なんてことないと思うのですが、わからない方にとっては、おえーー(´ж｀;)ｩって感じなんじゃないかと思います。
この該当部分を追加、修正、削除しなきゃいけません。

③サーバーにUPする

トップページ（修正）、一覧ページ（修正）、詳細ページ（追加）、3つのページのhtmlファイルを、サーバーにUPしなきゃいけません。
サーバーってなに？。。。
えっと、扱う機能やサービスに応じてさまざまな種類があるのですが、ここでいうWebサーバーは、Webサイトのデータ（HTMLとか画像とか他ファイル）を、なんだかごにょごにょしてくれて、世界中から閲覧できる形にしてくれるんです。

よくイメージできなかったらごめんなさい。
とにかくHTMLいじっただけで終わりじゃなくて、サーバーにファイルを送る作業も必要になりますよ、という話です。
その為にはまた専用のソフトを準備して、、、というゴタゴタもあります。

ニュースをひとつ更新するだけで、HTMLやサーバーに関する知識が全く無い方だとなかなか頭の痛い作業になるかと思います。
また、ちょっとHTMLの構文をコピペミスで間違えちゃったりすると、激しくレイアウトが崩れたり、リンクなどの機能が効かなくなったりして、「もう、こわいよぅ。更新するのイヤだよぅ。」という状態になった経験がある方もきっとたくさんいらっしゃるかと・・・。
3年前の更新情報に「New!」アイコンが付いてるような、うそつきーー！！ってホームページになってしまうこともしばしばです。

2、CMSとは

そんなときに便利なのがCMS（コンテンツマネージメントシステム）なんですが、
CMSっていうのは乱暴にまとめるてしまうと、HTMLとかサーバーの知識がなくても、ホームページのコンテンツを楽に追加修正できるシステムのこと。
そのCMSの中でもたくさん種類あって、有名どころでは
EC機能に特化した国産のオープンソース、EC-CUBE（イーシーキューブ）とか、コミュニティ系が得意なXOOPSとか、
ブログを構築するのに便利、とされてるMovable Type、などなどなど。
以前勤めてた会社では自社で開発したCMSを扱ってましたし、世の中にはいろんな種類のCMSがあるようです。

なんだかたっっくさんいろいろあって、その機能とか規模とか肝心なコスト、いろんな要素を吟味した上で選択することができるわけですが、WordPressはそんなCMSのうちのひとつです。

って言ってもどうやって簡単にホームページを更新できるのーーーと、あんまり想像つかないと思うので少し例を。(全部架空のサイトです。)

3、WordPressで、サイトを更新する方法

さっきのサンプルコーポレートサイトの管理画面、そのサイトに適した形で管理画面を作ることができます。

これ、WordPressの管理画面

WordPressで更新する手順はこんな感じ

画面の左っ側にずらりとナビゲーションが並んでるので、
「新規追加」をクリックすると入力画面が出てきます。
そこにタイトル、本文を入力して「更新」ボタンをポチすると、更新完了！

おーー！！なんか簡単！じゃないですか！？？
管理画面からこうやって投稿するだけで『News&Topics』のトップページ、一覧ページ、詳細ページ、自動的に更新されるんですー！

アメブロやFC2なんかのレンタルブログサービスを使ったことある方は想像しやすいかと思いますが、
お客さん（閲覧者）に見せる画面とは別に、管理用のページがあって、
そこからどんどん更新、修正、できるわけです。

これは一番最初にサイトを制作する時に、
「新しい記事を投稿したら、トップページに最新5件表示させて、一覧ページにも表示させて、詳細ページが生成されて、、、、」
といった命令を聞いてくれるテンプレートを準備してあるからなのです。

『こんなコンテンツを更新したい』
『コンテンツをこういったレイアウトで魅せたい、、、』
といったことを、最初に制作しておく箱（テンプレート）をその仕様に準備しておけば、
管理画面から投稿するだけで、箱がごにょごにょやってくれますので、サーバーにUPしたりなんかのめんどくさい作業が必要ない！ということです。

ただ、『タイトル』と『本文』だけでなくて、WordPressではもっともっと独自の投稿内容を用意（カスタマイズ）することが可能です！

4、WordPressでの更新コンテンツ具体例

先ほどの「News&Topics」なんかもいいけど、さらにもっと複雑な内容なんかも自分で更新したい！
そんなときのために。

『タイトル』と『本文』だけでなくてWordPressの拡張機能を使うと、もっともっと便利な管理画面を作ることができます。
こんな機能つくってくださった制作者様、ほんとにほんとにありがたくて身悶えます。
これ、私にとって最大のWordPressおススメポイントです！！

例えば・・・

飲食店のサイト。

お店のメニューなんかって季節によって追加したり、季節限定のコースがあったり、と、いろいろと頻繁にいじりたい項目だと思います。

【サイト側】

こんな感じのサイト、レイアウトだったとしたなら、、、

【管理画面】

管理画面はこんな感じで。

使いたいお料理の写真、価格、コメント、こんな感じで
投稿したい内容をあらかじめ決めておけば、必要な投稿画面にカスタマイズができます。
自分で簡単に更新していけて、いい感じのレイアウトで表示されるようになります。

アイデアしだいでいろんなコンテンツにできます。

美容院サイト　スタッフ紹介ページ

美容院や、エステ、病院などを探すときは、スタッフのキャラクターが私はとっても気になります！
なので、スタッフの紹介ページなんかがあるといいなーと思うのですが、どうでしょうか！

【サイト側】

スタッフの紹介ページ。新しいスタッフが入ったり、逆に辞めちゃったーって時なんかも、さくさくっと自分で更新。

【管理画面】

これも必要な項目を準備した管理画面に。

コーポレートサイトセミナーのお知らせ

セミナーを開催している会社なんかも更新もりもりしたいんじゃないかなーと思います。

【サイト側】

セミナーだけじゃなくてもスクールとかでもなんかいろいろ。

【管理画面】

同じように、必要項目をあらかじめ準備。

ケーキ屋さん商品情報

【サイト側】

ケーキ食べたいですね。

【管理画面】

人気No.1！とか季節のおススメアイコンなんかも管理画面のチェックボックスでサクッと表示。ケーキケーキ。

インテリア家具ギャラリー

【サイト側】

写真で魅せたいようなサイトはギャラリーがおススメですが、ソースが大変複雑になってくるので、htmlの知識が無い方にとってはなかなかのハードル。

【管理画面】

管理画面から投稿すると簡単です。
もともとのテンプレート（箱）のほうにレイアウトだけじゃなくスライドする命令も書かれてるので、写真と説明文投稿するだけで動きのあるページを自分で更新できます！

5、まとめ

「ホームページ」と一言でいっても、見た目のデザイン面ではもちろん、
普段閲覧してる側からは見えない部分である、管理面、機能面でも、いろんな種類があります。

まずは自分のホームページでどういったことを表現したいのか、
どんな効果を期待しているのか、
更新していく環境やコストに関して、いろんな条件の中で、デザイン面でも機能面でも、ぴったりなホームページが作れるといいですよね！

もちろん「更新する気は全くない、名刺代わりだし、そんな暇もないし」という方にとっては、「自分で更新できる」機能はいらなかったりしますし！
各CMSでできないことや、デメリットもありますし、多方面から検討する必要があります。

なんか、書いてみたのですが、ほんとはもっともっとたくさんWordPressの素敵なトコあるのに、私のイチオシについてのゴリ押しになってしまいました。。
私はまだまだ色んな引き出しを広げていかなきゃいけない状況ですが、とりあえずWordPressの素敵な部分をほんの一部ですが語ってみました！

おしまい。

昨日、WordPressの少人数の勉強会に出席してきました。

で、数日前に聞いた勉強会の内容が、
「みんなでWordPressについてLT（ライトニングトーク）しよー！」というものでした。

LT！！

今、ちょっとお仕事でばたばたしてたので、
LTとはーーー！ｷﾞｬｱｧｧｧｧ━━━━(|||ﾟДﾟ)━━というかんじだったのですが、、、
準備する時間あるかなぁーと心配してましたが、とっても楽しかったです。

いろいろと意見を交換しながら、
自分のプレゼンの練習にもなったかなぁーと思います。

5分程度という短い時間で、
やはり時間どおりにしゃべるのが下手で、
ドラ娘様がいらしたら、確実に強制退場でしたが、
少人数ということで、ゆるゆると話させていただきました。

ちょっとだけですがスライドせっかく作ったので、公開します。
あと、短いのでしゃべった内容も書きます。

テーマは、WordPressの失敗から学んだこと

準備する時間もあんまりなかったので、テーマを決めるのにすごく悩んだのですが、
主催の方より「WordPressでの失敗談などありますか」とチラッとヒントをいただいたので、
失敗なら任せて( ﾟ∀ﾟ)！！と思い、そのままテーマとしました。

WordPressにはだいぶ慣れてはきたと思うのですが、
まだまだ失敗だらけなので失敗談は豊富なのです！！！

管理画面の使いやすさについて

失敗その1、「管理画面の使いやすさの追求」をあんまりよく考えずに作ってしまった。

先日のWordCampTokyoで「更新しやすいテーマ作り」のテーマでお話をした理由にもなるんです。

WordPressのサイトをデザインするときに、管理画面側のユーザビリティもよーく考えるのが、とっても大事だよなぁ、、、と思うんです。

以前に作ったサイトで、そのへんをおろそかにして作っているサイトがあるんです。
そこそこ規模の大きなサイトなのですが、更新コンテンツがたくさんあって、投稿内容もそれぞれ全部違う内容、レイアウトなんですけど、構成や管理画面のユーザビリティを事前によく練りこまなかったせいで、めちゃめちゃ管理しづらいサイトになってしまってます。

例えばその中のひとつの例なのですが、カスタムフィールドを使いました。
カスタムフィールドっていうのは、普通、WordPressの管理画面は、【タイトル】と【本文】のふたつの入力フィールドがあるのですが、もっともっと細かく投稿したい内容があるときに項目を増やせる機能で、あらかじめ自分で決めた項目に対して必要な値を入れていくだけ、の便利なものです。

なのですが、、、、

投稿する項目が多くなると、ちょっと、、、めんどっちいんですよね。

「あれ、detailってなによ、、、」って、自分が決めた名前に対して投稿内容がわからなくなったり、プルダウンで項目を選ぶのもめんどくさかったり、そもそも、あと、なに入力するんだっけ？ってわからなくなったり。。。

自分で作ったサイトなのに更新が大変億劫になったのでした。

もし、これであの人気プラグイン「カスタムフォールドテンプレート」を活用してると、こんな感じになりますよね。

画像も簡単にアップロードでき、値がセレクトボックスとかラジオボタンとか、使いやすいようにカスタマイズできる、なにより、ラベルが付いてるので、何を投稿したらいいのか一目瞭然です。

（カスタムフィールドテンプレートの使い方はたくさんわかりやすい紹介ブログとかあります！
いちお、私も「ブログだけじゃない！WordPressの活用法いろいろ」でちょっとだけご紹介しました。今では欠かせないプラグインのひとつです。。。）

投稿内容がいろいろとある場合は、更新もめんどくさくなっちゃうので、できるだけ、管理しやすい構成で制作するべきでした。

というわけで。。。

最初の構成作りや利用するプラグイン選びはすごく大事。
お客様にもし納品する場合は更新内容や更新頻度をよくヒヤリングし、その上で構成をよく考えて、何度も検証するべきだったと、

当たり前のことですが、今はホントに最初から気をつけて制作するようにしています。

次、失敗談その2。

コアファイルをいじくりまくっていた

プログラムモリモリ書ける方は、大丈夫なのでしょうか？
たまにさわってるって話も聞くのですが、みなさんどうしているのでしょう。。
でも「私」は絶対やっちゃだめでした。

そのいじってしまった理由が、管理画面の色とかデザインとかを、オリジナルのものにしたかったんです。
もう単純に、デザインを完全に変えてみたり、あと、管理画面内に「ヘルプ」をつけて、ファイルを追加してポップアップでヘルプ表示させてみたり、また、開発者ブログとか、管理画面に表示されると思うんですけど、お客様にはそういうの必要なくない？っていうのを、どんどん非表示にするために、コアファイルをいじくりまくってました。

でもいじくりまくって気やっとづいたのですが、

WordPressのアップデートができません。
バグが出ても何が原因かもう手に負えなくなりました。
そもそもWordPress標準のデザインシンプルでかっこいい、、、ってことに気づいてしまいました。

というわけで、コアファイルをいじるのは、かなりの上級者さんだけだな、と今は感じてます。
普通にやめとくことにします。

それでも管理画面をカスタマイズしたいときは、
今話題の、、、

Cawaii Adminです！！
詳しくはCawaii Admin【WordPress管理画面をかわいくカスタマイズするプラグイン】で書かれていますが、ただかわいいだけじゃないです。
へッダー部分に最低限、必要なメニューだけを表示可能にしてくれたり、消したいメタボックスもお好みで簡単に隠すことができます。
いかに使いやすく、一般の人でも簡単に気軽に更新できるか、をずーーっと気にして制作してたので、とにかくこのプラグインうれしいです。
ありがとうございます。

ちょっとご紹介すると、
↓　これ、私の別のブログです。↓
(といってもWordPressの新しい機能やプラグインを試すためのテストサイトに完全になってしまってます。。。)

このサイトにCawaii Adminを有効化すると、管理画面は、

こんな感じになります。
左のWordPressの細かいナビが消えて、
上にシンプルなナビが表示されます。
ロゴも簡単にサイトに合わせたものにさしかえることができます。

メタボックスの消去もさくっと。

で、このCawaii　Admin、楽しくて楽しくて、さらにいじっていじっていじくりまくってしまいました。。。。

プラグイン内のファイルをもりもり変えてしまい、そして、こんな感じになりました。

ここまでやる必要性は全くなくって、完全に自己満の世界です、はい。
Cawaii Adminそのままで十分にわかりやすい管理画面になりますし、さらにプラグインも中いじりまくると、アップグレードできなくなっちゃうんで、これでやめときますーー。
ただ、趣味のサイト程度なら、こうやって好きなデザインにして、楽しく更新できるようになるんじゃないかなぁーと思います。
Cawaii Adminの今後のバージョンアップ予定で「CSSを自分でカスタムできるようにする」とステキなお言葉もありましたので、のんびり待ちましょう。|ω・`)ｺｿ

こんな感じで、
たくさん失敗はしてますが、そこでたくさん得るものもあったかなーと思ってます。
どんどん知識を深めていき、失敗もホドホドにできるといいなーと思っております。

という感じのLTだったのですが、やっぱり、同じ分野でお仕事してる方々とお話できるのはとても刺激になります。
もともと、人見知りで外に出るのすごく苦手で、避けてしまうほうなのですが、一人でコソコソ調べるよりも、誰かとお話しするほうがよっぽど勉強になりますね。
今まで問題意識してなかったことに気づけたり！

有意義な時間が過ごせました。ありがとうございました＾＾

WordCamp Tokyo　11月27日（日）開催されます

9月WordCamp神戸でスピーカーで初参加させてもらい、
緊張しっぱなしのまま、
アワアワしたセッションになってしまいましたが、
今回もスピーカーでお声をかけていただき、
激しく感動しております。

• WordCamp Tokyo

2011年11月27日（日）
カンファレンス：9時45分～17時35分（9時15分 開場）
懇親会：18時00分～20時00分
会場：楽天タワー２号館７階（住友不動産品川シーサイドビル）
費用：無料

前回は初めてのWordPress！オリジナルテーマでブログ制作というテーマでお話させてもらいました。このときのスライドや追加資料はこちらからみれます。

今回も初心者向けのセッションですが、デザイナートラックということで、

WordPress のオリジナルテーマ制作
デザイン時に私が心がけている「更新しやすい」テーマ作り

というテーマで、実際にこれまでに制作したサイトを、
お客さんからの要望や、デザインで気をつけたことなどを例にあげながらお話したいと思います。

「いかに更新しやすいサイトにするか」なんですが、
更新しやすいサイトにするために、知っておくと初心者の方でもちょっと楽になる、
WordPressの特性、便利なプラグインなんかをご紹介します。
WordPressって、何？どんなことができるの？
と言う方もぜひWordCamp参加してください♪
phpがわからないWebデザイナー（私w）でも少々複雑な構成のWebサイトも作れるようになります！

前回の神戸でお話して以来、
ちょいちょいWordPressに関するご質問なんかいただくようになりました。
うれしいですー、すごく（・∀・）
ありがとうございます！

WordCampTokyoの、
お申し込みはこちらから。
タイムテーブルはこちらから。
他のスピーカーさんたちは、わ！(ﾟДﾟ)　あの人だっっ！って言う豪華な方々が盛りだくさんなので、私も楽しみでワクワクしております！
無料で聞けちゃうんだからすごいです！！

名刺を首にぶら下げてウロウロしてると思うので、お声をかけてもらえるとうれしいです！
私、いつも孤独に制作作業しているので、同業の女子友達がほしいです(T T)
一緒に制作の悩みなんか語り合いたいです！！
仲良くしてください！懇親会も参加します！
楽しみにしてまーす♪

を使って、ある企業サイトをWordpressで納品した時の、思い出備忘録エントリーです。

1.お知らせ情報を公開できるように。
2.会社のコンセプト等を公開できるように。
3.商品を公開できるように。

というご要望の案件でした。

1.は普通の投稿で。2.は固定ページで。3.をカスタム投稿とカスタムフィールドテンプレートを合わせて使ったのですが、この3.の備忘録です。

WordPressでタバコを商品として登録してみる

例で「タバコ」を商品として登録する流れを書きます。
なんでタバコかって言いますと、今くわえてるからです。はい。嫌煙家の方ごめんなさい…。

単にタバコと言っても

• 商品名
• 商品のちょっとした説明
• 箱の見た目（画像）
• 価格
• タールの数値
• ニコチンの数値
• メンソールかそうでないか
• 入っている本数

など、情報として公開したい”項目”がいろいろあります。

商品名は＜?php the_title(); ?＞で入力してもらって、商品のちょっとした説明は＜?php the_content(); ?＞で入力してもらって、その他はカスタムフィールドテンプレートで生成した項目から入力してもらいます。最終的に下記の図のような入力項目を作り、公開するのが目的です。

では、まず最初に「カスタム投稿」の用意をします。

カスタム投稿を用意する

プラグインは使わず、現在のテーマのfunction.phpに下記を書きました。（かなり簡単に…）
[php]
< ?php
add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'tabako',
array(
'labels' => array(
‘name’ => __( ‘タバコ’ ),
‘singular_name’ => __( ‘タバコ’ )
),
‘public’ => true,
‘has_archive’ => true,
‘menu_position’ => 100,
)
);
}
?>
[/php]

これで左メニューにタバコというリンクができます。

カスタム投稿についてもっと詳しく知りたい方は、他のブログですばらしいエントリーがたくさんあります！そちらをどうぞm( _　_ )m

プラグイン「カスタムフィールドテンプレート」

次にプラグイン「カスタムフィールドテンプレート」をインストールして、タバコの各情報を入力できる項目をつくります。インストール後、左メニューの設定内にあるカスタムフィールドテンプレートをクリックして入力項目をカスタマイズしていきます。

カスタムポストタイプ （カンマ区切り）:

ここにfunction.phpの4行目で書いたtabakoを書きます。

テンプレートコンテンツ:

下記を書きました。
[html]
[画像]
type=file

[価格]
label = 半角数字で入力してください
type = text
size = 40

[タールの数値]
type = text
size = 40

[ニコチンの数値]
type = text
size = 40

[メンソール?]
type=radio
value=メンソールじゃないです#メンソールです
default = メンソールじゃないです

[入っている本数]
type=radio
value=5本#10本#15本#20本#25本#30本
default = 20本
[/html]

これでタバコの新規追加に下記の項目が追加されました。

早速タバコをいくつか登録してみましょう。登録が終わったら今度は表示です。

1. タバコの詳細ページを作る
2. TOPページに新しく登録したタバコのコンテンツを作る

をやっていきます。

タバコの詳細ページを作る

single.phpと別にsingle-tabako.phpを作成し、そこで登録したタバコ情報を公開します。
それぞれの項目を表示するために下記を。
[php]
▼商品タイトル
< ?php the_title(); ?>

▼商品説明
< ?php the_content(); ?>

▼画像
< ?php echo wp_get_attachment_link(get_post_meta($post->ID,”画像”,true),’medium’); ?>

▼価格
< ?php echo get_post_meta($post->ID,”価格”,true); ?>

▼タールの数値
< ?php echo get_post_meta($post->ID,”タールの数値”,true); ?>

▼ニコチンの数値
< ?php echo get_post_meta($post->ID,”ニコチンの数値”,true); ?>

▼メンソール
< ?php echo get_post_meta($post->ID,”メンソール?”,true); ?>

▼入っている本数
< ?php echo get_post_meta($post->ID,”入っている本数”,true); ?>
[/php]
ｈｔｍｌとｃｓｓを少しだけゴネゴネして、このようにしました。

詳細ページの解説

下記のように書きました。
[php]

< ?php the_title(); ?>

< ?php echo wp_get_attachment_link(get_post_meta($post->ID,”画像”,true),’medium’); ?>

< ?php if(get_post_meta($post->ID,’メンソール?’,true) == ‘メンソールです’): ?>
/img/ill_mentol.jpg” />
< ?php endif; ?>

価格< ?php echo get_post_meta($post->ID,”価格”,true); ?>円

• タール　< ?php echo get_post_meta($post->ID,”タールの数値”,true); ?>mg
• ニコチン< ?php echo get_post_meta($post->ID,”ニコチンの数値”,true); ?>mg
• 本　数　< ?php echo get_post_meta($post->ID,”入っている本数”,true); ?>

[/php]

4行目で画像を表示しています。

<?php echo wp_get_attachment_link(get_post_meta($post->ID,”画像”,true),’medium’); ?>
で拡大リンク付の画像を表示しています。Wordpressの設定→メディア→画像のサイズの中サイズを表示したかったので、’medium’と書いてます。
サムネイルを出したい場合は’thumbnail’。大サイズを出したい場合は’large’で。

7～9行目で分岐文を書いています。

メンソール?の項目で、メンソールですにラジオのチェックが入ったら表示。と書いています。

TOPページに新しく登録したタバコを

次はTOPページの表示についてです。新しく登録したタバコを8件表示する。でいきたいと思います。完成画像は下記。

TOPページの解説

下記のように書きました。
[php]

[/php]

2行目からloop開始です。

‘post_type’ => ‘tabako’　でカスタム投稿「タバコ」を、
‘posts_per_page’ => 8　で8回ループするように。
今回カスタム投稿は「タバコ」だけしかありませんが、複数ある場合、たとえば「酒」もあるよっ！って時は、
[php]
< ?php
$loop = new WP_Query( array( 'post_type' => array(‘tabako’, ‘sake’), ‘posts_per_page’ => 8 ) );
while ( $loop->have_posts() ) : $loop->the_post();
?>
[/php]
こんな風に書けばおｋです。

4行目で画像を表示しています。

詳細ページの画像は拡大リンク付でしたが、今回は詳細ページに誘導したかったので、リンク無しで表示するように
<?php echo wp_get_attachment_image(get_post_meta($post->ID,”画像”,true),’medium’); ?>と書きました。画像だけを表示させて、<a href=”<?php the_permalink() ?>”> 画像 </a>で囲っています。

最後に

このエントリーに記載されている「＜＞」「’　’」「”　”」は全角だったりする場合があります…。
動かねーよコンニャロー！となったら全角になってないか見てみてくださいね。