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」フォルダを探す
3-3. フォルダをドラッグ&ドロップ
上のように、先ほど作成したサンプルのフォルダをドラッグしてきて「public_html」のところでドロップします。
これでフォルダのアップロードは完了です。
4. デモページのリンクを記事に貼る
記事の編集画面で「リンクの挿入」を選択します。
あとは先ほどのURLを入力してあげるだけ。これで記事内にデモページへ飛ぶリンクを貼れました。