静的なHTMLランディングページを WordPressに追加する方法

かつてはホームページを訪問するとランディングページやイントロページが表示され、英語や日本語版の中から選択するようにした場合が多かったです。 最近では、多言語でサイトを運営しても言語を選択するランディングページを表示するサイトは、目立たないですね。

WordPress サイトにランディングページを追加する方法はいくつかあります。

1. ページテンプレートを使用する
2. プラグインを使用する
3. HTMLページを追加する

ページテンプレートを作成して使用すると WordPressの機能をそのまま利用でき、大丈夫なようです。 静的なHTMLページにランディングページやイントロページを作成した場合、ページテンプレートに変換することができます。 ページテンプレートを作成する方法は、比較的簡単ですが、初心者には難しいことができるようになります。 そのような場合、この記事で説明する方法に基づいてサイトを訪問したユーザーにHTMLで作成されたランディングページを表示することができます。

この作業には、 WordPress サイトとランディングページとして使用するHTMLファイルが必要です。

静的なHTMLランディングページを WordPressに追加する簡単な方法

コンセプトは単純です。

1. HTMLファイルをlandingフォルダにアップロードします。
2. フロントページにアクセスするユーザーをランディングページにリダイレクトされます。

ランディングページにアクセスしたときの言語を分岐させると韓国語バージョンのURLと英語版URL、日本語版URLなどで接続されているボタン（リンク）を追加することができます。 あるいはワンページレイアウトで、別のランディングページを作成して表示することもできます。

私はテスト用に、インターネット上で無料で提供されるHTMLランディングテンプレートをダウンロードして少し修正しました。 （ここで提供されるBootstrapのテンプレートをダウンロードしました。）

ファイルは、FTP / sFTPを介してアップロードすることができます。 FileZillaを使用している場合は、左から右にフォルダをドラッグ＆ドロップします。

SiteGroundナ Bluehost などcPanelを提供する海外のホスティングを使用している場合、 cPanel> File Managerでフォルダを作成し、ファイルを圧縮してアップロードすることができます。 ファイルが多い場合に便利です。

HTMLファイルをlandingフォルダにアップロードした場合HTMLランディングページのURLはwww.example.com/landingになります。

ここで、次のようなコードをテーマの関数ファイルに追加します。

// WordPress index.php 파일을 호출하면 landing 하위 폴더로 리디렉션됨
// Redirect to sub directory 'landing' when a user visits the front page in WordPress
add_action('wp_head','wpmy_redirect_logged_in_users_away_from_home');
function wpmy_redirect_logged_in_users_away_from_home() {
if( is_home() || is_front_page() ) {
$location = get_site_url() . "/landing";
wp_redirect( $location);
exit;
}
}

チャイルドテーマをインストールしてチャイルドテーマの関数ファイルに上記のコードを追加してください（参照).

上記のコードを使用したとき、次のようなエラーが発生する可能性があります。

Warning: Cannot modify header information - headers already sent by (output started at /home/.../wp-content/themes/jupiter/framework/functions/dynamic-styles.php:486) in /home/.../wp-includes/pluggable.php on line 1219

Jupiter テーマで、上記のようなエラーが発生しました。 この場合、次のコードを関数ファイルに追加すると、問題が解決されます（参照).

add_action('init', 'do_output_buffer');
function do_output_buffer() {
ob_start();
}

この方法を使用すると、副作用があります。 メモリ使用量が増え、サイトの反応が遅くなります。

Yes、this has side effects、memory usage is the most obvious、slower site response since the whole page must render before anything is sent。

Can not modify header information エラーが発生した場合、この方法の代わりに、以下の方法を用いることが望ましいと思われる。

header.phpファイルに次のコードを挿入すると、 'Warning: Cannot modify header information - headers already sent...' エラーが発生しません。

$location = get_site_url() . "/landing";
wp_redirect( $location);
exit;

たとえば、index.phpファイルのget_header（）; 部分を get_header('front'); に変更して header-front.php ファイルを XNUMX つ作成して上記のコードを追加するだけです。 当然チャイルドテーマを作って作業します。

今www.example.comを訪問するとwww.example.com/landingページが表示されます。 もしゲストユーザー（非ログインユーザー）に特定のページを示してたい場合は、条件文を使用します。

if (!is_user_logged_in()) {
// 코드
}

条件文を使用すると、さまざまな応用が可能です。 WordPressで提供される関数とフックは、次の WordPress 開発者向けドキュメントを参照してください。

• Code Reference

※一度だけランディングページを表示して、再度アクセスしたとき表示されないようにするにクッキーを設定して利用するようにします。

最後に、

この記事では、ユーザーが個別に製作したHTMLランディングページを WordPressに追加する方法について説明しました。 今後時間が飛ぶときにページテンプレートを使用する方法を取り上げてみましょう。 ページテンプレートを作成する方法は、次の記事を参照してください。

• WordPressで、ページテンプレートの作成

ヘッダ、フッタ、サイトバーなどをなくしたい場合、カスタムページテンプレートを作成ヘッダなどを削除します。 または、CSSを使用して非表示にも可能になります。