【WordPress備忘録】Dockerでのローカル環境とヘッダーフッターの構築に必要な関数メモ！

個人的にWordPressでこのようにブログの運用を進めていますが、
テーマ開発をしてこなかったのでWordPressのテーマ開発の勉強中です！

業務でも使うこともありますが本格的なことはしてこなかったので、
こちらの本を読みながら進めています！

少し古い書籍ですが今のところWP5でも使えているので大丈夫そうです！

何度か記事を掲載していきますが、
間違いやアドバイスがあればコメントに残してもらえると嬉しいです！

テーマ開発用ローカル環境
ここまでのファイル構造
使用したテンプレートタグ・関数
最後に

テーマ開発用ローカル環境

qiitaなどで調べつつとりあえずDockerでローカル環境を作成しました！
ダウンロードはここから行いました！ -> Get Docker
https://hub.docker.com/editions/community/docker-ce-desktop-mac/

docker-composeで環境構築しました！
.envは各々で設定してください！(赤字の部分は重要事項なので必ず変更してください！)

./docker-compose.yml

version: "3"
services:
  wordpress:
    image: wordpress:latest
    container_name: "wordpress"
    volumes:
      - "./localdata/wp-content:/var/www/html/wp-content"
      - "./localdata/.docker/backup:/tmp/backup"
      - "./localdata/.docker/log:/tmp/log"
    ports:
      - 8000:80
    depends_on:
      - db
    environment:
      WORDPRESS_DB_HOST: "db:3306"
    env_file: .env

  db:
    image: mysql:5.7
    container_name: "db"
    volumes:
      - "db-data:/var/lib/mysql"
    env_file: .env

volumes:
  db-data:

./.env

WORDPRESS_DB_NAME=wordpress
WORDPRESS_DB_USER=admin
WORDPRESS_DB_PASSWORD=password

MYSQL_RANDOM_ROOT_PASSWORD=yes
MYSQL_DATABASE=wordpress
MYSQL_USER=admin
MYSQL_PASSWORD=password

下記のコマンドで実行することでアクセス可能です！
自分の場合は「http://localhost:8000/」でアクセス可能になります！

$ docker-compose up

docker-compose.yml と同階層に配置したlocaldataディレクトリ内には、
wp-contentディレクトリをおくことでローカルファイルと連動できるようになります！

ここまでのファイル構造

./docker-compose.yml
./localdata/
  - wp-content/
    - index.php
    - plugins/ (プラグインディレクトリ) 
    - themes/ (テーマディレクトリ)
      - hogehoge/ (自作テーマディレクトリ)
        - index.php (TOPページファイル)
        - header.php (ヘッダーファイル)
        - footer.php (フッターファイル)
        - functions.php (テーマ内の関数やアクションフックなど記載)
        - style.css (テーマ名やバージョンなどを記載)
        - css/ (CSSファイルを格納するディレクトリ)
        - img/ (画像ファイルを格納するディレクトリ)
        - js/ (JavaScriptファイルを格納するディレクトリ)

使用したテンプレートタグ・関数

「テンプレートタグ」と「関数」の違い

書籍を見ていたときに「テンプレートタグ」と「関数」の違いがさっぱり分からないですが、
個人的な見解としては、
・テンプレートタグ：DBに登録されているデータを出力・出力
・関数：ファイルの読み込みファイルに記述したアクションフックの実行などを行う
かなとは思いました！

こちらの記事にも紹介されているのでもしよかったら参考にしてみてください！
詳しく書かれています！

「WordPress関数」の分類「テンプレートタグ」との違いについて

WordPressのことを本やWebで調べていると、PHPで作成されたWordPress特有の関数についての説明が必ず出てきます。「WordPress関数」とか「テンプレートタグ」と言われますが、個人...

テンプレートタグ

language_attributes()：言語コードを出力します！(日本語だとlang=”ja“が返ってきます！)
```
使用例： <html <?php language_attributes(); ?>>
```
bloginfo(‘charset’)：文字コードを出力します！(ver3.5以降だとUTF-8が返ってきます！)
```
使用例： <meta charset="<?php bloginfo('charset'); ?>">
```
bloginfo(‘name’)：WordPressのWebサイトのタイトルを取得します！
```
使用例： <?php bloginfo('name'); ?>
```
esc_url()：テキストや属性などのURLを無害化する関数です！
```
使用例： <a href="<?php echo esc_url(home_url()); ?>">
```
get_template_directory_uri()：テーマディレクトリまでのURLを取得します！
(テーマディレクトリ：http://ホスト/wp-content/themes/hogehoge)
```
使用例： <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/hoge.png" alt="hoge" />
```

home_url()：WordPressのサイトURLを取得します！

使用例： <a href="<?php echo esc_url(home_url()); ?>">

関数

wp_head()：wp_head()に登録されている「アクションフック」を実行する！
```
使用例： <?php wp_head(); ?>
```
wp_footer()：wp_footer()に登録されている「アクションフック」を実行する！
```
使用例： <?php wp_footer(); ?>
```
get_header()：header.phpテンプレートを読み込む！
```
使用例： <?php get_header(); ?>
```
get_footer()：footer.phpテンプレートを読み込む！
```
使用例： <?php get_footer(); ?>
```

wp_enqueue_style()：wp_head()でCSSを読み込むアクションフック！functions.phpに追加！

使用例： wp_enqueue_style( 'bootstrap-style', get_template_directory_uri().'/css/bootstrap-custom.css', array(), '1' );

wp_enqueue_script()：JSの読み込みを行うアクションフック！functions.phpに追加！
(デフォルトはwp_head()で読み込み、第5引数をtrueにすることでwp_footer()で読み込み)
```
使用例： wp_enqueue_script( 'bootstrap-script', get_template_directory_uri().'/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
```