WordPressのテーマづくりの開発をGitを使ってやっていこう！(その３)
投稿日
更新日
今回も前回の続きから！
前回の作業をdevelopにプルして始めていきます。
developから、今日の分のfeatureのブランチを切って作業を始めていきます。
必要なファイルの追加。
前回は、
- index.php
- style.css
を追加していましたが、他にも必要なファイルがあります。
- functions.php
- header.php
- footer.php
- home.php
を追加して、いざ必要な内容を書いていきます。
まずは、HTMLを書く時のお約束を書いて、header.phpとfooter.phpに分けていきます。
それぞれWordPressの変数に変えていきます。
▼header.phpはこんな感じ
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php wp_body_open(); |
▼footer.phpはこんな感じ
|
1 2 3 |
<?php wp_footer(); ?> </body> </html> |
内容を以下書いていきます。
■header.php内
▼WordPressで設定している言語表示になる設定。
|
1 |
<html <?php language_attributes(); ?>> |
▼WordPressで設定している文字コードの設定。
|
1 |
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”> |
▼WordPressのheadタグ内に必要な設定。
|
1 |
<?php wp_head(); ?> |
▼ボディタグのクラスの設定。
|
1 |
<?php body_class(); ?> |
▼bodyタグ内の最初に書く。
|
1 |
<?php wp_body_open(); ?> |
■footer.php内
▼WordPressのfooterに必要な設定。
|
1 |
<?php wp_footer(); ?> |
ちなみに、以前作成した、functions.phpのファイル内も変更しました。
こんな感じ。
|
1 2 3 4 5 6 |
<?php function theme_setup() { add_theme_support( 'title-tag' ); add_theme_support( 'post-thumbnails' ); } add_action( 'after_setup_theme', 'theme_setup' ); |
ここでは、WordPressで設定しているものを出力するための設定などをしています。
|
1 2 3 4 |
add_action( 'after_setup_theme', 'theme_setup' ); add_theme_support( 'title-tag' ); ⇒タイトルタグ add_theme_support( 'post-thumbnails' ); ⇒サムネイル |
ここまで書いた内容だけでは表示されないので、表示されるようにhome.phpに書いていきます。
|
1 2 3 |
<?php get_header(); get_footer(); |
これでheader.phpとfooter.phpの内容を表示できます。
コミット&プッシュして完了！
