【HP制作備忘録】静的なページを作る方法
WordPressを使って動的なページを作ることが多いですが、今回は静的なページを制作したので備忘録をまとめます。
実際に作ってみたサイトはこちら
サーバーアップ
まずはHTMLでコードを書いたらphpに拡張子を変更、もしくは最初からphpで書きます。
そのままサーバーにアップロードします。
最初からサーバーに入っていたindex.htmlは削除しておきましょう。
このWEBスペースへは、まだホームページがアップロードされていません。と表示される場合
「public_html/ドメイン」の中に、そのまま作成したファイルを置くと正常に表示されます。
例）「public_html/ドメイン/site/index.php」
siteを消す
もしくは、indexファイルがないor複数あるのが原因かも。
includeを作る
ヘッダーや、フッターのような共通部はWordPressのようにパーツ化して、色々なページに使うことができます。
header.php を作る
「header.php」というファイルを作り、ヘッダーの中身を「header.php」にコピペします。
このヘッダーを呼び出すためには以下のコードを書きます。
<?php include 'header.php'; ?>footer.php を作る
ヘッダーと同じ要領でフッターも作成します。
呼び出し方↓
<?php include 'footer.php'; ?>もちろん「cta.php」などCTAパーツを作れば、任意のページに共通パーツを置くこともできます。
条件分岐
私は普段はcssを分けて書いています。
- 共通部分のCSS
- ページコンテンツのCSS
- TOPページコンテンツのCSS
その条件分岐は、以下のように書きます。
<?php
$current = basename($_SERVER['SCRIPT_NAME']); // 実行中のファイル名を取得
// index.php の時だけ index.css を読み込むそれ以外はpage.css
if ($current === 'index.php') {
echo '<link rel="stylesheet" href="/css/index.css">';
} else {
echo '<link rel="stylesheet" href="/page.css">';
}
// about.php と service.php の時だけ page.css を読み込む
if (in_array($current, ['about.php', 'service.php'])) {
echo '<link rel="stylesheet" href="/page.css">';
}
// index.php 以外だったら page.css を読み込む （!==の初めをの初めをビックリマークに（なぜか変わらない）
if ($current !== 'index.php') {
echo '<link rel="stylesheet" href="/css/page.css">';
}
?>サブドメインだけBasic認証解除する方法
今回は親ドメインはBasic認証をかけていましたが、サブドメイン（今回のサイト）はBasic認証を外していきます。
※関係ない場合はこの工程はスルー。
.htaccess を作る
場所はサブドメインの中。index.phpなどのファイルと同じ場所。
例）「public_html/サブドメイン/.htaccess」
以下を入力でサブドメインのみ、basic認証を解除できます。
# 認証を解除（サブドメ用）
Require all granted
<IfModule mod_access_compat.c>
Order allow,deny
Allow from all
Satisfy any
</IfModule>URLは拡張子を隠したい…。
URLが「site/index.php」と拡張子がついているのはちょっとカッコ悪いので、.htaccessファイル内で以下の記述をします。
# 拡張子 .php を隠す
RewriteEngine On
Options -MultiViews
# 既存ファイルやフォルダはそのまま通す（画像・CSS・JSなど）
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]パスの注意点
WordPressであれば以下のタグを使うのですが…今回はどう書くのだ？とちょっと引っかかってしまいました。
<?php echo home_url( '/' );?>
<?php get_template_directory_uri() ?>イメージやリンクは必ず/から始める
先頭 / が付くと サブドメインのルートからのパスになります。
つまり / はページのTOPになると言うこと。
<!-- TOPに戻る時 -->
<a href="/">TOP</a>
<!-- ABOUTに行く時 -->
<a href="/about">ABOUT</a>注意点は画像のパスも必ず先頭に / がいること。
確実なのは絶対パス
結構絶対パスが安心…と言う場合は以下のやり方。
「config.php」というファイルを作り、以下を記述します。
<?php
if (!defined('BASE_URL')) {
$scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
define('BASE_URL', rtrim($scheme . '://' . $_SERVER['HTTP_HOST'], '/'));
}
?>
// 表示したいファイル //
<?php require_once __DIR__ . '/config.php'; ?>
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/style.css">ちなみに、現在、実行中のファイルのパスは、__DIR__で取得できます。
まとめ
ワードプレスで作ることが多いので、分からないことだらけでしたが手間はワードプレスの方がかなり多いと思いました。
PHPも忘れているので、また勉強しよう！
この記事を書いた人
広島県呉市のホームページ制作｜leben（小口 悠）
1992年山口県生まれ。広島を拠点に活動するフリーランスWebデザイナー。ホームページ制作歴5年以上。 中小企業や個人事業主向けに、WordPressでのオリジナルデザイン・SEO対策を行っています。
2025.9.11
2025.9.25