2021年3月1日

 WordPressテーマ制作

【WordPress テーマ制作】 STEP-02 構成の土台を作る

WordPressを自作テーマを使用していくための初めのステップは、テンプレートの構成を設定します。Wordpressは「index.php」が存在すれば動作しますので、まず初めに「index.php」を作ります。アーカイブページやフロントページなどは「index.php」を複製して必要に応じて編集していきます。

このセクションでは、すでに自作したいテーマのデザインがきまっている者として進めています。デザインがまだ決まっていない場合は先にデザインを作成しましょう。

01. テンプレート「index.php」を作る

まず、「index.php」を作ります。「index.php」はWordpressで需要なファイルの一つです。おそらくほとんどのWordpressのテーマで用意されているもので、「index.php」よりも優先して読みこむファイルが無い場合は「index.php」を使用してページを表示します。

最低限のHTML記述でいいのでまずは1ページ分のHTMLを記述し、テーマディレクトリのルートへ保存します。

ファイル名「index.php」

<!DOCTYPE html>
<html>
    <head>
        <title>案件マッチングサイト</title>
    </head>
    <body>

    <header></header>
        <footer></footer>
    </body>
</html>

02. テンプレート「index.php」を分割する

自作テーマ「index.php」が完成したら、次にこのファイルを分割します。分割するのは各ページで使用する「get_header()」および「get_footer()」で呼び出される部分です。分割する箇所を新しいphpファイルとしてそれぞれ決められた名前を付けて保存します。

「header.php」を作る

セクション01で、「index.php」に記述したHTMLのbody開始タグまでを切り取り、新しいphpファイル「header.php」を作り、テーマディレクトリのルートへ保存します。

ファイル名「header.php」

// header.php
<!DOCTYPE html>
<html>
    <head>
        <title>ページのタイトル</title>
    </head>
    <body>

次にセクション01で、「index.php」に記述したHTMLのbody終了タグまでを切り取り、新しいphpファイル「footer.php」を作り、同じくテーマディレクトリのルートへ保存します。

「footer.php」を作る

ファイル名「footer.php」

// footer.php
    </body>
</html>

header.phpおよびfooter.phpに分割すると、index.phpはbodyタグの内側部分しか残りません。このままではもちろんページは動作しませんので、切り取りした部分に以下の記述をして分割したファイルを呼び出す関数を記述します。

「index.php」を編集する

ファイル名「index.php」

// index.php
<?php get_header();?>
    <header></header>
        <footer></footer>

<?php get_footer();?>

03. 土台ができたら

ここまでできればテーマの土台は準備できたことになります。次は徐々にこの土台に記述を追記していきます。それぞれ分割したファイルを用意していた自作テーマに向け編集していきます。

NOTICE
このページは2021年3月1日に作成されています。閲覧時期によっては情報が古い可能性があります。免責事項をご確認ください。

関連記事

このページのTopへ