【たった4ステップ】WordPressでデモページを作成する方法

WordPressでデモページを作る方法

くるみ

デモページってどうやって作るん?
ということで今回は

  • デモページはこちら」的なものをたまに見るけど、そのページってどうやって作るの?
  • WordPressでデモページを作って公開したい
  • 簡単なデモページを記事にリンクで貼りたい

という方に向けてWordPressでデモページを作成し公開する方法をまとめました。

本記事を参考にすれば、簡単にデモページを作って記事内で公開することができます。

WordPressでデモページを作成する方法

デモページを公開するまでの手順

手順はいたってシンプルかつ簡単です。

手順
step1
HTML・CSSファイル用意する
step2
FTPソフトを使って接続する
step3
FTPソフトでアップロードする
step4
デモページのリンクを記事に貼る

手順を押さえたら、早速本題に移っていきましょう。

step1:HTML・CSSファイルを用意する

HTML・CSSファイルを用意する

上の赤枠内のフォルダとファイルを作り、それをアップロードするのが最もオススメかと思います。

  • html・cssファイルを作る(名前はなんでもOK)
  • それを一つのフォルダにまとめる(demo1)
  • 更にそのデモページ達をまとめるフォルダを作る(demos)
ちなみにjsファイルを作るかは自由だよ

くるみ

「デモページが作れるか試したいだけで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">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  </head>
<body>
  <h2 class="title">デモページだよ</h2>
  <script src="script.js"></script>
</body>
</html>

CSSファイルのサンプル

.title{
  color:#888;
  text-align: center;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
}
.title:before{
  font-family: "Font Awesome 5 Free";
  content: "f105";color:#fcd69e;
  font-weight: 900;
  padding-right:7px;
  padding-left:10px;
}

フォルダが用意できたら、次はそれをサーバーにアップロードしていきます。

step2:FTPソフトを使ってサーバーに接続する

次にその用意したファイルをアップロードするのに必要な「FTPソフト」でサーバーに接続します。

「まだFTPソフト使ったことない」という場合は以下の記事を参考にしてみてください。

参考 WordPressのFTP設定のやり方全手順|FileZillaを使った接続方法は?アフィブログ

step3:FTPソフトを使ってファイルをアップロードする

step1
サーバに接続する

サーバに接続する

「サーバー」→「再接続」を選びパスワードを入力しサーバに接続します。
step2
ドメインのフォルダを探す

自分のサイトのドメイン名と同じフォルダを探す

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

「public_html」フォルダを探す

そのフォルダの中に「public_html」というフォルダがあるので、そこに先ほど作ったフォルダをアップロードしていきます。
step4
public_htmlにドラッグ&ドロップする

上のように、ドラッグしてきて「public_html」のところでドロップします。
これでフォルダのアップロードは完了です。

step4:デモページのリンクを記事に貼る

URLの書き方

先ほどのこの図と同じ名前でフォルダやファイルを作った場合、そのデモページのURLは以下のようになります。

(自分のサイトのドメイン名)/demos/demo1/index.html

「public_html」はパスに含めなくて大丈夫です。

記事内にリンクを貼る

step1
リンクを挿入する

記事の編集画面で「リンクの挿入」を選択します。
step2
URLをペースト

先ほどのURLを貼ってあげます。

これで記事にデモページへ飛ぶリンクを貼れました。

お疲れ様!

くるみ

実際に記事内に埋めたデモページはこちらです。

まとめ

以上、WordPressでデモページを作成し公開する方法でした。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。