Zenn
👄

WordPressの自作テーマで簡単サイト制作

2023/04/20に公開
PHP
WordPress
テンプレート
テーマ
tech

WordPressはサイト制作での有用なプラットフォームです。
デフォルトのテーマは3つほど初期からセットされています。
また無料・有料のテーマもたくさん提供されています。
しかし、オリジナルデザインを実現するにあたり、既存のものでは作りにくかったり、また逆に、簡単なポートフェリオや問い合わせフォームだけ場合、色んなコンテンツやプラグインの付いた多機能なものはいらないと感じた方は多いのではないかと思います。
こういう時に、独自テーマを作る必要を感じるはずです。
今回は、最低限の自作テンプレートファイルで作成するWordPressサイトという位置づけで、作っていきたいと思います。

テンプレート構成について

自作テーマを作るには、HTML・CSS・PHPの最低限の知識が必要です。
また、テーマは一般的に以下のファイルから構成されています。

  • style.css： テーマのスタイルシート
  • index.php：トップページのファイル
  • header.php：共通ヘッダー構成ファイル
  • footer.php：共通フッター構成ファイル
  • single.php：単一投稿記事ページのファイル
  • page.php：単一固定ページのファイル
  • archive.php：アーカイブファイル
  • functions.php：PHPの関数を記載するファイル

WordPressには、色々とお約束があります。
たとえば、トップページはindex.phpだけど、front-page.phpが存在すればそちらを優先する。
固定ページは、page.phpで表示するけれど、特定のページを指定すればそちらを優先する。
こんな風に、一定の約束があるので、それに沿ってページを作成する必要があります。
下記はテンプレートが呼ばれる流れです。

見ていただくとわかると思うのですが、ページを表示する際、必要な名前のファイルが存在すれば表示の流れになっており、無ければ結局はindex.php にたどり着くようになっています。
つまり、index.php があれば、全てのページを網羅できるということです。
細かいデザインを必要としないサイトであれば、index.phpで充分であることがわかります。
これを踏まえて、ページを作っていきましょう。

開発環境

WordPressの開発をするなら、Localが手軽で便利。
下記にて順があるので、まずLocalのインストールをしましょう。

Flywheel Localを使って、WordPressサイトを構築する

最低限のプラグインを入れたらOKです。
VSCode等のエディタでインストールしたWordPressのサイトのディレクトリを開いておきます。

C:\\ユーザー\ユーザー名\Local Sites\作成したサイト名\app

テーマ名作成

まず、自作テーマの名前を決めます。
例えば、WordPressにはtwentytwentyone、twentytwentytwo のようなテーマ名のフォルダが付属しています。
WordPressは、wp-contentのthemesフォルダに、使用するテーマのテンプレートを入れることになっています。
自作テーマもここに作ることになります。
今回は「original」という名前で作ることにします。

  • wp-content > themes > original
    wp-contentのthemesフォルダにoriginalフォルダを作成してください。

作成したら、フォルダの中に以下のファイルを作成します。

  • style.css
  • index.php
  • header.php
  • footer.php
  • single.php
  • page.php
  • archive.php
  • functions.php

style.cssに必要な情報を記入する

WordPressでは、テーマファイルの情報はstyle.cssから取得します。
テーマを使用するにあたり、必要な情報をstyle.cssの上部に記載します。

style.css
/*
Theme Name: Original Theme
Description: This is custom WordPress theme.
Author: 369code
Text Domain: original
Version: 1.0.0
*/

/* CSS styles */

Theme Name には、テーマの正式名称を英語で記入します。
Description は任意ですが、テーマに関する説明文です。
Author は作者名です。
Text Domain はフォルダ名を記入します。
Version はその名の通りバージョンを記入します。最初は1.0でよいかと思います。

配布予定などあるのであれば、
Theme URI: 配布予定のURL
Author URI: 作者のURL
License：GNU General Public License v2 or later（例）
を追加で記入するのが良いです。

/* CSS styles */　から下は普通にCSSを記入します。

ここからは個人的見解ですが、style.cssはこのままで、別途このテーマファイル専用のスタイルシートを作ることをおすすめします。
変更しやすいのと、SCSSを使用した場合の上書きエラーでページ表示できないことを防ぐためでもあります。

  • css：自作テーマのstyle.cssを格納する
  • scss：自作テーマのstyle.scssを格納する（SCSSを使用する場合）
    上記で、別途フォルダ・ファイルを自作テーマフォルダの中に作成します。

index.phpの内容

