【Web制作過程】TOPページをWordPress化する

こんにちは、コンスキです。

ここまで作ってきた幼稚園のホームページには、日記や給食の献立などを含むページがあります。

この部分は毎日更新したい部分です。

そこで、簡単に更新ができるようにWordPress化することにします。

WordPressのインストール
テーマフォルダの作成
テーマフォルダのアップロード
完成形

WordPressのインストール

幼稚園のホームページをWordPressで管理するためにサーバーにWordPressをインストールします。

インストール先は新しいドメインではなく、このブログ「konsuki.com」のサブディレクトリ「konsuki.com/ifokuhu」にしようと思います。

これは新しいドメインの契約をしないでお金を節約するためです💦

Xserverを使っている場合は、サーバーパネルの「WordPress簡単インストール」からサブドメインにWordPressをインストールすることができます。

「サイトURL」の空欄に、次のようにしてサブディレクトリを入力します。

テーマフォルダの作成

WordPress化する際に必要なのは、「header.php」や「front-page.php」、「footer.php」といったファイルが入ったフォルダです。

このフォルダのことをテーマフォルダといいます。

ここからはテーマフォルダを作っていきます。

HTMLファイルを分割する

まずは、TOPページのHTMLを次3つに分割します。

<!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">
  <link rel="stylesheet" href="./css/destyle.css">
  <link rel="stylesheet" href="./css/top.css">
  <title>いろくふ幼稚園</title>
</head>
<body>
  <div class="wrap">
    <div class="loading_inner">
      <img src="./img/about.png">
      <p>
        <span>loading...</span>
      </p>
    </div>
  </div>
  <header>
    <div id="header_other">
      <div id="branding_container">
        <p id="tagline">地域とつながる幼稚園</p>
        <h1 id="branding"><a href="./top.html">いろくふ幼稚園</a></h1>
      </div>
      <ul id="menu">
        <li><img src="./img/guid_map.png" width="26" height="26"><a href="#">園内マップ</a></li>
        <li><img src="./img/FAQ.png" width="26" height="26"><a href="#">よくある質問</a></li>
        <li><img src="./img/twitter.png" width="18" height="15"><a href="#">ツイッター</a></li>
        <li><img src="./img/home.png" width="26" height="26"><a href="#">ホーム</a></li>
      </ul>
      <div id="tel_container">
        <p id="tel">00 - 0000 - 0000</p>
        <p id="open">開園時間：土日・平日8:00 ~ 19:00</p>
        <p id="extra">  　　　　 （延長　〜20:00）</p>
      </div>
    </div>
    <nav id="nav_container">
      <ul id="navigation">
        <li><a href="./about.html"><img src="./img/about.png" width="66" height="66"><p>園について</p></a></li>
        <li><a href="./daytime.html"><img src="./img/how_to_spend.png" width="66" height="66"><p>１日の過ごし方</p></a></li>
        <li><a href="./lunch.html"><img src="./img/lunch_menu.png" width="66" height="66"><p>給食のこんだて</p></a></li>
        <li><a href="./calendar.html"><img src="./img/ annual_schedule.png" width="66" height="66"><p>年間予定</p></a></li>
        <li><a href="./contact.html"><img src="./img/contact.png" width="66" height="66"><p>お問い合わせ</p></a></li>
      </ul>
    </nav>
    <div id="mv_container">
      <img src="./img/top_mv.jpg">
    </div>
  </header>
  <main>

