Android用待ち受け配布サイト「Android Wallpaper」作りました!

以前作っていたスマートフォン用壁紙配布サイトの「Wallpaper Collection」をリニューアルして、Android用待ち受け配布サイト「Android Wallpaper」を作りました!

以前作っていたスマートフォン用壁紙配布サイトの「Wallpaper Collection(作ったときに書いた記事はこちら)」をリニューアルして、Android用待ち受け配布サイト「Android Wallpaper」を作りました!

Android-0001

って作ったのだいぶ前なんですけどなんだかんだで全然ブログ書けてなくて今になりました…。
Future SyncのこととUX勉強会のこととあとずっとあたためてる好きなフォントの記事も書かないと!というわけでちゃっちゃといきます!

2年前にWordPress + jQuery Mobileで作っていたものを作り直しました。

Wallpaper Collection(作ったときの記事はこちら)は、jQuery Mobileを使ってみたくて、自分ではまだスマホを持っていないにもかかわらず実験的に作ったサイトでした。

当時AndroidとiPhoneの待ち受けの仕様の差を知らずに作ってました

いろんな端末に対応できるようにと、それぞれの端末用にサーバー側でリサイズして画像を出力するような仕組みにしていたのですが、前述の通り作っていたときは実はまだガラケーだったのでAndroidの壁紙の仕様を全く知らず…。

当時はiPhoneでもAndroidでも、画面の解像度と同じサイズの壁紙を用意すればいいと思っていたのですが、実はそうではなくて。

Androidは横が待ち受けの倍サイズの壁紙がいるんですよね。
(機種によっては画面サイズの壁紙を固定で表示させられる機種もあるのですが)

それを知らずに縦長の元画像を用意していたためにAndroidでは正方形に切り取る際に上下をばっさり切り取ることになってしまっておかしなことになり…。

気付いて直そうにも、iPhoneは縦長、Androidは(正方形に近い)横長で
「どっちで切り取ってもおかしくない元画像の選定」というのが大変だということがわかったのです。

で、今回もうAndroid専用にしました

その後、Androidデビューしまして(携帯docomoなんです)
結果Android優先のサイトになっていたので、iPhone用の待ち受けサイトはよく見るし、差別化のを計るためにAndroid専用にしてリニューアルしました!

WordPressのis_mobile関数で表示を切り分け

今改めて基本はモバイル専用サイト、でもPCでもある程度同じように見せたい…というときどうするのが一番いいかいろいろ考えた末、とりあえず今回のリニューアルでjQuery Mobileはやめることにしました。

かわりに、基本は携帯で見ることを前提にコーディングして、
WordPressのis_mobile関数を使ってPCでの表示のときだけ、サイドバー等を出していろんなご案内を出すような作りにしてみました。

PCでみたらこんな感じ

Android-0002

スマホで見たら真ん中のコンテンツ部分だけ

Android-0001

この関数ひとつで基本モバイルに最適化させつつ、PCでは追加のご案内も出せるように作れました。
超簡単…。

相変わらず便利ですねWordPress。

端末別壁紙サイズ一覧を作ったらアクセス数が増えました

余談なのですが、アンドロイドの端末別壁紙サイズの一覧というページを用意したらなぜかアクセス数が増えました。
調べてみたら結構「機種名+待ち受け」で検索している人も多いみたいで、このページのおかげでそういう方たちにきてもらえているようです。

ちなみにこの一覧は3社の公式サイトの情報全部調べて作りました。
統一されてなくて見るの大変でした…。

ちなみにauのサイトが一番スペック情報調べやすかったです。

スマホのコーディングなどはこちらの本で勉強させていただきました!

スマホサイトのルール的なもの(画面解像度やらいろいろふくめて…)全然追いかけられていなかったのですが、まぼろしの松田さんが書かれた「現場のプロが教えるスマートフォンサイト 制作ガイドブック」を読みながらいろいろと調べてつくることができました!
最近いろんな情報を追えていなかったのでとても勉強になりました!

松田さんはイベント等で何度かご一緒させていただいたことがあるのですが、Webデザインはもちろんのこと発表時のスライドのデザインなどもホントにすべて美しくてものすごく尊敬している方です。

松田さん、素敵な本をありがとうございました!!

[tmkm-amazon]4798129216[/tmkm-amazon]

紹介していただきました

鮮やかな色のスマホ用壁紙が無料でダウンロードできるサイト!! | キノめも
Android-0003

こちらのエントリーですごーく丁寧に紹介していただきました!本当にありがとうございます><

というわけでリニューアルのご紹介でした☆

まだまだすごーく少ないのですが、更新頑張りますのでよかったらみてみてくださいね♪

 Android Wallpaper -無料のAndroid用壁紙-

ではまた☆

WordCamp Kobe 2011に参加しました!!

9月11日に開催された
WordCamp Kobeに参加してきました!!

なんと600人弱の参加があったとか!!!

これはすごい!すごすぎる…!!!ということで当日のレポートです☆

国内最大のWordCamp

9月11日に開催された
WordCamp Kobeに参加してきました!!

なんと600人弱の参加があったとか!!!

すごすぎる…!!!

国内No1記録を大幅に塗り替えちゃいました☆

会場は神戸芸術工科大学

神戸には同僚の@ask4416といっていたのですが
@ask4416は午後からの参加だったので、

午前中はWeb Attendで仲良くなった
@hibiki443さんが同じ三宮にお泊まりだったので
一緒にお出かけしました!

わーいわーい!!!

学校到着!

色々写真撮ったので貼っておきます♪

Exif_JPEG_PICTURE

