投稿やカスタム投稿の追加等はある程度できるようになったものの、
まだまだわからないことだらけ。
勉強のために、テーマを作ってみようと思います。
必要なファイルを知ろう（超最小構成）
まずは必要なものが何かを知るところから始めたいと思います。
WordPressは、PHPという言語を使って作られています。
HTMLを思い浮かべてみてください。
HTMLは、<html>タグの中に、大きく3つのタグを配置します。
| タグ名 | 説明 |
|---|---|
| <head> | ページ名や、ページを記載するフォント名、 CSSのリンク先等を記載する |
| <body> | サイトに表示される分などを記載する |
| <footer> | コピーライト等を記載する |
このほかに、見栄えをよくするため、CSSファイルを作ります。
WordPressの最小構成も上記同様のようです。
| タグ名 | 説明 |
|---|---|
| header.php | メニューなどを記載する |
| index.php | トップページ |
| page.php | 固定ページ |
| single.php | 投稿ページ |
| footer.php | コピーライト等を記載する |
真ん中の部分が何を表示するかで切り替わっていると思えば、
HTMLと大差ないですね。
このほかに、HTML同様、見栄えをよくするために、CSSファイルを作ります。
ここまでは大差なかったですが、全く違う点があります。
それは、functions.phpという設定ファイルが必要となる点です。
必要なファイルを作ろう
先日作ったローカルのWordPress 直下で作業するのは気が引けるので、
テーマ作成用フォルダを別途作って、チャレンジしてみようと思います。
必要フォルダ/ファイル
必要フォルダ/ファイル作成手順
①XAMPPインストールフォルダ内の下記場所にテーマ作成用フォルダを作成する。
※ここでは、firstthemeというフォルダ名にしています。
②ATOMを起動する。
③「Add Folder」をクリックする。
④フォルダーの選択ポップアップで、ファイルを保存するフォルダを指定する。
※ここでは、先ほど作ったfirstthemeというフォルダを指定しています。
⑤ポップアップが閉じ、ATOMの左ペインにフォルダが作成される。
⑥フォルダ名を右クリックし、「新規ファイル」をクリックする。
⑦下記ファイル名を入力し、「Enter」キーをクリックする
⑧右ペインにfunctions.phpが開いた状態で表示される。
⑨同様に以下ファイルを作成する。
- header.php
- index.php
- page.php
- single.php
- footer.php
- style.css
では、順番にファイルを作ってみようと思います。
functions.php
functions.php作成手順
①ATOMのfunctions.phpを開く。
②次のコードを記載して、Ctrl+Sで保存する。
＜?php
これだけで本当に大丈夫なの？！と思ってしまいますが、
次へ行ってみましょう。
header.php
header.php作成手順
①ATOMのheader.phpを開く。
②次のコードを記載して、Ctrl+Sで保存する。
＜!DOCTYPE html＞ ＜html lang="ja"＞ ＜head＞ ＜meta charset="utf-8"＞ ＜meta name="viewport" content="width=device-width, initial-scale=1"＞ ＜link href="＜?php echo get_template_directory_uri(); ?＞/style.css" rel="stylesheet" type="text/css" media="all"/＞ ＜meta http-equiv="X-UA-Compatible" content="IE=edge"＞ ＜script src="https://code.jquery.com/jquery-3.3.1.min.js"＞＜/script＞ ＜script src="＜?php echo get_template_directory_uri(); ?＞/js/admin.js"＞＜/script＞ ＜?php wp_head(); ?＞ ＜/head＞ ＜body＞ ＜header＞ ＜h1＞LOGO＜/h1＞ ＜/header＞
<meta charset>は文字コード設定、
viewportは、スマホやタブレットのモバイル端末で最適にWeb表示させるための設定、
その他、CSSやJavaScriptなどの読み込みをしています。
そして、wp_head()。
プラグインで設定したmeta情報や、プラグイン固有のCSS、
JavaScriptなどを出力するためのコードで、
この記載がないと、エラーになることがあるようです。
index.php
index.php作成手順
①ATOMのindex.phpを開く。
②次のコードを記載して、Ctrl+Sで保存する。
＜?php get_header(); ?＞ ＜p＞index.phpの内容です。＜/p＞ ＜?php get_footer();?＞
ExcelやWordでもヘッダー、フッターを使うことがあると思いますが、
get_header()、get_footer()は、設定すると必ずすべてのページにヘッダー、フッターで設定した内容を出力してくれます。
page.php / single.php
page.php / single.php作成手順
①ATOMのpage.phpを開く。
②次のコードを記載して、Ctrl+Sで保存する。
＜?php get_header(); ?＞ ＜?php if(have_posts()): while(have_posts()):the_post(); ?＞ ＜p＞＜?php the_content(); ?＞＜/p＞ ＜?php endwhile; endif; ?＞ ＜?php get_footer(); ?＞
③ATOMのsingle.phpを開く。
④page.phpと同じコードを記載して、Ctrl+Sで保存する。
中3行は、投稿があったら、全ての投稿を表示するためのコードですね。
footer.php
footer.php作成手順
①ATOMのfooter.phpを開く。
②次のコードを記載して、Ctrl+Sで保存する。
＜footer＞ ＜p＞Copyright© 2021 All Rights Reserved.＜/p＞ ＜/footer＞ ＜?php wp_footer(); ?＞ ＜/body＞ ＜/html＞
wp_footer()は、各ページの末尾にJavaScriptやCSSの読み込みコードを出力するためのコードであり、
この記載がないと、エラーになることがあるようです。
テーマの適用
CSSは、きれいにするためのファイルのため、とりあえずこれで適用してみたいと思います。
テーマの適用手順
①以下フォルダ下にフォルダを移動する。
移動フォルダ
移動先フォルダ
②xamppのDB、Webサーバを順に起動させる。
③外観＞テーマの順にアクセスする。
④インストール済みテーマの中に、移動したフォルダ名のテーマがあることを確認する。
⑤作成したテーマを選択し、「有効化」ボタンをクリックする。
⑥「新しいテーマを有効化しました。」が表示されることを確認する。
⑦「サイトを表示」をクリックすると、次のようなページが表示される。
メニューがなく、投稿も見られないですが、
一応最小構成でのテーマを適用し、表示させることができました。
ここから、人に見せられるようなサイトにすべく、チャレンジしていきたいと思います。
