VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
すてきなWebサイトをひたすらつくりつづけたい。
WordBench福岡の勉強会、「偶数月は初心者向けのおそらく3.7 回目くらいのWordBench 福岡」で発表してきました！
当日のスライドです。
今回、先日ABC Words 2013で発表させていただいた内容を再編集して発表してきました。
具体的なやり方は調べてばいくらでも出てくるのですが、
なにができるのかわからなければ具体的なやり方も調べようがないので
こういうことができる！というのを簡単にまとめて発表してみました。
機会があればまたなにかまとめて発表したいなと思います！
主催の@tekapoさんはじめ、みなさんありがとうございましたー！
↓当日のツイートなどはこちら
http://togetter.com/li/578231
WordCamp東京、無事に終了しました！
取り急ぎ、本日の私のセッション資料を公開しました。
WordCamp東京、無事に終了しました！
PHPカンファレンスと合同ということもあり、圧倒的なスケール感で
東京ってホントにすごいな…と思いましたw
今までお会いする機会のなかった方ともいろいろご挨拶ができて本当にうれしかったです！
ありがとうございました！
取り急ぎ、本日の私のセッション資料を公開しました。
15分という短い時間だったのでかなり早口になってしまったので、
スライドの方で内容をご確認頂けると幸いです^^
Ust録画もあるみたいですが見つけきれませんでしたw
お聴きくださったみなさま、本当にありがとうございました！！＾＾
WordPressで静的ファイルとWordPressの処理の切り分けに困っていたのですが、twitterで解決策を教えていただきました！ブログに書いてもいいといっていただいたのでシェアします☆
WordPressを使っていても、
同一サーバー内に静的ファイルを置いてそれと共存させることができます。
たとえばこんな感じで静的ファイルを置けば、
http://wordpressをインストールしたURL/pamphlet/index.html
にアクセスすれば、WordPressを介することなくこのディレクトリ内のindex.htmlが表示されます。
この場合はよいのです。
問題なのは以下のような場合。
まずWordPress側のパーマリンク設定をデフォルト以外にしていて、
abcdeというスラッグのページを
http://wordpressをインストールしているURL/abcde/
というような感じでディレクトリにアクセスしているっぽいURLにしている場合で
pamphletという部分はWordPress側でページを表示させて、その下にあるpageというページ（まぎらわしいですね…）はhtmlをそのまま表示させたい。
ですが、こういう構造になっているとWordPressでpamphletというスラッグをつけてページを作っても、こちらの存在するディレクトリを優先して読みにいってしまうので、このディレクトリには表示できるものがなにもないため403エラーになってしまいます。
どうしても解決しきれなかったので、twitterでお助け願いを出してみました。
すると@Webnistさんと@jim0912さんからすばらしいアドバイスをいただくことができました！！
私の他にも同様のことができなくて困っていた方もいらっしゃったようなので、お二人に許可をいただいたので解決方法をシェアします。
それがこちら。
WordPressをインストールしているディレクトリ内にあるindex.phpを対象のディレクトリにコピーして、index.php内にあるwp-blog-header.phpへのパスをそのディレクトリからのパスに書き換える(@Webnistさん)
こうすることによって、上位のディレクトリでWordPressの実行ファイルを読み込むようになるので、WordPress側で用意したページが読み込まれるようになります！
手順はこう。
1)WordPressをインストールしているディレクトリにあるindex.phpを、WordPressを使用して表示させたいディレクトリ（今回はpamphletのディレクトリ）にコピー
2)コピーしたindex.phpを開き、require(‘wp-blog-header.php’);の一行のパスを書き換える
3)WordPress側でページを作成し、pamphletというスラッグを設定する
以上です！
私はこうしました。
WordPressがあるディレクトリより1階層下のディレクトリだったので
require(‘../wp-blog-header.php’);
としました。
WordPressをルートにおいているなら
require(‘/wp-blog-header.php’);
でもいいと思います。
注意点としては
WordPressに付随するファイルを書き換えておかないといけないのでアップデートの時index.phpに更新がかかっていないかチェックしてあげる必要がある
とかでしょうか。
でもルートのindex.phpの中身ががらっと変わることはないんじゃないかなーとは思うのでそこまで気にしなくていいかな？どうかな？
ほかにも、
静的ページは他のWPとは干渉しないディレクトリに置いて、.htaccessで、/a/b/index.html だったら、そっちにリライトする(@jim0912さん）
というのを教えていただきました。
WordPressに付随するものをコピーしたりいじったりしなくていい方法です。
注意点としては
リダイレクトするので静的ファイルのURLが変わってしまう
.htaccessを管理画面から書き換えたりするときに注意が必要
という点があります。
どうしても解決できなかったのでどちらの方法も本当に勉強になりました！
ありがとうございました！
こういう構造にならないようにサイト設計するのが一番なんでしょうが、リニューアル案件ですでにURLを告知しているので変えられないとかやむを得ない事情でなんとかしないといけない場合も多々あると思うので、同じことで困っていたみなさん、ぜひお試しくださいね☆
教えていただいた@Webnistさん、@jim0912さん、本当にありがとうございました！！
4月になってようやくお仕事が一段落したので、今鬼のように本読んでます。
というわけでいい本にいっぱい出会ったのでちょっとずつ紹介していこうと思います。
今日はWordPress本2冊です。
最近ものすごい勢いで本を読んでいるYUKIです。
こんにちは。
このブログをご覧頂ければわかるように(※3月一度も更新なし)
「あれ？3月ってあったっけ…？？？」
ってぐらい2月後半から猛烈な勢いでお仕事をしておりました。
そんな時期にあっても、
すばらしい本は世の中にどんどん出てくるわけで。
私の横にも、どんどん積本されていくわけで。
というわけで、お仕事が一段落したので
今、猛烈な勢いで本読んでます。
というわけで、
いい本にいっぱい出会ったので
ちょっとずつ紹介していこうと思います☆
今日はWordPress本2冊です。
まずは一冊目。
著者の大曲さんに献本いただきました！感謝！！＞＜
実はこの本、私がFireworks本を書かせていただくことが決まった時、
編集者さんに「WordPress本の話もあるんですが…」とお話を伺っていた本で。
なにせこの広いWordPress界。
すごいなーすごいなーと憧れている
「あぁ、あこがれのWordPressマスター」達がいるわけです。
「この人たちが書いた本が読みたいです！！！！」という方達を
ご紹介させていただきました。
なので本当に読みたかった本！！！！
大曲さん、星野さん、豊田さんというWordCampでもおなじみの顔ぶれの執筆陣に、
執筆協力はこちらもWordPress界隈では知る人ぞ知るOdysseyさん！
一言一句間違いは許さないぜ！な
盤石のチェック体制で出来上がった本です☆
前置きが長くなりましたが…
気になる内容の方。
ああもうホントすんごくよかった！
タイトルには（速習デザイン）とついているのですが、
WordPressはじめての方から中級者の方まで…とか限定せずに、
WordPressでひとりでサイト構築をしていて、
これでいいのかなー？と思いつつやっている人すべてにおすすめです！
具体的なポイントをあげると…
WordPress本がというわけではなく、技術書全般に言えることなのですが
「初心者向け」の本となっているにもかかわらず結構ちゃんと書いてない本多くないですか？
ここが設定画面です。各項目をそれぞれ設定します。とかですませてある本とか
まちがいなくはじめての人はここでひっかかるんじゃ…っていう。
この本はちゃーんとかいてありました。
なにをどういれたらいいのかわかるので安心。
こういうところがちゃんと説明してあるので、
はじめての人におすすめしやすい本になっています。
WordPressテーマ化される前のHTMLファイルもダウンロードできます。
WordPressはとにかく一度自分でコードを埋めていくのが上達への一番の近道だと思っているのですが、
自前のHTMLファイルがなくてもすぐできます。
「WordPressのテーマ化をする」というのがどういうことか、すぐに実践できます。
WordPressってホントになんでもできて、プラグインもたーっくさんあってすごいやつなんですが
プラグインがありすぎて（似たようなのもいっぱいあって）結局どれがいいんだか…っていう状況がよくあります。
この本はプラグインの紹介も充実していて、
「こういうのもあるのか！」「あ、こっちもいいな！」「やっぱこれだよね！」
という発見がたくさんありました！
インストール、管理画面の使い方、テーマの作り方、便利なプラグインやカスタム投稿タイプ等の一歩進んだ使い方、という感じでテンポよく、順序よく書かれています。とっても読みやすいです。
巻末のリファレンスがとても充実しています。
ページ稼ぎ！って内容は全然ありません。
手元においておくと役立つものばかり。素敵。
インストールから管理画面の基本操作もしっかり書いてありますし、
ひととおり使えるようになるまではこれ一冊でバッチリです。
さらに一歩先に進むためのアドバイスも充実しているので
この先はこういうこと勉強していけばいいんだな、
というのがわかりやすくなっているのも素敵。
WordPressがはじめてのかたにも安心な内容で、
かつすでに使っている人にも新しい発見がある良書でした。
WordPressってよく聞くんだけどなに？何からやったらいい？と
よく聞かれるのですが、今迷わず1冊目にお薦めしたい本です☆
ちなみに私は今ずっと手元においていて、
WordPressを新規インストールした時、設定もれはないか、
本の手順を確認してチェックしてます☆
ちゃんと書いてあるからホント便利です♪
つづきまして2冊目です！
買った！買ったよー！！！
まーこれも書いた人たちが凄すぎて…！！！
こもりさんと岡本さんです。
岡本さんはブログでもいろんなWordPressのカスタマイズの方法等を解説してくださっていて
穴があくほど読んでいます。
そんなお二人の本！
こちらは1冊目よりもちょっと上級者向けの本です。
いや、上級者向けというか、
上級者にもおすすめ！（発見がたくさんある内容！）という意味で、
初級者も中級者も絶対抑えておくべき内容なので全制作者向けかも。
WordPressって
「わー！たのしー！」
ってプラグインガンガンいれていると…
どんどん重くなって…
WordPress重い！使えない！とか…
勘違いしてしまいがちで・す・が！
そうじゃないんです。
「あなたの作り方が悪いんだよ」
とびしっと指南してくれる一冊ですw
内容の方は…
WordPressがどういう仕組みで動いているのか、どういう理由で遅くなるのかなど
原因や仕組みがしっかり解説してあり、さらに速度の計り方、改善の方法等これでもか！！というほど解説してあります。
速度の計り方がちゃんとかいてあるので、
それを実践してどういう効果がでたかをちゃんと知ることができます。
やってみたけど早くなってるの…かな…？まぁいいや。なんてことはありません。
さらに！VPSやサーバーサイドのチューニング方法についても言及されています。
気になってはいたもののまったく手を出さず…な状態だったので
これを気に借りてやってみようと思っているところです。
Amazonのレビューにもあったんですが…
WordPress本とだけくくってしまうのがもったいないぐらいの充実の内容です。
WordPressに限らず、
サイト表示の高速化をあんまり意識していなかったなぁ…という制作者の方はぜひ！
私も今すべてのサイト見直し中です…！＞＜
WordPressをさらに一歩踏み込んで理解したい人に本当におすすめです♪
ということでお気に入りの2冊をご紹介しました
最近、いつもブログとかをチェックさせていただいていて
常々この人たちが書いてくれた本が読みたいなー！！と思っていた方々が
続々とWordPress本を執筆されていて、うれしいことこの上ないです。
もっとどんどんお願いします！
そしてもっとたくさんのことを私に教えてください！！！w
というわけで、売れたらもっといろんな本を書いてもらえると思うので
そんな期待も込めて！（笑）
最近出たおすすめのWordPress本2冊のご紹介でした☆
どちらも本当に素敵な本なので、
ぜひチェックしてみてくださいね♪
WordPressでテーマをカスタマイズや自作していく際、まず最初につまずくであろうポイントを10個、できるだけ簡単にわかりやすく解説してみました！
一度乗り越えればあとは簡単です！テーマつくってみようかなーと思っていただけるとうれしいです♪
今回は【WordPressではじめてテーマをカスタマイズ・自作するときありがちなに10のつまずき】ということで、テーマをカスタマイズや自作していく際、まず最初につまずくであろうポイントを10個、できるだけ簡単にわかりやすく解説してみました。
全部私が実際最初につまずいたポイントなので、きっとはじめてカスタマイズするかたのお役にたてるはず…！
テーマカスタマイズの基礎の基礎編です。
テーマファイルを開いてみて、なにがわからないのかすらわからなくてカスタマイズを断念した、というような方にぜひ見ていただきたいエントリーです。
ざっくり概要がつかめれば、「なにがわからないのかわからない状態」が解消されるので、あとは自分で調べて理解していけるようになるんじゃないかな、と思います。
といったような方もぜひどうぞ♪
とりあえず、テーマファイルがどこにあるのかがわからないとカスタマイズのしようもありませんよね。
テーマファイルはWordPressのディレクトリの中の【wp-content】->【themes】の中にあります。
テーマを自作する場合もこのディレクトリの中にテーマファイル一式を作ってアップロードします。
それぞれのテーマのディレクトリの中に、index.phpやstyle.cssなど必要なファイルを作っていきます。
実際にテーマファイルを見てみましょう。
現在のWordPressの標準テーマ、twentytenテーマをみていきます。
index.phpを開いてみます。
終わり。
なんというこざっぱり感…！
これをみて、どこでなにをしているのかさっぱりわからず、リタイアした人も多いのではないでしょうか…。
WordPressでは、いろんなページで共通して使う部分だけをパーツとして別ファイルに保存して、それを各ページで読み込むことで修正の際の手間をすくなくできるような作りになっています。
たとえば
[php]<?php get_header(); ?>[/php]
この部分は、テーマディレクトリ内のheader.phpを呼び出す、という意味です。
header.phpを見てみましょう。
<head>や<body>がでてきました！
フッターとサイドバーも同様に別のファイルが読み込まれています。
それぞれ
が読み込まれます。
[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の関数リファレンスページをご覧下さい。
こんな感じで、様々なファイルを読み込んで表示しています。
では、メインの処理になる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じゃないかなと思います。
たとえばブログのタイトル部分を画像にしたい！と言ったような場合。
まず、タイトル画像をつくります。
作ったらそれを使用しているテーマディレクトリ内のどこか（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ファイルも同様にテーマディレクトリ内に保存し、
を使って絶対パスを出力してあげることによって、適切なパスでファイルを読み込めるようになります。
WordPressのテーマは基本的にはindex.phpとstyle.cssがあれば動かすことができますが、twentytenのテーマを見ると、archive.phpやcategory.phpなどほかにもいろいろなテンプレートファイルがあることが確認できると思います。
たとえばトップページとカテゴリーテージのデザインをわけたい、といったときなどそれぞれ対応するファイル名のテンプレートがあればそれを優先して読み込み、すべてなければindex.phpを使うというような仕組みになっています。
WordPressテーマは、それぞれのページでテーマを読み込む優先度が設定されていて、たとえばカテゴリーページはこのような優先度でテンプレートファイルを探していきます。
上から順に探していき、見つかったこころのテンプレートファイルを適用します。
なにもなければindex.phpが適用されます。
タグページ、日付ごとのアーカイブページ、投稿毎のページなど、細かくテンプレートファイルをわけて適用することができます。各ページのテンプレートファイルの優先度はWordPress公式ページに詳しくまとまっていますのでチェックしてみてください。
http://wpdocs.sourceforge.jp/テンプレート階層
twentytenテーマファイルのheader.phpやfooter.phpを確認してみてください。
wp_head()やwp_footer()といった表記が目につくと思います。
これはwp_head()アクションをスタートさせる関数で、ヘッダー内のメタ情報をはじめ、いろんなことを出力する関数です。
メタ情報等を出力するので、勝手にでてほしくないから消した！というようなことをやりがちな関数でもあります。
しかし、プラグインの多くはこの関数が呼び出されるタイミングで一緒に「プラグインに関わる処理もお願いね」と処理を投げるようになっているため、このwp_head()そのものを削除してしまうと、プラグインの動作に必要な処理（ファイルの読み込みなど）が行われなくなり、プラグインが正常に動作しなくなってしまいます。
wp_footer()も同様です。
プラグインが正常に動作しない場合はまずこの関数がどちらも正しくテーマ内に組み込まれているか確認しましょう。
ちなみに、wp_head()の出力結果が気に入らない場合は、調整できます。
ただし、動作に必要なファイルの読み込みをとめてしまったりすることのないよう、慎重に行ってくださいね。
ブログの情報や記事の本文を出力したりするテンプレートタグ。
たくさんあるのですが、ありすぎてはじめは大パニックになりました。
なのでよく使うテンプレートタグをピックアップしてご紹介します。
[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]
（値は管理画面->一般設定で指定）
[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/ と出力される）
[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]
[php]<?php echo post_custom(‘key’); ?>[/php]
もっともっとテンプレートタグはあります！
一覧はこちらから
ここからここまでがエントリーの一ブロックで、この部分を記事件数分繰り返したい、という部分をループで囲みます。
ループはこのように書きます。
[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]
このように書けば、記事が一件もなかったときの表示を以下のように記述することができます。
テンプレートタグの埋め込みを行う前に、とりあえずまずはテーマとしてとして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 | テーマのタグ |
テーマのディレクトリの中にscreenshot.png を置いてFTPでアップロードするだけで自動で認識されます。
画像のサイズは、横300px × 縦225px で作成すると良です。
いかがでしたか？
はじめてカスタマイズするとき、私がつまずいたポイント10個のご紹介と解説でした。
ここまでわかれば、あとはいろんなテーマをみてみて、その中に書いてある関数名をググって調べたり、自分で解決できるようになっていると思います。
私がWordPressをはじめて使った時より遥かに書籍もWeb上の情報も充実しています。以前くじけてしまったことがあるという方も、これを機にもう一度挑戦してみてはいかがでしょうか？
この春新しいことを覚えてみたいかた、まだWordPressさわったことがないという方も、わかりやすい資料が増えてきた今、ぜひトライしてみませんか？
WordPressはどんどん機能が充実してきていますので、ぜひ早めに基礎を覚えて、今後はどんどん新しい機能を使いこなすことに時間をかけていきましょう♪
先日書いたWordPressをインストールしたら最初にやってることまとめも一緒にどうぞ。
それでは。楽しいWordPressライフを☆
もし間違いなどあればご指摘いただけるとうれしいです＞＜
今日は、WordPressを設置したとき毎回やっているカスタマイズに入る前の下準備について、自分のメモもかねてまとめてみました。
仕事でも、プライベートでも本当にかかすことのできない存在になっているWordPress。
今回は、そんなWordPressを設置したとき毎回やっているカスタマイズに入る前の下準備についてまとめてみました。
毎回やっているのにうっかり忘れたりしてしまうので自分のメモもかねて…！
デフォルト設定のままだと
http://blog.v-colors.com/?p=123
とかでちょっとかっこわるいので
パーマリンクの設定を変更します。
管理画面メニュー 設定->パーマリンクの設定からお好みの設定に。
いろんな設定ができます。どんな設定ができるかは公式サイトのパーマリンク設定についてにまとめられています。
管理画面メニューの 設定->メディア で投稿画像のサイズを設定します。
ここでは、サムネイル（thumbnail）、中サイズ（medium）、大サイズ（large）のサイズが指定できます。
WordPressのデフォルトでは、サムネイル（thumbnail）、中サイズ（medium）、大サイズ（large）、フルサイズの4サイズが自動的に生成できますが、もっといろんな種類が欲しい時もありますよね。
↑たとえばこういう感じで小さいのともっと小さいの2つのサムネイルを生成したい…とか。
テーマディレクトリ内のfunctions.phpに【add_image_size】を記述してあげると、生成する画像を増やせます。
詳しいやり方については
4.functions.phpの設定をする
に記載していますのでそちらをどうぞ。
キャッチフレーズや（これが<?php get_bloginfo ( ‘description‘ ); ?>で表示される分になります）
日付フォーマット、時刻フォーマットなどを好みの形に設定します。
WordPress日本語版をインストールした時点で標準で入っているプラグインがいくつかあります。
その中から2つはかかせないプラグインとして有効化しています。
Akismet
コメントスパム対策のAkismet。
私の弱小サイトなんてなくてもそうそうスパムコメントありませんが、たまーにあるときはしっかりはじいてくれてます。
WP Multibyte Patch
WordPress日本語版のマルチバイト文字に関する修正を行うプラグインです。メール送信、トラックバック受信、ピンバック受信、検索等で発生する障 害に対して対策を行ってくれているとのこと。その辺りを特別に自分で対策をしている人以外は迷わず有効化を。
必要なプラグインを追加していきます。
大体は新規プラグイン追加画面から検索して見つかるプラグインです。
手動アップロードの手間いらずでラクチンです。
管理画面メニューのプラグイン->新規追加
Contact Form 7
@takayukister作の国産お問い合わせフォーム。いつもお世話になっています。
お問い合わせフォームとしてだけではなく、PHOTO STOCKERのサイドバーのアンケートフォームにもContact Form7を使っています。いろいろ使えますね。
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でスタイリングできるので、こんな感じでデザインにあわせて変更できます。
人気のエントリーを表示させるプラグイン。
こんな感じで人気のエントリーを表示させることができます。
Similar Posts
関連するエントリーを表示させるプラグイン。
タグやカテゴリー、かいた人の情報などの関連性を判断して（どの関連性を優先するか、しないかなどは管理画面で設定できます）関連するエントリーを表示してくれます。
PHOTO STOCKERでは関連写真を表示させていますが、このプラグインを使って表示させています。
Post-Plugin Library
上の二つのプラグインを利用るときに必要になるプラグインです。使うときはこれも一緒に有効化を。
Ktai Style
WordPress ウェブログを日本の携帯電話対応にするプラグインです。
スマートフォン対応のプラグインは今いろいろお試し中です。一番いいと思うものが決定したら追記しますね。
使用するテーマを用意します。
管理画面メニューの 外観->テーマ->テーマのインストールタブ でキーワードでテーマを検索してインストールすることができます。
私は自作テーマ用のベースとなるテーマを作っているので、そのテーマの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の資料に詳しく書いているので、テーマを一から自作したい！というかたはこちらもあわせてどうぞ♪
使うテーマが決まったら、テーマフォルダ内の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 Fukuoka 2011が開催されました！
詳細な感想はまた後日ということで、中教室で担当させていただいたセッションの資料を取り急ぎ公開します。
今年も大盛況のうちにWordCamp Fukuoka 2011が開催されました！
参加してくださった方350名+スタッフ50名弱の計400名近くが一堂に集まったとか…
しかも県外からもたくさんご参加くださって、東京や大阪、名古屋、鹿児島、熊本、兵庫に長崎、沖縄などなど…！
全国のWordPress好きの方々と交流することができました。
今年も本当に楽しかったです！
詳細な感想はまた後日書くとして、中教室で担当させていただいたセッションの資料を先に公開します。
予想をはるかに超える方々にお越し頂いて…。
本当にありがとうございました。
当日の音声や動画とかがないのでスライドだけだとなんのことだかわからないページなどに少し補足をいれたり、不要なページは一部削ったりしています。
間違えていた部分も修正しました＞＜
アイキャッチ画像を使いたい時、functions.phpに書かなければいけないのは、
add_theme_support( ‘post-thumbnails’ );
です。
当日のスライドのスクリーンショットが間違っていました＞＜
ごめんなさい。。
今回のセッションも、テーマづくりがはじめての方がつまずきやすいポイントの解説を中心にまとめてみました。
頑張ってスライドをつくったら50枚とかになっていて、最終的に20分間、ものすごいスピードで話すことになってしまいました…。お聞き苦しい点も多々あったかと思います。ごめんなさい。
そのぶん、少しでもわかりやすいようにと資料を印刷していたのですが、これまた準備枚数が足りずみなさんにプリントをお渡しすることができませんでした。。。
当日配布した資料もpdfで置いておきますので、よろしければご覧下さいね。
聞いてくださったみなさま、本当にありがとうございました！！！
2010年2月27日、ついにWordCampFukuoka2010が開催されました！デザイナーのためのWordpressオリジナルテーマ作成入門ということでメインホールでプレゼンさせていただきました…！プレゼン資料も公開しましたのでよろしければご覧くださいませ♪
2010年2月27日、ついにWordCamp Fukuoka2010が開催されました。
日本では4回目のWordCampだそうで、今回は過去３回を上回る規模となり、200名以上のWordPress大好きな方々が西南学院大学コミュニティーセンター集まりました！
今後のWordPressの発展＆ユーザー増が楽しみな一日となりました♪
一日を通してのレポートは、gihyo.jpの@tomihisaさんが取材してくださり、とても詳細なレポートをまとめてくださっているので是非こちらをご覧ください！
http://gihyo.jp/news/report/2010/02/2701
ここからは、当日の私の発表のことなどを。よろしければおつきあいくださいませ^^
当日のスライドは最後の方に貼付けていますのでそちらもどうぞ♪
今回、私が運営している個人サイト（PHOTO STOCKERやシンプルパターン研究所、このブログなど）がWordPressでできていて、オリジナルテーマを作って運営しているということもあり、メインホールでデザイナーさんのためのセッションをやってみないかとお声掛け頂いて、恐れ多くも今回、登壇させていただきました。
講演テーマは、デザイナーのためのWordpressオリジナルテーマ作成入門。
はじめはもっと別の内容を考えていて、PHOTO STOCKERやシンプルパターン研究所、このブログなど、テーマファイルはどういう構造になっているか、画像のサムネイルをどうやって並べているかといった部分のコードの解説とか、リストの出し方とか、そういったものをやろうかと思っていたのですが、そのあたりの情報って、テーマのことをある程度理解できた人であれば、どう検索したら情報に当たるかわかってくるし、フォーラムで同じような質問をしている人への回答なんかがさっと見つかるんです。
でももーーーーっと最初の部分、
テーマのコードを見た瞬間の理解できない自分への絶望して、でもまさか全然わかりませんとか聞きにくいし…と思っていろいろ調べるけどなかなか情報にたどり着かなくて…。（なにを理解しないといけないのかわからないからどう調べていいかわからない）
この部分って
何がわからないのかわからない→どう情報を探したらいいかわからない→なんにもわかりません！なんて聞きにくい…
ずっとこんなのの繰り返しでしばらく抜け出せなかったんです。
私は以前プログラマをしていたので（すこーしだけですが）全く経験のないデザイナーさんに比べたらPHPもJavaScriptも抵抗なく読み書きできるのですが、それでもはじめてdefaultのテーマを見たときはしばらく理解できませんでした。
そしてWordPressでの構築を一度投げ出しそうになりました。もういいやーって（笑）
そんなことを思い出していたら、今の私がお話すべきなのはこの部分なんじゃないかな？私の失敗談や学んだことから伝わることってなにかあるはず！と一度発表したプログラムタイトルと内容を変更して、今回の内容となりました。
途中でタイトルを変えてしまったので、以前のタイトルでの発表を求められていたかたには大変申し訳なく思っているのですが、聞いていただければ（メールでお返事するのは大変なのでできればイベント等で直接お会いしたとき聞いてくださいね☆顔の見える関係が好きです！）なんでもお答えします！
といってもたいしたコードは書いていないのですが…。
実は私は本格的にWordPressをさわりはじめたのは去年の5月頃で、まだ10ヶ月くらいです。調べればその度に新しい発見があるような状態ですが、オリジナルのデザインでWordPressを構築しろ！といわれれば動じずひととおりテーマが作れるようにはなったかな…、と思っています。
その10ヶ月のうちはじめの2ヶ月くらいは、今回のスライドにまとめたようなことが全く理解できておらず、なんとなーくカスタマイズしているような状態でした。ただ、このあたりのことがわかって一気に思い通りのテーマが作れるようになっていったので、本当に基礎の基礎、でもとっても大事な部分だと思うから伝えたい！とまぁ、そんな思いが詰まった30分のセッションでした。
社内のミーティングでも、すでに知っている人にはとても退屈なセッションになってしまうのではないか、途中で退席されたら悲しいな…などいろいろなことを悩んでいると相談していたのですが、
３０分すべてためになった！と思わせる必要はないんだよ。なにか１つでも２つでも、それは知らなかった！楽しかった！と思ってもらえればそれで成功だよ。
とアドバイスしてもらってなんとか吹っ切れて本番に臨みました。
時間ギリギリで早口だったし、まだアンケートの結果も聞いていないので、満足していただけたかどうかは不安でいっぱいなのですが、とりあえず何人かの方によかったよ！と声をかけていただいてほっとしています。
なんとか、ホール初デビューは成功かな？
懇親会でもめ組の大串さんをはじめ、たくさんのかたと交流することができて大変うれしかったです！懇親会もなんと100名前後もいらっしゃっていて、ご挨拶＆お話できなかった方もたくさんいらっしゃったので、是非twitterや(@yuki930)今後のイベント等で今後もからんでいただけるとうれしいです^^
写真のケーキは当日マクラケン直子さんがご用意くださったケーキです！すごい！おいしかったです〜♪
以下当日のスライドです。
大事なところを結構口頭で説明してたので当日ご覧頂けなかった方はスライドだけみてもよくわからないところもあると思うのですが…。すみません。
追記
CBさんにコメントをいただいたのですが、
http://www.webcreatorbox.com/tech/wordpress-original-theme/
こちらに大変よくまとまっているそうですので、テーマ作ってみようかな！と思われた方はぜひそちらも参照されてください！
一部は容量の関係でカットしていますが、カットした部分はAppleストアでお話しした内容とほぼ同じなので興味がある方はこちらのスライドもご覧くださいませ。（AppleStoreでWordPressのお話をさせていただきましたの記事へ）
このままだと文字がすごく小さいのでフルスクリーン等でご覧くださいね！
御礼
わざわざ遠方から来てくださったスピーカーのAutomatticのnoelさん、直子さん、Markさん。そして1080dのNedさん。@odysseyさん。
イベントを取り仕切ってくれた@hsmtさん、@sugmakさん。
受付やビデオ、カメラ等、走り回ってくださった@nishiakiさん、@clipdesignさん、@komomorayさん、ヒロコさん、キミコさん、チャゲさん、池田さん、谷脇さん、あわせてホールでのスピーカーもされた@3753netさん。
楽しい懇親会を開いてくださった@murajunnさん、@daichan4649さん。
裏で支えてくださった田端さん、鐵尾さん、永田さん、まゆらさん。
素敵なオープニング動画を作ってくださった坂井さん。
AppleStoreでのつたない発表を支えてくださった@takayukisterさん、@ecogrammerさん。
ガチガチの私を後押ししてくださった@Yaiveさん、@taikikenさん、尾崎さん、坂本さん、@nobynobyさん、@ar916さん、@dragon3さん、@agataさん、@abemayuちゃん、@debilityさん、@tobechiさん、@evianさん、夢で応援してくれた @kisさんw
ずっと協力してくれた弊社の@ask4416ちゃん、斉藤さん、@pierrefrogmanさん。
そして発表者候補として最初に私の名前を上げてくださった@Garyutenさん、@mutsukingさん。
最後に、聞いてくださったすべての皆さんに心から御礼を申し上げます。
本当にありがとうございました！
（疲れでぼんやりしているので、もしお名前の漏れている方がいたら本当にごめんなさい＞＜）
