jQuery Mobileを使ったスマートフォン用壁紙ダウンロード用サイト『WALLPAPER COLLECTION for スマートフォン』つくりました!

スマートフォン用の壁紙がダウンロードできるサイト、『WALLPAPER COLLECTION for スマートフォン』を作ってみました!

最近いろんなところで話を聞いて気になっていたjQuery mobileを使用しています。
スマートフォンをお持ちの方、ぜひぜひアクセスしてみてくださいー!!

スマートフォン用の壁紙がダウンロードできるサイト
WALLPAPER COLLECTION for スマートフォン』を作ってみました!

最近いろんなところで話を聞いて気になっていたjQuery Mobileを使用しています。

サイトのベースはWordPress+jQuery Mobile

いつものようにベースはWordPressを使っていて、WordPress+jQuery Mobileでできています。

ちょうどPC用の壁紙ダウンロードサイト壁紙カレンダーのガラケー/スマートフォン版を作ろうと、素材をちょこちょこ準備していたところにちょうど良く使ってみたかったjQuery Mobileが結びついた感じです。

画像を指定サイズに切り出すPHPの処理は壁紙カレンダーのものをアレンジすればすぐできそうだったのと、画像の加工、WordPressへの登録等はすでに行っていて、あとは表示部分を整えればいいだけになっていたのもあり、jQuery mobileを使ってのフロント部分の実装はあっという間にできました。

WordPress+jQuery mobileおそるべし。

作った動機と目的

今回の作った動機は

Photoshopの練習で作った縦型の画像がいっぱいあってもったいなかったから

×

スマートフォン対応を勉強しておきたかったから

です。

新しいことを勉強するときはただ勉強するだけじゃ、ちーっとも覚えられないので、「とりあえずやってみる」っていうのを大事にしています。

た だやってみても表に出ないんじゃやる気があんまり出ないので、「勉強ついでに手間がかからずに作れて、管理も手間がかからないもので、やりたいこと(学び たいこと)がしっかり理解できて、且つ少しでもいいから誰かの役に立つ」ものを探し出して一応サービスとしてカタチになるようにしています♪

Photoshopの練習で作った縦型の画像がいっぱいあってもったいなかったから

もともとPC用の壁紙ダウンロードサイトの壁紙カレンダーはPhotoshopの練習で写真加工したり、色味を強く現像してみたりいろいろ試しているのですが、たまーに「おぉ!これは!」と思うものができるのですが使い道がないのでもったいないので何かに使えないかなぁと思いつき、カタチにしたのですが、PC用の壁紙って横長な訳ですよ…!

縦長の行き場がなかったので、今回スマートフォン版で消化することができました☆(というほど世に出せるようなたいしたものではないのですが…)

スマートフォン対応を勉強しておきたかったから

スマートフォン対応って今後お仕事で増えてくるだろうなと思ったので今のうちにしっかり理解しておきたかったので


はじめてのjQuery Mobileでとても参考になったサイト

今回、はじめてjQuery Mobileを使用するにあたり、わかりやすくて参考になったサイトをご紹介します


今後の課題

  • 現在発売されているスマートフォンの壁紙のサイズを調べて全部対応する
  • トップページの画像がスライドするところのアニメーションをCSS3でやる
  • 選べるデザインを増やす
  • スマートフォンを…

現在発売されているスマートフォンの壁紙のサイズを調べて全部対応する

現在発売されているスマートフォン(Android端末)のスペック一覧をH2Oスペースのたにぐちさんがまとめて下さっていて(すばらしいまとめありがとうございます!!)→Android端末のスペックをまとめてみています

これをみながら一旦はすべて対応したのです…が。

壁紙のサイズ=画面解像度ではない機種がある

壁紙のサイズ=画面解像度ではない機種があることがわかり。

GalaxySは画面の解像度は480px x 800pxなのに壁紙のサイズは 960px x 800pxらしい…!ということが発覚したのです。

もしかしたらほかにもそんな機種があるのかも?と、今は私のほうで壁紙のサイズがわかった機種、iPhone,iPad,GalaxySのみ対応にしています。

いろいろ調べてみたのですが各機種の画面解像度は書いてあっても、壁紙サイズがあんまり書いてないのです…!数値さえわかれば1分で対応できるのに!!><