<div id="news" class="sa sa--up">
      <h1 id="news_heading"><img src="./img/news_header.png" alt="お知らせ" width="173" height="56"></h1>
      <div id="news_content">
        <ul>
          <li><span>2021.7.12</span><a href="#">英会話教室のご案内</a></li>
          <li><span>2021.7.6</span><a href="#">プール開きについて</a></li>
          <li><span>2021.6.17</span><a href="#">短縮保育を始めました</a></li>
          <li><span>2021.6.15</span><a href="#">課外クラブ（6歳児）について</a></li>
          <li><span>2021.6.11</span><a href="#">過程保育のお願い</a></li>
          <li><span>2021.6.7</span><a href="#">令和3年度　幼稚園見学会のご案内</a></li>
        </ul>
      </div>
    </div>
    <div id="diary" class="sa sa--up">
      <h1 id="diary_heading"><img src="./img/diary_header.png" alt="幼稚園日記" width="208" height="56"></h1>
      <div id="diary_content">
        <div>
          <p class="diary_date">2021年7月12日</p>
          <div class="diary_body">
            <img src="./img/diary1.jpg" width="266" height="201">
            <p>　今日はおべんとうの日でした。いつもはお昼ご飯に給食を食べるみんな。いつもの給食も美味しいですが、やっぱり親御さんが作るお弁当のはいつも以上に美味しそうに食べていました。ご家庭によってお弁当のおかずはさまざまで、自分のお弁当にしかないおかずを見つけると、嬉しそうに教えてくれるお子さんがたくさんいました。朝のお忙しい時間に、お弁当をつくっていただき本当にありがとうございました。</p>
          </div>
        </div>        
        <p class="diary_date">2021年7月9日</p>
        <div class="diary_body">
          <div class="diary_body">
            <p>　今日の主活動の時間に紙工作をやりました。テーマは「たのしいこと」。サッカーボールが好きなお子さんの中には紙を使って工夫してサッカーボールを作っているお子さんもいました。また、お内裏様とお雛様を作っているお子さんもいて、それを見て「先生お雛様っていつですか？」と興味を持っているお友達もいました。遊びの中に自分から学べるお子さんは素敵だなと思いました。誰が作ったどの作品も自分が「楽しい」と思えることがしっかり表現されていました。</p></div>
            <img src="./img/diary2.jpg" width="266" height="201">
        </div>        
        <p class="diary_date">2021年7月8日</p>
        <div class="diary_body">
            <img src="./img/diary3.jpg" width="266" height="201">
            <p>　こちらは、グラウンド正面の玄関にある蛇口です。どの蛇口も閉め忘れがなくきっちり閉められています。大きくなると当たり前なことなのかもしれませんが、幼稚園生くらいの年齢だと、難しいことだと思います。大人の私でも当たり前が当たり前にできないのに、先生から声をかけなくてもしっかりやってくれるみんなはとても素晴らしいです。当たり前になる前に当たり前にできるようなることは大切だと気付かされた場面でした。</p></div>
        </div>        
      </div>
    </div>
    <div id="map" class="sa sa--up">
      <h1 id="map_heading"><img src="./img/map_header.png" alt="幼稚園の場所" width="184" height="37px"></h1>
      <div id="map_content">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d808.5910204988119!2d137.67362982920466!3d35.84007508593253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzXCsDUwJzI0LjMiTiAxMzfCsDQwJzI3LjAiRQ!5e0!3m2!1sja!2sjp!4v1628587749336!5m2!1sja!2sjp" width="1000" height="408" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
      </div>
    </div>

  </main>
  <hr>
  <footer>
    <div id="footer_other">
      <div id="footer_branding_container">
        <p id="footer_tagline">地域とつながる</p>
        <h1 id="footer_branding">いろくふ幼稚園</h1>
      </div>
      <div>
        <nav id="footer_nav_container">
          <ul>
            <p>園について</p>
            <hr>
            <li><a href="#">きほん情報</a></li>
            <li><a href="#">教育方針</a></li>
            <li><a href="#">いろくふ幼稚園の特徴</a></li>
          </ul>
          <ul>
            <p>1日の過ごし方</p>
            <hr>
            <li><a href="#">3歳未満</a></li>
            <li><a href="#">3歳以上</a></li>
          </ul>
          <ul>
            <p>給食のこんだて</p>
            <hr>
            <li><a href="#">今日のこんだて</a></li>
            <li><a href="#">給食について</a></li>
            <li><a href="#">おやつについて</a></li>
          </ul>
          <ul>
            <p>年間予定</p>
            <hr>
            <li><a href="#">年間カレンダー</a></li>
          </ul>
          <ul>
            <p>お問い合わせ</p>
            <hr>
            <li><a href="">よくある質問</a></li>
            <li><a href="">お問い合わせフォーム</a></li>
          </ul>
        </nav>
        <div id="footer_tel_container">
          <p id="footer_tel">00 - 0000 - 0000</p>
          <p id="footer_open">開園時間：土日・平日8:00 ~ 19:00</p>
          <p id="footer_extra">（延長　〜20:00）</p>
        </div>
      </div>
    </div>
    <div id="ladybug_container">
      <img src="./img/ladybug.png" id="ladybug">
    </div>
    <div id="dragonfly_container">
      <img src="./img/dragonfly.png" id="dragonfly">
    </div>
    <div id="omoiyari_container">
      <img src="./img/omoiyari.png" id="omoiyari">
    </div>
    <div id="sasaeai_container">
      <img src="./img/sasaeai.png" id="sasaeai">
    </div>
    <div id="to_top" title="ページの最上部に戻る">
      <img src="./img/to_top.png">
      <img src="./img/locust.png" id="locust">
    </div>
    <hr>
    <p id="copyright">©︎2021 いろくふ幼稚園.</p>
    <script src="./script.js"></script>
  </footer>
