Wordpressのオリジナルテーマを作成する【1回目】 - 超基礎編

ようやくマガジンのタイトルにふさわしい感じがしてきました。今回はWordpressのオリジナルテーマを作成することについて書いていきます。実際のコードなんかも紹介しつつやっていきますが、「超初歩」の方をやりますので既に自作テーマ作ったことがある方には何の役にも立ちませんし、Wordpressを使ったことがない人にも何の役にも立ちません。

本文最後に今回作ったテーマファイルをzipでダウンロードできるURLを書いていますのでご利用ください。

あと本になりました。


ちなみに全ての私の記事を読むと、ザックリこのレベルまではすぐに作れるようになります。(※急いで書いたのでレスポンシブ・ブラウザ互換その他細かい箇所はご容赦ください・・・)

https://development.jiriki.co.jp/wptest/

1.構成を知る

Wordpressを使ったことがある人は「テーマ」を色々使ったことがあると思うんですよね。あーこれは使いにくいなぁとか、これはデザインは良いけど微妙だなぁとか。一度いちから作ってみると自分だけのやり方を確立できますし、サイト制作のお仕事にも有利になります。結構Wordpressのお仕事ってのは引き合いが多いので、この機会にちょっとでもやってみると良いと思います。

特に今回の読み物を読めば、カンの良い方はただのHTMLサイトをWordpressへまるっと移植することも理解できるようになる・・・と思います。

Wordpressの「テーマ」というのはざっくり言って以下の構成になっています。

最初はこれだけ覚えておけば大丈夫なんじゃないですかね。header.phpとfooter.phpは常に呼び出されて、トップページならindex.phpが。固定ページならpage.phpが。ブログ投稿ページならsingle.phpが呼び出されて合体すると考えていいかと思います。

テーマとして機能させるためには以下のファイルが必須になってきます。

・index.php
 トップページだと思ってOKです。結構HTMLべた書きで大丈夫。


・header.php
 bodyのスタートからロゴ・メニューエリアあたりをカバーします。


・footer.php
 ページのフッターです。コピーライトとかですね。


・category.php
 ブログ投稿の一覧ページだと考えておいてください。


・page.php
 固定ページ、所謂会社概要とかそういうのですね。


・single.php
 ブログとか、お知らせなど「投稿」から作るページです。


・functions.php
 設定ファイルだと思ってください。


・style.css
 メインのCSSファイルです。

他にも命名ルールがいっぱいあったりするんですが、今回は割愛します。archive.phpというのも最初から存在していますがcategory.phpの方が「強い」のでcategory.phpがあれば大した影響はないと思います。

2.実際のコードを見てみる

まず詳しく理解するまでは決まった形式で書くことが多いfunctions.phpをご紹介します。

<?php

これだけです。Wordpressに存在する色々な機能を使わない場合はこれで動きます。マジです。functions.phpはかなり細かく設定を書くことも、使いたい機能だけ書くこともできるのである程度自作テーマに慣れてきて「やりたいことが増えた」ときに書くようにするとストレスフリーになれますし、「ある程度理解できてから」ググるようになるので理解がより一層深まります。

最初の初歩の段階でfunctions.phpに頭を悩ませるのはやめたほうが良いな、というのが個人的見解です。

では次にfooter.phpを見てみましょう。これはヘッダー同様、何度も同じフッターを書くの面倒くさいよね?ということですべてのページに同じように表示されるエリアとなります。

      <footer>
          <p>Copyright© 2018 All Rights Reserved.</p>
      </footer>
      <?php wp_footer(); ?>
    </body>
</html>

終わり。全ページで表示させたい内容がある場合は追記するだけ。今はこれだけで充分だと思います。次にheader.phpを見ていきましょう。これも凄くシンプルに書きますね。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet" type="text/css" media="all"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="<?php echo get_template_directory_uri(); ?>/js/admin.js"></script>
        <?php wp_head(); ?>
    </head>
    <body>
      <header>
        <h1>LOGO</h1>
      </header>

これだけでスタートします。

<?php echo get_template_directory_uri(); ?> という記載がありますが、これはテンプレートのURLを払い出ししていると思っていただいてOKです。所謂テーマのディレクトリパスを発行しているコードなわけですね。覚えておくとすごく便利なのでここだけ抑えておいてください。

さて、index.phpを書いていきます。<?php get_header(); ?>というのはheader.phpを呼び出し、<?php get_footer();?>はfooter.phpを呼び出します。

<?php get_header(); ?>

		<p>Wordpress!</p>

<?php get_footer();?>

おっと、single.phpとpage.phpを忘れていましたね。細かいことは後から学べばいいので実際のところ同じことを書けばOKなのです。

<?php get_header(); ?>

	<?php if(have_posts()): while(have_posts()):the_post(); ?>

	<p><?php the_content(); ?></p>

	<?php endwhile; endif; ?>

<?php get_footer(); ?>

シンブルですね。非常にざっくり解説すると、「投稿」が存在する場合はその投稿をまるごと表示しなさい。という命令が書かれています。

<?php if(have_posts()): while(have_posts()):the_post(); ?>・・・存在すれば

<?php the_content(); ?>・・・コンテンツ表示エリア

<?php endwhile; endif; ?>・・・ifとwhileを終了させます

category.phpもほとんど同じで以下のようになります。

<?php get_header(); ?>

	<?php if(have_posts()): while(have_posts()):the_post(); ?>
		<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	<?php endwhile; endif; ?>

<?php get_footer(); ?>

category一覧でタイトルとリンクだけ表示させるシンプルなものです。style.cssにオリジナルテーマであることを書き込んで一旦終了です。

@charset "utf-8";
/*
Theme Name: origin
Description: オリジナルテンプレート
Version: 1
Author: あなたの名前
Author URI: あなたのURL
*/

これで終わり!ブラウザで確認すると、

こんなふうにWordpressのサイトが出来上がっているはずです。あとはCSSでお好きに調整すれば見栄えもバッチリですね。カンの良い方は既に気がついたと思いますが、index.phpにいつも作っているサイトのHTMLをべた書きすればWordpressへの移植も簡単になりますよね。

3.おわりに

今回やったことをそのまま、やるとどっかで「あれ?おかしいな いつもと違うな」となることが多々あると思います。その疑問が次に繋がる気がします。

以下URLより今回作ったファイルをダウンロードできます。

https://development.jiriki.co.jp/download/origin01.zip


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

当マガジン・記事をサポートいただけると幸いです。より直接役に立つ記事を書く励みとなります。

わかるな〜と思ったらシェアいただければ幸いです!
22

Gen6

尼崎生まれの会社経営者13年目、ITアドバイザー。元Bフレッツ・OCN販売数No2。GHAWARD2017においてスマートフォン賞と不動産賞を受賞。Kindle本を7冊ほど出してます。お仕事依頼もお気軽に。

note編集部のおすすめ記事

様々なジャンルでnote編集部がおすすめしている記事をまとめていきます。
1つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。