2012年4月24日火曜日

WordPressのオリジナルテーマ作成フロー・基本マニュアル - かちびと.net

記事タイトル

続きを読む
　　　　　
« 前へ 次へ »

Flickr

about

このサイトは私のサイトです。当たり前ですけど。

Ads

© 2011 かちびと.net . All Rights Reserved.

普通のHTMLですね。まずはこれをテーマにしてみます。

では分割してみましょう。

HTMLを分割し、基本構造を作る


用意したHTMLファイルをテーマ構造にあわせてindex.phpやheader.phpに分割していき、先程のインクルードタグで繋げていきます。

header.phpの中身
   	WordPressでjQueryを使う際の注意点 | かちびと.net
index.phpの中身

インクルードタグが出てきましたねー。

footer.phpの中身
 	
 		
Flickr
 	
     		
    •  		
    •  		
    •  	
 	
  	
 		
about
 	
このサイトは私のサイトです。当たり前ですけど。
 	
  	
 		
Ads
 	 	
 
  	© 2011 かちびと.net . All Rights Reserved.
sidebar.phpの中身

これで基本的な構造が出来上がりました。wp-content/themes/内にこのまま入れても一応はHTMLとして表示させることが出来ます。

インクルードタグは受身側、ファイルを「読み込ませる場所」にだけ書きます。index.phpにもheader.phpにも書かなきゃいけない、という訳ではありませんのでご注意下さい。

しかし、これだけでは管理画面から更新しても何も変ってくれませんので、テンプレートタグ、というコードを含めていきます。

動的にしたい部分をテンプレートタグに変更していく


それでは、次にテンプレートタグ、というものを加えていきます。これはブログのデータを動的に表示するために必要なコードです。動的と言われてもあまりピンと来ないかもしれませんね・・

例えば最初の記事で「ブログ始めました！」というタイトルで、2つ目の記事は「今日の夕食はチャーハン！」だったとします。それぞれの記事ページでは異なるコンテンツが表示されていますが、用意するファイルはsingle.php1つで実装出来ます。これを実現する為にテンプレートタグと呼ばれるものを記述します。

では、header.phpの一部を少し変えてみましょう。

 WordPressでjQueryを使う際の注意点 - かちびと. net

↑ 例えばHTMLでこのように出力したい、とします。記事のタイトルとサイトの名前がtitleになっていますね。

この場合は以下のように変更してあげます。↓

 <?php wp_title ( '|', true,'right' ); ?><?php bloginfo('name'); ?>

なにやらコードが入りましたね。これがテンプレートタグです。こうする事で、直接ファイルの中身を替えなくても管理画面でtitleを変更できるようになるわけです。便利ですねー。

HTMLで直接書いていた部分をWordPressのコードに置き換えていくことでWordPressのテーマが出来上がっていきます。

では、次にsingle.phpのタイトルやカテゴリ名、記事本文などをテンプレートタグに変更して見ます。

 	
今日はワンコともふもふした
 	最高の1日でした。明日ももふもふ出来ます様に。

これをWordPress用のテーマ向けに変更します。

あれれ・・今度はちょっとややこしくなりました。コードは簡単なものではなくなってしまいましたね。

これはループと呼ばれるもので、テーマ開発には必ず必要なものです。


どのように多くのMR16ランプを必要とされる

header.php内のコードは固定されたもので、そこだけ変更できれば済む部分でしたが、記事の場合は複数作る事になりますのでそうは行きません。端的に言うと処理の仕方が異なりますので記事の場合は少し難しくなります。

ちゃんとテーマを作成する為には必ず、このループを理解する必要があります。

ループを知ろう


ループ、と呼ばれるものがありまして、これはテーマの作成にどうしても必要なものです。なんとなくピンとこないですね・・・

ループとはその名の通り、「繰り返し」を行うための処理です。

ブログでは、どんどん記事を書いていきますよね？その結果、複数の記事がずらっと1ページ内に表示されます。これが実現出来るのは、このループがうまいこと処理してくれているのです。ありがたや。

では、ループの仕組みの基本を学んでみます。

 　　　　　投稿がある場合はここより下のものを表示する 	 　　　　　ここに通常表示させたいものを入れる。記事の本文とかタイトルです。 		 　　　　　ここは投稿一覧を表示させた後に表示させるものです。ページネーションとか。 	 　　　　　仮に投稿が何もない場合に表示させるものをいれます。「記事はありません」とかそういうの。

これがWordPressにおける基本的なループの構造となっています。丸暗記でもいいのですが、出来れば触り程度は理解してみましょう。

if ( have_posts() )というのは英語を読めばそのままですね。

「もし(if)、投稿があったら(have_posts)このコード以下の処理(while)をしますよ」

というコードです。whileでループ処理を開始し、endwhileでループ処理を脱出します。elseという言葉は「他に」とかそういう意味で、if文の拡張に当たります。ちょっと説明が下手すぎますねｗ

