【WordPress】自作テーマを作ってみよう！(初心者向け)

WordPress
2023/07/18
Toshi
Toshi
WordPressのテーマを作ってみたい。ということで、実際に初心者の私が手を動かしながら初めて自作テーマを作ってみました。わかりにくい部分もあるかとは思いますが、ざっくりテーマの作り方がわかるような記事にはなっていると思います。よかったら参考にしてみてください！

今回解説していく内容は以下です！

 本記事の内容

・WordPress 自作テーマを作ってみよう！
・function.phpで機能を増やそう

  1. WordPress 自作テーマを作ってみよう！
    1. WordPressにThemaを読み込もう
    2. header.phpとfooter.phpを作ろう
    3. page.phpとsingle.phpを作ろう
  2. functions.phpで機能を増やそう
    1. アイキャッチ画像を設定し、表示しよう
    2. メニューを追加しよう
  3. まとめ

WordPress 自作テーマを作ってみよう！

WordPressに自分で作った自作テーマを追加するには、最低2つのファイルが必要になります。

  1. index.php
  2. style.css

まずは、index.phpとstyle.cssを作って自作テーマをWordPressに読み込んでみましょう！

WordPressにThemaを読み込もう

外観 > 新規追加 > テーマのアップロード 

作ったテーマファイルを選択し、今すぐインストールをクリックすることで自作テーマが読み込めます。

ひとまず作った、index.php と style.css が以下になります。

index.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>Sample-Thema</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>SampleThemaを作ってみよう</h1>
  </header>
    <main>
      WordPressの自作テーマを作成中。
    </main>
    ＜footer>

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

style.css

@charset "UTF-8";
/*
Theme Name: Sample-Thema
Description: WordPressの自作テーマ。
Author: Toshi
Version: 1.0.0
*/

style.cssには、最低テーマ名さえコメントしておけばWordPressがテーマとして認識してくれるのでOKです。

今回は、テーマの詳細情報に出てくるテーマの説明文、作成者名、バージョン情報もあわせて記載してみました。

 
テーマのアイキャッチ画像の大きさは、880×660で作ると綺麗に作ることができます。
 
アイキャッチ名は、screenshot.pngにする必要があります。

必要なファイルが揃ったので、zipにしてWordPressに追加していきます。
 
 
Sample-Thema.zip
ライブプレビューを確認すると…

index.phpの中身がそのまま表示されている状態です。

次は、index.phpに書いていたheaderとfooter部分をそれぞれ部品にして、index.phpに読み込ませてみます。

header.phpとfooter.phpを作ろう

index.phpはメインとなるコンテンツの内容を記載するだけで、ヘッダーとフッターはそれぞれheader.phpとfooter.phpを呼び出しています。
1番最初に作ったindex.phpだとイメージが湧きにくいと思ったので、ヘッダーとフッターのコードを修正して画像のようにしてみました。まずは、index.phpを見てみましょう。

index.php

<?php get_header(); ?>
<main>
  <section>
    <div class="top-img"></div>
    <h1>WordPressの自作テーマを作成中。</h1>
  </section>
</main>
<?php get_footer(); ?>

index.phpの中身はシンプルで、テキストを<h1>タグで入れているだけになります。

画像は、class=”top-img” でbackground : url の指定によって表示させています。

background: url("../imges/main_img.webp") center center / cover no-repeat;
<?php get_header(); ?>

で、headerを取得していますが header.php のheaderの閉じタグ前に<?php wp_head(); ?>の記載が必要です。

<?php get_footer(); ?>

同じくfooterはbodyの閉じタグ前に<?php wp_footer(); ?>の記載が必要です。

wp_head(),wp_footer()の記載がない場合、まともにページが機能しません。また、wp_head(),wp_footer()を追加することで管理ツールバーが表示されるようになります。

では、それぞれheader.phpとfooter.phpの中身を見ていきましょう。

header.php

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width = device-width, initial-scale=1, user-scalable=yes">
  <meta name="description" content="WordPressのSample-Themaです。">
  <meta property="og:title" content="">
  <meta property="og:site_name" content="">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="ja-JP">
  <meta property="og:image" content="">
  <meta property="og:description" content="WordPressのSample-Themaです。">
  <meta name="twitter:card" content="summary">
  <title>Sample-Thema</title>
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/common.css">
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/top.css">
  <link href="<?php echo get_template_directory_uri(); ?>/imges/favicon.ico" rel="icon" type="image/x-icon">
