wordpress에 codepen 펜을 방문 페이지로 추가 하시겠습니까?

Question

저는 웹 개발에 많은 경험이 없지만 그 길을 따라 배우고 있습니다.

나는 wordpress에 새로운 웹 사이트를 만들었고 실제 웹 사이트에 방문 페이지로 추가하고 싶은 멋진 lil codepen 펜을 발견했다.

`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 또는 다음을 만듭니다

빈 콘텐츠가 포함 된 새로운 Wordpress 페이지를 만들고 방금 만든 템플릿을 오른쪽 사이드 바에서 선택하십시오.

자식 테마 폴더에 JS 파일을 만듭니다

은 당신이 그것을 볼로 codepen의 자바 스크립트 부분에서 여기에 코드를 추가합니다. 그런 다음 아이의 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 섹션에 표시 아무것도 붙여 복사합니다.

이제 끝났습니다. 이제 방문 페이지가 완벽하게 작동합니다.