</body>
</html>

ポイントは、要素で切り分けていない部分です。

header.phpだからheader要素で切り分けるというわけではないということです。

それでは、どのように切り分けているのかというと、次のルールに従って切り分けています

header.php　→　はじめからmain要素の開始タグまで

front-page.php　→　main要素の中身

footer.php　→　main要素の終了タグから最後まで

ヘッダーとフッターを読み込む

「front-page.php」のスクリプトの中で「header.php」と「footer.php」を読み込みます。

まず、「header.php」を読み込むために「front-page.php」の最初に次のスクリプトを追加します。

<?php get_header(); ?>

次に、「footer.php」を読み込むために「front-page.php」の最後に次のスクリプトを追加します

<?php get_footer(); ?>

「front-page.php」の全体としては次のようになります

<?php get_header(); ?>
<div id="news" class="sa sa--up">
      <h1 id="news_heading"><img src="./img/news_header.png" alt="お知らせ" width="173" height="56"></h1>
      <div id="news_content">
        <ul>
          <li><span>2021.7.12</span><a href="#">英会話教室のご案内</a></li>
          <li><span>2021.7.6</span><a href="#">プール開きについて</a></li>
          <li><span>2021.6.17</span><a href="#">短縮保育を始めました</a></li>
          <li><span>2021.6.15</span><a href="#">課外クラブ（6歳児）について</a></li>
          <li><span>2021.6.11</span><a href="#">過程保育のお願い</a></li>
          <li><span>2021.6.7</span><a href="#">令和3年度　幼稚園見学会のご案内</a></li>
        </ul>
      </div>
    </div>
    <div id="diary" class="sa sa--up">
      <h1 id="diary_heading"><img src="./img/diary_header.png" alt="幼稚園日記" width="208" height="56"></h1>
      <div id="diary_content">
        <div>
          <p class="diary_date">2021年7月12日</p>
          <div class="diary_body">
            <img src="./img/diary1.jpg" width="266" height="201">
            <p>　今日はおべんとうの日でした。いつもはお昼ご飯に給食を食べるみんな。いつもの給食も美味しいですが、やっぱり親御さんが作るお弁当のはいつも以上に美味しそうに食べていました。ご家庭によってお弁当のおかずはさまざまで、自分のお弁当にしかないおかずを見つけると、嬉しそうに教えてくれるお子さんがたくさんいました。朝のお忙しい時間に、お弁当をつくっていただき本当にありがとうございました。</p>
          </div>
        </div>        
        <p class="diary_date">2021年7月9日</p>
        <div class="diary_body">
          <div class="diary_body">
            <p>　今日の主活動の時間に紙工作をやりました。テーマは「たのしいこと」。サッカーボールが好きなお子さんの中には紙を使って工夫してサッカーボールを作っているお子さんもいました。また、お内裏様とお雛様を作っているお子さんもいて、それを見て「先生お雛様っていつですか？」と興味を持っているお友達もいました。遊びの中に自分から学べるお子さんは素敵だなと思いました。誰が作ったどの作品も自分が「楽しい」と思えることがしっかり表現されていました。</p></div>
            <img src="./img/diary2.jpg" width="266" height="201">
        </div>        
        <p class="diary_date">2021年7月8日</p>
        <div class="diary_body">
            <img src="./img/diary3.jpg" width="266" height="201">
            <p>　こちらは、グラウンド正面の玄関にある蛇口です。どの蛇口も閉め忘れがなくきっちり閉められています。大きくなると当たり前なことなのかもしれませんが、幼稚園生くらいの年齢だと、難しいことだと思います。大人の私でも当たり前が当たり前にできないのに、先生から声をかけなくてもしっかりやってくれるみんなはとても素晴らしいです。当たり前になる前に当たり前にできるようなることは大切だと気付かされた場面でした。</p></div>
        </div>        
      </div>
    </div>
    <div id="map" class="sa sa--up">
      <h1 id="map_heading"><img src="./img/map_header.png" alt="幼稚園の場所" width="184" height="37px"></h1>
      <div id="map_content">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d808.5910204988119!2d137.67362982920466!3d35.84007508593253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzXCsDUwJzI0LjMiTiAxMzfCsDQwJzI3LjAiRQ!5e0!3m2!1sja!2sjp!4v1628587749336!5m2!1sja!2sjp" width="1000" height="408" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
      </div>
    </div>