この機種を使っていて、この機種の壁紙のサイズはこれだよ!とか壁紙サイズの一覧があるよ!なんて情報をお持ちの方はぜひお知らせいただけるとうれしいです;;

トップページの画像がスライドするところのアニメーションをCSS3でやる

トップページのスライドしている画像の部分、今はjQueryを使って実装しているのですが、携帯端末にはきつい&何回かページ遷移してもどってくると消えてなくなるwのでCSS3アニメーションでなんとかしたいなー、と思っています。

ただなんかもう全っ然やり方がわからないので、twitterで5509のnoriさんがいつかブログに書くといってくれたのでそれを首を長ーーーーくして待っていようかと思っています(…)

選べるデザインを増やす

とりあえず勢いでリリースしてしまったのでまだあまり種類は多くないのですが、GWなどを使ってたくさんアップできればなーと思っています。がんばる!

スマートフォンを…

買おうかな、そろそろ…w


スマートフォンをお持ちの皆様、ぜひぜひご利用いただけるとうれしいです♪

スマートフォン用の壁紙ダウンロードサイト
WALLPAPER COLLECTION for スマートフォン

ようやくこのブログ用の スマートフォン用テーマ作りました

ようやくこのブログ用の スマートフォン用テーマ作りました!
今回、プラグイン(wp-touchなど)や既存のiPhone用のテーマを改良していく方法ではなくて、今使っているPC用のテーマをベースに、テーマを作ってみました。

このブログのスマートフォン用テーマ作ってみましたー!

現在、iPhoneでこのブログにアクセスすると、上記のようなスマートフォン用のテーマで表示されます。
(※4/21 1:30 Androidでもスマートフォンテーマで表示されるようにしました!)

今回、プラグイン(wp-touchなど)や既存のiPhone用のテーマを改良していく方法ではなくて、
今使っているPC用のテーマをベースに、テーマを作る方法にしてみました。

とりあえずカタチにがなったので、これからちょっとずつ見やすいテーマ目指して改良頑張ります☆
(あといろいろコード見直してもうちょいスムーズに表示されるようにします><たぶんいろいろと無駄なことしてるはず。)

で、スマートフォン用デザイン。

やらなきゃやらなきゃと思いつつ、
なにを気にして作ったらいいか実はイマイチよくわかっていなかったのです。

スマートフォン用デザインの基本などに関しては、
今回以下のページがとっても参考になりました!

また、このブログはWordpressを利用しているのですが、
WordPressのスマートフォン対応と言えばwp-touchなどプラグインで一発で対応できるものが有名だったりするのですが、

今回は上にも書いた通り、このプラグインは使わず、普段のテーマ作り方でスマートフォン用テーマを作りました。
wp-contents内にpc用とスマートフォン用のテーマを置いている状態です。

2つのテーマの切り替えには、 iPhone theme switcherというプラグインを使用しています。

プラグインを有効化し、使用したいテーマを選ぶと、iPhone・iPadからのアクセス時に設定したテーマを読み込むようになります。

ただ、このプラグインだとiPhoneの時しかこのデザインにならない上、iPadでもこちらのテーマが有効になってしまいます。

なので、twitterで@rintaxさんにアドバイスいただいた方法で、端末の判定を変更しました。
このプラグインの端末判定の箇所の判定条件を書き換える方法で、Androidを追加、iPadを削除しています。

ただ、スマートフォン向けの表示のさせ方に迷っていて、スマートフォンってPCサイトも問題なく見れるのがいいところでもあるような気がするので、一律強制的にスマートフォン用デザインを出すのってどうなのだろう?と思っています。

というのも、PC用とスマートフォン用でまったく同じ内容が乗っているならいいけど、PCサイトにはあるなにかがスマホ用だと足りない…とかあったらPCサイトの方がみたい!って時もあると思うし…。

はじめはPC用サイトを出す
→スマートフォンからのアクセスの場合はヘッダーにメッセージをだして、スマートフォン用テーマがあって切り替えられることを告知
→一度切り替えたらもう一回切り替えるまでそっちのテーマ

の方法もいいのかなーとも思ったり。

その場合だとWordPress theme switcherあたりを使うことになるでしょうか。

いや、スマホもってないんでよくわからないんですけどね…!(笑)