WordPress にはテンプレートタグというものが存在し、それを使って投稿ページ内容を表示する仕組みになっています。
例えば

  • the_title()：投稿記事のタイトルを表示
  • the_content()：投稿記事の本文の内容を表示
  • the_post_thumbnail()：投稿記事のアイキャッチ画像を表示
    をファイルに使用して、管理画面で作成した、各投稿記事の内容を表示することができるようになります。

上記を踏まえながら、まずは一旦、トップページで表示したい内容を、front-page.phpを作って書き込むことにします。
今回デザインはCDNで読み込んだTailWindCSSを使用して作成しています。

ロゴを使用しています。下記を使ってください。

front-page.php
<?php

/**
 * @name:front-page.php
 */
?>
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>トップページ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div id="page" class="page-wrap flex flex-col">
    <header class="text-gray-600">
      <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
           <img src="images/logo.png">
          <span class="ml-3 text-xl">Original</span>
        </a>
        <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
          <a class="mr-5 hover:text-gray-900">Link</a>
          <a class="mr-5 hover:text-gray-900">Link</a>
          <a class="mr-5 hover:text-gray-900">Link</a>
          <a class="mr-5 hover:text-gray-900">Link</a>
        </nav>
      </div>
    </header>
    <main>
      <section class="text-gray-600 body-font">
        <div class="container px-5 py-24 mx-auto">
          <div class="flex flex-wrap w-full mb-20">
            <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
              <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">WordPress 自作テーマでサイト作成</h1>
              <div class="h-1 w-20 bg-indigo-500 rounded"></div>
            </div>
            <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">WordPressは、自身のウェブサイトを構築するための有用なプラットフォームです。WordPressのデフォルトのテーマは、すでに多数提供されていますが、多くの場合、ユーザーは自分の個性的なデザインを実現するために独自のテーマを作成することを選択します。これは、自作テンプレートと呼ばれます。</p>
          </div>
          <div class="flex flex-wrap -m-4">
            <div class="xl:w-1/4 md:w-1/2 p-4">
              <div class="bg-gray-100 p-6 rounded-lg">
                <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://dummyimage.com/720x400" alt="content">
                <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">投稿記事カテゴリ</h3>
                <h2 class="text-lg text-gray-900 font-medium title-font mb-4">投稿記事タイトル</h2>
                <p class="leading-relaxed text-base">投稿記事の抜粋本文・・・</p>
              </div>
            </div>
            <div class="xl:w-1/4 md:w-1/2 p-4">
              <div class="bg-gray-100 p-6 rounded-lg">
                <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://dummyimage.com/720x400" alt="content">
                <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">投稿記事カテゴリ</h3>
                <h2 class="text-lg text-gray-900 font-medium title-font mb-4">投稿記事タイトル</h2>
                <p class="leading-relaxed text-base">投稿記事の抜粋本文・・・</p>
              </div>
            </div>
            <div class="xl:w-1/4 md:w-1/2 p-4">
              <div class="bg-gray-100 p-6 rounded-lg">
                <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://dummyimage.com/720x400" alt="content">
                <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">投稿記事カテゴリ</h3>
                <h2 class="text-lg text-gray-900 font-medium title-font mb-4">投稿記事タイトル</h2>
                <p class="leading-relaxed text-base">投稿記事の抜粋本文・・・</p>
              </div>
            </div>
            <div class="xl:w-1/4 md:w-1/2 p-4">
              <div class="bg-gray-100 p-6 rounded-lg">
                <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://dummyimage.com/720x400" alt="content">
                <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">投稿記事カテゴリ</h3>
                <h2 class="text-lg text-gray-900 font-medium title-font mb-4">投稿記事タイトル</h2>
                <p class="leading-relaxed text-base">投稿記事の抜粋本文・・・</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer class="text-gray-600">
      <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
        <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
          <img src="images/logo.png">
          <span class="ml-3 text-xl">Original</span>
        </a>
        <p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">© 2023 Original</p>
        <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
          <a class="text-gray-500">
            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
              <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
            </svg>
          </a>
          <a class="ml-3 text-gray-500">
            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
              <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
            </svg>
          </a>
          <a class="ml-3 text-gray-500">
            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
              <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
              <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
            </svg>
          </a>
          <a class="ml-3 text-gray-500">
            <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
              <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
              <circle cx="4" cy="4" r="2" stroke="none"></circle>
            </svg>
          </a>
        </span>
      </div>
    </footer>
  </div>
</body>

</html>

