2日間限定!1年で1番お得なAmazonプライムデー開催中(7/17まで)

HTMLファイルからWordPress化する手順

当サイトのリンクには広告が含まれています。

この記事では、HTMLとCSSのファイルをWordpress化する手順について説明していきます。

「Wordpress化」と聞くと難しそうに感じますよね。

この記事を読めば、スムーズにWordPress化することができますよ。

年に一度のAmazonプライムデー開催中

1年で1番お得なセール「Amazonプライムデー」が、7月16日と17日の2日間開催中です。

プライム会員しか参加できませんが、割引率が50%以上の商品も数万点!

欲しかったアイテムが驚きの価格で手に入るチャンスです。

売り切れる前に早めにチェックして、お得な買い物を楽しみましょう!

一年で一番お得なセール

  • プライム会員のみ参加可能(7/17まで)
目次

HTMLファイルからWordPress化する手順

HTMLファイルからWordPress化する手順は以下の通りです。

  1. HTMLファイルをテーマフォルダへ移動させる
  2. テンプレート化する
  3. パスをphp仕様にする
  4. 共通パーツを切り出す
  5. それぞれの場所で呼び出す

この手順通りに作業を行えば、HTMLとCSSファイルが反映されたページが、WordPress上で表示されるようになります。

WordPressを使って、新着記事を出力させるのはまた別の記事で紹介します。

注意

PHPファイルは一文字間違えるだけで、ページが真っ白になったりする可能性があります。

WordPress化に慣れていない人は、バックアップを取ってから行うようにしましょう。

まずはMAMPなどを使いローカル環境で動かしてみることをオススメします。

ローカル環境にWordPressをインストールする方法は別の記事にまとめています。

あわせて読みたい
ローカル環境にWordPressをインストールする方法【MAMPを使用】 この記事では、MAMPを使って作成したローカル環境にWordPressをインストールする方法を解説していきます。 ローカル環境でWordPressを使うことができるようになれば、本...

WordPress化するための準備

WordPress化するのにいじるところは、wp-contentの中のthemesファイルです。

index.phpとstyle.cssさえあれば、何かは表示されるので、用意しておきます。

HTMLファイルをテーマフォルダへ

themesの中に新規フォルダを作成します。

そのテーマフォルダの中にindex.htmlとstyle.cssなどを入れます。

フォルダ名は何でもいいですが、テーマ名にしておくのがいいでしょう。

トップページのファイルをテンプレートに変更

この段階でWordPressのテーマ画面を見ると「壊れているテーマ」と書かれて、テーマを選択することができません。
「以下のテーマはインストール済みですが、足りない部分があります。」と表示される状態です。

index.htmlのままだと、「テンプレートが不足しています。独立したテーマには index.php テンプレートファイルが必要です。」と表示される。

WordPressはPHPで動いています。
そのため、拡張子がhtmlのままだと動かないので、拡張子をhtmlからphpに変更する必要があります。

phpで読み込まれるためにIndex.htmlからindex.phpに変更しましょう。

また、style.cssにテーマ名を入れておくことで、WordPressの管理画面のテーマ選択画面で希望の名前が反映されます。
style.cssの1番上に以下のようにタイトル名を記述しておきましょう。


/*
Theme Name: カスタマイズ用のテーマ
*/

URLをテンプレートタグで読み込むようにする

この段階でファイルを開くと、index.phpの内容だけ反映されて、cssファイルの内容が反映されていません。

index.htmlからWordPressで読み込むために拡張子を変更したように、ファイルの中身もWordPress用に少し変更を加える必要があります。

そのために使うのが、get_template_directory_uri()のいうテンプレートタグです。

このタグを使うことによって、URLを取得することができるようになります。

URLを取得して、文字列として出力するためには、phpの文法で、echoを使って出力できます。

具体的には、<?php echo get_template_directory_uri(); ?>を使います。

head要素の中のスタイルシートを読み込むリンクタグなどは以下のようにします。


イメージタグは以下のようにすることで画像が読み込まれるようになります。


