WordPressでサイトを作る、テーマを自作する方法を徹底解説

制作会社によってはWordPressによるサイト制作をWebデザイナーが担当することがあるかもしれません。

また、自分でWordPressのテーマを作れるようになると、仕事の幅も広がりますし、自分のブログを作ることもできます。

高い品質のWordPressテーマであれば配布したり、販売することもできます。

WordPressでサイト制作ができるとメリットがたくさんあるのです。

ということで今回は、WordPressを使ってサイトを制作・テーマ制作する一連の流れを解説します。

WordPressでサイトやテーマを作るいくつかのパターン

WordPressでテーマを作ると言っても、いくつかの状況が想定されます。

その時のポイントを解説します。

クライアント向けWordPress構築

自分で使ったり公開するのではなく、クライアントにWordPressでのサイト制作を依頼された時のポイントです。

HTMLが分からない人でもサイトを更新・編集できるように、どの部分をクライアント側でいじれるようにするか決めます。

  • ブログページ
  • 採用情報
  • 最新情報
  • 企業情報

これらは定期的に更新する部分なので、クライアント側で書き換えられるようにします。

また、トップ画像を変えられるようにしたいとか案件によって異なるはずなので、クライアントにヒアリングして簡単に編集できる部分を決定していきます。

また、ショートコードや投稿画面にボタンを追加しておくと編集も楽になるので、提案しておくと良いでしょう。

配布する場合

いずれは配布したいというのであれば、汎用性が高く様々な使い方に対応させる必要があるので難易度は割と高いと思います。

すでに公開されている無料テーマをダウンロードして使ってみたり、ソースコードを覗いてみるのが良いでしょう。

「この機能は便利だ!」という風に、自分では思いつかなかった機能が知れて勉強になります。

自分用に作る場合

好きにやって下さい笑

自分しか使わないので、機能は最低限で良いでしょう。

制作の準備

テーマを作る前に、開発環境を構築していきましょう。

ローカル開発環境の構築

まずはローカル開発環境を構築しないといけません。PHPを使うには、サーバーやデータベースがないといけません。これをPCの中に構築します。

WindowsであればXAMPP、MacであればMAMPをインストールすれば、ローカル開発環境を構築することができます。無料で利用することができます

XAMPPを使う場合

以下のサイトを参考にインストールして下さい。

XAMPPのダウンロード及びインストール
設定ファイル(http.conf他)の場所
設定ファイルの確認と修正

MAMPを使う場合

以下のサイトを参考にインストールして下さい。

【MAMP】MacにMAMPをインストール

データベースの設定

localhost/phpmyadmin/ にアクセスして、phpMyAdminでデータベースを作成します。

クリックすると、以下の画面になります。

データベース名を入れて(「wp_db_test」など)、照合順序を「utf8_general_ci」に設定して「作成」をクリックして下さい。

これでデータベースの設定は完了です。データベース名はWordPressの設定で後ほど使います。

一つのWordPressに一つのデータベースと決まっているわけではなく、接頭辞を変えれば複数のWordPressで一つのテータベースを利用することができます。

WordPressのインストール

以下のページからWordPressが入ったZIPファイルをダウンロードして下さい。

Blog Tool, Publishing Platform, and CMS — WordPress

ダウンロードしたら、解凍します。「wordpress」という名前のフォルダが出てくると思います。

XAMPPとMAMPのインストール方法は以下のような感じです。

XAMPPにWordPressをインストール

XAMPP(Windows)であれば、基本的にCドライブの中に「xampp」フォルダがあります。

「xampp」フォルダの中にある「htdocs」に任意の名前でフォルダを作成して、その中に解凍した「wordpress」フォルダを移動させます。

今回は「sample」というフォルダを作ってその中に「wordpress」フォルダを入れたと仮定して進めていきます。

MAMPにWordPressをインストール

MAMP(MAC)であれば、application/MAMP/htdocs/ でhtdocsに移動できます。

そこに任意の名前でフォルダを作成して、その中に解凍した「wordpress」フォルダを移動させます。

今回は「sample」というフォルダを作ってその中に「wordpress」フォルダを入れたと仮定して進めていきます。

初期設定

以下のように、初期設定を行います。以下のURLをアドレスバーに入れて下さい。

localhost/sample/wordpress/

言語の選択が出てきた場合は、日本語を選択して下さい。

選択したら、以下のような画面になります。

「さあ、始めましょう!」とクリックして下さい。

先ほど作成したデータベース名を入れて下さい。

ユーザー名を設定した覚えがない場合は、たいていは「root」になっています。

データベースのホスト名はlocalhostで大丈夫です。

テーブル接頭辞は、任意の文字列にしてください。「wp_sample_」とか。

ローカル環境なら「wp_」のままでも大丈夫ですが、本番環境ではセキュリティ的によくないので、書き換えるべきです。

実際にテーマ作ってみよう

ここから、実際にテーマを作る手順を解説します。自分で使うために作るという前提で作っていきます。

テーマフォルダの場所

「wordpress」フォルダ→「wp-content」→「themes」というフォルダがあります。この中にテーマフォルダを作成します。

