オリジナルテーマ作り方の流れ

テキスト目次 > WordPressの応用 >オリジナルテーマ作り方の流れ

今回はWordPress(ワードプレス)でオリジナルのテーマ作成にチャレンジしたいという方向けに、静的HTMLサイトを例にWordPressテーマの作成方法の基本について説明していきます。

■今回WordPress化する静的サイトの例

WordPressとは　基本のおさらい

WordPressの概要構成

以下はWordPressの構成、いわゆるシステムの実体の概要図です。

静的サイトの場合HTMLや画像などのファイル類で構成されますが、WordPressはさらにPHPというプログラム言語とMySQLと言われるデータベース（データの蓄積される場所）を利用しています。

ブログ情報(文章)などもデータベースに蓄積され、このデーターベースとHTML・CSS・PHPなどのファイル類と連携して、WordPressのシステムを提供しています。

WordPressのフォルダ・ディレクトリ構成

つぎに、WordPressのフォルダ・ディレクトリ構成（下図の赤枠の部分）について説明します。

以下はWordPressのインストールフォルダの中身です。

主要なファイル・フォルダは下記の通り。

フォルダ・ファイル名	内容
wp-content	WordPressのテーマやプラグイン、画像データなどが入ったフォルダ。WordPressをカスタマイズする際には、主にこのフォルダの中のファイル類に対して作業していきます。
wp-admin	WordPressの管理画面用のファイル類が格納されているフォルダ
wp-includes	WordPressのシステム全般に関するファイル類が格納されているフォルダ。
wp-config.php	WordPressの設定ファイル。データベースとの通信に必要な情報なども記述されており、とても重要なファイル
wp-login.php	WordPressのログイン画面に関するファイル
wp-load.php	WordPressの動作に必要なプログラム類を読み込むファイル
index.php	サイトにアクセスがあった時に最初に読み込まれるファイル

wp-contentは、WordPressのテーマやプラグイン、画像などを格納するフォルダです。

下記はwp-contentの中身です。この中の「themes」にWordPressのテーマが格納されています。

「themes」フォルダの中には、デフォルトのWordPressテーマがあるほか、このフォルダに独自テーマを追加することでそのテーマを利用できるようになります。

管理画面の外観＞テーマから見たWordPressのテーマ画面です。themesフォルダの中にあるテーマがここに表示されて選択することができます。

ワードプレステーマ選択画面

【超基本】WordPressの最小構成テーマを作成する

ここからは、実際にHTML・CSSファイルの静的サイトから、最小構成のWordPressテーマを作成する方法をご紹介します。

なお、ここでは従来のクラシックテーマの作り方を解説しています。フルサイト編集(ブロックテーマ)の作り方ではないのでご注意ください。

WordPressテーマ必要最小の構成と準備環境

WordPressテーマの最小構成は「index.php」と「style.css」の２ファイルです。

今回は、themesフォルダの中にテーマフォルダ「webst8」を作成して、index.phpとstyle.cssを作ってWordPressのテーマを表示させる最小構成で説明していきます。

今回説明する最小構成

webst8：themesに格納するテーマフォルダ名
index.php：テーマの基本テンプレート
style.css：テーマの名前などを記述する

事前に準備したローカル環境

今回はLocal（旧Local by flywheel）というアプリで、ローカル環境(webst8.local)にWordPressをインストールした状態で進めていきます。

準備したフォルダをWordPressのテーマディレクトリにコピーする

事前準備した「webst8」フォルダをWordPressのテーマフォルダにしていきます。事前に下記のようなページと、HTML・CSS・画像ファイルを準備して説明していきます。

■事前準備するHTMLフォルダとファイル類デモサイトはこちら

項目	内容
webst8	htmlファイル類を格納しているフォルダ。あとでWordPressのthemesフォルダに移動します。
index.html	今回WordPress化するウェブページ
mystyle.css	index.htmlを整形するスタイルシート
images	画像を格納しているフォルダ
外部から読み込んでいるCSSやJavascriptファイル	CSSやJavascriptはBootstrap5.3を利用しています。ここではBootstrapの使い方については割愛します。

■トップページ(index.html)