おっきなポスター!

かわいいです…♪

Exif_JPEG_PICTURE

登ってゆきます。

Exif_JPEG_PICTURE

学内の案内板がカラフルでかわいい!

Exif_JPEG_PICTURE

きれいな学校です…!

Exif_JPEG_PICTURE

なんかしてました。

Exif_JPEG_PICTURE

キリン。蔦を絡ませるのかな?

Exif_JPEG_PICTURE

この案内板もきれい。

Exif_JPEG_PICTURE

ここを進んで右に曲がったところから会場に入りました。

パンフレットはセルフサービス

Exif_JPEG_PICTURE

パンフレットなどはセルフサービスでした。

福岡では毎年、パンフレット類の袋詰めが恒例行事なんですが
福岡もこのスタイルでいいのかも??

気になるパンフレットをいろいろもらってメイン会場へ!

アンカンファレンス

早速アンカンファレンスの説明があり、グループ分け!

私は@hibiki443さんと一緒に
@takayukisterさん& @horike37さん率いる
プラグインチームに混ぜてもらって
いろいろトークしてきました!

あると便利なプラグインのネタが出たので
これ全部誰か実現してくれないかなぁーーーと心から願っています…!w
(他力本願でごめんなさい><)

楽しくランチへ

アンカンファレンス後は
同じグループだった@kana_f_h_pさん@pan__ichiさんと仲良くなって
4人でランチしてきました♪
楽しかったー!!!

こういう出会いがあるのがあるからWordCamp大好き^^

そして本編へ

そんな楽しいランチのあと、会場に戻ると…

ひとひとひとひとひと!!!!!!!w

おそるべし600人っ!

Exif_JPEG_PICTURE

まずはNaoさんっ♪満員御礼でした!!

Exif_JPEG_PICTURE

IIJさん

Exif_JPEG_PICTURE

プライムストラテジーさん

他にもいろいろ見てきたのですがメインホール以外の写真撮るの忘れてました…><

いくつか満員過ぎてみられなかったセッションがあったのですが
後日動画が公開されるみたいなので、それを楽しみにしています!

 

いろんなノベルティーゲット!!

マグカップやセンスやクリアファイルを頂いたりもしました♪

わーい☆

完全なお客さんとしてのWordCamp

福岡以外のWordCampに参加したのは
というかお客さんとしてWordCampに行くこと自体はじめてだったので、
ゆっくりのんびり、いつもと違う感覚でたのしめてよかったです!!!

WordCampを鹿児島でも。

いつもなんですが、LTはおもしろいもの&参考になるものがいろいろでてきますね!
どれもすっごくよかったです!!

あの短い時間でぎゅっとまとまっているのがすごい!!

鹿児島でもWordCampやるぞ!というLTもあり、九州でもっとあるといいのに!!!!と思っていたのでとっても楽しみです!福井の蟹も気になりまくりでした…♪w

参加してみて、いいなぁと思ったところ

スタッフの方の数がすごく多い!

この規模を見事に運営してらっしゃいました!

関西圏以外からもたくさん&家族連れ、お子様連れでの参加も多数!

いろんな方が参加しやすいイベントってすばらしいですよね!
福岡からも新幹線でさっといけるし、
東京からも新幹線でも飛行機でもこれるし、
神戸は立地的にも全国的なイベントをするのに優れている土地なのかな、と思いました☆

スタッフTシャツいいな。そしてTシャツは色付きがいいな。

スタッフの方のピンクのお揃いのTシャツがすごくわかりやすかったです。

サイトにあった写真付きの道案内がとっても親切

微妙にわかりにくい場所だったので、サイトにあった写真付きの道案内地図が本当に役に立ちました!
こういう心遣いって大事ですよね…!
大学の中も広くてまよっちゃったりしがちですが、完璧な誘導がしてありました!すばらしい…!

スタッフの皆さんがみんな楽しそう!

これは福岡も同じなんですがみんな楽しそうでした♪

WordCampのスタッフってなんか楽しいんですよねー。なんだろうね、あれ。

いろんなプログラマもデザイナーもコーダーもディレクターもそんなのなにも関係なく
みんなでひとつのこと一緒にできるからかなぁ?

あんまり職種問わず!なイベントないですもんね^^

おまけ:名刺は派手な方がいい

そういえば名札はフォルダーのみ配布されて
中身は自由に名刺など入れるようになっていたので、
会社名刺ではなく、派手で目立つ方の個人名刺をいれていました。

するとすると…

「もしかしてYUKIさんですか?名刺がお花だったから…!」と
会いたかったフォロアーのさんに話しかけてもらえて
無事にお会いすることができました!!

名刺派手にしててよかった!!!!と思った出来事でした☆

新幹線の都合で懇親会に参加できなかったことは心残りですが;;
いろいろといいことづくしの神戸の旅でした☆

