ワードプレスにcodepenペンをリンク先ページとして追加しますか？

Question

私はウェブ開発に多くの経験はありませんが、途中で学んでいます。

私はwordpressで新しいウェブサイトを作成しました。実際のウェブサイトの前にリンク先ページとして追加したいと思っていた素晴らしいコードが見つかりました。

`https://codepen.io/anon/pen/dZobXy` 

私は私がランディングページと、そのようなを作成してみましょうプラグインを見つけた、と私はショートとしてではなく、それは難しいCSSやJSを追加するために見つけることのHTML部分を追加するために管理している、と私は」手作業でコードを追加するまでは経験の浅い。誰かがチュートリアルへの回答やチュートリアルへのリンクを持っていない限り。

私は実際のウェブサイトの前にランディングページとして「ペン」を追加したいと思います。それは寿司/スイッチです。スイッチを切り替えると、私のページの実際のホームページにリダイレクトされます。

これは可能ですか、現実的ですか？

Answer 1

うまくいけば、あなたは子供のテーマがあります。上に、これと子テーマフォルダ内のPHPファイルの作成

：

<?php 
/** 
* Template Name: My Landing Page 
*/ 
?> 
Copy paste the HTML block of code pen here as you see it 

をされていない場合、あなたは3つのステップを必要とするこの tutorialかは、Google

に見つける他、次のものを作成

空のコンテンツを含む新しいWordpressページを作成し、作成したばかりのテンプレートを右側のサイドバーで選択します。

は、子テーマフォルダ内のjsファイルを作成します。

をあなたがそれを見るように、ここでcodepenのJavascriptのセクションからのコードを追加します。そして、あなたの子供のfunctions.phpファイルに移動して、次の行を追加します。

function my_landing_page_scripts() { 
     wp_enqueue_script('myCustomLandingScript', get_stylesheet_directory_uri() . '/my_js_file_name.js',array('jquery'),1.0, true); 
} 
add_action('wp_enqueue_scripts','my_landing_page_scripts'); 

最後に、あなたの子供のテーマのオープンstyles.cssファイル： そして、ここでは、コードペンのCSSセクションに表示何かをコピー＆ペースト。

これはそれです...今、ランディングページは完全に機能します。