【初心者向け】HTMLから始めるテーマ自作とWordPress化の手順

サムネイル
               

HTMLはある程度書けるようになったけど、今度はWordPressに挑戦したい。

 

でも、なんだか難しそうだし、WordPress化するにはどんな手順でやればいいの？そんな疑問がありますよね。

 

 

キニナリ
悩む人
HTMLからWordPress化するのは難しいの？

 

moridai
moridai
決まったルールがあるから手順通りに進めると問題ないよ！

 

今回は、初心者向けにHTMLをWordPress化する手順について解説していきます。

 

【初心者向け】HTMLから始めるテーマ自作とWordPress化の手順

 

WordPress化で最低限必要なファイル

  • index.php
  • style.css
  • functions.php

3つのファイルは最低限必要です。

 

moridai
moridai
WordPress化するには最低3つのファイルが必要です。順を追って解説していきますね。

 

 

HTML構造の作成（index.phpの作成）

 

  1. index.htmlのファイル名をindex.phpに変更
  2. <?php wp_head(); ?><?php wp_footer(); ?>を記述

 

 

index.htmlのファイル名をindex.phpに変更

 

 

 

<?php wp_head(); ?>

  • テーマのヘッダーセクションに挿入される関数です。
  • この関数は、WordPressがプラグインやその他のテーマから提供されるスクリプトやスタイルシートを読み込むために必要です。
  • プラグインやカスタム機能がテーマのヘッダーセクションに何か追加する場合、この関数が呼び出されることによってそれらの要素が正しく読み込まれます。

 

記述場所は</head>の前

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

 

 

<?php wp_footer(); ?>

  • テーマのフッターセクションに挿入される関数です。
  • この関数もプラグインやテーマが提供するスクリプトやコードの読み込みに関連して重要です。
  • フッターセクションはページの最後に表示されるため、ページの読み込みが遅延していない状態でスクリプトを読み込むために使用されます。

記述場所は</body>の前

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

 

 

スタイルシートの作成（style.cssの作成）

 

function.phpのファイル内にstyle.cssを読みこむ記述をする。

function enqueue_custom_styles()
{
  wp_enqueue_style('custom-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

 

 

必要なテンプレートファイルを作成し、PHPコードを埋め込み

index.phpのファイルを分割していきます。

 

分けることで、ヘッダーとフッターを別々に管理し、見た目や機能をカスタマイズする際に関連するファイルを修正することができます。

 

これにより、テーマのメンテナンスが容易になり、特定のセクションの変更が他の部分に影響を及ぼす可能性が低くなります。

 

 

moridai
moridai
ここからは、テンプレートファイルの作成とPHPコードを埋め込みについて解説していきます。

 

 

  1. header.php:
    • ヘッダーセクションに関連するコードをこのファイルに配置します。
    • 例えば、サイトのロゴ、ナビゲーションメニュー、検索フォーム、スライダーなどのヘッダー内のコンテンツを含めることができます。
  2. footer.php:
    • フッターセクションに関連するコードをこのファイルに配置します。
    • 例えば、コピーライト情報、連絡先情報、フッター内のウィジェットエリア、フッターメニューなどを含めることができます。

 

 

 

header.php: サイトのヘッダー部分を作成し、get_header()関数で呼び出す

修正前

 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <meta name="description" content="テキストテキストテキストテキストテキストテキストテキスト">
  <?php wp_head(); ?>
</head>
<body>
  <header id="header">
    <div class="inner wrapper">
      <h1 class="logo">
        <a href="index.html"><img src="img/logo.png" alt="Web Entertaiment Dedign"></a>
      </h1>
      <nav>
        <ul>
          <li><a href="#news">NEWS</a></li>
          <li><a href="#about">ABOUT</a></li>
          <li><a href="#business">MENU</a></li>
          <li><a href="#company">COMPANY</a></li>
        </ul>
      </nav>      
    </div>
    <a class="contact" href="#">お問い合わせ</a>
  </header>

 

 

 

タイトル・ディスクリプション 　bloginfo()
サイトURL 　home_url()
イメージ 　get_theme_file_uri()
ナビゲーション 　get_permalink()

 

<a>要素内のリンクはesc_url関数を使用してエスケープしているのは良いことですが、home_url関数の引数として'/news/'などのパスを指定しているため、サイトが移動する場合に問題が発生する可能性があります。WordPressでは、固定ページのリンクを変更しても正しくリダイレクトされるようにするためにget_permalink関数を使用することが一般的です。

 

修正後

<!DOCTYPE html>
<html lang="ja">


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php bloginfo('name'); ?></title>
  <meta name="description" content="<?php bloginfo('description'); ?>">
  <?php wp_head(); ?>
</head>


<body>
  <header id="header">
    <div class="inner wrapper">
      <h1 class="logo">
        <a href="<?php echo esc_url(home_url()); ?>"><img src="<?php echo esc_url(get_theme_file_uri('img/logo.png')); ?>" alt="Web Entertaiment Dedign"></a>
      </h1>
      <nav>
        <ul>
          <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('NEWS'))); ?>">NEWS</a></li>
          <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('ABOUT'))); ?>">ABOUT</a></li>
          <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('MENU'))); ?>">MENU</a></li>
          <li><a href="<?php echo esc_url(get_permalink(get_page_by_title('COMPANY'))); ?>">COMPANY</a></li>
        </ul>
      </nav>
    </div>
    <a class="contact" href="mailto:xxxxx@xxx.xxx.com?subject=お問い合わせ">お問い合わせ</a>
  </header>

 

