静的ファイルをWordPress化するときの手順まとめ

SHARE

こんにちは、ゆうや（@yuyaphotograph）です！

この記事では、

  • 静的ファイルをWordPressで動くようにするときの手順が知りたい
  • WordPress化するときによく使うスニペットを見たい

という方のお悩みを解決します！

フリーランスとしてWordPressを用いたWeb制作案件をこなしているぼくが普段、静的なHTMLファイルをWordPress化するときに行っている手順を紹介します。

自分用にもなるし、誰かに教えるときにもこの記事を見ながらやってもらえるし、工数が削減できるし。

いいことづくしなのでまとめてみました！笑

WordPress化の作業で躓いている方のお役に立てれば幸いです。

phpファイルやstyle.cssを作成する

WordPressでページを表示させるにはHTML形式からPHP形式へ変更する必要があります。

例えばindex.htmlだと、index.phpといった形に変更します。

＊ぼくはまず空のphpファイル作っちゃいます

ぼくは普段、トップページで表示させたいファイルはfront-page.phpという名前で作ります。

これは好みの問題なのでよしなに。

また、about.htmlなどは先頭に「page-」をつけてpage-about.phpというファイル名にしてあげましょう。

こうすることで固定ページのスラックがaboutの場合、page-about.phpが自動で表示されるようになります。

長々と書きましたが、はじめに作成するファイルはだいたいこちらです。

  • index.php
  • functions.php
  • style.css
  • front-page.php
  • page-about.php
  • page-news.php
  • page-contact.php
  • page-service.php
  • page-recruit.php
  • single.php
  • header.php
  • footer.php

ページの種類はプロジェクトごとに異なるのでよしなに。

上から3つのファイルは必須で、ないとWordPressのテーマとして認識されないのでご注意を。

「page-news.php」は記事一覧ページのテンプレートファイルとして使用します。

「single.php」は記事詳細ページのテンプレートファイルです。

固定ページ用テンプレートにテンプレート名を追記する

以下コードをpage-about.phpなどpage-のファイル先頭に貼り付けましょう。

page-about.php
<?php
/*
 * Template Name: テンプレート名
 */
?>

テンプレート名は「私たちについて」など任意の名前を入力してください。

これをすることで、固定ページの編集画面からプルダウンでテンプレートファイルを選択できるようになります。

テンプレートファイルでヘッダーやフッターを読み込む

後ほどヘッダーパーツとフッターパーツを共通ファイルに切り分けていきますが、先に読み込むコードを書いて準備しておきましょう。

以下のコードを空のテンプレートファイルに貼り付けて保存です。

front-page.php
<?php get_header(); ?>

<?php get_footer(); ?>

style.cssに記述するコード

「themes/テーマ名/」の直下に空のstyle.cssを作成するわけですが、以下のコードを貼り付けて任意のテーマ名を入力して保存しましょう。

style.css
/*
Theme Name: テーマの名前
*/

screenshot.pngを配置する

WordPressテーマのアイキャッチになるのがscreenshot.pngです。

作らなくても問題は特にありませんが、あったほうがかっこいいので作ります。

作り方は以下の記事で解説しています。

WordPress テーマ スクリーンショット 綺麗に設置するWordPressテーマのスクリーンショットを綺麗に設定する方法

screenshot.pngの配置場所は「themes/テーマ名/」の直下です。

＊画像のファイル名は必ず「screenshot.png」にしてください

header.phpを構築する

サイトで共通部分となるヘッダーのコードをheader.phpに移します。

ご自身のファイル構造に合わせて臨機応変に切り分けてほしいのですが、参考までにぼくの場合はどんな感じかを紹介します。

＊headタグの中のコードなどは省略

▼▼▼

header.php
<!DOCTYPE html>
<html lang="ja">
  <head>
  </head>
  <body>
    <div class="Page">
      <div class="HeaderLayer"></div>
      <div class="MenuLayer"></div>

headタグの中のメタタグなどをWP化する

メタタグ（charset）、タイトルタグは少しWordPress独自の書き方に変更する必要があります。

以下が例となります。

header.php
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title>
  <?php if(!is_front_page()) {
    wp_title('|', true, 'right');
  }
  bloginfo('name'); ?>