もうちょっと他の対応サイトなどを見て、いい方法を考えようと思います!

あと、考えるにあたっていろいろと参考になるサイトやプラグインの情報を頂いたのでメモ。

いろんなやり方ができそうです。

…さて。

今回テーマ自体はさくさく順調に作れたのですが、

WordPressのiPhone用テーマを作るにあたって困ったことがひとつだけありました。それが記事に張り込んでいる画像…!

PCで見ることを前提に、記事中には幅500pxぐらいの画像を埋め込んでいるので、難の指定もないそのままの状態では、画像がはみ出してしまいました。

でもmax-widthが使えるので、max-width: 100%で枠内に納められるじゃん!と喜んだのもつかの間、はり込んでいる画像にheightとwidthが入っていたため、横幅はいいのですが縦は指定されたピクセル数で表示されてしまって、横幅はいいものの、今度は縦に長くなってしまいました…。

javascriptでごにょごにょすれば消せるみたいなのですが…※

最初から本文にwidthやheightが入っていなければ表示させるときになにも気にしなくていいので、そっちのほうがいいなー?ということで、今回は本文からwidthとheightを消すことにしました。

※追記:かちびと.netのシロさんにjQueryで.removeAttr(“width”).removeAttr(“height”)で取ったらいいよ!と教えていただきました!ありがとうございます!!

とりあえず過去のエントリーの分は、一括でheightとwidthを削除してしまうとして…。

これから記事を書くとき、はじめからwidthとheightが入らないようにしたい…!(そもそもheightとwidth書かない派なので前々から気になってた)

そしてできればコアファイルはいじりたくない…

誰かいい方法知らないだろうか?と思いツイートしてみたところ

@jim0912さんが、functions.phpに書くだけでWordPressの画像挿入時にwidthとheight指定が入らないようにする方法を教えてくださいました!

本当にありがとうございます!!!

WordPressの画像挿入時にwidthとheight指定が入らないようにする
http://www.warna.info/archives/700/

動作もばっちりでした!

これで画像の幅問題も解決しました☆わーい☆

実は今お仕事でもいろいろとスマートフォン用のデザインを作っていたりするのですが、IE気にしなくていいってことがこんなに楽しいことだとは思わなかった…!w

いろいろできてとっても楽しいです(笑)

☆おまけ

実はtwitterで画像や動画が簡単に共有できるサービスのシャッターのサイトもスマートフォン用のデザインを最近やっと用意しました!(サムネイルのところなど一部まだ対応中のところもありますが)

よかったら見てみてくださいねー!

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ライフを☆

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

PROJECT311-震災寄付作品集-のサイト作成のお手伝いをさせていただきました

PROJECT311という、マンガ家やイラストレーターやカメラマンなどの作品を集め作品集にして販売し、その売上を全額寄付するプロジェクトのサイト作成をお手伝いさせていただきました。

ブログに書くのが遅くなりましたが
先日、PROJECT311という電子書籍チャリティープロジェクトのサイト作成をお手伝いさせていただきました。

PROJECT311 -震災寄付作品集-

デザインとコーディングをさせていただきました。
tumblrをカスタマイズして作っています。

このプロジェクトは、マンガ家やイラストレーターやカメラマンなどの作品を集め作品集にして販売し、その売上を全額寄付するプロジェクトです。

イラストレーターのりゅうらさんの呼びかけのもと現在51人の作り手の方々が作品を提供してくださっていて、現在第一弾が発売中です。

第一弾には、漫画家のひうらさとるさん、俳優の川岡大次郎さんなども参加されています。

311円で電子書籍として販売されており、売上は全額寄付されます。

こちらのサイトで購入することが可能です。
http://p.booklog.jp/book/23074

かなり見応えのあるページ数ですので、ぜひ見てみてください!

また、現在第二弾に向けて準備中で、プロアマ問わず、作品を提供してくださる方を募集中とのことです。

詳細はこちらをご覧下さい。


私もなにかできることをやっていきたいと思っています。

当面はこういったWebでのお手伝いや、募金と献血を中心に、できることを続けていきたいと思っています。

こういった活動など、私でなにかお役に立てるようなことがあればできる限り協力させていただきたいと思っておりますのでどうぞお気軽にお声かけ下さいね。

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冊