初期状態では「twentyseventeen」や「twentysixteen」などの公式テーマが入っています。これらのテーマは参考になるので、そのままにしておきましょう。

今回は、「themes」フォルダの中に「my-theme」というフォルダを作成したと仮定して進めていきます。

必要なファイル

最低でもindex.phpとstyle.cssさえあればWordPressは動きますが、それではWordPressを使う意味がありません。

実質、以下のファイルは最低限必要になるでしょう。

  • index.php (トップページ、カテゴリーページ、タグページ、検索結果ページ、アーカイブ兼用)
  • style.css
  • functions.php
  • page.php
  • single.php
  • header.php
  • sidebar.php(2カラムなら)
  • footer.php
  • 404.php

ディレクトリ構成は以下のようなイメージです。

style.css

style.cssにはスタイルの定義だけではなく、テーマの情報を記述する必要があります。

/*
Theme Name: テーマの名前(必須)
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ(カンマ区切り/オプション)
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/

テーマの名前は必須です。

GPLライセンス

上記のコードにライセンスを記述する項目がありました。これに関する説明もしておきます。

もしテーマを配布するのであれば、GPLライセンスにしないとライセンス違反になります。

GPLというのはコピーレフト(Copyleft)というのは、著作権を保持した状態で、誰でも「利用・再配布・改変」ができるいう考え方です。

例えば、テーマを作って「他の人への配布を制限する」ことや「複数サイトでの利用を制限する」ことは、GPLライセンスに違反するのです。

index.php

index.phpは、主にトップページにとして使われますが、カテゴリーページやタグページなどにも使えます。

カテゴリーページやタグページを別にしたい場合は、category.phpやtag.phpを別で作成します。

index.phpを汎用ファイルとして、home.phpやfront-page.phpというトップページ専用のテンプレートを作ることもできます。

WordPressがトップページを表示させる時、まずfront-page.phpというファイルを探します。

front-page.phpがテーマフォルダになければhome.php、home.phpがなければindex.phpを表示させます。

front-page.phpとhome.phpの違い

front-page.phpがあると、トップページでは有無を言わさずfront-page.phpが呼ばれます。最も優先度の高いテンプレートになります。

front-page.phpがない場合は、ユーザーの設定によって挙動が異なります。

トップページというのは、「最新の投稿」か「固定ページ」か選択でき、「最新の投稿」になっていれば、home.phpが呼ばれる仕組みになっています。

まずはHTMLファイルで静的サイトを作成

いきなりPHPで書き始めるのではなく、トップページや投稿ページなどをHTMLファイルで作成しておきます。

今回はブログ用テーマという前提で進めていきます。

例えば、以下の様なHTMLで組んだとしましょう。細かい部分は省略して、大まかな構成で組んでいます。

トップページをindex.html、記事ページをsingle.htmlという名前で保存しています。

トップページ(index.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>WordPress テーマテスト トップページ</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="wrapper">
   <header class="header" id="header">
 
   </header>
   <div class="container">
     <main class="main" id="main">
       <div class="article-list">
         <!-- この中に記事一覧 -->
       </div>
     </main>
     <div class="sidebar">
 
     </div>
   </div>
   <footer class="footer" id="footer">
     <p class="copyright"></p>
   </footer>
   </div>
  </body>
</html>

 

記事ページ(single.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>WordPress テーマテスト 記事ページ</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="wrapper">
   <header class="header" id="header">
 
   </header>
   <div class="container">
     <main class="main" id="main">
       <article class="entry-content">
         <!-- この中に記事本文 -->
       </article>
     </main>
     <div class="sidebar">
 
     </div>
   </div>
   <footer class="footer" id="footer">
     <p class="copyright"></p>
   </footer>
   </div>
  </body>
</html>

ヘッダー、サイドバー、フッターはトップページでも記事ページでも同じです。これはテンプレートを作成して共通化した方が楽ですね。

header.phpでページ上部やhead内を共通化

まずはページ上部やhead内を共通化します。

トップページにあるhead要素とヘッダーを、header.phpに移動させます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>WordPressテーマテスト トップページ</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
 <div class="wrapper">
 <header class="header" id="header">
 
 </header>

これだと、title要素の中身が全ページで「WordPressテーマテスト トップページ」になってしまいます。

そこで、phpの条件分岐でトップとそれ以外でtitleの中身を切り替えます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<?php if ( is_home() || is_front_page() ) : ?>
<title><?php bloginfo( 'name' ); ?></title>
<?php else: ?>
<title><?php echo get_the_title() . ' | ' . get_bloginfo( 'name' ); ?></title>
<?php endif; ?>
<link rel="stylesheet" href="./style.css">
<?php wp_head(); ?>
</head>
<body>
 <div class="wrapper">
 <header class="header" id="header">
 
 </header>

 

WordPressには便利な関数がすでに定義されています!

WordPressには独自の関数があり、とても便利です。

上記のコードでいえば、is_home()is_front_page()関数は、トップページならtrueを、それ以外ではfalseを返します。

bloginfo()関数は、サイトに関する様々な情報を出力することができます。

get_the_title()関数はタイトルを取得。get_bloginfo()関数はサイトに関する様々な情報を取得することができます。

bloginfo()とget_bloginfo()は似ていますが、出力するか取得するかの違いです。

このように、関数を利用するだけで色んなことができます。

wp_header()関数

head要素の最後に、wp_header()という関数があります。

これは必要なタグを自動で出力したり、絵文字を使えるようにしたり、CSSやJSファイルの読み込みをコントロールしたりと様々なことに使われます。

最初は深く考えずに、「head内にはwp_header()関数を記述する」ということだけ知っておけばいいです。

header.phpの読み込み

先ほど作成したindex.htmlの上部はheader.phpに移したので、以下のようなコードになっています。

  <div class="container">
    <main class="main" id="main">
      <div class="article-list">
        <!-- この中に記事一覧 -->
      </div>
    </main>
    <div class="sidebar">
 
    </div>
  </div>
  <footer class="footer" id="footer">
    <p class="copyright"></p>
  </footer>
</div>
</body>
</html>

まず、このファイルの名前をindex.htmlからindex.phpに変更して、phpが使えるようにします。

変更したら、get_header()関数を使ってheader.phpテンプレートを出力します。

<?php get_header(); ?>
  <div class="container">
    <main class="main" id="main">
      <div class="article-list">
        <!-- この中に記事一覧 -->
      </div>
    </main>
    <div class="sidebar">
 
    </div>
  </div>
  <footer class="footer" id="footer">
    <p class="copyright"></p>
  </footer>
 </div>
</body>
</html>

get_header()関数はheader.phpを呼び出すための関数です。

記事用のsingle.htmlもsingle.phpに変更して、以下のように書き換えます。

<?php get_header(); ?>
  <div class="container">
    <main class="main" id="main">
      <article class="entry-content">
        <!-- この中に記事本文 -->
      </article>
    </main>
    <div class="sidebar">
 
    </div>
  </div>
  <footer class="footer" id="footer">
    <p class="copyright"></p>
  </footer>
 </div><!-- /wrapper -->
</body>
</html>

 

これでhead要素やヘッダーを共通化することができました。

本当はhead内に色々記述しますが、基本的なやり方はこんな感じです。

footer.phpでページ下部を共通化

head要素やヘッダーが共通化できたので、今度はフッターを共通化します。

フッターのテンプレートには、footer.phpを使います。

index.phpにあったフッターから下を、footer.phpに移動させます。

    <footer class="footer" id="footer">
      <p class="copyright"></p>
    </footer>
  </div><!-- /wrapper -->
</body>
</html>

ここに、以下のような記述を追加します。

    <footer class="footer" id="footer">
      <p class="copyright"></p>
    </footer>
  </div><!-- /wrapper -->
<?php wp_footer(); ?>
</body>
</html>

今度はbodyの閉じタグ直前にwp_footer()という関数が使われています。

wp_footer()関数で必要な情報が色々出力されるので、とりあえず記述しておきましょう。wp_head()関数みたいな感じです。

footer.phpの読み込み

勘の良い人はもうお分かりかもしれません。index.phpとsingle.phpを以下のように記述します。

index.php

<?php get_header(); ?>
  <div class="container">
    <main class="main" id="main">
      <div class="article-list">
        <!-- この中に記事一覧 -->
      </div>
    </main>
    <div class="sidebar">

    </div>
  </div>
<?php get_footer(); ?>

 

single.php

<?php get_header(); ?>
  <div class="container">
    <main class="main" id="main">
      <article class="entry-content">
        <!-- この中に記事本文 -->
      </article>
    </main>
   <div class="sidebar">

   </div>
  </div>
<?php get_footer(); ?>

 

テンプレートしたのでコードがスッキリしましたね。

こうしておけば、header.phpやfooter.phpをいじれば、全てのページのヘッダーやフッターをまとめて修正することができます。

sidebar.phpでサイドバーを共通化

お次は、sidebar.phpを使ってサイドバーを共通化します。

sidebar.phpというファイルを作成して、index.phpからコードを移動させます。

<div class="sidebar">

</div>

そして、get_sidebar関数を使ってsidebar.phpを呼び出します。

index.php

<?php get_header(); ?>
  <div class="container">
    <main class="main" id="main">
      <div class="article-list">
        <!-- この中に記事一覧 -->
      </div>
    </main>
    <?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

single.php

<?php get_header(); ?>
  <div class="container">
    <main class="main" id="main">
      <article class="entry-content">
        <!-- この中に記事本文 -->
      </article>
    </main>
    <?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

これでサイドバーも共通化できました。

まとめ

とまあ、長くなってしまいましたが、シンプルなブログなら意外と簡単に作れてしまいます。

Webデザイナーやフロントエンドエンジニアを目指すには、必ず抑えておきたいのがWordPressを使ったサイト構築です。

最初は難しく感じるかもしれませんが、頑張ってチャレンジしてみて下さい。

WordPressの魅力に憑りつかれたWebデザイナーやエンジニアは結構多いです。割と楽しく学習できると思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です