footer.php: サイトのフッター部分を作成し、get_footer()関数で呼び出す

 

<footer id="footer">
    <div class="wrapper">
      <div class="flex">
        <div class="logo">
          <img src="img/logo.png" alt="">
        </div>
        <p class="copyright">© Web Entertainment Design Inc.</p>
        <div class="info">
          <p>
            Web Entertainment Design Inc.<br>
              West Building 3F<br>
              9-99 Sakuragaokacho Shibuya-ku<br>
              Tokyo, Japan 150-0031
          </p>
          <p>TEL 000-000-000</p>
        </div>
      </div>
    </div>


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

 

画像LOGO 　get_template_directory_uri()
copyright 　date(“Y“)
　bloginfo(‘name’)
会社情報 　bloginfo
　get_option()

 

get_option():これは、WordPressのオプション（設定）データベースから street_addressというキー（設定項目）に関連付けられた値を取得する関数です。具体的な設定値（住所など）は、WordPressの管理ダッシュボードのカスタム設定で設定できます。この方法を使用することで、設定情報をコード内にハードコーディングする必要がなく、管理者が変更できるようになります。

 

<footer id="footer">
  <div class="wrapper">
    <div class="flex">
      <div class="logo">
        <img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="">
      </div>
      <p class="copyright">© <?php echo date("Y"); ?> <?php bloginfo('name'); ?></p>
      <div class="info">
        <p>
          <?php bloginfo('name'); ?><br>
          <?php bloginfo('description'); ?><br>
          <?php echo esc_html(get_option('street_address')); ?><br>
          <?php echo esc_html(get_option('city')); ?>, <?php echo esc_html(get_option('zip_code')); ?><br>
          <?php echo esc_html(get_option('country')); ?>
        </p>
        <p>TEL <?php echo esc_html(get_option('phone_number')); ?></p>
      </div>
    </div>
  </div>


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


</html>

 

 

index.php: メインコンテンツを含むファイルで、WordPressのループや必要なPHPコードを埋め込む

index.phpは、<head></head><footer></footer>以外をコピーします。

 

    <main>
      <div id="mainvisual">
        <img src="img/mainvisual.jpg" alt="" />
      </div>
      <section id="news" class="wrapper">
        <h2 class="section-title">
          <span class="en">NEWS</span>
          <span class="ja">ニュース</span>
        </h2>
        <!-- navのulと区別するためにclass指定 -->
        <ul class="list">
          <li>
            <div class="date-area">
              <time datetime="2023-01-01">2023.01.01</time>
              <span>NEWS</span>
            </div>
            <p>イベントイベントイベントイベントイベントイベント</p>
          </li>
          <li>
            <div class="date-area">
              <time datetime="2023-01-01">2023.01.01</time>
              <span>PRESS</span>
            </div>
            <p>イベントイベントイベントイベントイベントイベント</p>
          </li>
          <li>
            <div class="date-area">
              <time datetime="2023-01-01">2023.01.01</time>
              <span>NEWS</span>
            </div>
            <p>イベントイベントイベントイベントイベントイベント</p>
          </li>
        </ul>
      </section>
      <section id="about">
        <div class="img">
          <img src="img/about.jpg" alt="" />
        </div>
        <div class="text">
          <h2 class="section-title">
            <span class="en">ABOUT</span>
            <spna class="ja">わたしたちについて</spna>
          </h2>
          <p>
            タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
          </p>
          <p>
            タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
          </p>
          <p>
            タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル
          </p>
        </div>
      </section>
      <section id="business" class="wrapper">
        <h2 class="section-title">
          <span class="en">MENU</span>
          <span class="ja">サービス内容</span>
        </h2>
        <div class="flex">
          <div class="left">
            <div class="item">
              <p class="title">Cut</p>
              <img src="img/business1.jpg" alt="" loading="lazy" />
            </div>
            <div class="item">
              <p class="title">Eyelashes</p>
              <img src="img/business2.jpg" alt="" loading="lazy" />
            </div>
          </div>
          <div class="right">
            <div class="item">
              <p class="title">Colouring</p>
              <img src="img/business3.jpg" alt="" loading="lazy" />
            </div>
            <div class="item">
              <p class="title">Perm</p>
              <img src="img/business4.jpg" alt="" loading="lazy" />
            </div>
          </div>
        </div>
      </section>
      <section id="company" class="wrapper">
        <div class="text">
          <h2 class="section-title">
            <span class="en">COMPANY</span>
            <span class="ja">会社情報</span>
          </h2>
          <dl class="info">
            <dt>会社名</dt>
            <dd>NOZ SALON</dd>
            <dt>所在地</dt>
            <dd>〇〇</dd>
            <dt>代表</dt>
            <dd>〇〇　〇〇</dd>
            <dt>設立</dt>
            <dd>200x年</dd>
            <dt>資本金</dt>
            <dd>100万円</dd>
            <dt>事業内容</dt>
            <dd>WEB制作・マーケティング</dd>
            <dd class="add">インターネットメディア事業</dd>
            <dd class="add">プロモーション企画・制作</dd>
            <dd class="add">ソーシャル企画・運営</dd>
          </dl>
        </div>
        <div class="img">
          <img src="img/company.jpg" alt="" />
        </div>
      </section>
    </main>
