第2回こけむさズword press部
TRANSCRIPT
![Page 1: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/1.jpg)
第2回こけむさズWordPress部
2013/3/27 すずきゆき
オリジナルテンプレートを作ろう!第1回&第2回
![Page 2: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/2.jpg)
今回の内容• テーマを設置しよう- index.phpとstyle.css(前回の復習)
• ヘッダーとフッターを作ろう- テンプレート階層について- テンプレートタグについて
• カスタムヘッダーを設定しよう- function.php
• 投稿された記事を表示しよう- WordPressループ
![Page 3: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/3.jpg)
サンプルファイルzipを解凍して、WordPressインストールディレクトリ>wp-content>themesに置いてください。
index.phpstyle.css
_front-page.php_function.php
_header.php_footer.php
サンプルファイル内容
headerLogo.png
https://github.com/s12bt/kokemusaz-wp-2
![Page 4: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/4.jpg)
テーマを変更しよう管理ページにログイン
外観 > テーマ からHello WordPressを選択
![Page 5: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/5.jpg)
index.php style.css
themesディレクトリの中にテーマ用のディレクトリを作成しindex.phpとstyle.cssがあることで、テーマとして認識されます。
こんな感じで表示されます
![Page 6: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/6.jpg)
_front-page.phpのファイル名をfront-page.phpに変更する
![Page 7: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/7.jpg)
テンプレートファイルとテンプレート階層について
http://wpdocs.sourceforge.jp/テンプレート階層
WordPressはテンプレートファイルの組み合わせでサイトを構成していきます。front-page.php はWordPressで定義されているテンプレートファイルです。WordPressのURLにアクセスした時に一番最初に表示される。index.phpよりも優先して表示される。
![Page 8: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/8.jpg)
ヘッダーとフッターを作ろう• _header.phpのファイル名をheader.phpに変更する• _footer.phpのファイル名をfooter.phpに変更する• front-page.phpファイルをテキストエディターなどで開く
2行目と19行目の // を消して保存。
メモphpのコメントアウト・1行のコメントアウト
// コード....・複数行のコメントアウト
/* コード...*/
![Page 9: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/9.jpg)
![Page 10: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/10.jpg)
テンプレートタグについて• WordPressのいろんな機能を呼び出すことができるよ!!
• get_header();- header.phpファイルを読み込む
• get_footer();- footer.phpファイルを読み込む
• front-page.phpに以下のテンプレートタグを書いてみよう
• <?php bloginfo('name'); ?>• <?php bloginfo(‘description’); ?>
http://wpdocs.sourceforge.jp/テンプレートタグ
![Page 11: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/11.jpg)
管理パーツ
• header.phpの中に <?php wp_head(); ?>
• footer.phpの中に <?php wp_footer(); ?>
を記述する。
header.phpとfooter.phpを開いて、wp_header()をコメントアウトして試してみてください。
管理ページにログインしている時にだけ表示されます。
![Page 12: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/12.jpg)
カスタムヘッダーを設定• _function.phpのファイル名をfunction.phpに変更する
function.php
function.phpでは、WordPressの様々な設定をすることができます。
![Page 13: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/13.jpg)
header.phpをテキストエディタで開きます。
6行目と10行目のコメントアウトを削除して保存。
![Page 14: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/14.jpg)
こんな感じで表示されます
![Page 15: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/15.jpg)
function.phpを設定することで、外観 > ヘッダーという項目が表示されるようになります。
画像を変更しても、「デフォルトのヘッダー画像に戻す」を押すとfunction.phpで定義したファイルに戻すことができます。
![Page 16: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/16.jpg)
投稿された記事を表示するfront-page.phpをテキストエディタで開きます。
9行目と16行目のコメントアウトを削除して保存。
![Page 17: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/17.jpg)
こんな感じで表示されます
管理画面から新しく記事を投稿してみよう!!
![Page 18: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/18.jpg)
<?php if (have_posts()) : while (have_posts()) : the_post(); the_title(); the_content(); endwhile; endif;?>
WordPressループWordPressでコンテンツを出力するための大事なやつ!
もしコンテンツがあったらコンテンツがある限り続ける
コンテンツの1つを取り出すコンテンツのタイトルを表示するコンテンツの中身を表示する
the_title();やthe_content();をコメントアウトしてみるといいかも。
![Page 19: 第2回こけむさズword press部](https://reader031.vdocuments.mx/reader031/viewer/2022032104/55d759aabb61ebdb668b45fd/html5/thumbnails/19.jpg)
サンプルファイルの注意• htmlファイルに必要な<html> <head> <body>などを全く記述していないので、記述する必要があります。
• header.phpに<html>, <head></head>, <body>を記述する。footer.phpに</body></html>などを記述するとキレイに書けるよ。