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 get_header(); ?>

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

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

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

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

それぞれ

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

が読み込まれます。

<?php get_template_part( 'loop', 'index' ); ?>

この部分は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 __( 'Leave a comment', 'twentyten' ); ?>

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

取ってみる

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

こういう場所は、

たとえば

<?php __( 'Leave a comment', 'twentyten' ); ?>

この表記なら

Leave a comment

としてしまいます。
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/という場所で表示されます。

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

<img src="images/sitetitle.png" />

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

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

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

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

ただし、直接

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

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

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

<?php bloginfo('template_url'); ?>

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

このように記述します。

<img src="<?php bloginfo('template_url'); ?>/images/sitetitle.png" />

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

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 bloginfo(‘url’); ?>

ブログのタイトルを出力

<?php bloginfo(‘title’); ?>

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

ブログの説明文を出力

<?php bloginfo(‘description’); ?>

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

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

<?php bloginfo(‘template_url’); ?>

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

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

<?php bloginfo(‘stylesheet_url’); ?>

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

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

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

記事のタイトルを出す

<?php the_title(); ?>

記事の本文を出す

<?php the_content(); ?>

記事の抜粋を出す

<?php the_excerpt(); ?>

記事の投稿日時を出す

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

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

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

<?php the_date(); ?>
<?php the_time(); ?>

記事のカテゴリーを出す

<?php the_category(); ?>

記事のタグを出す

<?php the_tags(); ?>

記事へのリンクを出す

<?php the_permalink(); ?>

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

<?php echo post_custom('key'); ?>

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

一覧はこちらから

8.ループを理解する

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

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

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

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

という意味です。

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

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

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

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

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

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

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

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

トップディレクトリのstyle.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
*/
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ライフを☆

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


こちらの記事もおすすめです

このブログで人気の記事です

コメント(Facebookのコメント機能を利用しています)

»

«


↓その他運営中のサイトのご紹介

Fireworksマニア Webサイトからカラーを抽出!分析!Web Site Color Picker PHOTO STOCKER -高解像度の無料写真素材- 壁紙カレンダー -デスクトップを飾る、サイズ豊富なデスクトップ壁紙- シンプルパターン研究所 -PhotoshopやFireworksで便利に使えるテクスチャ素材-
スタイルシート見出しメーカー -好きな色で作れる、あなた用のCSS見出し- ビビッドカラーズ -キュートなホームページ素材配布サイト- Android用の壁紙無料ダウンロードサイト Webデザイナー山口有由希のポートフォリオサイト