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