ヘッダーを読み込む
　<?php get_header(); ?>
フッターを読み込む
　<?php get_footer(); ?>
画像 　get_template_directory_uri()

 

 

<?php get_header(); ?>
<main>
  <div id="mainvisual">
    <img src="<?php echo get_template_directory_uri(); ?>/img/mainvisual.jpg" alt="">
  </div>
  <section id="news" class="wrapper">
    <h2 class="section-title">
      <span class="en">NEWS</span>
      <span class="ja">ニュース</span>
    </h2>
<!-- ～～～～～～～～～～～～～～～省略～～～～～～～～～～～～～～～ -->
 <div class="img">
      <img src="<?php echo get_template_directory_uri(); ?>/img/company.jpg" alt="">
    </div>
  </section>
</main>
<?php get_footer(); ?>

 

記事を表示するためのループ処理

 

$args = array() カスタムループクエリの設定を保持する連想配列で、クエリの条件を指定します。この配列には、データベースからどのようにコンテンツを取得するかの設定が含まれています。
$query = new WP_Query($args); カスタムループクエリを作成し、指定された条件に一致するコンテンツを取得できるようにする重要なステップです。その後、このクエリを使用してデータベースからコンテンツを取得し、それを表示したり処理したりすることができます。
if ($query->have_posts()) : メソッドは、クエリの結果に記事が存在するかどうかを確認するために使用されます。もし記事が存在する場合、この条件文が true に評価され、次のブロック内のコードが実行されます。
while ($query->have_posts()) : クエリの結果に記事がまだ存在する限り、ループを続けるためのループ開始を示します。クエリの結果が複数の記事を含む場合、各記事ごとにループ内のコードが実行されます。
$query->the_post(); the_post() メソッドは、クエリの結果から次の記事を設定し、その記事のデータにアクセスできるようにします。このメソッドを呼び出すことで、ループ内で $post グローバル変数が現在の記事を参照するようになります。したがって、the_title(), the_time(), the_content() などの関数を使用して記事の情報を表示できます。
<?php endwhile; ?> ループが終了したことを示す行です。記事のループが終了した後、次のステップに進みます。
<?php endif; ?> 条件文 if ($query->have_posts()) の終了を示す行です。記事が存在しない場合、この条件文が false に評価され、ループ内のコードはスキップされます。
wp_reset_postdata();
 wp_reset_postdata() 関数は、カスタムループクエリの設定をリセットし、元のクエリ（通常のメインクエリ）に戻すために使用されます。これにより、カスタムループの後に通常のループが適切に動作するようになります。

 

 

 

$args

  • $args は “arguments” の略で、通常、クエリの条件を指定するための連想配列です。
  • $args 配列には、どのようにデータベースからコンテンツを取得するかを設定する条件が含まれます。たとえば、ポストタイプ、表示する記事の数、カテゴリー、タグなどの条件が $args 内に含まれます。
  • $args 配列は WP_Query クラスのコンストラクタに渡され、カスタムループクエリを作成するために使用されます。

 

 

$query

  • $query は、カスタムループクエリの結果を格納するための変数です。
  • $query は WP_Query クラスのオブジェクトで、$args を使用して設定された条件に基づいてデータベースからコンテンツを取得し、その結果を格納します。
  • $query オブジェクトを使用して、クエリの結果を処理し、コンテンツを表示することができます。たとえば、$query->have_posts() を使用して記事の存在を確認し、$query->the_post() を使用して記事のデータを取得します。

 

<section id="news" class="wrapper">
    <h2 class="section-title">
      <span class="en">NEWS</span>
      <span class="ja">ニュース</span>
    </h2>
    <ul class="list">
      <?php
      $args = array(
        'post_type' => 'post',
        'posts_per_page' => 3,
      );
      $query = new WP_Query($args);


      if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();


      ?>
          <li>
            <div class="date-area">
              <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time>
              <span><?php the_category(', '); ?></span>
            </div>
            <p><?php the_title(); ?></p>
          </li>


      <?php endwhile;
        wp_reset_postdata();
      endif;
      ?>



    </ul>
  </section>

 

まとめ

HTMLからWordPressテーマへの移行では、まず最低限必要なファイルを準備し、HTML構造をindex.phpに移行します。

 

また、基本的なスタイル情報を含むstyle.cssを作成します。

 

さらに、ヘッダーやフッターなどのテンプレートファイルを作成し、WordPressの機能を活用するために必要なPHPコードを埋め込んでいきます。

 

これらの手順に従うことで、HTMLからWordPressへのスムーズな移行が可能です。