#3 Theme Development | .gitignore, get_header get_footer

WordPress

.gitignore

まず、gitにプッシュしたくないデータがあるので.gitignore を作成します。
.gitignore

.phpintel
.sass-cache
.scss-cache
scss/.sass-cache/
bower_components
.bower-cache
.bower-registry
.bower-tmp
.idea/
_book
nbproject
nbproject/private/
nbbuild/
dist/
nbdist/
nbactions.xml
nb-configuration.xml
.nb-gradle/
*.log
npm-debug.log
node_modules
.DS_Store
**/.DS_Store
*.map
.greyhr
Thumbs.db
sftp-config.json
*.sublime-project
*.sublime-workspace

README.md

テーマの直下にREADME.mdを作成
README.md

# WordPress Theme - テーマ名

githubにpush

ターミナルで、以下まで移動
wp-content\themes\note

githubで「new」を押して新規作成
テーマの名前などでリポジトリを作成

コマンドを一行づつ実行

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://ここはgithubにかかれているコマンドをコピーして実行.git
git push -u origin master

「git push -u origin main」と書くとエラーになる可能性があります。
「git push -u origin master」です。

https://a-three.work/codenote/git/githab%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b/

functions.php

自作テーマのフォルダの下に以下作成
functions.php

<?php
/**
 * Theme Functions.
 * 
 * @package テーマ名
 */

「functions.php」はリンクの設定などしなくても
WordPressがファイルを探して自動で入れてくれます。

header, footer

一般的に、ヘッダーフッターは全てのページに提供されます。

index.phpにbodyの中に以下追加

<body>
    <header>Header</header>
    <div class="content">Content</div>
    <footer>Footer</footer>
</body>

テーマフォルダの直下に以下index.phpの中身を切り取り貼り付け
header.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WordPress theme</title>
</head>
<body>
    <header>Header</header>

footer.php

    <footer>Footer</footer>
</body>
</html>

WordPressでなければ
<?php include_once ‘header.php’; ?>
<?php include_once ‘footer.php’; ?>
で、それぞれヘッダーフッターを読み込ませますが、wordpressの場合は以下のように書きます。

index.php

<?php
/**
* Main template file.
*
* @package テーマ名
*/
get_header();
?>

<div class="content">Content</div>

<?php

get_footer();

最後はphpの閉じタグを書きません。

この状態でプレビューすると、header.php, index.php, footer.phpがきちんと読み込まれているのが分かるかと思います。

このheaderは、違うheaderを読み込ませたりもできます。
wp-includes/general-template.php //16行目
header-special.php　を作成
get_header(‘special’);　で読み込みのような感じ。

get_header();の仕組みは
wp-includes/general-template.php //31行目
41行目にある、locate_template
詳しくは
wp-includes/template.php // 653行目
このように１つの function を呼び出すと、違う function が呼び出され、
その中でもまた違う function が呼び出されていたりします。

こういう、functionを追っていくのは以下のエディタ＋コマンドでできます。
PhpStorm エディタ( 有料 ) – CMD + B

A3 Code Note