条件に一致しない場合に何かを表示させる、というのがなんとなくイメージできるかなと思います。

短縮も出来る

尚、ループは以下のように短いコードで済ませることも出来ます。

 コンテンツ

複数分かれていたコードを1つにしました。よーく見てみると同じコードが使われているのが確認出来るかと思います。

慣れていない方が行うテーマ作成で最初に躓くのが、この「ループ」だと思います。テーマを有効化したら真っ白になる等の原因にもなりやすい箇所ですので気をつけてくださいませ。

ここはしっかり覚えると後々で凄く管理が楽になりますのでいろいろなループ処理をテストするといいと思います。CODEXに構文例がありますので真似してみると理解も深まりそうです。

蛇足

ループというのはWordPress特有のものではなく、プログラミングにおける基本的な処理の一つです。

非プログラマーさんからすればこんなややこしいものはありませんが、ループ処理のようなものが出来るからブログのような便利なシステムが出来るわけです。

「難しそう」ではなく「便利そう」と考えてみてください。この考え方をするだけでかなり頭に入りやすくなるはずです。

while( 条件式 )   ループ処理;

以下はループの例です。

\n"; 		$i++; 	} ?>

これは基本的なループの処理で、「これで」と「匹のワンコ」の間に数字を入れて、3つのアイテムを表示する、というコードです。

以下のように出力出来ます。

これで1匹のワンコ
これで2匹のワンコ
これで3匹のワンコ

こういったループ処理をWordPressでは記事の投稿などに使用しているわけですね。

ここでは深く取り上げませんが、このようにPHPを理解すると、更にWordPressを使いこなせるようになっていくと思いますので、エラーなどのトラブルにも対応出来る様になるかと思います。

余裕が出来たら少し学んでみて下さい。WordPressはPHPで作られていますのでプログラミングはPHPから始めるのもいいと思います。（※あんまりPHPの評判は良くは無いですけどｗ）

以下がとても分かりやすいです。

ウィジェットを使えるようにする

さて、ループを理解したら今度はサイドバー等でウィジェットを使えるようにしてみます。ウィジェットはWordPressの基本的な機能の一つで、管理画面でドラッグ&ドロップでコンテンツを追加できます。

ウィジェットを使ったプラグインも多数存在しますので対応しておくに越したことはありません。ただ、若干対応が面倒だったりしますです・・・

まず、functions.phpという名前のファイルを用意します。「作成するファイルを整理しよう」で羅列した中にありましたね。このファイルに関しては後述します。

functions.phpに以下のようなコードを書いてください。

これでウィジェット対応の準備が出来ました。あとはsidebar.phpにウィジェットを追加出来るような仕組みを作ります。

これが基本形です。既に含まれているCategoriesは「管理画面でウィジェットを使わない場合に表示するアイテム」で、例として便宜上入れました。ウィジェットを使うと、「function_exists～」から「endif;」までの中身は無効になります。

ウィジェットを使いつつ、Categoriesも表示させたいんだけど・・

問題ありません。function_existsの外に出してあげればいいだけです。

これでOKです。ただし、Categoriesを下に下げる等、順番の変更は出来ません。

今回出てきたfunctions.phpはテーマのカスタマイズに不可欠です。後述しますので存在だけでも覚えて置いてください。

テーマ作成に不可欠な、最低限覚えておきたいテンプレートタグ


テーマ作成でよく使用される基本的なテンプレートタグを少しご紹介します。ただ、今後の開発のためにも、出来ればコピーできるチートシートを用意するといいかもしれません。

順不同で申し訳無いですけど。

  • / サイトのタイトルを出力します。
  • / サイトの様々な情報を出力します。後述
  • / カスタムメニューを実装します。要functions.php
  • / 記事のパーマリンクを出力します。ループ内
  • / 記事タイトルを出力します。ループ内
  • / 記事コンテンツを出力します。ループ内
  • / 抜粋を出力します。ループ内
  • / アイキャッチを出力します。ループ内・要functions.php
  • / 投稿時間を出力します。ループ内
  • / 記事で使われているタグのリンクを出力します。ループ内
  • / タグクラウドを実装します
  • / 記事のカテゴリリンクを出力します。ループ内
  • / カテゴリーのリストを作ります
  • / コメントのリストを作ります

これは本当に一部に過ぎません。沢山有りますので勉強がてらテンプレートタグの役割を開発したテーマでチェックしてみるといいかもしれませんね。

bloginfo("template_url")など、以下の引数は使用頻度が高いのでパラメーターを記しておきます。

name 管理画面の「一般設定」で指定したブログタイトル
出力例）かちびと.net
description 管理画面の「一般設定」で指定したブログ説明文
出力例）Web制作に関する情報をほぼ毎日配信しています
url ブログのサイトURL
出力例）
rss2_url RSS 2.0 形式のメインフィードURL
出力例）
charset 管理画面の「表示設定」で指定した文字コード
出力例）UTF-8
wpurl WordPressをインストールしたURL
出力例）
template_url 使用中テンプレートのURL
出力例）
stylesheet_url 使用中のメインCSSファイルのURL
出力例）

