2023.12.07 2023.12.10

初めてWordPressでオリジナルテーマの作成をする

o_wani

ずっと出来てなかった、初めてのWordPressオリジナルテーマ作成にトライします。

o_wani

30日後には完成させたいホームページがあるんだけど、本当に簡単なものでいいので、「TOP」「お知らせ」「お問い合わせ」の3画面をつくりたいいんだ。ちょっとしたデザインも必要なので、CSSとHTMLを作ってサーバーにアップするのがいいかなぁ。

マスター

WordPressを使って構築するのがいいんじゃない？

o_wani

WordPressは、お知らせのデータを管理するのに使おうと思うんだ。管理画面にログインしてもらって、お知らせの記事を書いてもらおうと考えてる。

マスター

HTML+CSSでホームページを作って、WordPressはお知らせの記事管理ってこと？

o_wani

そうそう！時間も無いし！

マスター

WordPressでオリジナルテーマを使ってホームページ作ろうか。お知らせの記事は管理できるし、お問い合わせだってプラグインで簡単に設置できる。オリジナルテーマの設置は、とても簡単にできちゃうんだ。

o_wani

やったことないけど、できるかな？

マスター

HTMLとCSSができれば、絶対できる。それ以外にも、PHPのコードを埋め込むけど、それも決まった内容だから教えるよ。

あと参考になった電子書籍をご紹介。

「WordPressのオリジナルテーマを1日で作る本」

本当に必要な内容のみ書かれている印象ですので、最短でオリジナルテーマの作成ができ、概要が把握できる内容になってる。

今までブログやお知らせの管理だけに利用してきた人も、WordPressでのオリジナルテーマの作成は簡単にできますので、電子書籍の内容を元に最短最小の構成で進めていきます。

Contents

やることを把握
①フッター：footer.phpの作成
②ヘッダー：header.phpの作成
③トップページ：index.phpの作成
④お知らせ一覧：page-information.phpの作成
⑤投稿記事(お知らせ)詳細：single.phpの作成
⑥スタイルシート：style.cssの作成
画面表示して確認
- おまけ：お問い合わせ画面の設置

やることを把握

オリジナルテーマの作成に必要な構成とファイルを確認しておきます。

今回は「original-theme」というフォルダを作成して、その中にファイルを作成してオリジナルテーマを作成していきます。

    ├── wp-content
    │   ├── themes
    │   │   ├── original-theme
    │   │   │   ├── footer.php------------------>①フッター
    │   │   │   ├── header.php------------------>②ヘッダー
    │   │   │   ├── index.php------------------->③TOPページ
    │   │   │   ├── page-information.php-------->④お知らせ一覧
    │   │   │   ├── single.php------------------>⑤投稿記事(お知らせ)詳細
    │   │   │   └── style.css------------------->⑥スタイルシート

上記のようなフォルダ・ファイル構成です。

今回作成する画面は3つです。

TOPページ
お知らせ一覧
お知らせ詳細

上記のようにフォルダ「original-theme」を作成するとテーマから選べるようになりますので、有効化しておきましょう。［有効化］ボタンをクリックします。

さっそくヘッダーとフッターなど共通部分、CSSを含む①〜⑥の内容を修正していきましょう。すべて内容としては、例ですので、適宜変更して使うと良いです。

①フッター：footer.phpの作成

ページ共通のフッターです。

<footer>
  <div class="footer">
    <p class="copyright">©ORIGINAL THEME 2023</p>
  </div> 
</footer>
<?php wp_footer();?>
</body>
</html>

②ヘッダー：header.phpの作成

ページ共通のヘッターです。

<?php
/**
 * The header.
 *
 * This is the template that displays all of the <head> section and everything up until main.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage ORIGINAL THEME
 * @since ORIGINAL THEME 1.0
 */
?>
<!doctype html>
<html lang="ja">
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<link href="<?php echo get_template_directory_uri();?>/style.css" rel="stylesheet" type="text/css" media="all"/>
	<meta httpequiv="XUACompatible" content="IE=edge">
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<header>
	<div class="flexbox">
		<h1>
			<a href="<?php echo esc_url(site_url());?>">
			ORIGINAL THEME(オリジナルテーマ)
			</a>
		</h1>
    <nav class="menu">
        <div class="menu-section">
            <h2>MENU</h2>
            <ul>
                <li class="page_item page-item-2 nav-link"><a href="/information">お知らせ一覧</a></li>
                <li class="page_item page-item-13 nav-link"><a href="/contact">お問い合わせ</a></li>
            </ul>
        </div>
    </nav>
	</div>
</header>
<?php wp_body_open(); ?>

③トップページ：index.phpの作成

トップページです。

<?php
/**
 * The main template file
 *
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage ORIGINAL THEME
 * @since ORIGINAL THEME 1.0
 */

get_header(); ?>

<div class="posts">
  <h2>お知らせ</h2>
  <?php query_posts('posts_per_page=1'); ?>
  <ul><?php if(have_posts()):while(have_posts()):the_post();?>
    <li><a href="<?php the_permalink();?>"><?php the_time('Y m-d');?>  <?php the_title();?></a></li>
  <?php endwhile;endif;?>
  </ul>
  <div class="more"><a href="/information">お知らせ一覧を表示</a></div>
