Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WordPressもくもく勉強会 at コエド第6回 15.04.12
WordPressテンプレート階層を理解する。
ー テーマカスタマイズに必要な5つのポイント! ー
TickleCode.
Yoshinori Kobayashi 1
2
生まれは 奈良県 です
小林由憲(こばやしよしのり)
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
WordPress テンプレート階層
http://wpdocs.sourceforge.jp/wiki/images/wp-template-hierarchy.jpg
3
WordPress Codex日本語版 テンプレート階層
4
テンプレート階層のデモ
GitHub: https://github.com/YoshinoriKobayashi/150412wpmoku
簡単なテーマでテンプレート階層の仕組みを理解する。
5
Point1.テンプレート階層の見方
404エラーペ
ージ
404.php
Exp:404(Not Found)ページの場合
index.php
・URLが存在しないとき、404.phpを探す。
※404.phpがあれば、ここでテンプレート...
6
Point2.サイトのフロントを固定ページにしたい
・フロント用の固定ページを作る。
・page.php を用意、なければ
index.php が使われる。
サイトフロン
トページ
(固定)ペー
ジを表示
index.php
ページテンプ
...
サイトフロン
トページ
(固定)ペー
ジを表示
7
Point2.サイトのフロントを固定ページにしたい
index.php
ページテンプ
レート
page.php
・フロントを固定ページに切り替える。
[設定]→[表示設定]→[フロントページ
...
8
Point3.ブログ一覧(/blog)を作る。
・まずは、ブログ一覧を表示するための固定ページを作る。
※必要なのはタイトルとURL(パーマリンク)のみ。
※ページの投稿内容は使われない。
フロント(トップ)とは別に、ブログ一覧ページを作り...
9
Point3.ブログ一覧(/blog)を作る。
サイトフロン
トページ
投稿を表示 index.phphome.php
[投稿ページ]に先ほど作成し
た固定ページを設定する。
上記の設定で、次のようにテンプレートが選択される。
※home....
10
Point4.固定ページでテンプレート(デザイン)
を選べるようにする。
・まずは、(自由な名前).php でphpファイルを作る。
・コメントで、「Template
Name:(管理画面で表示したい
名前)」を追加する。
・固定ページの...
11
Point4.固定ページでテンプレート(デザイン)を選べるようにする。
個別ページ 固定ページ
$cutom.php
上記の設定で、次のようにテンプレートが選択される。
カスタムテン
プレート
page.php index.php
固定ペ...
12
Point5.サイトフロントだけを特別なデザインに!
フロント(トップ)だけを別のデザインにしたい。
サイトフロン
トページ
front-page.php
・front-page.php のファイルがあ
れば適用される。
※home.ph...
◆WordPressをカスタマイズするなら絶対覚えておきたいテンプレートフ
ァイルの使い方|Webデザインレシピ
WordPressテンプレート階層を理解する上で、
参考になるサイトと書籍
◆WordPress Codex日本語版 テンプレート...
ご清聴ありがとうございました。
14
Upcoming SlideShare
Loading in …5
×

WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回

1,426 views

Published on

2015-04-12(日)14:00 「WordPressもくもく勉強会 at コエド第6回」

WordPressテンプレート階層を理解する。
ー テーマカスタマイズに必要な5つのポイント! ー

ショートセッションでのスライドです。

WordPressテンプレート階層の読み方を説明して、テーマのカスタマイズに必要な箇所をピックアップして話ました。

特に、フロントページ(トップページ、ホームページ)の設定方法を整理して話ました。
フロントページは、ブログ一覧や固定ページを設定したいときもあれば、特別なデザインを適用したいときもあります。そんなときの設定方法をまとめています。

WordPressテンプレート階層をよく理解することで、テーマのカスタマイズを行う勘所みたいなものが身につくと思います。


=================

「WordPressもくもく勉強会 at コエド」は、WordPressを学びたい人たちが集まって発表したり、自主学習する勉強会です。定期開催しています。

開催の連絡は以下の方法で受け取ることができます。

## DoorKeeperグループ
イベント申し込みを受け付けている、DoorKeeper でのグループです。
https://wp-moku.doorkeeper.jp/

## Facebookグループ:
イベント告知や技術情報をお互いにシェアしています。
https://www.facebook.com/groups/194782003975961/

## Twitterハッシュタグ
ハッシュタグは、 #wpmoku です。
Twitterにもイベント、勉強会の情報を流しています。

Published in: Internet
  • Login to see the comments

WordPressテンプレート階層を理解する。テーマカスタマイズに必要な5つのポイント!|WordPressもくもく勉強会 at コエド第6回

  1. 1. WordPressもくもく勉強会 at コエド第6回 15.04.12 WordPressテンプレート階層を理解する。 ー テーマカスタマイズに必要な5つのポイント! ー TickleCode. Yoshinori Kobayashi 1
  2. 2. 2 生まれは 奈良県 です 小林由憲(こばやしよしのり) Twitter: @AsbyuKobayashi ブログ: In Advance Only
  3. 3. WordPress テンプレート階層 http://wpdocs.sourceforge.jp/wiki/images/wp-template-hierarchy.jpg 3 WordPress Codex日本語版 テンプレート階層
  4. 4. 4 テンプレート階層のデモ GitHub: https://github.com/YoshinoriKobayashi/150412wpmoku 簡単なテーマでテンプレート階層の仕組みを理解する。
  5. 5. 5 Point1.テンプレート階層の見方 404エラーペ ージ 404.php Exp:404(Not Found)ページの場合 index.php ・URLが存在しないとき、404.phpを探す。 ※404.phpがあれば、ここでテンプレートの検索は終了! ・404.phpがあれば、HTMLに展開してブラウザへ返す。 テンプレートを探すルール。 ・404.phpがなければ、index.phpからHTMLに展開してブラウザへ 返す。 404.php がないとき
  6. 6. 6 Point2.サイトのフロントを固定ページにしたい ・フロント用の固定ページを作る。 ・page.php を用意、なければ index.php が使われる。 サイトフロン トページ (固定)ペー ジを表示 index.php ページテンプ レート page.php あと1つ設定が必要・・・
  7. 7. サイトフロン トページ (固定)ペー ジを表示 7 Point2.サイトのフロントを固定ページにしたい index.php ページテンプ レート page.php ・フロントを固定ページに切り替える。 [設定]→[表示設定]→[フロントページ の表示]→[固定ページ]にチェック→[フ ロントページ]で固定ページを選択。 切り替えが必要!
  8. 8. 8 Point3.ブログ一覧(/blog)を作る。 ・まずは、ブログ一覧を表示するための固定ページを作る。 ※必要なのはタイトルとURL(パーマリンク)のみ。 ※ページの投稿内容は使われない。 フロント(トップ)とは別に、ブログ一覧ページを作りたい。
  9. 9. 9 Point3.ブログ一覧(/blog)を作る。 サイトフロン トページ 投稿を表示 index.phphome.php [投稿ページ]に先ほど作成し た固定ページを設定する。 上記の設定で、次のようにテンプレートが選択される。 ※home.php で投稿一覧を表示。なければ、index.phpを使用。
  10. 10. 10 Point4.固定ページでテンプレート(デザイン) を選べるようにする。 ・まずは、(自由な名前).php でphpファイルを作る。 ・コメントで、「Template Name:(管理画面で表示したい 名前)」を追加する。 ・固定ページの投稿内容で、サイドバーあるなし、グリッドレイアウトす るしない、写真の表示方法、フッターありなしなどを選びたい。
  11. 11. 11 Point4.固定ページでテンプレート(デザイン)を選べるようにする。 個別ページ 固定ページ $cutom.php 上記の設定で、次のようにテンプレートが選択される。 カスタムテン プレート page.php index.php 固定ページでテンプレートが 選べるようになる。 ※$cutom は名前を自由に付けてよいことを示す。
  12. 12. 12 Point5.サイトフロントだけを特別なデザインに! フロント(トップ)だけを別のデザインにしたい。 サイトフロン トページ front-page.php ・front-page.php のファイルがあ れば適用される。 ※home.php などの如何なる設定 よりも優先されて適用される。 page.php index.php home.php
  13. 13. ◆WordPressをカスタマイズするなら絶対覚えておきたいテンプレートフ ァイルの使い方|Webデザインレシピ WordPressテンプレート階層を理解する上で、 参考になるサイトと書籍 ◆WordPress Codex日本語版 テンプレート階層 13 ◆WordPressのフロントページを設定してサイト型表示にする方法|バズ部 [書籍]WordPressユーザーのためのPHP入門 は じめから、ていねいに。 水野史土著
  14. 14. ご清聴ありがとうございました。 14

×