■index.htmlのソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>ウェブストエイト</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="mystyle.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" ></script>
  </head>
  <body>
    <header class="bg-secondary-subtle">
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">WEBST8</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="index.html">HOME</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">ABOUT</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">BLOG</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">CONTACT</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <div id="top-vg" class="container-fluid">
      <img src="images/top.jpeg" alt="トップページ画像" />
    </div>
    <section id="content">
      <div id="content-wrap" class="container row pt-3">
        <div id="main" class="col-md-9">
          <h1 class="text-center">個別指導Webスクール WEBST8</h1>
          <p>WEBST8は自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。</p>
          <p>スタンダードコースとライトコースから選択して受講できます。</p>
          <div class="row">
            <div class="col-md-6">
              <p><img src="images/pc-wood.jpg" alt="スタンダードコース" /></p>
              <h2 class="text-center">スタンダードコース</h2>
              <p>ホームページ作成からWeb集客まで一通り習得して売上拡大したい方向けのコース</p>
            </div>
            <div class="col-md-6">
              <p><img src="images/pc-leaf.jpg" alt="ライトコース" /></p>
              <h2 class="text-center">ライトコース</h2>
              <p>特定範囲のみ習いたい・まずは試しに受講してみたい方向けのコース</p>
            </div>
          </div>
          <p class="text-center">お申し込みは<a href="https://webst8.com">こちらから</a> <br /><br /></p>
        </div>
        <div id="sidebar" class="col-md-3">
          <section>
            <h2>個別指導ホームページ作成教室</h2>
            <p><img src="images/webst8-banar.png" alt="バナー画像" /></p>
          </section>
          <section>
            <h2>YouTubeチャンネル開設</h2>
            <p><img src="images/webst8-youtube.png" alt="WEBST8のYouTubeチャンネル画像" /></p>
          </section>
        </div>
      </div>
    </section>
    <footer>
      <div class="container">
        <p class="text-center mb-0">Copyright © Webst8 All Rights Reserved.</p>
      </div>
    </footer>
  </body>
</html>

HTML

■mystyle.cssのソースコード

@charset "UTF-8";
body {
  font-size: 16px;
}
h1 {
  font-size: 28px;
  font-weight: bold;
}
h2 {
  font-size: 20px;
  margin: 10px 0;
}
h3 {
  font-size: 18px;
}
img {
  width: 100%;
  height: auto;
}
#content {
  background: url(images/pattern-diamond.png);
  padding-top: 20px;
  padding-bottom: 20px;
}
#content-wrap {
  margin: 0 auto;
  background-color: white;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
#sidebar {
  text-align: center;
}
footer {
  background-color: #222;
}
footer p {
  padding: 15px 0;
  color: white;
}
#catchphrase {
  margin-bottom: 0;
  padding-bottom: 0.5rem;
  font-size: 13px;
}

CSS

(※)画像をはじめHTMLファイルなどはご自身の好きなものを準備して読み替えて進めてください。CSSやJavascriptはBootstrap5.3を利用しています。ここではBootstrapの使い方については割愛します。

まずは、事前準備した「webst8」フォルダをWordPressのthemesディレクトリにコピーします。

Localを利用したローカル開発環境の場合(MacOSの場合)、/Users/ユーザー名/Local Sites/ドメイン名/app/public/wp-contentにthemesフォルダがあります。

必須ファイルstyle.cssを作成する

つづいてwebst8フォルダのなかに、必須ファイルであるstyle.cssを新規作成します。

style.cssにはテーマの名前など必須の情報を入力します。ここではstyle.cssに以下のように記載します。

/*
Theme Name:ウェブストエイト
*/

CSS

Theme NameはWordPressのテーマの名前(必須)です。他にも必要に応じて下記のような項目などを記載することができます。

項目	名称
Theme Name:	テーマの名前(必須)
Theme URL:	テーマのURL
Description:	テーマの説明
Author:	テーマ制作者の名前
Version:	テーマのバージョン

必須ファイルindex.phpを作成する

つぎにindex.phpを作成します。

ここでは、トップページとして用意していたindex.htmlのファイル名を「index.php」に変更します。

WordPress管理画面からテーマを適用する

これでテーマが適用できるようになります。

WordPressの外観＞テーマで「ウェブストエイト」を有効化します。

補足　テーマのサムネイルを表示する

880x660pxの「screenshot.png」という画像をwebst8フォルダに格納すると、テーマ選択画面でサムネイルが表示できます。

テーマ選択画面でサムネイルが表示されました。

テーマ適用後に、トップページを表示します。設定したテーマが表示されていればいったん完了です。

この状態ではまだCSSファイルのスタイルが適用されていなかったり、画像が表示されいないので、さらに修正していきます。

相対パスをWordPress独自の関数に修正する

