WordPress

【WordPress】自作テーマの最小構成の作り方

 
wordpress eyecatch

なんだかんだいって、WordPressを使う機会はよくあります。Webサイトを作るとなると、基本的にはWordPoressばっかり使っています。

様々な機能をもたせていくのであれば、その他のフレームワークも検討するのですが、例えば企業のHPやその他ちょっとしたHPを作る時は、ほとんどWordPressを使っています。

慣れているというのもありますが、環境構築もわりと簡単でサクッと自作テーマも作れるのがいい。

今回の記事では、WordPress触り始めて、これから新しく自作テーマを作ってみたい人向けの記事になります。

最小構成で自作テーマを作る方法です。

WordPressの自作テーマに最低限必要なファイル

WordPressの自作テーマに最低限必要なファイルは以下の5つです。

  • index.php
  • function.php
  • style.css
  • header.php
  • footer.php

それぞれ簡単に解説していきます。

index.php

これは、トップページの表示が記述されたphpファイルになります。今回はサンプルなので、最低限のコードのみ載せてあります。

<?php get_header(); ?>
<h2>This is a WordPress Template.</h2>
<p>Index.php</p>
<?php get_footer(); ?>

<?php get_header(); ?>と<?php get_footer(); ?>はそれぞれ、header.phpとfooter.phpを読み込むという意味です。

テーマが表示された時に正常に動いていることを確認するために、h2タグとpタグを追記しました。

function.php

function.phpもテーマを認識させるために最低限必要なファイルになります。このファイルは、テーマの各種設定やテーマ全体に適応させる様々なコードを記述していくことになるのですが、これも最初は空でも大丈夫です。

<?php
// FUNCTIONS
?>

WordPressを公開する際には、セキュリティや使い勝手など、様々な対応が必要になります。この記事はあくまでサンプルなので、このまま公開はしないでください。

style.css

style.cssも必要なファイルになります。そして、WordPressのテーマとして認識させるためには、ファイル内上部にルールに則った記述が必要になります。

/*
Theme Name: wordpress template
Theme URI: NA
Author: NA
Author URI: NA
Description: NA
Version: 1.0.0
*/

@charset "utf-8";

/* COMMON */
body {
  font-size: 14px;
}

ファイルの一番最初の、/* */（コメントアウト）で囲まれた箇所は必須です。例えばこのTheme Nameにテーマ名を記述すると、テーマを読み込んだときに管理画面に表示されるようになります。

その他、テーマで使用するcssコードをそのまま書いて大丈夫です。

header.phpとfooter.php

header.phpとfooter.phpは最低限の記述だけしておけばとりあえず大丈夫です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
  <title>WordPress Template</title>
  <?php wp_head(); ?>
</head>

<body>
  <?php #NAVIGATION ?>
  <header>HEADER tag</header>
  <nav>NAV tag</nav>
  <?php #FOOTER ?>
  <footer>FOOTER tag</footer>
</body>
</html>

ご覧頂くと分かるように、header.phpとfooter.phpでbodyタグの開始と終了をそれぞれ記述しています。

今後テーマを充実させていくにあたって、single.phpやpage.phpなど作成していくことになるのですが、それらの全てのページの最初と最後で、このheader.phpとfooter.phpは読み込まれます。

自作テーマを適応させる

最低限必要なファイルが完成したら、それらを一つのフォルダにまとめます。この時フォルダ名はそのままテーマ名とすると良いでしょう。

テーマフォルダを圧縮する

自作テーマをアップロードするには、テーマフォルダを圧縮する必要があります。フォルダを右クリックで「圧縮」ボタンが出てきますので、「圧縮」してzip形式にします。

自作テーマをアップロードする

あとは、WordPressの管理画面にて、「外観」> 「テーマ」> 「新規追加」と進んで、先程圧縮したフォルダを選択してアップロードします。そして、「有効化」すれば、自作テーマがサイトに反映されるようになります。

WordPress自作テーマ最小構成のまとめ

WordPressの自作テーマを作成するのに最低限必要なファイルはこれだけで、これだけでサイト自体は動く用になります。ただし、あくまでサンプルなので、テーマを充実させていくためには、さらにいろいろな処理やデザインを反映させていくことになると思います。

次のステップとしては、WordPressに標準で用意されている各年のテーマファイルを見てみると良いでしょう。

twentytwentyなど毎年一つ作成されて公開されているやつです。

今回作成した最小構成のテーマと比較すると、かなり多くのコードが欠かれていることがわかります。一つ一つコードを読みながら、自作テーマに反映させていくといい勉強にもなります。

最低限の構成を理解することで、WordPressのテーマの骨組みが見えるようになります。出来るところから少しずつ改良していってみてください。

WordPress 自作テーマ
No.1 スキルマーケット ココナラ



ココナラというサービスをご存知ですか？

ココナラは、プログラミングやウェブ制作、デザインなどの専門知識を持つ人たちが、自分のスキルを活かしてサービスを提供する場所です。

初学者の方でも気軽に相談できるため、自分のスキルアップにも最適です。また、自分自身もココナラでサービスを提供することができ、収入を得ることができます。

ぜひ、ココナラに会員登録して、新しい世界を体験してみましょう！

くわしくはこちら

RELATED POST