テンプレートタグを覚える際には、一緒に「パラメーター」というものがある、ということも知っておいてください。

ただし、パラメータまで全部覚える必要はありません。必要になったら公式サイトに見に行ってみると良さそうです。良く使うパラメーターはチートシートに追記しておくと合理的ですね。

よく使われる条件分岐タグ(コンディショナルタグ)

ここは少し難しいので飛ばしても結構です。

テーマのカスタマイズに条件分岐は欠かせませんが、今はまだ混乱の原因になりかねませんのでテーマを作れるようになったらステップアップとして条件分岐を使った施工をしてみてください。

条件分岐タグはコンディショナルタグともいいます。検索する際に両方試してみてください。条件分岐タグとは、ある条件に応じて表示させたり非表示にしたり、といったカスタマイズを可能にするタグのことです。

様々な条件に合わせた条件分岐タグが用意されていますので上手く使い分けてみてください。

使い方

では、試しに条件分岐を使ってみましょう。
仮にtitleタグの中身を記事ページと固定ページで変えたい、とします。

 <?php if ( is_single() )  { ?> <?php wp_title(''); ?> | <?php bloginfo('name'); ?> <?php } ?>  <?php if ( is_page() )    { ?> <?php bloginfo('name'); ?> | <?php wp_title(''); ?> <?php } ?>

↑ header.phpに書きます。この場合、

記事ページのときは「タイトル | サイト名」に、固定ページの時は逆になる

という結果になるように条件分岐で分けました。

 条件にマッチしたときに表示するコンテンツ

↑ これが基本形です。では、次は「切り替え」をして見ましょう。

条件に応じて表示を切り替える
     記事ページの時はこの中身が表示される      それ以外はこっちが表示される

▲ これなら「条件分岐」という感じがしますね。条件に応じて表示結果を切り替えます。

どんどん行きましょう。

条件に応じてファイルを読み込む

更にこんな事も出来ます▼

▲ 記事ページの時だけslider.phpというファイルをこの場所に読み込みます。

例えばポートフォリオを固定ページで作ったとして、そのページのIDを使って条件分岐でJavaScript製のスライダーを読み込む、とかが可能ですね。

カスタムフィールドの有無で分岐させる

こんな事も▼

ID, "example", true)) : ?> 	名前がexampleのカスタムフィールドを使っている投稿の場合は表示  	使ってない場合はこっち

▲ カスタムフィールドの使用/未使用を条件として分岐させました。

条件を複数指定する

複数指定も可能です▼

 記事ページと固定ページの時だけ表示する

どれだけ便利なタグか、というのがお分かりいただけたでしょうか？これはほんの一部に過ぎません。条件分岐タグに関してはWebデザインレシピさんに記事が分かりやすいのであわせてご覧下さい。


また、カスタマイズ系の記事を見ると、大抵使われていたりするので改めてみてみてください。

ではその便利な条件分岐タグを基本的なものだけいくつか羅列しておきます。


家を整理する方法
  • is_home() / メインブログページが表示されている場合
  • is_single() / 個別記事が表示されている場合
  • is_singular() / is_single()、is_page() 、is_attachment()のどれかがtrueの場合
  • is_page() / 固定ページが表示されている場合
  • is_page('25′) / 固定ページでIDが25の投稿が表示されている場合
  • is_page_template() / ページテンプレートで作った固定ページが表示されている場合
  • is_category('6′) / カテゴリIDが6の記事が表示されている場合
  • is_archive() / アーカイブページが表示されている場合
  • is_search() / 検索結果ページが表示されている場合
  • is_paged() / 表示中のページが複数のページにわたる場合
  • is_attachment() / 記事またはページの添付ファイルが表示されている場合
  • has_excerpt() / 投稿に手動で書かれた抜粋がある場合
  • has_post_thumbnail / アイキャッチが表示されている場合

▲目次へ▲

基本的なテーマ構成の例


ここまで宜しいでしょうか？

一応基本的なテーマの作成方法はこれでお終いです。作ってみたコードを確認してみましょう。

これはおさらいです。今までの内容を思い出しながらコードを確認してみてください。一応一言だけ説明を加えています。

header.phpの中身です

    	 	<?php wp_title ( '|', true,'right' ); ?><?php bloginfo('name'); ?>

wp_head()は必ず入れてください。これがないと動かないプラグイン等が出てきます。

index.phpの中身です

  	
  		 		 			 	
   		 		
 			 	
 		  		 　　　　　		
 		 		 			
 		  		 　　　　　		記事はありません

sidebar.phpの中身です

footer.phpの中身です

 	
   		 		
Flickr
 	
     		
    •  		
    •  		
    •  	
 	
  	
 		
about
 	
このサイトは私のサイトです。当たり前ですけど。
 	
  	
 		
Ads
 	 	
 
 	 	©   . All Rights Reserved.
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)