個人的に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に登録されているデータを出力・出力
・関数:ファイルの読み込みファイルに記述したアクションフックの実行などを行う
かなとは思いました!
こちらの記事にも紹介されているのでもしよかったら参考にしてみてください!
詳しく書かれています!

テンプレートタグ
- 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 );
最後に
基本的に自分用の備忘録ですが、
知らぬ間に誰かのためになっていると嬉しいです!
コメント