さきほどWordPressの最小構成のテーマを作成することができましたが、CSSが適用されていなかったり、画像が表示されなくなっていました。

■トップページ　スタイルが崩れていて、画像が表示されていない

本来画像がある場所は「WordPressインストールフォルダ(webst8.local)/wp-content/themes/webst8/images/xxx.png」ですが、WordPress化したことで下記のように「webst8.local/webst8/images/xxx.png」となっていてファイルが見つからず画像が表示されなくなっています。

そこで、相対パスで記述している箇所をWordPress独自の関数を入れて修正していきます。(CDNを利用している場合など、絶対パスで指定している箇所は修正不要です。)

CSSファイルの相対パスの修正

デモサイトのCSSの読み込み指定を下記のように変更します。

■修正前
<link rel="stylesheet" href="mystyles.css">

■修正後
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css">

HTML

JavaScriptなども相対パスで設定している場合は、必要に応じて上記の方式で変更してあげましょう。

画像ファイルのパスの修正

また、画像ファイルのパス(src=の部分)も以下のように修正します。

■修正前
<img src="images/top.jpeg" alt="トップページ画像">

■修正後
<img src="<?php echo get_template_directory_uri(); ?>/images/top.jpeg"  alt="トップページ画像">

HTML

画像が多い場合はVisual Studio Code(エディタ)上でcommand＋Shift+H（ウインドウズの場合は、ctrl＋Hを押して下記のように入力して一括置換すると手間が削減できます。

設定変更後にCSSファイルや画像が適用されているか、画面が更新されていることを確認します。

「get_template_directory_uri();」について

get_template_directory_uri()は、現在利用しているテーマ(親テーマ)のパスを戻り値として返すWordPress独自の関数です。

本例では、get_template-directory_uri()が、http://webst8.local/wp-content/themes/webst8という文字列を出力しています。

HTMLファイルの中に記述する際は「<?php echo get_template_directory_uri(); ?>」のように記述します。

■参考サイト
get_template_directory_uri() – Function | Developer.WordPress.org

WordPress関数(wp_head()とwp_footer())を追加する

つぎにWordPressで実質必須の関数であるwp_head()とwp_footer()を追加します。

下記のように<?php wp_head(); ?>を</head>タグの直前に、<?php wp_footer(); ?>を</body>タグの直前に挿入してください。

...

	<?php wp_head(); ?>
</head>
<body>

...

	<?php wp_footer(); ?>
</body>
</html>

PHP

上記設定後にログインしてトップページを表示すると、画面上部に管理バーが表示されるようになっています。

トップページのソースコードを確認すると、wp_head()を記述した箇所にはWordPressのオリジナルのコードやプラグインのコードが出力されていることを確認できます。

また、wp_footer()を記述した箇所には上部管理バーを表示させる記述などが出力されています。

<?php wp_head(); ?>と<?php wp_footer(); ?>は必須の関数

<?php wp_head(); ?>を</head>タグの直前に、<?php wp_footer(); ?>を</body>タグの直前に挿入することで、それぞれの関数を経由してWordPressの基本機能やプラグイン機能のコードが出力されて使うことができるようになります。

これらの基本機能やプラグインを使わない運用は通常ありえないので必須の関数として忘れずに挿入しておきましょう。

jqueryとjavascriptをWordPress独自のやり方で設定でする

現状では、下記のように<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>と記述してjqueryを読み込む設定をしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  ・・・
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  ・・・
</head>

HTML

しかし、WordPressにはもともと標準でjQueryが読み込まれているため、重複して読み込みをさせると競合して予期せぬ不具合やパフォーマンス劣化を起こす場合があります。

異なる二つのjQueryファイルを読み込んで競合するのを防ぐため、一般的にはもともとWordPressに備わっているjQueryを利用します。

(参考)WordPress標準で読み込まれるjqueryファイルの場所）<WordPressインストールフォルダ>/wp-includes/js/jquery/jquery.js

wp_enqueue_script()関数でjqueryやjsファイルを読み込ませる

WordPressに備わっているjQueryを使用するにはwp_enqueue_script()関数を使用します。<?php_head();?>の上にwp_enqueue_script(‘jquery’)と記載しましょう。

代わりに、<script src=”https://code.jquery.com/jquery-3.2.1.min.js”></script>が不要になるのでこの一行をコメントアウト(または削除)します。

■修正ステップ1

<head>
  ・・・
  <!-- コメントアウトor削除 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <?php wp_enqueue_script('jquery'); ?>
  <?php wp_head(); ?>
</head>

PHP