<?php get_footer(); ?>

必要なスクリプトを読み込む

head要素の終了タグの直前に次のスクリプトを書きます。

<?php wp_head(); ?>

今度は、body要素の終了タグの直前に次のスクリプトを書きます。


<?php wp_footer(); ?>

この2つのスクリプトを買いておくと、必要なスクリプトをWordPress側が出力してくれます。

よく理解できていませんが、この2つがないと正常に動きません。

パスを変更する

現在、パスは相対パスで書いてありますが、相対パスの時に使う「.」は使えません。

「.」は「現在のフォルダを意味していて便利ですが、WordPressでファイルを参照する際は、「.」の代わりに

<?php echo get_template_directory_uri(); ?>

というテンプレートタグを使う必要があります。

次のように、「.」の部分を単純に<?php echo get_template_directory_uri(); ?>に置き換えれば大丈夫です。

<!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">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/destyle.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/top.css">
  <title>いろくふ幼稚園｜TOPページ</title>
  <?php wp_head(); ?>
</head>
<body>
  <div class="wrap">
    <div class="loading_inner">
      <img src="<?php echo get_template_directory_uri(); ?>/img/about.png">
      <p>
        <span>loading...</span>
      </p>
    </div>
  </div>
  <header>
    <div id="header_other">
      <div id="branding_container">
        <p id="tagline">地域とつながる幼稚園</p>
        <h1 id="branding"><a href="<?php echo get_template_directory_uri(); ?>/top.html">いろくふ幼稚園</a></h1>
      </div>
      <ul id="menu">
        <li><img src="<?php echo get_template_directory_uri(); ?>/img/guid_map.png" width="26" height="26"><a href="#">園内マップ</a></li>
        <li><img src="<?php echo get_template_directory_uri(); ?>/img/FAQ.png" width="26" height="26"><a href="#">よくある質問</a></li>
        <li><img src="<?php echo get_template_directory_uri(); ?>/img/twitter.png" width="18" height="15"><a href="#">ツイッター</a></li>
        <li><img src="<?php echo get_template_directory_uri(); ?>/img/home.png" width="26" height="26"><a href="#">ホーム</a></li>
      </ul>
      <div id="tel_container">
        <p id="tel">00 - 0000 - 0000</p>
        <p id="open">開園時間：土日・平日8:00 ~ 19:00</p>
        <p id="extra">  　　　　 （延長　〜20:00）</p>
      </div>
    </div>
    <nav id="nav_container">
      <ul id="navigation">
        <li><a href="<?php echo get_template_directory_uri(); ?>/about.html"><img src="<?php echo get_template_directory_uri(); ?>/img/about.png" width="66" height="66"><p>園について</p></a></li>
        <li><a href="<?php echo get_template_directory_uri(); ?>/daytime.html"><img src="<?php echo get_template_directory_uri(); ?>/img/how_to_spend.png" width="66" height="66"><p>１日の過ごし方</p></a></li>
        <li><a href="<?php echo get_template_directory_uri(); ?>/lunch.html"><img src="<?php echo get_template_directory_uri(); ?>/img/lunch_menu.png" width="66" height="66"><p>給食のこんだて</p></a></li>
        <li><a href="<?php echo get_template_directory_uri(); ?>/calendar.html"><img src="<?php echo get_template_directory_uri(); ?>/img/ annual_schedule.png" width="66" height="66"><p>年間予定</p></a></li>
        <li><a href="<?php echo get_template_directory_uri(); ?>/contact.html"><img src="<?php echo get_template_directory_uri(); ?>/img/contact.png" width="66" height="66"><p>お問い合わせ</p></a></li>
      </ul>
    </nav>
    <div id="mv_container">
      <img src="<?php echo get_template_directory_uri(); ?>/img/top_mv.jpg">
    </div>
  </header>
  <main>