</title>

あと、head閉じタグ直前にこちらを入れるのをお忘れなく。

header.php
<?php wp_head(); ?>

headタグ内のcssファイルのパスをWP化する

CSSファイルのパスの書き方も少し変更する必要があります。

テンプレートディレクトリのURLを取得する「get_template_directory_uri();」を用います。

■before

header.php
<link rel="stylesheet" href="./resources/styles/Pages/index.css">

■after

header.php
<link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/index.css">

headタグ内のcssファイルのキャッシュ対策をする

CSSファイルの内容は頻繁に更新することも考えられます。

自分のブラウザではスーパーリロードをしてキャッシュを消し、最新の状態で確認することは簡単ですが、クライアントにそれをいちいちやってもらうのはあれなので、CSSファイルの末尾に「?var=<?= time() ?>」を追記してキャッシュ対策しましょう。

■before

header.php
<link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/index.css">

■after

header.php
<link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/index.css?var=<?= time() ?>">

headタグ内のcssファイルをページごとに条件分岐させる

各ページのCSSファイルはそのページのときだけ読み込んであげましょう。

if文を使えば簡単に条件分岐することができます。

以下長いですが、例となります。

header.php
<?php if(is_front_page()): ?>
   <link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/index.css?var=<?= time() ?>">
 <?php endif; ?>
 <?php if(is_page('about')): ?>
   <link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/about.css?var=<?= time() ?>">
 <?php endif; ?>
 <?php if(is_page('company')): ?>
   <link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/company.css?var=<?= time() ?>">
 <?php endif; ?>
 <?php if(is_page('service')): ?>
   <link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/service.css?var=<?= time() ?>">
 <?php endif; ?>
 <?php if(is_page('recruit')): ?>
   <link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/recruit.css?var=<?= time() ?>">
 <?php endif; ?>
 <?php if(is_page('contact')): ?>
   <link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/contact.css?var=<?= time() ?>">
 <?php endif; ?>
 <?php if(is_page('news')): ?>
   <link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/news.css?var=<?= time() ?>">
 <?php endif; ?>
 <?php if ( is_single() ) : ?>
   <link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/resources/styles/Pages/single.css?var=<?= time() ?>">
 <?php endif; ?>

footer.phpを構築する

サイトで共通部分となるフッターのコードをfooter.phpに移します。

ご自身のファイル構造に合わせて臨機応変に切り分けてほしいのですが、参考までにぼくの場合はどんな感じかを紹介します。

▼▼▼

footer.php
      <div class="FooterSection"></div>
    </div><!-- body下の下のdiv閉じタグ -->
  </div><!-- body直下のdiv閉じタグ -->
  <!-- jQuery読み込み -->
  <!-- 共通のjs読み込み -->
  <!-- ページ個別のjs読み込み -->
  </body>
</html>

あと、body閉じタグ直前に以下のコードを貼り付けるのをお忘れなく。

footer.php
<?php wp_footer(); ?>

テンプレートファイルを構築する

ここまでの作業で、ヘッダーとフッターは切り分けられました。

次は、header.phpとfooter.phpに移したコードをabout.htmlなどの静的ファイルから削除し、残ったコードをWordPress用のpage-about.phpへ移しましょう。

aタグのページ内のリンク先もWP化する必要があります。

「home_url」を使えばすぐに完了しますのでご安心を。

以下、ページごとのhrefの指定の例となります。

header.php
<!-- ■トップページ -->
<?php echo esc_url( home_url( '/' ) ); ?>
header.php
<!--下層ページ -->
<!-- ■aboutページ -->
<?php echo esc_url( home_url( '/about/' ) ); ?>
<!-- ■serviceページ -->
<?php echo esc_url( home_url( '/service/' ) ); ?>
<!-- ■newsページ -->
<?php echo esc_url( home_url( '/news/' ) ); ?>
<!-- ■accessページ -->
<?php echo esc_url( home_url( '/access/' ) ); ?>
<!-- ■recruitページ -->
<?php echo esc_url( home_url( '/recruit/' ) ); ?>
<!-- ■contactページ -->
<?php echo esc_url( home_url( '/contact/' ) ); ?>

