なんと！ワードプレス人気有料WordPressテーマ「ストーク」ですが、デザイン性やカスタマイズに優れているだけではなく
ランディングページを作成できる機能も兼ね備えているんです！
ランディングページとは、記事や固定ページとは別の、訪れた人に一番読んでもらいたい特設ページのことを言います。
また、元のランディングの意味としては「着地」の意味があって(参照：goo辞書)、まさにユーザーが着地するページということになりますね！
もっと具体的にいうと、よくネット上の広告を踏むと、そのサービスの本来のホームページとはちょっと違う、若干長めのページに飛ぶことがありますよね？
こういうやつです。
ストークのランディングページの機能を使うと、普段の記事ページとは違ったこういった自由なページが作れちゃうんです( ´∀｀)
てことは・・？自由なページが作れるのなら、通常の一からHTMLで製作したウェブサイトもこれで簡単にアップできるってことで・・
制作したウェブサイトのアップロード用のサーバーを別途契約する必要がなくなるので、サーバー代を浮かせられてしまうっていう最高すぎるお話！！！
ってことで、今回はその「製作したウェブサイトのランディングページへのアップの方法」といった視点で記事を書かせていただきます★
また、今回の記事のゴールとしては「アップしたサイトを無事に表示させる！」というところまでになります。アップ後のサイト更新や編集の方法についてはまた次回にでもお送りいたします★
目次
ステップ1:ワードプレス管理画面でランディングページ作成
まずはじめにワードプレス管理画面でランディングページを作成します。
スクショの通り、タイトルとパーマリンクを任意のものに設定し、本文は特に何も記述せず作成してください。
ステップ2:制作したwebサイトのフォルダを準備
まずは、通常通りに制作したwebサイトのフォルダ一式を準備してください。
後々説明しますが、サーバーアップロード時に必要なのですが、zipにはせずに準備してデスクトップなりに置いて置いてください！
ステップ3:制作したwebサイトのindex.htmlをsingle-post_lp.phpに記述し、フォルダ内に保存する
制作したHTMLファイルをphpに書き換える
まず、ワードプレスは基本phpファイルが使われるため、制作したHTMLファイルをphpに書き換える必要があります。
そこで、書き換えの際、記述されているHTMLをそのまま記述するのではなく、１点だけ追加しなければならない記述があります。
まず、HTML内の相対パスの前に必ずこちらのコードを記述してください。
<?php echo get_stylesheet_directory_uri(); ?>/
このようにcss、img、jsを呼び込む相対パスの箇所に入れ込んでください。
※絶対パスの箇所には特に記述不要です。
この記述が必要な理由としては、「ワードプレスのサーバーに置かれている」img,css,jsファイルを読み込んでください！という指示をしなければならない為です。(この辺ピンと来ない人は、「とりあえず相対パスの前にこれを記述しなければならないんだろうな」くらいに認識しておいてください！)
そこで、そのファイル名は必ずsingle-post_lp.phpと登録してください！
こちらのsingle-post_lp.phpの中に、制作したwebサイトのHTMLをコピペ記述して、先ほどデスクトップに置いた制作webサイトのフォルダ内に入れます(index.htmlの方は削除してください)。
こんな感じ。
ステップ4:FileZillaで運営サイトのサーバーにアップロード
そして、このデスクトップに置いている制作webサイトのアップロードに入ります。
サーバーへのアップロードにはFilleZillaを利用します。
リンクに飛ぶとこのようなページが出てくるので、こちらでダウンロードしてください。
ダウンロードが終わったら、FileZillaの初期設定をして下さい。(元々持っているワードプレスのサイトを既にFileZillaを使ってアップロードされた方は新たにセッティングしなくてもおkです。)
初期設定の方法は利用サーバーによって若干違うとは思いますが、別途サーバーのサイトなりで確認して下さい。
私はエックスサーバーを利用しているのでその参考記事を添付しておきます。
そして、ファイルのアップの仕方としては、まずデスクトップに置いた制作webサイトのフォルダを開きます。
そして、そのデスクトップに置いている制作webサイトの中身を一式を、既にアップロードしているストークの子テーマのフォルダ内にぶち込みます♡
ストークの子テーマは、スクショの通り、
public_html→wp-content→themas→jstork_custom(これがストーク子テーマフォルダ)
という順番に開けば確認できます。
ちなみに、ストーク子テーマのフォルダ内にはデフォルトで
の３つのファイルが入っていますが、こちらは必ず残したままにして下さい！
ステップ5:ステップ１で作成したランディングページのURLをクリックして確認
あとは、ステップ１で作成したランディングページのURLをクリックすると、制作したwebサイトがみれちゃいま〜〜す！！
ついでにこのランディングページ機能を使って私が実際に制作＆アップロードしたwebサイトはこちら↓
https://letsflylinaya.com/portfolio/
現在上記サイトは一時閉鎖中ですので直接は閲覧いただけません・・。ご迷惑おかけ致します。
ただ、このメソッドでサイトが開設できるのは事実です！
！注意！
そして、なんとなくここまで見てお分かりかと思いますが、ランディングページの機能を使った場合、htmlが記述されたsingle-post_lp.phpのファイルが1つしか作れないので、今回のメソッドは「シングルページタイプ」のサイトもしくは本当にランディングページのように１ページで完結するようなサイトを制作する場合に使える機能になります。
ですが！！実は実は・・！
なんならむしろ、ランディングページをよりももっと汎用性が高い機能です・・(先に言えよって話ですが、今回は一旦「ランディングページ」の使い方自体をレクチャーさせていただきました！w)
それは、「固定ページ」という機能でして、これを利用することで下層ページがどんなに多いwebサイトでも簡単にアップロードできちゃうんです( ´∀｀)
その、固定ページを利用したwebサイトの作り方については、別途記事を書いたのでそちらをご覧になってみてください★
*現在執筆中ですので今しばらくお待ちを！
また、このランディングページや固定ページの機能は、既存のサーバーとドメインを使ってアップすることになるので、もちろん独自ドメインのようなものは取れず、URLも無条件で
「http://●●(元々のサイトドメイン).com/post_lp/●●」というように、なりますのでご注意を！
なので、これが特に気にならないって場合のみ、サーバー代も節約できてかなりイイってお話です！
そんな画期的なストークテーマのリンクはこちら！
ついでに私が愛用しているエックスサーバーのリンクも貼っておきますね( ´∀｀)
ではでは〜〜( ´∀｀)
「韓国のアートカルチャー」を、デザイン・旅・教養・ファッションなど あらゆる切り口から解剖していくマガジン。「韓国のいろんなアート」をLiNA独自の目線でお届けします。
LiNAの「韓国でのノマド生活」を、仕事・生活・人生などといった、あらゆる切り口からお届けするマガジン。韓国ノマド生活のTIPSや日々の学びを独自の目線で記録します。
