プログラムのコードやプラグインの動作確認のためにデモページを用意しているサイトをよく見かけますよね。
ただ、デモページの作り方を調べてもはっきりとしたやり方がわからないんですよね。
というわけで、今回はWordPressの記事中にデモページを作る方法を紹介します。
なお、デモページ作成にはFTPソフトが必要になります。
僕は普段FileZillaを使っているのでFileZillaで解説しますが、他のFTPソフトでも同じようなことができると思います。好きなものを使っていいでしょう。
デモページの作り方
デモページはHTML/CSSファイルなどをサーバーにアップして記事本文とリンクで繋げるというやり方で作ります。
HTML/CSSファイルなどを作成
適当なテキストファイルをコピーして拡張子を.htmlや.cssに変更し、適当な名前をつけてファイルを作成しましょう。
名前はこんな感じでいいと思います↓
- index.html
- style.css
- main.js
デモページに書くコードはHTML/CSSともに必要最低限のコードだけで大丈夫です。
コードのテンプレ
一から作るのが面倒という人にそれぞれのコードのテンプレを載せておきます。コピペOKです。
このテンプレは同じ階層にある「style.css」を読み込みます（もちろんパスを変更しても大丈夫です）。また、jQueryはCDNで読み込んであるので使える状態になっています。
<!doctype>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex,nofollow">
<title>サイト名</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
</body>
</html>
@charset "UTF-8";
body {
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
color: #fff;
}
*, *::before, *::after {
box-sizing: border-box;
}
$(document).ready(function(){
});
これらのファイルを1つのフォルダーにまとめれば準備オーケーです。
フォルダーの名前は半角英数字にしておきましょう。
フォルダーをまとめる
整理しやすいようにフォルダーをまとめます。
オススメのまとめ方はこんな感じ↓
今後別のデモページを作ることも想定して、各デモページをフォルダーごとに分けておきます。
デモページを構成するファイルはdemo-page-1、demo-page-2…というように1つのフォルダーにまとめ、それらをdemo-pagesというフォルダに全てまとめると管理しやすいです。
FTPソフトでサーバーと接続する
いよいよFTPソフトを使って作ったフォルダーをアップしていきます。
以前に接続したことがある場合は一番左上のアイコンから簡単に接続できます。
初めてサーバーにアクセスする場合
初めてWordPressのサーバーにアクセスするときはいろいろと入力する必要があります。
これに関してはサルワカの「【FileZillaの使い方】WordPressでFTPソフトを使おう」がとてもわかりやすかったのでこちらを参照してください（「4-3.新しくサイトを登録する」というところから解説してあります）
サーバーにHTML/CSSファイルなどをアップする
WordPressのサーバーにアクセスしたら「サイト名.com」→「public_html」と進んでください。サイトによって多少違いますが、それっぽいフォルダを頑張って探してください。
「wp-admin」「wp-content」などが入っているフォルダーが見つかればオーケーです。
そしたら先程作ったdemo-pagesフォルダーをこの「public_html」フォルダーにアップします。
フォルダの上にドラッグ&ドロップするとファイルがその中に入ってしまうので、何もない場所かファイルの上あたりにドラッグ&ドロップしてください。
サーバー内に「demo-pages」フォルダーが作られればオーケーです。
デモページと記事本文をリンクで繋げる
記事本文からデモページにアクセスするためには<a>のhref属性にデモページまでのパスを書きます。
この時に注意するのはpublic_htmlまでのパスは書かないということです。
なぜかは知らないですがpublic_htmlまでのパスを書くと404エラーになり、デモページが表示されません。
なので書き方としては
<a href="サイトのURL/demo-pages/demo-page-1/index.html" target="_blank">というようになります。
「target=”_blank”」はリンク先を別のタブで開くことができる属性です。これも入れておくといいと思います。
実際に作ったページがこちら↓
「demo-pages」フォルダ内の「demo-page-1」フォルダの中にあるindex.htmlへのリンクです。デモページまでのリンクはパスを直接記述する形で書きましょう。
これでデモページの完成です。
WordPressに関してさらに詳しく勉強したい人は以下の本が参考になります。
テーマの構造や便利な使い方など、WordPressに関する知識が体系的にまとめられています。
まとめ
他のサイトがどうやっているのかはよくわかりませんが、多分似たようなやり方でやっていると思います。
コードやプラグインの動作確認にぜひデモページを作ってみてはどうでしょうか。
