初心者wordpressテーマを作って学んだこと

 曲がりなりにもテーマを作って有効化することができたので、初めてテーマ作りをして感じたことやぶつかった問題とその解決法をまとめておきます。私自身の初心を忘れないための備忘録的な意味合いもありますが、テーマ作りをしてみたいと考えている方に少しでも助けになれば幸いです。

 ただ注意点があります。記事内に書かれていることが技術的に正しいかは保証できません。

 この記事はhtmlやcssもまるで知らなかった初心者が書いたものです。web制作に関わったこともありません。もし、正確な情報求めるならば私が参考にしたサイト(ブログ)や資料を記述しますのでそちらをご覧ください。逆にwebを生業にされている方にとっては当たり前過ぎて書かれていないことなどは書かれているかもしれません。

 テーマ作り全般を網羅している記事は以下↓ 大変お世話になりました。

[browser-shot url=”http://webdesignrecipes.com/first-time-wordpress-origin-theme/” width=”200″]
[browser-shot url=”http://kachibito.net/wordpress/theme-development-flow.html” width=”200″]
[browser-shot url=”http://www.webcreatorbox.com/tech/wordpress3-original-theme/” width=”200″]

 

     目次

  • wordpressのインストール
  • 設計・デザイン
  • テーマ作り(ローカル)
  • テーマ公開
  • プラグイン
  • 初めてテーマを作る時に気をつけた方がいいこと
  • 参考本

1.wordpressのインストール

 今回の話の主題はあくまでもテーマ作りですので、ここはだいぶ省略しながら説明します。

 wordpressはブログソフトウェアです。ソフトがないことにはテーマ作りもなにもないので、公式からインストールする必要があります。
 
 それと、テーマ作りをするということは公開することを前提にされていると思いますので、公開する場も必要になります。それがサーバーやドメインですね。この辺りの話は検索すれば、お腹一杯になるほど出てきますのでそちらでどうぞ。

 テーマ作りするだけなら、ローカル開発環境を構築すればできます。むしろ、コーディングはローカルでやるのが基本でしょう。例えば、公開されているテーマを改造しながらやっていたら毎日毎日見た目が変わることになり、訪問者に優しくないです。ローカル開発環境の構築はドットインストールなどで紹介されてますのでそちらをご利用ください。

 ちなみに、私はローカルソフトにXampp、サーバーはロリポップを使ってます。ただ現在進行形でごたごたがあるので、サーバー選びは気を使った方がいいと思います。乗り換えするのにも手間はかかりますからね。「wordpress サーバー 比較」とかで検索すれば、比較表が出てくるはずです。安いのがいけないとかではなくて、自分の用途にあったサーバーを選ぶのが良いと思います。

[browser-shot url=”http://creator-life.net/xampp-wordpress/” width=”200″]

2.設計・デザイン

設計

 テーマ作りをする環境が整いました。

「じゃあ、早速htmlでテーマを作ってみよう」とはなりません。それで作れるなら天才です。

 ブログのコンセプトやそれに伴った見た目のデザインを決めなければ、手をつけられません。
 
 ということで、エディタでも紙でもいいので、どんなブログにするかを書いてみる。

 テーマコンセプト

 実はこの作業が一番重要です。ブログの設計は大事だと、どこのハウツー記事にも書いてあります。作ってみてその通りだと痛感しました。

 ただ私の場合、初めてテーマ作りをするにあたって「なんとなくこんな風に作りたいな」というイメージが漠然とありました。だから、それを早く形にしたくて仕方ありませんでした。そしてものの見事に失敗しました。

 「なんとなく」とは本当に曲者です。裏を返せば、全てが曖昧でなにも決まっていないってことです。経験を積んだプロの「なんとなく」とは意味合いが全然違います。

 芯が無い状態なので、フニャフニャです。あっちを作り直し、こっちを作り直し、あれを足してこれを削る。修正の数がとにかく多くなってしまいます。急がば回れとはよく言ったもので、一見遠回りのように見えますが最初にイメージを固めておくことで結果的にスムーズにいきます。

  • どんなブログにするのか?(コンセプト、ターゲットなど)
  • そのブログにはどんな機能が必要か?(サイドバーになにを置く?)

考えうる限りのことを決めておけば、迷うことはないでしょう。どうしても修正が必要になれば、修正すればいいのです。

デザイン

 ブログの方向性が決まったら、それにそってデザインを考えます。これも初めてやる人にとっては大変な作業です。予め正解が用意されているわけではありませんから。大まかなセオリーはあるようですが、最終的には自分で納得できるか、仕事ならばクライアントが納得できるかじゃないでしょうか。

 ただ、初めてで100点満点の出来はまずできません。それを求めてしまうと時間がかかり過ぎます。私も今のテーマに満足しているわけではありません。どこかで妥協点を見つけなければいけません。

 デザインする時に指標となるのがコンセプトです。手さぐりの状態ですから、例えイメージとは少し違っても最初に決めたものを頼りに決めていくのが良いと思います。だからこそ、コンセプトは仔細に決めておいた方がぶれないと私は思います。
 
 カラム分け(1カラム、2カラム(左右)、3カラム)
 パーツごとの幅(width)や高さ(height)、配置
 文字(フォント、大きさなど)

 だいたいの配置を決めるのはワイヤーフレームを作ります。紙でやってもいいですし、webサービスを使うのもありでしょう。

[browser-shot url=”http://www.webcreatorbox.com/tech/basic-wireframe/” width=”200″]

 

 私は最初Cacooを使って作ろうと思いましたが、あまり肌に合わなかったのでFree Photoshop Wireframe KitというPhotoshop用のワイヤーフレーム素材を使いました。けれど、個人的にこの作業は紙と鉛筆でやるのが一番自由度が高いのではないかと考えています。

 
 ワイヤーフレームができたらそれにそって、実際のWEBサイトのデザインを作っていきます。ここでイメージが湧わかないということは十分に考えられます。そういう時はWEBデザインギャラリーがたくさんありますので、参考にしてみてください。検索すれば出てきます。参考までに1つ載せておきます。

 

[browser-shot url=”http://io3000.com/” width=”200″]

 この時に、トップページのデザインだけではなく、個別記事、固定ページ、404(ページが見つからない時のページ)、アーカイブ、カテゴリーのページなど全てのデザインを作っておきましょう。私は愚かにもトップページだけ作って後で苦労しました。

 ロゴや背景用、パーツ用などの素材ももちろん用意して埋め込んでおきます。タイトルロゴなんかは大きさによって数パターン用意しとくと後々に使えるかもしれません。

 

配色

 デザイン作業で一番困ったのが配色です。

 ColRD: Color Creator

 Color Scheme Designer 3

 便利な配色ツールはたくさんあって使ってみるのですが、本当に繊細な作業でしてほんの僅かに数値をいじるだけで全然印象が違ってきます。しかも、隣接する色によってまたガラリと見栄えが変わってくるので、本当に迷いました。色彩感覚がある人が心底羨ましいです。

[browser-shot url=”http://www.slideshare.net/marippe/ss-9003317″ width=”200″]
[browser-shot url=”http://maka-veli.com/ColorDesign.html” width=”200″]

 初心者でもできる配色講座、大変お世話になりました。活かせているかどうかは怪しいですが……。なにはともあれベースカラー、メインカラー、アクセントカラーは最低限必要じゃないでしょうか。

 こんな具合で七転八倒しながらデザイン作りました。個人的に忍耐力の求められる作業だと感じました。けれど、ここで痺れを切らして次の作業行くと痛い目を見ます。

 

設計・デザインのまとめ

  • ブログの約束事(コンセプト、ターゲットなど)は最初によく考えて決めておく
  • 約束事に添って、細かい部分まで丁寧にデザインする
  • 配色はセンスがないとなかなか上手くいかないけど、癇癪起こさない

 

3.テーマ作り(ローカル)

事前にしておくといいこと

  • エディタのBOMなしでファイルを保存する。
  • テーマフォルダを作り、分割ファイルを作っておく。(理由後述)

 プログラムを書く時に使うエディタは基本的になんでもいいのですが、文字コードをBOMなしにできるものを選びましょう。そして、文字コードはBOMなしの「UTF-8」を選びます。私が使用していたterapadでは、「ファイル」→「文字/改行コード指定保存」→「UTF-8N」でBOMなしのUTF-8に設定できました。

 なぜBOMなしじゃなくてはいけないのかというと、ページ上部に空白ができることがあるからです。

WordPressフォーラム » header上部に謎の空白

私の場合はBOMの有無でしたが、

タグに「」を入れ忘れたりと、起こりうる理由はいくつかあるみたいなので、もし同じ症状になったらこちらを参照してください。
 

 

HTMLとCSSでマークアップ

 デザインが終わったらHTMLでマークアップしてCSSで体裁を整えていきます。ブログのテーマにする前にまずサイトとして作ってみようという話です。

 どうしても最低限の知識は必要になります。初心者はドットインストール先生に頼むしかない。それである程度は理解できると思うので、後は本を買ったり、リファレンスサイトで補助すればなんとかなります。行いたい処理があるんだけど、方法がわからない時も検索すれば方法は見つかるはずです。

 デザインと照らし合わせながら、作ります。この作業はデッサンにも似ている気がします。見本を見ながら絵を描いて、どこが違うか修正していく。着実に1つ1つ解決していけばいいので、私の場合時間がかかることはあってもそこまで詰まることはありませんでした。

 createblog3

 

3.テーマ作り

 webサイトができたら、いよいよテーマ作りを開始します。

 その前にテーマフォルダと、分割ファイルを先に作っておくといいかもしれません。通常、1枚のwebページは1つのファイル(外部ファイルにリンク張ってあったとしても)からなります。しかし、wordpressはヘッダー(header.php)、フッター(footer.php)、サイドバー(sidebar.php)などパーツごとに分かれたPHPファイルを組み合わせてページが生成されます。

 だから、最初に作ったwebページを分解する必要があります。

 じゃあ、なぜハウツー系のサイトで先に分割するように説明されているのか? 私は最初後でもいいのじゃないかと後回しにしていました。

 しかし後回しにしてしまうと、例えばindex.php(トップページ)とsingle.php(個別記事ページ)で同じサイドバーを使っていて、index.phpの方のサイドバーを編集したけれど、single.phpのサイドバーは手をつけていない、という事態が生じてしまいます。そうなると、どちらがどこまで編集されたのかわからなくなり、ミスを招くもとになります。だから、先に分割しておいて同じsidebar.phpというファイルを呼び出す形式にしておけば、sidebar.phpだけを編集すれば済み、ミスも防止できます。

 なお、そのテーマフォルダは「wordpress」→「wp-content」→「themes」内に配置しましょう。私が使っていたxamppでは「xampp」→「htdocs」→「wordpress」……ですね。

 それでwordpressのダッシュボードより「外観」→「テーマ編集」ができるようになります。テーマの編集はwordpress上で行わなくてもファイルを直接編集すれば、可能です。

 

PHP化

 さてブログとして動くように、分割したファイルをPHP化します(wordpressはPHPで動いています)。

 例えば、記事ごとにタイトル(titleタグ)を変えることができます。

 また、「ループ」を使うことで書いた記事が指定した形式でズラッと表示されます。これこそブログの特徴ですよね。HPみたいにいちいちサーバーにアクセスしてファイルを更新する手間がいらない。

 PHPについても安心のドットインストールです。

 wordpressは独自の関数がたくさんあるので(私もまだまだ把握できていない)、少々厄介です。

 本を一冊くらいは買っておくと楽だと思います。

 これ、多くのブログでお勧めされているテーマ作りでは定番の本です。

 レッスンブックはテーマ作りについて最初から丁寧に解説しています。出来栄えはともかく、この本にしたがって作ればテーマを作ることは難しくないでしょう。

 デザインブックは文字通り、デザイン面に特化しています。不可欠ではないですが、痒いところに手が届く本なので重宝します。私のテーマ(2013年9月現在)ではトップ記事だけ画像を大きく表示して残りは一覧で表示しています。この方法が検索してもなかなか実現できなかったのですが、デザインブックで実現できました

 その他、わからない時はやりたい処理で検索すればきっと出てきます。偉大なる先人達がたくさんの情報を発信してくださっています。感謝感謝ですね。WordPress CodexWordPressフォーラムもありますので、調べてもわからなければ誰かを頼ってください。

最後にチェック

 テーマができあがったら、最後にチェックを行います。量はその人の性格にもよるのでしょうが、どうしてもコードのミスは生じるものです。今のブラウザは優秀なので動いてくれますが、全てのブラウザがそうであるとは限りませんし、ミスがないに越したことはありません。

The W3C Markup Validation Service

W3C CSS 検証サービス

 便利なサービスが探せば幾つかありますので、試してみてください。ただ、これらのサービスはあくまでも「定められた文法的に正しいか」を判断しているのであって、それに準拠していなければならないわけではないと踏まえておくといいかもしれません。エラーと表示されていても、自分ではそれでいいと思うならばそれを優先してもいいということです。私達が使っている日本語も常に正しい日本語を使っているわけではないですよね。正式な文書と友人へ書く手紙では、言葉遣いも少し違うでしょう?

[browser-shot url=”http://www.suzukikenichi.com/blog/why-doesnt-google-validate/” width=”200″]

テーマ公開

 

テーマをアップロード

 wordpressが普及したことで、サーバー側でwordpressを簡単にインストールできるサービスがあります。その場合、FTPソフト(自分のPCとサーバーで送受信するソフト。公開するために必要)がなくてもブログを始めることができます。しかし、作ったテーマを公開するためにはサーバーにアップロードしなければいけないので、FTPソフトが必要になります。

 私は「FileZilla」を使いました。

 使い方↓

[browser-shot url=”http://blog.serverkurabe.com/filezilla-start” width=”200″]

 アップロードしたら、wordpressダッシュボードの「外観」→「テーマ」のところに自分の創ったテーマが表示されているはずです。ただ、いざサーバー上で見ると、見栄えが違ったりということが起こりえます。テーマの素材画像のパスがローカルのもので表示されていない、とかですね。そういったことはプレビュー画面で確かめて修正しておきましょう。それから有効化して公開です。

ブラウザチェック

 
 公開したら終わりじゃないです。ブログを見に来るのは自分以外の人です。ブラウザもOSも違う人が見ています。だったら、なるべく多くのブラウザできちんと表示されるようにしておくのが親切です。

 この作業は、本当はローカルの時点でやっておいた方がいいです。

 せめて、google chrome、firefox、IEのブラウザは事前にインストールしてチェックしておくべきでしょう。IEの場合、「F12」キーを押してブラウザモードを変えれば、前バージョンのチェックも可能です。

 じゃあなんで公開してからチェックするのかというと、ローカル開発環境ではブラウザチェックのためのwebサービスが使えないからです。

 あくまでもローカルはそのPCの中だけの環境なので、webサービスが適用できないです。ローカル上でチェックするツールもあるのですが、有料だったり種類が少ないです。仕事で継続的に使うわけでもなければ、無料で使えるwebサービスでいいんじゃないでしょうか。
 

Cross Browser Testing Tool. 200+ Browsers, Mobile, Real IE.

私はマイクロソフトが提供するサービスで確認してました。探せば結構出てきます。

5.プラグイン

 wordpressの魅力と言えば、その機能を拡張してくれるプラグインの豊富さです。
 ちょっと不便だなと思った時、調べれば必ずと言っていいほどその不便を解決してくれるプラグインと出会えるはずです。

『functions.php』を利用して機能を追加することもできますが、いきなりは難しいと思うので最初はプラグインを使えばいいと思います。

 私自身も必要を感じたら追加していく予定ではありますが、テーマ作った段階でインストールしたプラグインを紹介します。割と定番のものが多いです。

 同じ機能を持ったプラグインは複数見つけることができるでしょう。例えば、関連記事を表示するのもSimilar PostsYet Another Related Posts Pluginなどがあります。プラグイン同士の相性が悪いとエラーを起こすこともあるらしいので、自分に合ったものを試して使いましょう。

機能拡張

wordpressに元々は備わっていない機能を追加する系統のプラグインです。

WP-PageNavi
ブログのページネーションを数字で表示してくれるプラグイン。起きたい場所にコードを入れて設定を少しいじるだけで簡単。※関連記事

[browser-shot url=”http://wp-exp.com/blog/wp-pagenavi/” width=”200″]

Newpost Catch
画像付きの最新記事を表示してくれるプラグイン。プラグインの作者様が使い方を紹介してくださっています。

[browser-shot url=”http://www.imamura.biz/blog/newpost-catch” width=”200″]

WordPress Popular Posts
人気記事を自動で表示してくれるプラグイン。ウィジェットに追加して、設定を自分好みにするだけ。

Yet Another Related Posts Plugin
関連記事を自動表示してくれるプラグイン。数値の項目を設定すればオッケーです。

[browser-shot url=”http://netaone.com/wp/yarpp/” width=”200″]

ただ、私の場合は関連記事が表示されない問題(※解決法も記載)が起こりました。それでも使いやすいので使っています。

Facebook
Facebook公式のプラグインです。Facebookコメント欄を導入したり、イイネ!ボタンを設置出来たりと機能は様々。「そのページになにが書いてあるか」の情報であるOGP(Open Graph Protocol)も入れてくれます。OGPを入れるだけならば、Open Graph Proという有名なプラグインがあるのですが、これが曲者で時折OGPを入れてくれない時があるので、Facebook公式プラグインを重宝してます。

ブログ運営補助

WP Social Bookmarking Light
SNSボタンを自動で追加してくれるプラグイン。これも定番。多くのブログで使われているのが見られます。説明なしでも設定できる使い勝手の良さも魅力ですね。

Akismet
言わずと知れたスパムコメント防止用のプラグイン。恐らく一番使われているプラグインじゃないでしょうか。wordpressにデフォルトでついてきます。APIキーを取得して登録するだけで、スパムを防いでくれます。

Browser Shots
キャプチャ画像を自動生成してくれるプラグイン。Google Chromeのエクステンション「Create Link」と併用することでクリック1つで画像付きのサイトリンクが作れます。(関連記事

AddQuicktag
ブログエディタにボタンを追加するプラグイン。ブログで記事を書く時にいちいちタグを記入するのは手間なので、よく使うタグを登録しておけばボタン一つで呼び出せます。少し考え方を変えると、タグに限らず使用頻度の高い定型文などを登録しておけば……。色んな使い方ができそうですね。

[browser-shot url=”http://meglog.net/wordpress/addquicktag-plugin.html” width=”200″]

Broken Link Checker
リンク切れを自動検知してくれるプラグイン。コンテンツが多くなればなるほど、いちいち確認していられないので重宝するでしょう。

[browser-shot url=”http://whitehatseo.jp/wordpress%E3%81%ABbroken-link-checker%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%97%E3%83%AA%E3%83%B3%E3%82%AF%E5%88%87%E3%82%8C%E3%82%92%E9%98%BB%E6%AD%A2/” width=”200″]

HeadSpace2 SEO
SEO用のプラグイン。All in One SEO Packを使おうと思ったら、デザインが変わってしまったので、移行しました。ただ、まだSEOを本格的に行っていないので半ば放置状態です。

[browser-shot url=”http://kachibito.net/seo/seo-tips/ultimateness-seo-plugin-headspace2.html” width=”200″]

Ultimate Google Analytics
アクセス解析のGoogle Analyticsをwordpressに埋め込むためのプラグイン。Analyticsのアカウントを無料で登録しておけばそのアカウントIDを登録すればアクセス解析できるようになります。まだまだ解析するほど訪問者がいないのが悲しいところです。

[browser-shot url=”http://wp-exp.com/blog/ultimate-google-analytics/” width=”200″]

WPtouch Mobile Plugin
定番のスマホ最適化のプラグインです。有名どころですね。とりあえず有効化しておけば使えますが、デザインを変えることもできます。

[browser-shot url=”http://webbusiness-kan.com/wptouch/” width=”200″]

WP Multibyte Patch
wordpressを日本語に対応させるためのプラグイン。これは必須なんじゃないでしょうか。

高速化

正直なところ、私が使っている高速化のプラグインはどれほど効果があるのかよくわかっていません。表示速度測定サイトでの結果がまばらで、体感的な速さも違うのです。参考程度にしてください。

001 Prime Strategy Translate Accelerator
DB Cache Reloaded Fix
こちらの2つはキャッシュ系のプラグインです。当ブログの関連記事

 ※順次更新します。

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする

スポンサーリンク
スポンサーリンク