この他、scriptタグなど、外部からfront-page.php以外から読み込むものには全て同じようにして、きちんと読み込むように変更しましょう。

文章中などのイメージタグなどは、マルチカーソル機能を使って一度に変更しましょう。

あわせて読みたい
VScodeのマルチカーソル機能の使い方【コードを一度に修正する時短術】 この記事では、Vscodeでとても役立つマルチカーソル機能について説明していきます。 Vscodeのマルチカーソル機能を使えば、同時に小さな変更にかかる時間を短縮させるこ...

WordPressで管理しやすいように共通パーツに切り出す

今のままでは1ページのページでしかありませんが、WordPressは通常ブログやサイトとして使われます。

ヘッダーやサイドバーなどどのページでも使うものは、共通パーツとして切り出します。

共通のパーツを書き出すことで、全てのページに同じことを書くて手間をなくすことができます。

それぞれのphpファイルを作成し、index.phpから切り出しましょう。

共通パーツとして切り出す時ときに、名前は適当に付けてはいけません。

●●のパーツとして切り分けるときには「●●.php」というファイル名にしての●●部分は読み込む内容の名前にするのがルールです。

この点を踏まえて、ファイル名は以下のようにしましょう。

  • ヘッダーとして切り出したものは、「header.php」
  • サイドバーとして切り出したものは「sidebar.php」
  • フッターとして切り出したものは「footer.php」

function.phpを読み込むようにする

切り出す時に、function.phpを読み込むようにするべきです。

  • </head >の直前に<?php wp_head(); ?>と書く
  • </body>の直前に<?php wp_footer(); ?>と書く

これでfunctions.phpに記載したCSSとJavaScriptが読み込まれます。

WordPressのテンプレートごとに共通パーツを読み込む

それでは、共通パーツとして切り出したものを、必要な箇所で呼び出しましょう。

WordPressでは、大きく分けて3つのページがあります。

  • 一覧ページ:archive.php
  • 投稿ページ:single.php
  • 固定ページ:page.php

一覧ページは、トップページなどいくつかの記事が一覧表示されるページ。

投稿ページはいわゆるブログ記事など、投稿した個別記事のページ。

固定ページは投稿ページと

それぞれ違うファイルを作成します。

そして、共通パーツとして切り出したものを読み込むために、それぞれ呼び出すためのコードを書き込みます。

  • header.phpの読み込み:<?php get_header(); ?>
  • footer.phpの読み込み:<?php get_footer(); ?>
  • sidebar.phpの読み込み:<?php get_sidebar(); ?>

こうすることによって、全てのページで切り出したものが読み込まれるようになります。

まとめ

WordPressする手順を説明しました。

ぜひ挑戦してみてください。

あわせて読みたい
【WordPressの勉強方法】初心者から稼げるレベルまでになろう WordPressを勉強してみたいけど、どうやって勉強すればいいのかな?勉強してお金を稼げるようになりたいなぁ。 この記事ではWordPressの勉強方法について解説していきま...

あわせて読みたい
ブログアフィリエイトするなら登録必須のおすすめASP9選【2023年版】 ASPはたくさんあるけど、どのASPに登録すればいいんだろう? この記事では、ブログで稼ぐために登録しておきたいASPを9つ紹介します。 9つ紹介しますが、できれば、全部...
あわせて読みたい
WordPressブログ運営に役立つツールまとめ【無料・有料】 この記事では、WordPressブログ運営に役立つツールを紹介していきます。 有料のものもありますが、ほとんどのものは無料で使えるので、ぜひ使ってみてください。 大きく...
あわせて読みたい
【2022年版】Amazonギフト券のチャージ式(Amazonチャージ)の2つのキャンペーン【ポイントを受け取るまで... Amazonギフト券のキャンペーンが開催中らしいけど、どんなものなのかな?利用できるのであれば、使ってみたい! このような疑問をお持ちの方に、現在Amazonギフト券のチ...
記事の共有・保存はこちら
  • URLをコピーしました!
目次