(新たにfunctions.phpというファイルを作ってそこに記述して制御する方法もありますが、簡略化のためここでは割愛します。)

上記の設定後にトップページのソースコードを見るともともとWordPressに備わっているjqueryが読み込まれるようになったことが確認できます。

また、bootstrap用のjavascriptファイル<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>はjqueryを利用しているため、jqueryを読み込んだ後で読み込ませる必要があります。

そこで、<?php wp_enqueue_script(‘jquery’); ?>の後の行に下記のコードを追加します。

  <?php wp_enqueue_script('bootstrap-js','https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js',array('jquery')); ?>

PHP

最後のarray(‘jquery’)指定で、bootstrap.bundle.min.jsをjqueryの後で読み込ませるという指定をしています。

代わりにもとの<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>は不要になったため、コメントアウト(または削除)します。

■修正後のindex.php

 <head>
    <meta charset="utf-8" />
    <title>ウェブストエイト</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mystyle.css" />
  <!-- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
  <?php wp_enqueue_script('jquery'); ?>
  <?php wp_enqueue_script('bootstrap-js','https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js',array('jquery')); ?>
  <?php wp_head(); ?>
  </head>

PHP

wp_enqueue_scriptの詳細は、wp_enqueue_script() – Function | Developer.WordPress.orgをご確認ください。（※公式ドキュメントは英語で記載されていますが、日本語で記載されているブログ記事も多くあるのでそちらを参考にしてみてください。）

ここでは、割愛しますが、他のCSSファイルやJavascriptファイルの読み込み順番も同様にして制御することができます。

■詳細の説明はこちらをご覧ください。
wp_enqueue_script() – Function | Developer.WordPress.org

(補足)通常jQueryで使っている「$」が使えない件

jQueryを利用した書き方で「$」を使った書き方が多いですが、WordPressでは基本的にそのまま使えません。

WordPressに備わっているjQueryはno-conflictモードになっていて「$」が使えなくなっています。

WordPressの他のライブラリで「$」の文字が使われいた時に不具合がおきないようにこのような仕様になっています。

従ってネットで探したjQueryのコードをそのままコピー＆ペーストしても「$」が原因で動かないケースがよくあります。

簡単にできる対処方法としては「$」を「jQuery」に全て変換する方法があります。

あるいは「$(function(){・・・})」を「jQuery(function($) {・・・})」のようにカプセル化した書き方をしても解決できます。

jQuery.noConflict() | jQuery API Documentation

投稿や固定ページおよび主要テンプレートを作成する

ここからは固定ページや投稿ページなどを作成して、それぞれに応じたページが表示されるようにしていきます。

現時点ではindex.phpしか表示できるテンプレートがないので、WordPressで投稿や固定ページを作成しても全てindex.php(現状はトップページ)が表示されます。

このままだとWordPressの管理画面で投稿や固定ページ機能が使えないので、ここからテンプレート(phpファイル)を増やしていきます。

WordPressの主要なテンプレートファイルと優先順位

WordPressでよく利用する主要なテンプレートファイルをいくつかピックアップして記載します。

テンプレートファイル名	概要
index.php	WordPress必須のテンプレート。他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレート
single.php	投稿用のテンプレート
page.php	固定ページ用のテンプレート
archive.php	アーカイブ用のテンプレート
category.php	カテゴリーページのテンプレート
404.php	ページが見つからないエラー(404エラー)用のテンプレート
search.php	検索結果用のテンプレート
front-page.php	トップページ用のテンプレート
home.php	トップページ・投稿一覧用のテンプレート　 ※front-page.phpが存在せず設定＞表示設定でフロントページに「最新の投稿」が設定されているときにトップページに適用される ※設定＞表示設定で投稿一覧に固定ページが設定されているときに投稿一覧ページとして適用される

これらのテンプレートには「優先順位」があり、優先度の高いテンプレートが優先的に使われます。

最初に作成したindex.phpは他に優先順位の高いテンプレートがないときに最終的に適用される汎用テンプレートです。

優先順位の全体像は下記にありますので、ご興味のある方は確認してみてください。

テンプレート階層 – Japanese Team – WordPress.org 日本語

ここからは、トップページと固定ページと投稿ページの優先順位について説明していきます。

トップページ用テンプレートの優先順位

トップページ用テンプレートの優先順位です。

