WordPress の仕組み

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 の中に新しいフォルダと少しのファイルを作れば新しいテーマは作れる!

wordpress.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。