...

【簡単】WordPressでデモページを作成してアップロードする方法

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

どうもおはようポテトです。

よく「デモページはこちら」のようなリンクからデモページを見れるブログがありますよね。

そこで多くの方が疑問に思うことがこちら。

デモページってどうやって作るん?

ということで今回は

「WordPressでデモページを作って公開したい」

「簡単なデモページを記事にリンクで貼りたい」

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

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

ブログ主

早速いってみよう!

 

手順

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

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

 

WordPressでデモページを作成して公開する方法

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;
}

ブログ主

フォルダができたら次はサーバーにアップロードしてくよ

 

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

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

「サーバー」→「再接続」を選びパスワードを入力し接続

「まだFTPソフト使ったことないンゴ…」という方は以下の記事がとても分かりやすいので参考にしてみてください。

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

 

FTPソフトでアップロードする

接続に成功したら…

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

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

 

このようにドラッグしてきて「public_html」のところでドロップさせてあげればアップロードは完了です。

 

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

デモページのURL

先ほどのこの図と”同じ名前で”フォルダやファイルを作った場合、そのデモページのURLは

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

このようになります。

ブログ主

「public_html」入れなくていいよ

 

記事に貼る方法

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

先ほどのURLをペーストしてあげればOK。

これで記事からデモページへ飛ぶことができます⸝⸝- ̫ -⸝⸝

お疲れ様!

ソロモン

実際のウチのデモページがこちら。

参考 デモページぽてちる

 

結論:デモページを作るのは難しくない

以上になります。

参考になりましたらシェアなどしていただけると喜びます!では⸝⸝- ̫ -⸝⸝

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA