Oteto Blogのロゴ

WordPressでデモページ(サンプルページ)を作成する方法

HTML・CSSに関する記事などを書いていると、そのサンプルが見られるデモページを作りたくなることがあります。

ということで今回は、WordPressでデモページを作って記事内で公開するまでの方法をまとめました。

1. HTML・CSSファイルを用意

サンプルのフォルダ構成図

今回はサンプルとして、上の赤枠内のフォルダとファイルを作り、それをアップロードしていきます。

「デモページが作れるか試したいだけでHTML・CSSを書くのは面倒」という場合は、以下にサンプルを用意したのでコピペして使ってください⸝。

サンプルHTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>デモページ</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>デモページ</h1>
  </body>
</html>

サンプルCSS

h1 {
  color: red;
}

2. FTPソフトでサーバに接続

「FileZilla」といったFTPソフトを使い、WordPressを設置したサーバに接続します。

もしFTPソフトをまだ使ったことがない場合は、以下の記事の「FTPソフトを使う方法」のセクションを参考にしてください。

【初心者向け】WordPressでCSSを編集・追加する方法

3. ファイルをアップロード

3-1. ドメインのフォルダを探す

ドメインのフォルダを探す

ルートディレクトリの下にある、自分のサイトのドメイン名と同じフォルダを探します。

3-2. 「public_html」フォルダを探す

「public_html」フォルダを探す

3-3. フォルダをドラッグ&ドロップ

フォルダをドラッグ&ドロップ

上のように、先ほど作成したサンプルのフォルダをドラッグしてきて「public_html」のところでドロップします。

これでフォルダのアップロードは完了です。

4. デモページのリンクを記事に貼る

記事の編集画面で「リンクの挿入」を選択

記事の編集画面で「リンクの挿入」を選択します。

先ほどのURLを入力してあげる

あとは先ほどのURLを入力してあげるだけ。これで記事内にデモページへ飛ぶリンクを貼れました。