LoginSignup
2
1

More than 1 year has passed since last update.

【初心者向け】Wordpressテーマを自作する[index.php]

Last updated at Posted at 2022-12-22

ファイルの構造や解説等、Wordpress(以下、WP)のテーマを自作する際の基本的な部分は、こちらの記事で紹介しています。

ここでは、WPのテーマを作る上で必須のindex.phpのコードを交えた解説を行います。
とりあえず解説はいいからコードだけ、の方は以下をどうぞ。

コード(HTMLとPHP)

ファイルの先頭には、テーマカスタマイザーからもわかるようにTemplate Name: Index(汎用Temp)を入れています。

<?php
//====================================================
//  Template Name: Index(汎用Temp)
//====================================================
get_header(); ?>
<main>
    <section class="content">
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
        ?>
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
            <?php the_posts_pagination(); ?>
        <?php
            endwhile;
        elseif('404'):
        ?>
            <h2>お探しのページは見つけることができませんでした。</h2>
            URLが変更されたか、削除された可能性があります。<br>
            トップページ戻ってご確認ください。<br><br>
            <p><a href="<?php echo home_url('/'); ?>">トップページへ戻る</a></p>
        <?php
        endif;
        ?>
    </section><!--//class="content"-->
    <section class="sidebar">
        <?php get_sidebar(); ?>
    </section>
</main>
<?php
get_footer(); ?>

解説

index.phpとは

WPのテーマを自作する際の必須ファイルです。
header.php footer.php sidebar.phpを除く、全てのテーマファイルを兼用できるファイルとなっています。

テーマフォルダの中にindex.php header.php footer.php sidebar.php があればとりあえずのテーマができます。

index.phpはindex.htmlではない

ここで注意して欲しいのが、index.phpと言うファイル名であっても、HTMLだけのサイトにあるindex.htmlとは違うと言う事です。私もWPを覚えたての時は、このファイルはindex.htmlと同じだと思っていました。

一番最初に読み込まれるファイルと言うのでindex.phpの様です。

なので、TOPページのデザインはここでは書かないでください。
なぜかと言うと、条件分岐でコードの分岐条件から外れてしまった投稿等が表示されるのがこのindex.phpだからです。
もしindex.phpにTOPページのコードを書いていたら、条件分岐から外れていた場合、TOPが表示されるだけでユーザーからは何が起こっているのかわからなくなってしまうからです。
TOPページ専用のテーマファイルはhome.phpなので、そちらに書いた方が安全です。

必須コード

get_header(); get_sidebar(); get_footer();は必須です。
ワンカラムサイトの場合は、get_sidebar();はいらなそうですが、記述がないとエラーメッセージが出るので必須のようです。当然ですが、get_sidebar();を書くとsidebar.phpを読みに行きますので、このファイルも必須です。(中身は空でもOK)

基本ループ

個別ページや固定ページ等、すべてのページの内容が表示されるように、the_title() the_content();をループの中に入れて表示する様にしています。
the_posts_pagination();はページネーション(ページ番号)を表示する関数です。

        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
        ?>
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
            <?php the_posts_pagination(); ?>
        <?php
            endwhile;
        ?>

もし表示しようとしているページが見つからなかった場合、404エラーとして404.phpと言うファイルを用意することが多いですが、index.php一番最初に表示されるファイルと言うルールを利用して、ここに条件分岐を書いています。

        <?php
        elseif('404'):
        ?>
            <h2>お探しのページは見つけることができませんでした。</h2>
            URLが変更されたか、削除された可能性があります。<br>
            トップページ戻ってご確認ください。<br><br>
            <p><a href="<?php echo home_url('/'); ?>">トップページへ戻る</a></p>
        <?php
        endif;
        ?>

まとめ

汎用性を重視しているので、HTMLタグもシンプルにしています。
デザインに合わせてidclassを付与してください。

10年以上WPでWEBサイト制作をしていますが、独学のため、色々間違えている個所などありましたらご指摘いただけますと幸いです。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1