WordPress のカスタム
HTML、CSS、JQueryと学んで WordPress を学ぼう！
と思ったけど、WordPress のフォルダやコードを見て愕然とした
僕もそうでした。この記事では WordPress の仕組みを簡単に説明します。
触るところは themes フォルダの中だけ
WordPress をサーバーにインストールしたら触る箇所は [ public_html > ドメイン > wp-content > themes ] このフォルダ！
themes フォルダ内にはテンプレート( WordPress でいうテーマ )がフォルダ毎に分けられて入っています。
新しいフォルダを作って名前を付けると、WordPress のダッシュボード(WordPress にログインした先の編集画面) のテーマに[フォルダにつけた名前]と[同じテーマ]が増えてるはずです
このテーマを使えるようにするには、まだフォルダ内にファイルが足りません。
テーマフォルダに必要なファイル
新しく作ったテーマフォルダに必要なファイルは下記の3つです
- index.php
- style.css
- functions.php
index と functions は拡張子が .php になっていますが、中身は
- index = index.html の 拡張子を .php に書き換えただけ
- functions = 追加機能をPHPを書くファイル
という感じです
style.css に最低限必要な記述
作ったフォルダを「テーマとして有効化」するには、下記の通り入力する必要があります。
style.css
/*
Theme Name: テーマの名前(必須)
Theme URL: テーマのURL
Description: テーマの説明
Author: テーマの制作者
Version: テーマのバージョン
*/WordPress は style.css 内のコメントでテーマの情報を取得します。
最低限 Theme Name: さえあれば動きます。
自作テーマのサムネイル
WordPress のテーマ選択画面にあるサムネイルは「800px*660px」サイズの「screenshot.png」というファイルを テーマ名のついたフォルダの中にいれると表示されるようになります。
ここまでで自作テーマの土台は完成です！
WordPress の仕組み
先述の「テーマごとのフォルダ」の中身を解説
- index.php [ページの外観]
- header.php [<head>タグの中身を記述]
- footer.php [<footer>タグの中身を記述]
- style.css [テーマの情報をコメントとして入力]
- functions.php [ PHP を使って追加機能をつける]
- JQuery.js [ JQuery を記述する](名前変更可)
- screenshot.png [テーマ選択画面のサムネイル](縦横比 3:4 の pngファイル)
- favicon.ico [ファビコン(32px*32px の画像)]
- css [css を入れておくフォルダ](名前変更可)
- image [画像を入れておくフォルダ](名前変更可)
- includes [読み込むパーツを入れておくフォルダ](名前変更可)
ちょっと多いですが、仕組みを覚えてしまえば簡単です！
WordPress はページ毎に読み込む PHPファイルの名前が決まっている
例えば「投稿ページ」は single.php、「固定ページ」なら page.php でデザインを追加していきます。
当てはまる名前の PHPファイルがなければ、index.php のデザインが呼び出される。といった形です。
※ページと phpファイルの組み合わせのリストが下記のリンクの画像
(WordPress codex のページより引用)
https://wpdocs.osdn.jp/wiki/images/wp-template-hierarchy.jpg
最初はどういうことなのか意味不明だと思います。触っていくうちに「なるほど」になるので、今は流してもらえればOK
※各PHPファイルの DOCTYPE 宣言の前に下記の記述をする事で WordPress ダッシュボード内でテンプレートを設定することも可能。
<?php */ Template Name: テンプレートの名前 /* ?>
<!DOCTYPE html>
<html>
</html>まとめ
WordPress にはページの役割ごとに読み込む PHP のファイル名が決まっている。
ページ毎に HTML+PHP で作ったテンプレートファイルを用意していく。
themes の中に新しいフォルダと少しのファイルを作れば新しいテーマは作れる！