上記をまるっとfront-page.phpにコピペします。
Localで管理画面を立ち上げ、左メニューの外観から自分で作ったテーマファイルを選んで、「有効化」をクリックします。
そして、サイトを表示します。
現在、こんな感じで表示されていれば成功です。

ここからカスタマイズしていきます。

共通部分をテンプレートに分割

front-page.phpにまるまるHTMLタグを記載しましたが、他のページでも共通で使いまわす部分が存在します。例えば、開始htmlタグからのheaderタグ部分、footerタグからのhtml閉じタグあたりは、すべてで共通となるはずです。
他のページでも共通に使えるように、header.php と　footer.php にその部分を切り取って貼り付けます。

今回、header.phpには、mainタグより上を貼り付けます。

header.php
<?php
?>
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>トップページ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div id="page" class="page-wrap flex flex-col">
    <header class="text-gray-600">
      <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
          <img src="images/logo.png">
          <span class="ml-3 text-xl">Original</span>
        </a>
        <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
          <a class="mr-5 hover:text-gray-900">Link</a>
          <a class="mr-5 hover:text-gray-900">Link</a>
          <a class="mr-5 hover:text-gray-900">Link</a>
          <a class="mr-5 hover:text-gray-900">Link</a>
        </nav>
      </div>
    </header>
    <main>

footer.phpにはmainより下を貼り付けます。

footer.php
<?php
/**
 * @footer.php
 */
?>
      </main>
      <footer class="text-gray-600">
        <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
          <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
            <img src="images/logo.png">
            <span class="ml-3 text-xl">Original</span>
          </a>
          <p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">© 2023 Original</p>
          <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
            <a class="text-gray-500">
              <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
              </svg>
            </a>
            <a class="ml-3 text-gray-500">
              <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
              </svg>
            </a>
            <a class="ml-3 text-gray-500">
              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
              </svg>
            </a>
            <a class="ml-3 text-gray-500">
              <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
                <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
                <circle cx="4" cy="4" r="2" stroke="none"></circle>
              </svg>
            </a>
          </span>
        </div>
      </footer>
    </div>
  </body>

</html>

切り取られて、今、front-page.phpは、sectionタグの中身だけがあるはずです。
ここで、sectionの上と下にそれぞれ記入します。

<?php get_header();?>

 <section class="text-gray-600 body-font">
 ・・・・・・・・・
 </section>
 
<?php get_footer();?>

このget_〇〇 を書くことで、header.php　と　footer.php が読み込まれるようになります。
サイトを開き問題なくページが表示されていれば次に進みます。

header.php に必要なタグ

上の方でも言いましたが、WordPressには、オリジナルのタグが存在します。
現在のソースはこの画像のようになっています。

見た目に問題は無いのですが、PHPファイル内にWordpressのオリジナルタグを書かないと、WordPressが機能していません。
headerには、スタイルとスクリプトを読み込むタグが必要です。
またbodyタグの開始にも、専用の開始タグを書く必要があります。

htmlタグの中と、headの閉じタグ上、bodyタグをWordPress用に書き換えます。

header.php
<?php
/**
 * @header.php
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>//1.管理画面で設定した言語
<head>
  <meta charset="<?php bloginfo('charset'); ?>">//2.管理画面で設定した言語
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>トップページ</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <?php wp_head(); ?>//3.WordPressが用意したスクリプトを読み込む
</head>

<body <?php body_class(); ?>>//4.Wordpressが自動で挿入するクラス
  <?php wp_body_open(); ?>//5.フック用
  <div id="page" class="page-wrap flex flex-col">
  ・・・・

上記の5つのタグは必須です。header.phpを作成したら必ず記入してください。
特に3.4.5は、表示に関する不具合のもとになったりしますので、忘れずに。
これで、ページを表示すると次のようなソースになります。

ちゃんとWordPressの用意したスクリプトやスタイルシートを読み込んでいることが分かります。
ただ、このOriginalテンプレートのstyle.cssはまだ読み込まれていません。
その部分は、footerを修正した後でとりかかります。

footer.php に必要なタグ

header.php と同様に、footer.php にも必要なタグが存在します。
headerより少ないですが、これを書くことで、WordPressに必要なスクリプトが読み込まれます。
bodyタグの閉じタグの上に記入します。

footer.php
　　・・・・・・
    <?php wp_footer(); ?>
  </body>
</html>

管理バーのスクリプトや、Jqueryなどのスクリプトもここで読み込まれることになります。

functions.php でスタイルシートを表示する

まだ、自作テーマフォルダのスタイルシートも読み込まれていません。
この辺を修正していきたいと思います。
まず、現在のフォルダ構成です。

functions.phpを開きます。
WordPressでは、使用しているテーマのフォルダにあるfunctions.phpに、テーマに必要な機能や関数を書くルールになっています。
テーマによっては、とても肥大なコードになることがあるので、整理して書くようにします。

functions.php
<?php
/**
 * @functions.php
 */