<?php get_header(); ?>
<div id="news" class="sa sa--up">
      <h1 id="news_heading"><img src="<?php echo get_template_directory_uri(); ?>/img/news_header.png" alt="お知らせ" width="173" height="56"></h1>
      <div id="news_content">
        <ul>
          <li><span>2021.7.12</span><a href="#">英会話教室のご案内</a></li>
          <li><span>2021.7.6</span><a href="#">プール開きについて</a></li>
          <li><span>2021.6.17</span><a href="#">短縮保育を始めました</a></li>
          <li><span>2021.6.15</span><a href="#">課外クラブ（6歳児）について</a></li>
          <li><span>2021.6.11</span><a href="#">過程保育のお願い</a></li>
          <li><span>2021.6.7</span><a href="#">令和3年度　幼稚園見学会のご案内</a></li>
        </ul>
      </div>
    </div>
    <div id="diary" class="sa sa--up">
      <h1 id="diary_heading"><img src="<?php echo get_template_directory_uri(); ?>/img/diary_header.png" alt="幼稚園日記" width="208" height="56"></h1>
      <div id="diary_content">
        <div>
          <p class="diary_date">2021年7月12日</p>
          <div class="diary_body">
            <img src="<?php echo get_template_directory_uri(); ?>/img/diary1.jpg" width="266" height="201">
            <p>　今日はおべんとうの日でした。いつもはお昼ご飯に給食を食べるみんな。いつもの給食も美味しいですが、やっぱり親御さんが作るお弁当のはいつも以上に美味しそうに食べていました。ご家庭によってお弁当のおかずはさまざまで、自分のお弁当にしかないおかずを見つけると、嬉しそうに教えてくれるお子さんがたくさんいました。朝のお忙しい時間に、お弁当をつくっていただき本当にありがとうございました。</p>
          </div>
        </div>        
        <p class="diary_date">2021年7月9日</p>
        <div class="diary_body">
          <div class="diary_body">
            <p>　今日の主活動の時間に紙工作をやりました。テーマは「たのしいこと」。サッカーボールが好きなお子さんの中には紙を使って工夫してサッカーボールを作っているお子さんもいました。また、お内裏様とお雛様を作っているお子さんもいて、それを見て「先生お雛様っていつですか？」と興味を持っているお友達もいました。遊びの中に自分から学べるお子さんは素敵だなと思いました。誰が作ったどの作品も自分が「楽しい」と思えることがしっかり表現されていました。</p></div>
            <img src="<?php echo get_template_directory_uri(); ?>/img/diary2.jpg" width="266" height="201">
        </div>        
        <p class="diary_date">2021年7月8日</p>
        <div class="diary_body">
            <img src="<?php echo get_template_directory_uri(); ?>/img/diary3.jpg" width="266" height="201">
            <p>　こちらは、グラウンド正面の玄関にある蛇口です。どの蛇口も閉め忘れがなくきっちり閉められています。大きくなると当たり前なことなのかもしれませんが、幼稚園生くらいの年齢だと、難しいことだと思います。大人の私でも当たり前が当たり前にできないのに、先生から声をかけなくてもしっかりやってくれるみんなはとても素晴らしいです。当たり前になる前に当たり前にできるようなることは大切だと気付かされた場面でした。</p></div>
        </div>        
      </div>
    </div>
    <div id="map" class="sa sa--up">
      <h1 id="map_heading"><img src="<?php echo get_template_directory_uri(); ?>/img/map_header.png" alt="幼稚園の場所" width="184" height="37px"></h1>
      <div id="map_content">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d808.5910204988119!2d137.67362982920466!3d35.84007508593253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzXCsDUwJzI0LjMiTiAxMzfCsDQwJzI3LjAiRQ!5e0!3m2!1sja!2sjp!4v1628587749336!5m2!1sja!2sjp" width="1000" height="408" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
      </div>
    </div>
    <?php get_footer(); ?>

  </main>
  <hr>
  <footer>
    <div id="footer_other">
      <div id="footer_branding_container">
        <p id="footer_tagline">地域とつながる</p>
        <h1 id="footer_branding">いろくふ幼稚園</h1>
      </div>
      <div>
        <nav id="footer_nav_container">
          <ul>
            <p>園について</p>
            <hr>
            <li><a href="#">きほん情報</a></li>
            <li><a href="#">教育方針</a></li>
            <li><a href="#">いろくふ幼稚園の特徴</a></li>
          </ul>
          <ul>
            <p>1日の過ごし方</p>
            <hr>
            <li><a href="#">3歳未満</a></li>
            <li><a href="#">3歳以上</a></li>
          </ul>
          <ul>
            <p>給食のこんだて</p>
            <hr>
            <li><a href="#">今日のこんだて</a></li>
            <li><a href="#">給食について</a></li>
            <li><a href="#">おやつについて</a></li>
          </ul>
          <ul>
            <p>年間予定</p>
            <hr>
            <li><a href="#">年間カレンダー</a></li>
          </ul>
          <ul>
            <p>お問い合わせ</p>
            <hr>
            <li><a href="">よくある質問</a></li>
            <li><a href="">お問い合わせフォーム</a></li>
          </ul>
        </nav>
        <div id="footer_tel_container">
          <p id="footer_tel">00 - 0000 - 0000</p>
          <p id="footer_open">開園時間：土日・平日8:00 ~ 19:00</p>
          <p id="footer_extra">（延長　〜20:00）</p>
        </div>
      </div>
    </div>
    <div id="ladybug_container">
      <img src="<?php echo get_template_directory_uri(); ?>/img/ladybug.png" id="ladybug">
    </div>
    <div id="dragonfly_container">
      <img src="<?php echo get_template_directory_uri(); ?>/img/dragonfly.png" id="dragonfly">
    </div>
    <div id="omoiyari_container">
      <img src="<?php echo get_template_directory_uri(); ?>/img/omoiyari.png" id="omoiyari">
    </div>
    <div id="sasaeai_container">
      <img src="<?php echo get_template_directory_uri(); ?>/img/sasaeai.png" id="sasaeai">
    </div>
    <div id="to_top" title="ページの最上部に戻る">
      <img src="<?php echo get_template_directory_uri(); ?>/img/to_top.png">
      <img src="<?php echo get_template_directory_uri(); ?>/img/locust.png" id="locust">
    </div>
    <hr>
    <p id="copyright">©︎2021 いろくふ幼稚園.</p>
    <script src="<?php echo get_template_directory_uri(); ?>/script.js"></script>
  </footer>
  <script src="<?php echo get_template_directory_uri(); ?>/script.js"></script>
  <?php wp_footer(); ?>
</body>
</html>

テーマフォルダのアップロード

テーマフォルダの構成

テーマフォルダは次のような構成になっています。

テーマフォルダの名前は「Irokuhu_theme」にしました。

画像ファイルや、JavaScriptファイル、CSSファイルなどHTMLファイルで読み込んでいたものは全てテーマフォルダの中に入れておきます。

「index.php」と「style.css」というファイルが突然出てきましたが、これらは必須ファイルです。

この2つは、テーマフォルダには無いといけないファイルだそうです。

内容は特に決められていないそうで、僕の場合、index.phpとstyle.cssには何も書いてありません。

サーバーにアップロード

先ほどのテーマフォルダをWordPressをインストールしたサーバーの「wp-content」の中にある「 themes」というフォルダの中にアップロードします。

テーマの有効化

WordPressの管理画面から「外観 > テーマ」のように選択すると先ほどアップロードしたテーマフォルダがあります。

完成形

まだTOPページだけですが、これでWordPress化ができました。

サイトに行ってみるとちゃんと動きます（サイト内のリンクはまだ機能していません）。