</div>

get_footer();

お知らせの記事を取得して最新の1件を表示させるようになっています。

...
<?php query_posts('posts_per_page=1'); ?>
...

ここは、1を3に増やせば最新の投稿の3件を取得できます。

④お知らせ一覧：page-information.phpの作成

お知らせ一覧です。

page-information.php

page-information.phpの作成

<?php
/*
Template Name: INFORMATION
*/
get_header();
?>

<div class="main-content">
  <div class="infomation">  
    <h2>お知らせ一覧</h2>
    <?php
      $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
      $args = array(
        'posts_per_page' => 5,
        'paged' => $paged
      );
      $query = new WP_Query($args);
      if($query->have_posts()) :
        while($query->have_posts()) : $query->the_post();
    ?>
    <div class="item">
      <div class="time">
        <?php the_time('Y m/d') ?>
      </div>
      <div class="title">
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </div>
    </div>
    <?php
        endwhile;
        // ページング
        $big = 999999999; // need an unlikely integer
        echo paginate_links(array(
            'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
            'format' => '?paged=%#%',
            'current' => max(1, get_query_var('paged')),
            'total' => $query->max_num_pages
        ));
        wp_reset_postdata();
      endif;
    ?>
  </div>

<?php get_footer();?>

page-XXXXXXXX.phpというファイルを作成すると固定ページの「テンプレート」のプルダウンから選択できるようになります。変更もできると思いますが、page-をファイル名の先頭につけるルールのようです。

固定ページ

お知らせ一覧の作成

固定ページから［新規追加］をクリックて新規作成します。

内容の入力は必要ありませんが、タイトルを入力し、テンプレートを変更します。

ファイルの上に記載しているTemplate Nameがプルダウンに表示されるようになっています。

<?php
/*
Template Name: INFORMATION
*/
get_header();
?>
...
...

テンプレートを「デフォルトテンプレート」から「INFORMATION」に変更します。

URLの設定

パーマリンク設定

パーマリンク設定をします。固定ページや投稿記事のURLを自由に設定できるので、パーマリンク構造は「投稿名」を選んでおきましょう。

パーマリンク

お知らせ一覧のURL変更

さっき作成したお知らせ一覧を編集します。

URL：パーマリンクはタイトルが初期値で設定されていて「お知らせ一覧」になっています。

URL：パーマリンクを「information」に変更します。

⑤投稿記事(お知らせ)詳細：single.phpの作成

お知らせの記事詳細です。内容として例を書いてみます。

<?php get_header();?>

<div id="etail" class="main-content">
  <div class="infomation">
  <?php if(have_posts()):while(have_posts()):the_post();?>
    <div>
      <div class="content">
        <h2><?php the_title(); ?></h2>
        <div class="item">
          <div class="time">
            <?php the_time('Y m/d') ?>
          </div>
          <div class="body">
            <?php the_content();?>
          </div>
        </div>
      </div>
      <div class="post-navigation">
        <div class="prev-post">
          <?php previous_post_link('%link', '＜ 前の記事'); ?>
        </div>
        <div class="next-post">
          <?php next_post_link('%link', '次の記事 ＞'); ?>
        </div>
      </div>
    </div>
  <?php endwhile;endif;?>
  </div>
</div>
<?php get_footer();?>

⑥スタイルシート：style.cssの作成

スタイルシートです。

@charset "UTF-8";
/*
Theme Name:ORIGINAL THEME
Description:ORIGINAL THEME
Version:1
Author:USER
*/
body{
  width: 100%;
  background: #190e0199;
  color: #fff;
  font-weight: normal;
  font-size: 12px;
  font-family: "MS Pゴシック",sans-serif;
  letter-spacing: 3px;
  line-height: initial;
}
a{
  color: #fff;
  text-decoration: none;
}

さて、これでベースは完成したので、画面を表示して確認してみましょう。

画面表示して確認

これまでの内容をもとに画面を表示して、確認しましょう。

TOPページはこんな感じです。お知らせが表示されているはずです。お知らせは投稿から記事を書けば、増えていきます。

お知らせの記事詳細はこんな感じです。

o_wani

最後に、お問い合わせのページの設置も教えてください！

マスター

定番の「ContactForm7」のプラグインを設置する方法を教えるね！

プラグインContactForm7

おまけ：お問い合わせ画面の設置

ａ．お問い合わせ画面は今回はプラグイン「ContactForm7」を設置します。［今すぐインストール］をクリックします。

ｂ．インストール後、有効化します。「設定」を表示させます。

ｃ．ページに埋め込むためのショートコードを確認します。

こんなコードになってます。下記は例です。

[contact-form-7 id="404cf27" title="コンタクトフォーム 1"]

ｄ．page-contact.phpを作成し、固定ページから設定できるようにします。

<?php
/*
Template Name: CONTACT
*/
get_header();
?>
<div class="main-content">
  <div class="contact">
  <h2>CONTACT</h2>
    <div class="txet-content">
      <p>
      必要事項をご入力いただきご送信ください。
      </p>
    </div>
  <?php the_content();?>
  </div>
</div>
<?php get_footer();?>

ｅ．固定ページを新規作成し、