if (!defined('ABSPATH')) exit;

//テーマファイルの読み込み用
if (!function_exists('setup_original')) {
  function setup_original()
  {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('post-formats', array('aside', 'gallery'));
    add_theme_support('automatic-feed-links');
    add_theme_support('menus');
    add_theme_support('widgets');
    add_theme_support('editor-style');
    add_theme_support('wp-block-style');
    add_theme_support('html5', array(
      'search-form', 'comment-form', 'comment-list'
    ));
    add_post_type_support('page', 'excerpt');
  }
}
add_action('after_setup_theme', 'setup_original');

//ヘッダータイトルの読みこみ用
function change_title_separator($separator)
{
  $separator = '|';
  return $separator;
}
add_filter('document_title_separator', 'change_title_separator');

//テーマのスタイルシートの読み込み
if (!function_exists('setup_styles')) {
  function setup_styles()
  {
    wp_enqueue_style('style', get_template_directory_uri() . '/style.css', array(), '1.0.0');
    wp_enqueue_style('original-style', get_template_directory_uri() . '/css/original-style.css', array(), '1.0.0');
  }
}
add_action('wp_enqueue_scripts', 'setup_styles');

//不必要なヘッダータグの取り外しとScriptのフッター移動
function move_theme_scripts()
{
  remove_action('wp_head', 'wp_generator');
  remove_action('wp_head', 'rsd_link');
  remove_action('wp_head', 'wlwmanifest_link');
  remove_action('wp_head', 'wp_shortlink_wp_head');
  remove_action('wp_head', 'print_emoji_detection_script', 7);
  remove_action('wp_print_styles', 'print_emoji_styles');
  remove_action('wp_head', 'wp_print_scripts');
  remove_action('wp_head', 'wp_print_head_scripts', 9);
  remove_action('wp_head', 'wp_enqueue_scripts', 1);
  add_action('wp_footer', 'wp_print_scripts', 5);
  add_action('wp_footer', 'wp_print_head_scripts', 5);
  add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action('wp_enqueue_scripts', 'move_theme_scripts');

まずは上記をコピーして貼り付けてください。

if (!defined('ABSPATH')) exit;

これは、外部から不正にアクセスされて処理されるのを防ぐコードです。

function setup_original(){
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('post-formats', array('aside', 'gallery'));
    add_theme_support('automatic-feed-links');
    add_theme_support('menus');
    add_theme_support('widgets');
    add_theme_support('editor-style');
    add_theme_support('wp-block-style');
    add_theme_support('html5', array(
      'search-form', 'comment-form', 'comment-list'
    ));
    add_post_type_support('page', 'excerpt');
}

これは、WordPressのテーマが読み込まれたときに実行される関数です。
add_theme_supportで投稿タイトル・アイキャッチ・メニュー・ウィジット・ブロックスタイルなどのテーマ機能をテーマ内でサポートすることを許可します。

change_title_separator($separator){
}

これで、ブラウザのウィンドウに出力されるページタイトルを、投稿内容ごとに変更できます。

function setup_styles()
  {
    wp_enqueue_style('style', get_template_directory_uri() . '/style.css', array(), '1.0.0');
    wp_enqueue_style('original-style', get_template_directory_uri() . '/css/original-style.css', array(), '1.0.0');
  }

この関数で、自作テンプレートのスタイルシートを読み込みます。
直接header.phpにスタイルシートを読み込むタグを書いても良いのですが、その場合、ページ内容に変更があった場合でも、キャッシュで古い情報を表示してしまいます。
よくあるのが、スタイルシートを変更したのに、ページが更新されてないというパターンです。
このfunctions.phpで、wp_head()に一緒にこのスタイルシートを読み込むことで、style.cssのファイル名の後ろにバージョン番号が付き、変更が反映されるようになります。

function move_theme_scripts()
{
  remove_action('wp_head', 'wp_generator');
  remove_action('wp_head', 'rsd_link');
  remove_action('wp_head', 'wlwmanifest_link');
  remove_action('wp_head', 'print_emoji_detection_script', 7);
  remove_action('wp_print_styles', 'print_emoji_styles');
  remove_action('wp_head', 'wp_print_scripts');
  remove_action('wp_head', 'wp_print_head_scripts', 9);
  remove_action('wp_head', 'wp_enqueue_scripts', 1);
  add_action('wp_footer', 'wp_print_scripts', 5);
  add_action('wp_footer', 'wp_print_head_scripts', 5);
  add_action('wp_footer', 'wp_enqueue_scripts', 5);
}

これは何をしてるかというと、remove_action()で表示から外し、add_action()で移動しています。wp_generatorは、WordPressを使用してますって公言してるタグなので外します。
rsd_linkはReally Simple Discoveryのxmlへのリンクです。個人サイトには必要無いです。
wlwmanifest_linkは、WindowsLiveWriterを使用するリンクです。使う予定がが無ければ削除します。print_emoji_detection_scriptは絵文字を表示するスクリプトですが、必要無いです。
wp_print_head_scriptsは、headに出力するという意味なので、いったんスクリプトをヘッダーからフッターに移動させ、そちらで表示させるようにします。

これで、ソースタグの表示が、無駄なものが消えてきれいになったはずです。
そして、テーマのCSSファイルもVersionつきで、きちんと読み込まれています。

画像やリンクのパスを修正する

Wordpressでは、リンクや画像を表示する専用のタグが用意されています。
現在、ロゴなどの画像は見えなくなっています。
これを表示できるようにします。
ロゴは現在、テーマフォルダのimagesフォルダの中にあります。

有効化しているテーマのディレクトリまでのURIを取得します。（末尾に/は付きません）
作成したcssやimagesなどのフォルダにアクセスする際は、下記のタグを先頭につけます。

<?php echo get_template_directory_uri(); ?>

これをヘッダー/フッターのロゴに書きます。

<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png">

ページを表示するとロゴが表示されています。
ソースは以下になります。imgタグのsrcに、URLが入っています。

画像の場合はディレクトリまでのURLですが、リンクの場合は少し変わります。
基本的にHOMEのURLをベースにするタグになります。

<?php echo esc_url(home_url('/')); ?>

home_url()で現在のページのホームURLを返し、引数にパスを入れます。
上記であれば、HOMEのパスです。
esc_url()でエスケープ処理して表示します。href属性では、esc_url(home_url())でセットで使います。
現在使用してるWordPress内へのリンクは、esc_url(home_url(path))で記載します。

これで、ほぼ表示の問題はクリアです。

投稿内容を表示する

WordPressで投稿した内容を表示するには、独自タグを使用します。
下記は管理画面で作成した投稿内容を表示したいページで使用します。
構文だと思ってください。

<?php
if ( have_posts() ) {
  while (have_posts()) : the_post();
    the_title();//投稿タイトル
    the_post_thumbnail( 'post-thumbnail' );//アイキャッチ
    the_content();//投稿本文
  endwhile;
}
?>
index.php
<?php
/**
 * @index.php
 */
?>

<?php get_header(); ?>

<section class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <?php
    if (have_posts()) {
      while (have_posts()) : the_post();
    ?>
        <div class="flex flex-wrap w-full mb-20">
          <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900"><?php the_title(); ?></h1>
            <div class="h-1 w-20 bg-indigo-500 rounded"></div>
          </div>
          <p class="lg:w-1/2 w-full leading-relaxed text-gray-500"><?php the_content(); ?></p>
        </div>
    <?php
      endwhile;
    }
    ?>
  </div>
</section>

<?php get_footer(); ?>

index.php, single.php, page.php 共通です。
コピーして、上記のファイルに貼り付けてください。

固定ページにはベースファイルを選べる機能があります。
ページによってデザインを変えたいとき等に使えます。
基本はpage.phpで、デフォルトファイルと呼ばれます。
固定ページ編集の右ブロックで、テンプレートファイルを選択できるようにするには、
〇〇.phpと名前を付けて、ファイルの先頭にこの文言を記載します。
例えばcompany.phpと名付けた場合。

company.php
<?php
/**
 * Template Name: 会社概要専用
 * Template Type: Page
 */
/**
 * @company.php
 */
?>

これで、固定ページで会社概要を作ったときに、このファイルを選ぶことができるようになります。

一旦、front-page.php は、1front-page.phpにリネームしてください。

これでページを表示すると次のようになります。

テストで投稿記事が1件入っていますが、それが表示されます。
たとえば、固定ページで、Topページというページを作成したとしましょう。
URL（スラッグ）をtopにして保存し、公開します。

header.phpの右メニューの文字を1つだけ変更します。

header.php
        <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
          <a href="<?php echo esc_url(home_url('/top'));?>" class="mr-5 hover:text-gray-900">Top</a>
          <a class="mr-5 hover:text-gray-900">Link</a>
          <a class="mr-5 hover:text-gray-900">Link</a>
          <a class="mr-5 hover:text-gray-900">Link</a>
        </nav>

これでヘッダーメニューのTopをクリックすると先ほど作った固定ページのTOPが表示されます。

メニューの実装

メニュー先を管理画面で設定できる用にします。
functions.phpに追加してください。

functions.php
function setup_original()
{
  ・・・・・・・・略
  register_nav_menus(
    array(
      'header_menu' => 'ヘッダーメニュー',
    )
  );
 }

footerにもメニューを入れたければ、'header_menu'の下に追加で入れます。
ヘッダーメニュー、フッターメニューの名前は判りやすい名前で、何でもよいです。

 'header_menu' => 'ヘッダーメニュー',
 'footer_menu' => 'フッターメニュー',

これを書いてから管理画面を見ると、外観メニューの中に「メニュー」という項目ができます。
メニューを好きなようにカスタマイズして保存します。

これをheader.phpに実装します。

header.php
    <header class="text-gray-600">
      <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
          <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png">
          <span class="ml-3 text-xl">Original</span>
        </a>
        <?php
        $args = array(
          'menu'  => 'header_menu', //functionsで登録した名前
          'container' => 'nav',
          'container_id' => '',
          'container_class' => 'md:ml-auto flex items-center justify-center',
          'menu_id' => '',
          'menu_class' => 'w-full flex flex-wrap items-center text-base justify-center gap-4',
        );
        wp_nav_menu($args);
        ?>
      </div>
    </header>

これで、nav > ul > li で、管理画面で作成したメニューのリストを自動表示します。
$argsで設定します。containerで指定したタグで囲ってくれます。今回はnavタグ。
false で囲み自体を無くします。idをつけたければ指定できます。
classをつけたいときはcontainer_classに記入。
menu_classはnavの中にできるulタグの設定です。
細かい設定は難しいので、デザインにこだわりたいのであれば、それぞれにIDをつけて、style.cssで個別設定することをおススメします。

front-page.php で一覧表示

Wordpressの管理画面で、適当に投稿記事を増やしてください。最低3件以上でアイキャッチもつけてください。

一旦、リネームしたfront-page.phpを基の名前に戻します。
コードは以下になります。

front-page.php
<?php

/**
 * @name:front-page.php
 */
?>
<?php get_header(); ?>

<section class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-wrap w-full mb-20">
      <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
        <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">WordPress 自作テーマでサイト作成</h1>
        <div class="h-1 w-20 bg-indigo-500 rounded"></div>
      </div>
      <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">WordPressは、自身のウェブサイトを構築するための有用なプラットフォームです。WordPressのデフォルトのテーマは、すでに多数提供されていますが、多くの場合、ユーザーは自分の個性的なデザインを実現するために独自のテーマを作成することを選択します。これは、自作テンプレートと呼ばれます。</p>
    </div>
    <div class="flex flex-wrap -m-4">
      <?php
      if (have_posts()) {
        while (have_posts()) : the_post();
      ?>
          <div class="xl:w-1/4 md:w-1/2 p-4">
            <div class="bg-gray-100 p-6 rounded-lg">
              <a href="<?php echo get_permalink(); ?>">
                <div><?php the_post_thumbnail('post-thumbnail'); ?></div>
              </a>
              <h3 class=" tracking-widest text-indigo-500 text-xs font-medium title-font">投稿記事カテゴリ</h3>
                  <h2 class="text-lg text-gray-900 font-medium title-font mb-4"><?php the_title(); ?></h2>
                  <div class=" h-40">
                    <p class="leading-relaxed text-base"><?php the_excerpt(); ?></p>
                  </div>
                </div>
            </div>
        <?php
        endwhile;
      }
        ?>
          </div>
    </div>
</section>
<?php get_footer(); ?>

これでページを表示します。

過去の投稿の一覧が表示されます。
表示数は、管理画面の設定メニューの投稿設定で変更できます。

以上、ざっくりとした自作テーマの作成方法ですが、これで基本は分かると思います。
あとは、WordPressのCodexで、必要なタグを検索して使用してください。

WordPress Codex 日本語版

Wordpressのこれはほんの序章ですが、色々調べるうちにやれることが色々できて楽しくなると思います。

Discussion