</head>

<body class="vsc-initialized" cz-shortcut-listen="true">
  <header class="header">
    <div class="header__inner">
      <h1 class="header__title header-title"> <a href="<?php echo home_url(); ?>"> <img
            src="<?php echo get_template_directory_uri(); ?>/imges/sample_thema_logo.png" alt=""> </a> </h1>
      <nav class="header__nav nav" id="js-nav">
        <ul class="nav__items nav-items">
          <li class="nav-items__item"><a href="#">HOME</a></li>
          <li class="nav-items__item"><a href="#">COMPANY</a></li>
          <li class="nav-items__item"><a href="#">SERVICE</a></li>
          <li class="nav-items__item"><a href="#">STAFF</a></li>
          <li class="nav-items__item"><a href="#">RECRUIT</a></li>
          <li class="nav-items__item"><a href="#">NEWS</a></li>
          <li class="nav-items__item"><a href="#">CONTACT</a></li>
        </ul>
      </nav>
      <button class="header__hamburger hamburger" id="js-hamburger"> <span></span> <span></span> <span></span>
        <p class="hamburger-open">MENU</p>
        <p class="hamburger-close">CLOSE</p>
      </button>
    </div>
    <?php wp_head(); ?>
  </header>

cssファイルや画像ファイルなどの読み込みはパスの指定の際は<?php echo get_template_directory_uri(); ?>を使います。またホームページのアイコンをクリックすると、ホーム画面に遷移するように<?php echo home_url(); ?>を設定してみました。

footer.php

<footer>
  <div class="footer">
    <div class="footer-menu">
      <nav>
        <ul>
          <li class="none"><a> href="#">トップページ</a></li>
          <li class="none"><a> href="#">会社概要</a></li>
          <li class="none"><a> href="#">事業内容</a></li>
          <li class="none"><a> href="#">社員紹介</a></li>
          <li class="none"><a> href="#">採用情報</a></li>
          <li class="none"><a> href="#">お知らせ</a></li>
          <li class="none"><a> href="#">お問い合わせ</a></li>
          <li class="footer-menu_one"><a> href="#">プライバシーポリシー</a></li>
        </ul>
      </nav>
      <div class="copyright"><small>©WordPress Sample-Thema.</small></div>
    </div>
  </div>
</footer>
<?php wp_footer(); ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
</body>

</html>

ということで、index.php に header.php と footer.php を読み込ませていきました。

画面を小さくするとヘッダーのメニューがハンバガーメニューになっているのがわかるかと思います。

CSSやJSの内容を説明すると長くなってしまうので、zipファイルをダウンロードして中身を確認してみてください！

Sample-Thema.zip
 
次は、page.php(固定ページ)とsingle.php(投稿ページ)を作っていきましょう。
 

page.phpとsingle.phpを作ろう

 
管理画面から、固定ページや投稿ページが作れるのがWordPressのいいところ！
ということで、page.phpとsingle.phpを作っていきます。
page.phpは固定ページの雛形で、single.phpは投稿ページの雛形になります。また、固定ページでよく作るページは「トップページ」「会社情報」「お問い合わせ」「アクセス」「採用情報」「ランディングページ」などで、あまり変更しないページになり、投稿ページは「日記」「お知らせ・ニュース」「商品・製品紹介」などになります。
固定ページや投稿ページにも、CSSをあてて作り込んでいく必要があります。
※cssを作り込む場合には、 headerで読み込んだcssファイルにソースコードを追記します。
今回は、固定ページや投稿ページのcssの作り込みははぶいてpage.phpとsingle.phpを
どのように作ったのかだけ説明させていただきます！
page.php
<?php get_header(); ?>
<main>
  <section>
    <div class="page">
      <h2><?php the_title(); ?></h2>
      <p><?php the_content(); ?></p>
    </div>
  </section>
</main>
<?php get_footer(); ?>
<?php the_title(); ?>でページのタイトルを取得し、<?php the_content(); ?>でページの本文を取得しています。
single.php
<?php get_header(); ?>
<main>
  <section>
    <div class="page">
      <h2><?php the_title(); ?></h2>
      <p><?php the_content(); ?></p>
    </div>
  </section>