これで、「新着記事を一覧で表示させる」「記事詳細ページで記事内容を表示させる」という機能以外は実装できたかと思います。

これ以降はpage-news.php（記事一覧ページ）とsingle.php（記事詳細ページ）の構築法を紹介していきます。

single.php（記事詳細ページ）を構築する

デフォルトの投稿タイプで公開された記事はsingle.phpで表示することができます。

記事のデータを表示させるには、WordPressのメインループを使用すればOKです。

以下、メインループのコードです。

single.php
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
この間に記事コンテンツ表示のhtml等を入れる
<?php endwhile; ?>
<?php endif; ?>

記事タイトル、投稿年月日、記事本文などを表示させる

上記3つを表示させるWordPressのコードはこちら。

single.php
<!-- 記事タイトル -->
<?php the_title(); ?>

<!-- 記事公開年月日 -->
<?php echo the_time('Y.m.d'); ?>

<!-- 記事本文 -->
<?php the_content(); ?>

アイキャッチ画像を表示させる

画像比率を維持したままアイキャッチ画像を表示させることができるコードとスタイリングを紹介。

HTML構造はこちら。

single.php
<div class="ImgBox">
  <div class="ImgBox-Img" style="background: url('".get_the_post_thumbnail_url()."') no-repeat; background-size: cover; background-position:center;"></div>
</div>

CSSはこちら。

single.css
.ImgBox{
  width: 100%;
}
.ImgBox-Img{
  width: 100%;
  
  /*画像比率*/
  padding-top: 56.25%;
}

page-news.php（記事一覧ページ）を構築する

記事一覧ページは、

  1. page-news.phpを構築
  2. 記事一覧用の固定ページを新規作成（スラックはnewsにする）

という感じで作っております。

記事一覧ページではメインではなくWordPreeサブループを使用します。

以下、サブループのコードです。

page-news.php
<!-- 投稿タイプpostの記事を9件表示させる -->
<?php
$args = array(
  'post_type' => "post",//投稿タイプ設定
  'posts_per_page' => 9,// 取得記事数
);

$my_query = new WP_Query($args);
if ($my_query->have_posts()): while ( $my_query->have_posts() ) : $my_query->the_post(); ?>

表示するコンテンツを入れる

<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

記事タイトルやアイキャッチ画像を表示する際は記事詳細ページ同様のスニペットをお使いください。

記事詳細へのリンクをつける

記事一覧ページではもちろん、記事詳細へのリンクをつけたいですよね。

そういうときは以下のコードをaタグのhrefに指定してあげればOK。

page-news.php
<a href="<?php the_permalink(); ?>">記事タイトル</a>

ページネーションをつける

ページネーションの実装って意外と厄介なんです笑

自分好みのHTML構造に変更したい場合が特に、どうやってカスタマイズすればいいかわからなくて悩んでいる方が多いと思います。

ぼくもコピペできるようになるまで、かなり苦戦しました。

ページネーションの作り方は以下の記事で詳しく解説しているのでぜひ読んで挑戦してみてください。

【WordPress】記事一覧ページのページネーションをカスタマイズする方法【WordPress】記事一覧ページのページネーションをカスタマイズする方法

まとめ

以上、静的ファイルをWordPress化するときの手順まとめをお送りしました。

シンプルなコーポレートサイトのWordPress構築なら、この記事に書いたもので全て完結すると思います。

WordPressを愛する全ての人に届け！！

「WordPressに関するTipsをもっと知りたい！」

という方は以下の記事も目を通してみてください〜

WordPressでよく使う関数スニペットまとめWordPressでよく使う関数スニペットまとめ Contact Form 7を使うときに役立つ記事まとめ WordPressのパスワード保護ページで記事の途中までパスワードなしでも読めるようにするカスタマイズ方法【WordPress】パスワード保護ページで記事の途中までパスワードなしでも読めるようにカスタマイズする方法

前の記事

SANGOカスタマイズに役立つ記事まとめ

次の記事

ブログ運営に役立つプラグイン記事まとめ
ブログ運営に役立つプラグイン記事まとめ