ホントにすてきなところだったので
今度は観光とグルメツアーでも神戸&大阪に行きたいな♪(*´▽`*)ノ

お世話になったみなさま、本当にありがとうございましたー!!!

WordPressではじめてテーマをカスタマイズ・自作するときありがちな10のつまずき

WordPressでテーマをカスタマイズや自作していく際、まず最初につまずくであろうポイントを10個、できるだけ簡単にわかりやすく解説してみました!
一度乗り越えればあとは簡単です!テーマつくってみようかなーと思っていただけるとうれしいです♪

今回は【WordPressではじめてテーマをカスタマイズ・自作するときありがちなに10のつまずき】ということで、テーマをカスタマイズや自作していく際、まず最初につまずくであろうポイントを10個、できるだけ簡単にわかりやすく解説してみました。

全部私が実際最初につまずいたポイントなので、きっとはじめてカスタマイズするかたのお役にたてるはず…!

テーマカスタマイズの基礎の基礎編です。

テーマファイルを開いてみて、なにがわからないのかすらわからなくてカスタマイズを断念した、というような方にぜひ見ていただきたいエントリーです。

ざっくり概要がつかめれば、「なにがわからないのかわからない状態」が解消されるので、あとは自分で調べて理解していけるようになるんじゃないかな、と思います。

  • とりあえず一から作るのは大変だから既存テーマをいじって勉強したい。
  • 今使ってるテーマのヘッダーをオリジナルの画像にしたりしてみたい。
  • HTML&CSS作ったテーマファイル。どうやったらWordPressテーマ化できる?

といったような方もぜひどうぞ♪

WordPressでテーマをカスタマイズ・自作するとき最初につまづく10のこと目次

  1. そもそもテーマファイルってどこにあるの?
    ->テーマディレクトリ内のファイル構成を理解する
  2. index.phpを開いてみたけど、やなどの記述が見当たりません…!
    -> 共通部分の分解方法について理解する
  3. __()ってなんですか…!
    -> 翻訳関数を理解しよう
  4. 自作の画像を張り込みたいんですが、パスはどう書けば…?
    ->テーマファイル内での画像ファイルやjsファイル、CSSファイルへのパスの指定方法を理解しよう
  5. archive.phpとかsingle.phpとかこれってなに?
    -> ページファイルのいろいろ
  6. テーマをダウンロードしてきたんだけど、このテーマのときだけプラグインによって動かないものがあります…
    ->最低限必要なテンプレートタグを理解しよう
  7. ここに記事のタイトルを出して、ここに本文を出して…ってどう書いたら出るの?
    ->超基本のテンプレートタグ一覧
  8. ここからここがエントリーのワンブロックで、ここを繰り返して一覧表示させたい!
    ->ループを理解する
  9. はりきってHTMLとCSSでテーマファイルを作ったのに、管理画面をみても一覧に反映すらされません…
    ->自作のHTML&CSSファイルをテーマとして認識させる方法
  10. テーマできた!けどスクリーンショットがでなくてさみしいです。
    ->screenshotの設定方法

1.テーマディレクトリ内のファイル構成を理解する

そもそもテーマファイルってどこにあるの?

とりあえず、テーマファイルがどこにあるのかがわからないとカスタマイズのしようもありませんよね。

テーマファイルはWordPressのディレクトリの中の【wp-content】->【themes】の中にあります。

テーマを自作する場合もこのディレクトリの中にテーマファイル一式を作ってアップロードします。

それぞれのテーマのディレクトリの中に、index.phpやstyle.cssなど必要なファイルを作っていきます。

2.共通部分の分解方法について理解する

index.phpを開いてみたけれど…

実際にテーマファイルを見てみましょう。

現在のWordPressの標準テーマ、twentytenテーマをみていきます。

index.phpを開いてみます。

終わり。

なんというこざっぱり感…!

これをみて、どこでなにをしているのかさっぱりわからず、リタイアした人も多いのではないでしょうか…。

index.phpではいろんなファイルが読み込まれています

WordPressでは、いろんなページで共通して使う部分だけをパーツとして別ファイルに保存して、それを各ページで読み込むことで修正の際の手間をすくなくできるような作りになっています。

たとえば

[php]<?php get_header(); ?>[/php]

この部分は、テーマディレクトリ内のheader.phpを呼び出す、という意味です。

header.phpを見てみましょう。

<head>や<body>がでてきました!

フッターとサイドバーも同様に別のファイルが読み込まれています。

それぞれ

  • get_footer()->footer.php
  • get_sideber()->sidebar.php

が読み込まれます。

[php]<?php get_template_part( ‘loop’, ‘index’ ); ?>[/php]

この部分はheaderやfooterとはちょっと違って、任意のファイル名のテンプレートパーツを呼び出す関数になります。

この場合、

loop-index.php

が呼び出されます。

loop-index.phpがない場合は、loop.phpが呼び出されます。

今回はloop-index.phpというファイルがテーマフォルダ内にありませんでしたので、ここではloop.phpが呼び出されることになります。

get_template_part()について、詳しく知りたい方はWordPressの関数リファレンスページをご覧下さい。

こんな感じで、様々なファイルを読み込んで表示しています。

3.翻訳関数を理解する

__()ってなんですか…!!

では、メインの処理になるloop.phpをみてみましょう。

…長くてごちゃごちゃしていますね…。

とはいっても基本的には、など様々なテンプレートタグで値を出力しているだけなのですが、気になるのが例えばこういうところ。

__()ってなに…。

この__()、至る所ででてきます。

実際何を表示している部分なのかわかれば、消したり書き換えてもいい箇所なのか判断できる!ということで、テーマ適用して表示させて、「View all posts〜」という表記を探してみます。

…が、どこにもでてきません。

翻訳されて日本語で表示されているから元の英語は出てきません!

これは__()というのが、国際化対応のためのWordPressの関数で、

「__()で囲まれた部分の文字を、翻訳ファイルを元に翻訳して出力する」という処理になっているために、テーマを表示させてもどこかわからない…ということが起こるのです。

_e()というのもあり、こちらは変換された日本語を標準出力に出力する関数です。

たとえば、

[php]<?php __( ‘Leave a comment’, ‘twentyten’ ); ?>[/php]

こういうものがあった場合、’Leave a comment’という文字列をtwentytenテーマの翻訳ファイル(poファイル)によって対応する日本語に翻訳し出力をしてくれています。

取ってみる

これ、大変ありがたいのですが、日本語環境でしか使わず、とりあえずソースをすっきりさせてどういう作りになっているのかみたい初心者には、ソースコードも長くなり、ぱっと見てなんのことかわかりにくくてすこし邪魔です。

こういう場所は、

たとえば

[php]<?php __( ‘Leave a comment’, ‘twentyten’ ); ?>[/php]

この表記なら

[html]Leave a comment[/html]

としてしまいます。
phpも__()も取っ払ってみてください。

すると、テーマファイルを表示させた時、英語のままLeave a commentとでている箇所ができると思います。

そこがこの文字列のさす箇所です。自力で日本語化するのもよし、再度関数をあてた状態にして同じ場所にでている日本語を確認してその日本語におきかえるのもよし。

__()、_e()などの翻訳関数を外すと、ソースがかなりすっきりして見やすくなると思います。

翻訳関数の仕組みと存在はしっかり覚えておこう

この辺の関数の使いこなしや翻訳ファイル(poファイル)については結構奥が深いので、WordPressテーマの基礎知識がしっかりとついてから、あらためて勉強して、世界中で使ってもらえるテーマやプラグインを作るときなどに役立てていきましょう。

この時点では、「これは翻訳関数である」「はずして手動で日本語に置き換えても動作する」ということがわかっていればOKじゃないかなと思います。

4.画像ファイルやjsファイル、CSSファイルへのパスの指定方法を理解する

テーマ内に自作の画像を張り込みたい!パスはどう書いたらいいの?

まず使用しているテーマディレクトリ内に画像ファイルを置く

たとえばブログのタイトル部分を画像にしたい!と言ったような場合。

まず、タイトル画像をつくります。

作ったらそれを使用しているテーマディレクトリ内のどこか(imagesディレクトリなどがあればその中でもよいし、テーマディレクトリ以下なら好きな場所でOK)に保存します。

今回は、twentytenテーマのimagesディレクトリの中に、sitetitle.pngというタイトル画像をいれた、という前提で進めていきたいと思います。

相対パスではなく、絶対パスで

画像をつくったらテーマを修正していくのですが、画像までのパス設定に注意が必要です。

WordPressのテーマは、http://ブログのurl/wp-conents/themes/テーマ名/各ファイル というように深い階層の下にアップロードされていますが、実際にはhttp://ブログのurl/という場所で表示されます。

そのため、このファイルから相対パスで

[html]<img src="images/sitetitle.png" />[/html]

と記述しても、ブラウザで見た時には、http://ブログのurl/images/sitetitle.png を参照するようになってしまいます。

これでは画像が表示されません。

画像までのパスを絶対パスで記述してあげればOKです。

絶対パスを出力してくれるテンプレートタグを使おう!

ただし、直接

[html]<img src="http://ブログのurl/images/sitetitle.png" />[/html]

のように記述してしまうと、ブログのURLが変わってしまったときなど、とても面倒なことになります。

そこで、この関数の出番です。

[php]<?php get_template_directory_uri(); ?>[/php]

これは、使用しているテーマディレクトリまでのURLを出力してくれるテンプレートタグです。

このように記述します。

[php]<img src="<?php get_template_directory_uri(); ?>/images/sitetitle.png" />[/php]

こうしておくと、表示時には

http://ブログのurl/使用しているテーマまでのパス/images/sitetitle.png

となり、ブログのURLの変更にも対応した記述となります。

CSSファイルやjsファイルも同様にテーマディレクトリ内に保存し、

を使って絶対パスを出力してあげることによって、適切なパスでファイルを読み込めるようになります。

 

5.ページファイルのいろいろ

WordPressのテーマは基本的にはindex.phpとstyle.cssがあれば動かすことができますが、twentytenのテーマを見ると、archive.phpやcategory.phpなどほかにもいろいろなテンプレートファイルがあることが確認できると思います。

たとえばトップページとカテゴリーテージのデザインをわけたい、といったときなどそれぞれ対応するファイル名のテンプレートがあればそれを優先して読み込み、すべてなければindex.phpを使うというような仕組みになっています。

WordPressテーマは、それぞれのページでテーマを読み込む優先度が設定されていて、たとえばカテゴリーページはこのような優先度でテンプレートファイルを探していきます。

  1. category-slug.php
    – 例えばカテゴリーのスラッグが “news” の場合は category-news.php
  2. category-ID.php
    – 例えばカテゴリーID 6 用のテンプレートであれば category-6.php
  3. category.php
  4. archive.php
  5. index.php

上から順に探していき、見つかったこころのテンプレートファイルを適用します。

なにもなければindex.phpが適用されます。

タグページ、日付ごとのアーカイブページ、投稿毎のページなど、細かくテンプレートファイルをわけて適用することができます。各ページのテンプレートファイルの優先度はWordPress公式ページに詳しくまとまっていますのでチェックしてみてください。

http://wpdocs.sourceforge.jp/テンプレート階層

6.最低限必要なテンプレートタグ

プラグインが動かないテーマがあったりします…

wp_head(); と wp_footer(); は絶対!

twentytenテーマファイルのheader.phpやfooter.phpを確認してみてください。

wp_head()やwp_footer()といった表記が目につくと思います。

これはwp_head()アクションをスタートさせる関数で、ヘッダー内のメタ情報をはじめ、いろんなことを出力する関数です。

メタ情報等を出力するので、勝手にでてほしくないから消した!というようなことをやりがちな関数でもあります。

しかし、プラグインの多くはこの関数が呼び出されるタイミングで一緒に「プラグインに関わる処理もお願いね」と処理を投げるようになっているため、このwp_head()そのものを削除してしまうと、プラグインの動作に必要な処理(ファイルの読み込みなど)が行われなくなり、プラグインが正常に動作しなくなってしまいます。

wp_footer()も同様です。

プラグインが正常に動作しない場合はまずこの関数がどちらも正しくテーマ内に組み込まれているか確認しましょう。

ちなみに、wp_head()の出力結果が気に入らない場合は、調整できます。

ただし、動作に必要なファイルの読み込みをとめてしまったりすることのないよう、慎重に行ってくださいね。

7.超基本のテンプレートタグ

ブログの情報や記事の本文を出力したりするテンプレートタグ。

たくさんあるのですが、ありすぎてはじめは大パニックになりました。

なのでよく使うテンプレートタグをピックアップしてご紹介します。

ブログの基本情報を出力するタグ(どこでも使える)

ブログのURLを出力

[php]<code class="plain"><?php </code><code class="functions">echo</code> <code class="plain">home_url(); ?></code>[/php]

ブログのタイトルを出力

[php]<?php bloginfo(‘title’); ?>[/php]

(値は管理画面->一般設定で設定)

ブログの説明文を出力

[php]<?php bloginfo(‘description’); ?>[/php]

(値は管理画面->一般設定で指定)

テーマディレクトリまでのURL

[php]<code class="plain"><?php </code><code class="functions">echo</code> <code class="plain">get_template_directory_uri(); ?></code>[/php]

(このブログでtwentytenを使用していたとすると、http://blog.v-colors.com/wp-contents/themes/twentyten/ と出力される)

使用中のテンプレートのメインCSSのURL

[php]<code class="plain"><?php <code class="functions">echo</code> <code class="plain">get_stylesheet_uri(); ?></code></code>[/php]

(このブログでtwentytenを使用していたとすると、http://blog.v-colors.com/wp-contents/themes/twentyten/style.css と出力される)

記事などの情報を出力するタグ(基本的にループ内で使用可)

そのままコピペで使えますが、タグによっていろいろとオプション値が設定でき、表示方法を変えたり、前後に文字列をつけて出力したりといったことが可能です。どんな値が設定できるかはタグによって異なりますので、タグの説明の下にそれぞれ公式ページへのリンクをつけました。そちらのページで確認してみてくださいね。

記事のタイトルを出す

[php]<?php the_title(); ?>[/php]

記事の本文を出す

[php]<?php the_content(); ?>[/php]

記事の抜粋を出す

[php]<?php the_excerpt(); ?>[/php]

記事の投稿日時を出す

日付系の関数には、the_dateとthe_timeがあります。

the_dateは同じ日に複数件投稿があったら最初の一件目にだけ出る。

the_timeは同じ日に複数件投稿があってもすべての投稿に出るという違いがあります。

[php]<?php the_date(); ?>[/php]

[php]<?php the_time(); ?>[/php]

記事のカテゴリーを出す

[php]<?php the_category(); ?>[/php]

記事のタグを出す

[php]<?php the_tags(); ?>[/php]

記事へのリンクを出す

[php]<?php the_permalink(); ?>[/php]

カスタムフィールドに設定したkeyの値を出す

[php]<?php echo post_custom(‘key’); ?>[/php]

もっともっとテンプレートタグはあります!

一覧はこちらから

8.ループを理解する

ここからここまでがエントリーの一ブロックで、この部分を記事件数分繰り返したい、という部分をループで囲みます。

ループはこのように書きます。

[php]
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<!-ループ内で使えるタグはここで使えます–>
<?php the_title(); ?>
<?php endwhile; endif; ?>
[/php]

もし、条件に合う記事があれば、記事のデータがなくなるまで繰り返す

という意味です。

上に貼っている画像の方のコードは、
今書いたものとすこし違いますよね。
これは、先ほどのコードから「もし、条件に合う記事があれば」の条件を取り除いたものです。

[php]
<?php while(have_posts()): the_post(); ?>
<!-ループ内で使えるタグはここで使えます–>
<?php the_title(); ?>
<?php endwhile; ?>
[/php]

どちらも同じように記事のデータがなくなるまで繰り返します。

ifを使ってこのように書かれている場合もあります。

[php]
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!–ループ内です。記事がある限りこの部分が繰り返されます–>
<?php endwhile; else: ?>
<!–一件も記事がない時は、ここの部分が表示されます–>
<?php endif; ?>
[/php]

このように書けば、記事が一件もなかったときの表示を以下のように記述することができます。

9.自作のHTML&CSSファイルをテーマとして認識させる方法

テンプレートタグの埋め込みを行う前に、とりあえずまずはテーマとしてとしてWordPressに認識させましょう。

トップディレクトリのstyle.css にコメントが必要です。

[css]
/* CSS Document */
/*
Theme Name: vcolors-v2
Theme URI: http://blog.v-colors.com
Description: vcolors-v2
Author: YUKI
Author URI: http://blog.v-colors.com
Template:
Version: 1.0
*/
[/css]

Theme Name テーマ名
Theme URI テーマのURL
Description テーマの説明
Author テーマの制作者
Author URI URI テーマ制作者のURL
Version テーマのバージョン
Template 親テーマの定義
Tags テーマのタグ

10.screenshotの設定方法

テーマのディレクトリの中にscreenshot.png を置いてFTPでアップロードするだけで自動で認識されます。

画像のサイズは、横300px × 縦225px で作成すると良です。

いかがでしたか?

はじめてカスタマイズするとき、私がつまずいたポイント10個のご紹介と解説でした。

ここまでわかれば、あとはいろんなテーマをみてみて、その中に書いてある関数名をググって調べたり、自分で解決できるようになっていると思います。

私がWordPressをはじめて使った時より遥かに書籍もWeb上の情報も充実しています。以前くじけてしまったことがあるという方も、これを機にもう一度挑戦してみてはいかがでしょうか?

この春新しいことを覚えてみたいかた、まだWordPressさわったことがないという方も、わかりやすい資料が増えてきた今、ぜひトライしてみませんか?

WordPressはどんどん機能が充実してきていますので、ぜひ早めに基礎を覚えて、今後はどんどん新しい機能を使いこなすことに時間をかけていきましょう♪

先日書いたWordPressをインストールしたら最初にやってることまとめも一緒にどうぞ。

それでは。楽しいWordPressライフを☆

もし間違いなどあればご指摘いただけるとうれしいです><

WordPressをインストールしたら最初にやってることまとめ

今日は、WordPressを設置したとき毎回やっているカスタマイズに入る前の下準備について、自分のメモもかねてまとめてみました。

仕事でも、プライベートでも本当にかかすことのできない存在になっているWordPress。

今回は、そんなWordPressを設置したとき毎回やっているカスタマイズに入る前の下準備についてまとめてみました。

毎回やっているのにうっかり忘れたりしてしまうので自分のメモもかねて…!

  1. 初期設定
  2. プラグインを入れる
  3. テーマを準備する
  4. functions.phpの設定をする

1.初期設定

1.1 パーマリンクの設定をする

デフォルト設定のままだと

http://blog.v-colors.com/?p=123

とかでちょっとかっこわるいので

パーマリンクの設定を変更します。

管理画面メニュー 設定->パーマリンクの設定からお好みの設定に。

いろんな設定ができます。どんな設定ができるかは公式サイトのパーマリンク設定についてにまとめられています。

1.2 メディアの設定をする

管理画面メニューの 設定->メディア で投稿画像のサイズを設定します。
ここでは、サムネイル(thumbnail)、中サイズ(medium)、大サイズ(large)のサイズが指定できます。

WordPressのデフォルトでは、サムネイル(thumbnail)、中サイズ(medium)、大サイズ(large)、フルサイズの4サイズが自動的に生成できますが、もっといろんな種類が欲しい時もありますよね。

↑たとえばこういう感じで小さいのともっと小さいの2つのサムネイルを生成したい…とか。

テーマディレクトリ内のfunctions.phpに【add_image_size】を記述してあげると、生成する画像を増やせます。

詳しいやり方については
4.functions.phpの設定をする
に記載していますのでそちらをどうぞ。

1.3一般設定をする

キャッチフレーズや(これが<?php get_bloginfo ( ‘description‘ ); ?>で表示される分になります)
日付フォーマット、時刻フォーマットなどを好みの形に設定します。

2.プラグインを入れる

2.1 標準で入っているプラグインから必要なものを有効化

WordPress日本語版をインストールした時点で標準で入っているプラグインがいくつかあります。
その中から2つはかかせないプラグインとして有効化しています。

Akismet
コメントスパム対策のAkismet。
私の弱小サイトなんてなくてもそうそうスパムコメントありませんが、たまーにあるときはしっかりはじいてくれてます。

WP Multibyte Patch
WordPress日本語版のマルチバイト文字に関する修正を行うプラグインです。メール送信、トラックバック受信、ピンバック受信、検索等で発生する障 害に対して対策を行ってくれているとのこと。その辺りを特別に自分で対策をしている人以外は迷わず有効化を。

2.2 必要なプラグインを追加していく

必要なプラグインを追加していきます。

大体は新規プラグイン追加画面から検索して見つかるプラグインです。
手動アップロードの手間いらずでラクチンです。

管理画面メニューのプラグイン->新規追加

■お問い合わせフォーム

Contact Form 7
@takayukister作の国産お問い合わせフォーム。いつもお世話になっています。
お問い合わせフォームとしてだけではなく、PHOTO STOCKERのサイドバーのアンケートフォームにもContact Form7を使っています。いろいろ使えますね。

■SEO系

HeadSpace2
ページ毎に最適なタイトルやメタタグを埋めたりするためのSEO対策系のWordpressプラグイン。以前はAll in One SEO Packを使用していたのですが今はHeadSpace2を使っています。このあたりはお好みで。

Google XML Sitemaps
Google、Yahoo、MSN用のサイトマップを自動で作成してくれるWordPressプラグインです。

■カテゴリー並べ替え

My Category Order
カテゴリリストの並びを自由に変更するプラグインです。
WordPressでは、登録したカテゴリーの並べ替えができません…!
きちんと設計してからカテゴリ登録とかすればいらないのかもですが、構築、運用しているうちにカテゴリー増やしたくなったり変更したくなったり、ってどうしてもでてきてしまいますよね。これも欠かせないプラグイン。

■ページングしやすくする

Pagebar2
WordPress に見やすいページャーをつけるプラグインです。1 2 3 4 5…とかなってるアレです。<前へ 次へ> だけより断然便利。

CSSでスタイリングできるので、こんな感じでデザインにあわせて変更できます。

■関連記事や人気記事を表示できるようにする

Popular Posts

人気のエントリーを表示させるプラグイン。
こんな感じで人気のエントリーを表示させることができます。

Similar Posts
関連するエントリーを表示させるプラグイン。
タグやカテゴリー、かいた人の情報などの関連性を判断して(どの関連性を優先するか、しないかなどは管理画面で設定できます)関連するエントリーを表示してくれます。

PHOTO STOCKERでは関連写真を表示させていますが、このプラグインを使って表示させています。

Post-Plugin Library
上の二つのプラグインを利用るときに必要になるプラグインです。使うときはこれも一緒に有効化を。

■モバイル対応させる

Ktai Style
WordPress ウェブログを日本の携帯電話対応にするプラグインです。

スマートフォン対応のプラグインは今いろいろお試し中です。一番いいと思うものが決定したら追記しますね。

3.テーマを準備する

使用するテーマを用意します。

管理画面メニューの 外観->テーマ->テーマのインストールタブ でキーワードでテーマを検索してインストールすることができます。

私は自作テーマ用のベースとなるテーマを作っているので、そのテーマのstyle.cssをサイトにあわせて書き換えてアップロードして有効化しています。

style.cssのコメント部分をこんなかんじに書き換えています。

[css]

/*
Theme Name: vcolors-v2
Theme URI: http://blog.v-colors.com
Description: vcolors-v2
Author: YUKI
Author URI: http://blog.v-colors.com
Template:
Version: 1.0
*/

[/css]

このへんのことはWordPress自作テーマの作り方にも貼付けているPDFの資料に詳しく書いているので、テーマを一から自作したい!というかたはこちらもあわせてどうぞ♪

(↑画像をクリックするとpdfを開きます)

4.functions.phpの設定をする

使うテーマが決まったら、テーマフォルダ内のfunctions.phpにいろんな設定をしていきます。

アイキャッチ画像を使えるようにする

WordPressでは記事ごとのサムネイル画像【アイキャッチ画像】が設定できます。

こういうふうに簡単に一覧を出したりできます。便利ですね。

ただこの機能は、使用しているテーマフォルダ内のfunctions.phpにアイキャッチ画像を使う旨の記述があってはじめて使えるようになります。

[php]

add_theme_support( ‘post-thumbnails’ );

[/php]

アイキャッチ画像を表示させるには、テーマに

[php]

<?php the_post_thumbnail(); ?>

[/php]

と書くだけです。

オプションなども設定できます。
こちらのサイトにとっても詳しくまとまっているのでもっと詳しく知りたい方はぜひ!

画像のサイズバリエーションを増やす

メディア設定の箇所でも触れましたが、

これくらいのサムネイル画像も欲しいし

↓こういう小さいのも一緒に生成したい…とかいうときがあったりします。

そんなときは、functions.php内に以下のように記述します。

[php]add_image_size( $name, $width, $height, $crop );[/php]

↓ミニサイズを増やすとするとこんな感じで。

[php]add_image_size( ‘mini’, 45, 45, true );[/php]

引数は以下の通り。

add_image_size( $name, $width, $height, $crop )
$name … サイズ名:アルファベットが安心 例)’my-original-size’
$width … 画像の幅:整数,ピクセル単位
$height … 画像の高さ:整数,ピクセル単位
$crop … 縮小しないで中央を切り抜く(true)か否か(false):true または false

テーマ側での表示のさせ方も含め、以下のページに詳しくまとまっています


functions.phpに書き込めばほかにもいろんなことができますよ☆

こちらに詳しくまとまっています!


以上、いつも最初にやっていることまとめでした。
あとはどんどん自分好みにカスタマイズを進めていきます。

自作テーマの作り方については(上でも紹介しましたが)こちらの記事もどうぞ。

WordPress自作テーマの作り方
(デザイン・コーディングはできるけど、WordPressのテーマ化する手順がわからない…という方向けです)

皆さんはインストールした後、どんな感じでセッティングしていますかー??
これもやったほうがいいよ!もっとこうしたほうがいいよ!などありましたらぜひ教えてください♪
環境や使い方によって、あなたにとって最適な環境設定は異なってくると思うので、いろいろ試して自分なりの最強初期設定を見つけてみてくださいね♪

ではでは☆


以下はお仕事以外で、個人的にWordPressで作ったサイト一覧です。
サンプルとして載せておきます☆


最近買った本でよかった2冊

WordCamp Fukuoka2011 WordPressテーマの作り方発表資料など

今年も大盛況のうちにWordCamp Fukuoka 2011が開催されました!

詳細な感想はまた後日ということで、中教室で担当させていただいたセッションの資料を取り急ぎ公開します。

今年も大盛況のうちにWordCamp Fukuoka 2011が開催されました!

参加してくださった方350名+スタッフ50名弱の計400名近くが一堂に集まったとか…

しかも県外からもたくさんご参加くださって、東京や大阪、名古屋、鹿児島、熊本、兵庫に長崎、沖縄などなど…!
全国のWordPress好きの方々と交流することができました。

今年も本当に楽しかったです!

詳細な感想はまた後日書くとして、中教室で担当させていただいたセッションの資料を先に公開します。

予想をはるかに超える方々にお越し頂いて…。
本当にありがとうございました。

当日の音声や動画とかがないのでスライドだけだとなんのことだかわからないページなどに少し補足をいれたり、不要なページは一部削ったりしています。

間違えていた部分も修正しました><

アイキャッチ画像を使いたい時、functions.phpに書かなければいけないのは、
add_theme_support( ‘post-thumbnails’ );
です。

当日のスライドのスクリーンショットが間違っていました><
ごめんなさい。。

Wcfukuoka2011 slide

配布した補足資料(pdfです)

今回のセッションも、テーマづくりがはじめての方がつまずきやすいポイントの解説を中心にまとめてみました。

頑張ってスライドをつくったら50枚とかになっていて、最終的に20分間、ものすごいスピードで話すことになってしまいました…。お聞き苦しい点も多々あったかと思います。ごめんなさい。

そのぶん、少しでもわかりやすいようにと資料を印刷していたのですが、これまた準備枚数が足りずみなさんにプリントをお渡しすることができませんでした。。。

当日配布した資料もpdfで置いておきますので、よろしければご覧下さいね。

聞いてくださったみなさま、本当にありがとうございました!!!

WordCamp Fukuoka 2011のサイトができるまで。

今年も福岡でWordCamp開催です!
今年はサイトデザインを担当させていただきましたー!今日はその時の行程などをかいてみました♪

あのWordCampが今年も福岡にやってきます!
今年は2011年2月19日、九州産業大学にて開催です!

ということで、今年はなんと!サイトデザインとコーディングを担当させていただきました…!!

このデザインにした理由と作業の流れ等を書いておきたいと思います。

デザインを起すにあたって

今年のキーワードは【Publish】です。

WordPressが、自身を「Blog Tool and Publishing Platform」とうたっていること、近年さまざまなPublishの方法がうまれてきていることなどから、今年は、【Publish】をテーマに、デザインやアイディアが生み出されるまでの過程にも焦点をあてていこう!ということのようです。

Skypeで様々なアイディアを頂く

Skypeで会議をしました。
それぞれが【Publish】という言葉に持つイメージやサイトの方向性について話していきました。

以下のような様々な意見が出ました。

  • アイデアを生み出してそこから広い範囲に伝えていくまでのプロセスにもスポットを!
  • 誰でもアイデアを、好きなようにパブリッシュできるよ、という流れで
  • パブリッシングなので、落ち着いた感じよりももっと躍動的な感じ?
  • アイデアを生み出してそこから広い範囲に伝えていくまでのプロセス
  • かめはめ波なイメージだなぁ。→パブリッシュ
  • 僕はあまり激しいイメージ無いけどな、紡ぐっていうイメージ持ってるので
  • ピープルズパワー的な、土一揆的な激しいイメージ
  • どちらかというと、縁の下の力持ち的なイメージです
  • 革命です!

上記を元にデザインを考える

革命といえばもうこのフランス革命のイメージが一番に出てきたのですが…

お話を聞いてみて、全体を通して感じたことは、今回のテーマに関して

「みなそれぞれの感じ方や考え方、思いがあり、それぞれに個性豊かに表現している」

なぁということでした。

そこで、

WordPressの使い方や、そもそもなにを使ってPublishするのかは十人十色。
形にとらわれず、いろんな方法で、自分なりに、あなたもPublishしてみませんか?
そんなきっかけになるイベントですよー!

ということをデザインで表現できたら一番よいのではないか、と考えました。

そんなことを考えながら、紙にぐりぐりとイメージを書きなぐっていき…
今回のいろんな形、いろんな色のあるにぎやかなデザインの原案が完成しました。

ロゴは、様々なフォントを使い、いろいろな色、大きさを組み合わせたものに。

メインビジュアルはカラフルな鉛筆や本を使用することにより、
いろんな色(表現方法)があり、それは人それぞれ、というイメージを表してみました。

気軽に遊びにきてもらえる雰囲気にしたかったので、
あまり難しいイメージになりすぎないよう
手書き風のやわらかさのある線&紙のようなテクスチャで親しみやすい感じを出しました。

でも書体は明朝体でしっかりとしたイベントであるイメージも残し、

熱い気持ちで開催している!というメンバーの気持ちも
右上の旗で表現してみました。

コーディングする

今回のデザインは、影や質感のあるパーツが多かったこともあり、
透過pngを多用しました。

一応IE6でも問題なく見られるよう、
透過pngに関してはDD_belatedPNGというjavascriptを使って対応しました。

あと、はソースを見る人がきっといる!と思ったので、
コメント欄にちょっと文字を入れておきました。

HTML5でやってみようかとも思ったのですが、
時間もなかったこともあって、今回できませんでした…。

かわりにValidなHTMLになるようには気をつけました。

テーマ化する

テーマ用のページは、トップページ、記事ページ、ページ用ページの3パターンをつくりました。
この状態で@takayukisterさんにお渡しし、登録用の処理などを追加していただきました。

公開&参加登録受付中です

ということで、こんなかたちで出来上がり、
現在公開中&参加登録受付中です。

WordPressを使ったことがない、という方にも楽しんでいただける
インストール体験ワークショップや、
午前中は、その場にいるメンバーでテーマを決め、話を進めていくアンカンファレンスというおもしろい試みも予定されています。

セッションもWordPressの話だけにとどまらず、
様々なジャンルの方々が、いろいろな方面からお話をしてくださいます。

みんなボランティアで運営していて、いいイベントにするべく、一生懸命準備しています。

年に一度の楽しいお祭りです。
ぜひ、お越し下さいね。

WordCamp Fukuoka2011
http://2011.wordcampfukuoka.com/

2011年2月19日 九州産業大学にて開催

参加料は1000円です。

当日は、大教室(メインセミナー)中教室×2(ミニセミナー)、ワークショップ会場

去年はテーマの作り方について発表させていただいたのですが、
実は今年も中教室で30分ほどお時間を頂いたきました。
今年は、今回のこのサイトができるまでの流れの詳細や、
WordCamp運営に関わることのよいところなどを
お伝えする時間にできれば思っています。

お時間のある方はお立ち寄りいただけますと幸いです^^