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