</main>
<p><?php the_time("Y年n月j日"); ?></p>
<p><?php the_category(); ?></p>
<?php get_footer(); ?>
固定ページとタイトル、本文の取得の方法は変わらないのですが投稿ページなので、<?php the_time(“Y年n月j日”); ?>で投稿した日付を取得し、<?php the_category(); ?>でカテゴリーを取得しました。
<?php the_date(“Y年n月j日”); ?>でも日付は取得できるのですが、WordPressの仕様で「同じ日に複数の記事がある場合、最初の記事のみに一度だけ日付が出力される」という仕様になっているため、同じ日に複数記事を投稿した場合に思ったように日付が表示されないという現象が起きてしまいます。そのため、<?php the_time(“Y年n月j日”); ?>を使うようにしています。
固定ページや、投稿ページの画面を見て「あれ？エディターが違うぞ」ってなった方もいる方と思います。「Classic Editor」というプラグインを入れて旧のエディターにしているからです。(個人的には旧エディターの方が好きなので…)
また、お問い合わせフォームを作るのに大人気のプラグイン「Contact From 7」を試してみたのですが、自作テーマでも正常に動かすことができました。
てことで、page.php と single.php の作り方は以上です！
 
Sample-Thema.zip
ここまでのテーマの中身を確認したい方は、上のzipを確認してみてください。
 

functions.phpで機能を増やそう

ここまでは、ページの作り方について紹介してきましたが、次はfunctions.phpを追加・修正し機能を増やしていきたいと思います。例えば、このブログのアイキャッチはアイキャッチ画像を設定しています。
ですが、今回作っているテーマにはまだアイキャッチ画像がありません。
ということで、function.phpにコードを追加しアイキャッチ画像の設定ができるようにしていきます。

アイキャッチ画像を設定し、表示しよう

functions.php

// 固定ページ、投稿ページにアイキャッチ画像の設定エリアを表示
function my_setup()
{
  add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'my_setup');

これで、アイキャッチの設定ができるようになりました！
画面に表示するには、page.php、single.phpに<?php the_post_thumbnail(); ?>を追加します。

WordPressが推奨するアイキャッチのサイズは 1200×630
the_post_thumbnail(); //サイズ指定なし

the_post_thumbnail('thumbnail');  // サムネイル (150px x 150px :最大値)

the_post_thumbnail('medium');  // 中サイズ (300px x 300px :最大値)

the_post_thumbnail('large');  // 大サイズ (640px x 640px :最大値)

the_post_thumbnail('full');  // フルサイズ (アップロードした画像の元サイズ)

the_post_thumbnail( array(1200,630) );  // サイズを指定

サイズを指定して、アイキャッチを表示させてみました！

メニューを追加しよう

WordPressでは管理画面から簡単にヘッダーメニューやフッターメニューを作成することが可能です。

初期状態だと、外観にメニューが表示されていない状態なので、 functions.phpにコードを追加しメニューを表示させます。

functions.php

// 外観 > メニューを表示
add_action( 'after_setup_theme', 'register_menu' );
function register_menu() {
  register_nav_menu( 'primary', __( 'Primary Menu', 'theme-slug' ) );
}

メニューを表示することができました！

…….

ちょっと長くなってしまったのでメニューの作り方は別記事で紹介したいと思います。

Sample-Thema.zip

ここまでのSample-Themaは上のzipを確認してみてください。

【WordPress】自作テーマの「メニュー」を作ろう！(初心者向け)
今回は前回の続きで、自作テーマのメニューを作成したいと思います。具体的には、WordPressの管理画面で作ったメニューを表示させるまでをやっていきます。ぜひ、参考にしてみてください！
www.alloneslife-0to1work.jp
2023/07/21

まとめ

Toshi
Toshi

いかがでしたか？なんとなく、WordPressで自作テーマを作る方法がわかったんじゃないでしょうか。初めてのテーマ作りということもあり、かなり(?)が多かったしエラーが出て苦戦したりしました(笑) 作り始めたら、コードを追加していくことでいくらでも好きなように作れるので、ぜひ自分だけのオリジナルテーマを作ってみてください！

Toshikazu

Nagasaki→Tokyo→China→Fukuoka

1992/07/02

2017年からブログを運営。
現在エンジニアとして福岡で働いています。

Toshikazuをフォローする
WordPress
シェアする
Toshikazu

コメント