優先順位	テンプレートファイル名	備考
1	front-page.php
2	（フロントページに固定ページを設定している場合）固定ページに適用されるテンプレート階層が適用される	設定＞表示設定でフロントページにいずれかの固定ページが設定されている必要がある
2	home.php	設定＞表示設定でフロントページに「最新の投稿」が設定されている場合
4	index.php

トップページの設定は、WordPressの設定＞表示設定でホームページ設定の内容により、適用されるテンプレートが変わるので少し複雑です。

今回紹介している例では、index.php以外のテンプレートが存在しないため、トップページにindex.phpが適用されています。

固定ページ用テンプレートの優先順位

固定ページ用テンプレートの優先順位です。

優先順位	テンプレートファイル名	備考
1	$custom.php	カスタムテンプレートが選択されている場合
2	page-{スラッグ名}.php
3	page-{ID}.php
4	page.php
5	singular.php
6	index.php

今回紹介している例では、index.php以外のテンプレートが存在しないため、どの固定ページを表示してもindex.phpが適用されます。

このままだとWordPressの管理画面で固定ページを作成できないので、後ほど固定ページ用のテンプレート「page.php」の作り方を説明していきます。

投稿ページ用テンプレートの優先順位

投稿ページ用テンプレートの優先順位です。（カスタム投稿タイプを除く。）

優先順位	テンプレートファイル名	備考
1	$custom.php	カスタムテンプレートが選択されている場合
2	single-post.php
3	single.php
4	singular.php
5	index.php

今回紹介している例では、index.php以外のテンプレートが存在しないため、どの投稿ページを表示してもindex.phpが適用されます。

補足：現在表示されているテンプレートファイルを確認する方法

WordPressのプラグイン「Show Current Template」をインストール・有効化すると、上部ツールバー上に現在表示されているテンプレートファイルが表示されるようになります。

■上部ツールバーにテンプレートファイルの確認項目が追加される

WordPressでテーマを開発する際、現在表示されているテンプレートファイルを確認できると作業が捗るので、必要に応じてインストールしてあげてみてください。

チェックテスト

チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

オリジナルテーマ作り方の流れ

目次

WordPressとは　基本のおさらい

WordPressの概要構成

WordPressのフォルダ・ディレクトリ構成

【超基本】WordPressの最小構成テーマを作成する

WordPressテーマ必要最小の構成と準備環境

事前に準備したローカル環境

準備したフォルダをWordPressのテーマディレクトリにコピーする

必須ファイルstyle.cssを作成する

必須ファイルindex.phpを作成する

WordPress管理画面からテーマを適用する

補足　テーマのサムネイルを表示する

相対パスをWordPress独自の関数に修正する

CSSファイルの相対パスの修正

画像ファイルのパスの修正

WordPress関数(wp_head()とwp_footer())を追加する

jqueryとjavascriptをWordPress独自のやり方で設定でする

wp_enqueue_script()関数でjqueryやjsファイルを読み込ませる

投稿や固定ページおよび主要テンプレートを作成する

WordPressの主要なテンプレートファイルと優先順位

トップページ用テンプレートの優先順位

固定ページ用テンプレートの優先順位

投稿ページ用テンプレートの優先順位

補足：現在表示されているテンプレートファイルを確認する方法

チェックテスト

お問い合わせ

恐れず、奢らず、楽しく。

オリジナルテーマ作り方の流れ

目次

WordPressとは 基本のおさらい

WordPressの概要構成

WordPressのフォルダ・ディレクトリ構成

【超基本】WordPressの最小構成テーマを作成する

WordPressテーマ必要最小の構成と準備環境

事前に準備したローカル環境

準備したフォルダをWordPressのテーマディレクトリにコピーする

必須ファイルstyle.cssを作成する

必須ファイルindex.phpを作成する

WordPress管理画面からテーマを適用する

補足 テーマのサムネイルを表示する

相対パスをWordPress独自の関数に修正する

CSSファイルの相対パスの修正

画像ファイルのパスの修正

WordPress関数(wp_head()とwp_footer())を追加する

jqueryとjavascriptをWordPress独自のやり方で設定でする

wp_enqueue_script()関数でjqueryやjsファイルを読み込ませる

投稿や固定ページおよび主要テンプレートを作成する

WordPressの主要なテンプレートファイルと優先順位

トップページ用テンプレートの優先順位

固定ページ用テンプレートの優先順位

投稿ページ用テンプレートの優先順位

補足：現在表示されているテンプレートファイルを確認する方法

チェックテスト

お問い合わせ

恐れず、奢らず、楽しく。

WordPressとは　基本のおさらい

補足　テーマのサムネイルを表示する