맞춤형 WordPress 방문 페이지를 코딩하는 쉬운 단계
게시 됨: 2021-01-28좋은 랜딩 페이지를 만드는 것이 쉽지 않다는 것을 배우는 데 웹 디자인에 대한 많은 경험이 필요하지 않습니다. 방문 페이지가 무엇에 관한 것인지에 대한 명확한 아이디어가 있어야 합니다 . 그리고 방문자를 이해하고 전환에 대한 관심을 유도해야 합니다. 다행히 웹 코딩의 기본 사항에 익숙하다면 원하는 대로 페이지를 최적화하는 데 필요한 자유를 누릴 수 있습니다. 이를 염두에 두고 맞춤 WordPress 방문 페이지를 코딩하는 것이 무엇인지 살펴보겠습니다 .
랜딩페이지의 중요성
코딩의 특정 단계를 살펴보기 전에 먼저 좋은 랜딩 페이지를 갖는 것이 중요한 이유에 대해 자세히 설명하겠습니다. 괜찮은 랜딩 페이지를 갖는 것의 중요성을 언급하지 않는 웹사이트 구축에 대한 온라인 가이드는 거의 없습니다. 웹 사이트가 제품 판매, 서비스 제공 또는 데이터 수집에 관한 것이든 좋은 방문 페이지가 있어야 합니다.
불행히도 좋은 랜딩 페이지를 만드는 것은 쉽지 않습니다. 착륙이 어떠해야 하는지에 대한 명확한 아이디어가 있어야 합니다. 그리고 청중을 전환으로 안내하려면 청중을 이해해야 합니다. 제대로 최적화되지 않은 방문 페이지는 실적을 상당히 저하시키고 잠재적으로 뛰어난 온라인 입지를 망칠 수 있습니다. 방문 페이지는 일반적으로 방문자가 고객으로 전환되기 전의 마지막 단계 입니다. 그러니 최선을 다해 좋은 결과를 얻으세요. 운 좋게도 웹 프로그래밍의 기본 사항을 알고 있다면 맞춤형 랜딩 페이지를 쉽게 코딩할 수 있습니다. 이렇게 하면 일반적으로 실제로 기능하는 페이지에 필요한 상당한 양의 자유가 제공됩니다 . 따라서 이를 염두에 두고 WP 랜딩 페이지를 만드는 데 필요한 코드를 단계별로 살펴보겠습니다.
사용자 정의 WordPress 방문 페이지 코딩
우리가 설명할 단계는 매우 간단하지만 항상 전문 웹 디자이너와 상담하는 것을 고려해야 합니다. 특정 웹사이트는 백그라운드에서 실행되는 수많은 플러그인으로 인해 상당히 복잡할 수 있습니다. 그리고 이러한 플러그인 중 일부는 수행 중인 작업이 확실하지 않은 경우 잠재적으로 문제를 일으키거나 경험할 수 있습니다. 관리 영역에 액세스하지 않고도 플러그인을 비활성화할 수 있지만 너무 많은 문제를 일으키지 않도록 해야 합니다. 문제가 발생하면 전문 웹 디자이너에게 문의하여 도움을 받으십시오.
자식 테마 만들기
이론적으로 완전히 새로운 상위 테마를 만들 수 있지만 하위 테마를 사용해야 합니다. 사용자 정의에 훨씬 더 적합하므로 고유한 방문 페이지를 더 자유롭게 만들 수 있습니다. 자식 테마를 만드는 방법을 다루었으므로 여기에서 다시 다루지 않습니다. 우리가 언급할 유일한 것은 계속 진행하려면 자식 테마 디렉토리에 style.css 및 functions.php 파일이 모두 있어야 한다는 것 입니다.
Style.css 파일 빌드
style.css 파일에 다음 코드를 추가하기만 하면 됩니다.
/*
테마 이름: 방문 페이지 테마
설명: 사용자 정의 방문 페이지가 있는 하위 테마
작성자: 기본 작성자
저자 URI: https://www.wpfullcare.com
*/
Functions.php 파일 빌드
functions.php 파일에 다음 코드를 추가해야 합니다. 이렇게 하면 자식 스타일 시트 파일을 등록할 수 있습니다.
<?php
// 상위 테마 스타일 //
// https://codex.wordpress.org/Child_Themes //
기능 theme_enqueue_styles() {
$parent_style = '부모 스타일';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( '자식 스타일',
get_stylesheet_directory_uri() . '/스타일.css',
배열( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
자식 테마 설치 및 활성화
이 작업이 완료되면 하위 테마 설치 및 활성화를 진행할 수 있습니다. 일반적으로 WordPress 테마와 관련하여 다른 WP 웹 사이트에서 로컬로 테스트하려고 합니다. 언급했듯이 사고는 발생합니다. 그리고 당신 은 정말로 당신 의 웹사이트 를 비활성화 하지 말아야 합니다 . 로컬 WordPress 사이트를 설정했으면 테마 업로드를 진행합니다. 활성화하면 하위 테마가 작동하고 스타일을 추가할 수 있는지 확인하십시오. style.css 파일로 이동하여 코드의 일부를 변경하여 작동하는지 확인하십시오.
사용자 정의 페이지 구축
모든 것이 정상이면 하위 테마에서 사용자 정의 페이지를 계속 생성할 수 있습니다. 그렇게 하려면 자녀의 테마에 새 파일을 만들어야 합니다. 그렇게 하면 page-landing.php로 저장합니다. 해당 파일에 다음 코드를 추가해야 합니다.
<?php
/**
템플릿 이름: 방문 페이지
**/
?>
이제 템플릿 드롭다운으로 이동하여 메뉴에서 방문 페이지를 선택합니다. 배경으로 사용할 주요 이미지를 선택해야 합니다( 나중에 실험할 수 있으므로 지금은 크고 단순한 이미지를 선택하십시오). 그런 다음 사본을 추가하고 추가된 페이지를 게시하십시오. 지금 페이지를 검토하려고 하면 검은색 화면만 표시됩니다. 이것은 여전히 page-landing.php에 다음 마크업을 추가하지 않았기 때문입니다.
<div id="방문 페이지" class="hfeed 사이트">
<div class="사이트 브랜딩">
<p class=”site-title aligncenter”><a href=”<?php echo esc_url( home_url( '/' ) ); ?>” rel=”홈”><?php 블로그 정보( '이름' ); ?></a></p>
</div><!– .사이트 브랜딩 –>
추가하고 페이지를 미리 보면 흰색 배경과 큰 배경 이미지와 함께 사이트 제목이 표시되어야 합니다.
콘텐츠 표시
방문 페이지에 나머지 콘텐츠를 표시하려면 page-landing.php에 다음 마크업을 추가해야 합니다. 제대로 작동하려면 <!– .site-branding –> 줄 바로 아래에 이렇게 해야 합니다.
<div class="사이드바 사이드바 뇌물">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1 class="landing-title"><?php the_title("); ?></h1>
<?php the_content(); ?>
<!– https://codex.wordpress.org/Function_Reference/wp_link_pages –>
<?php 그 동안; ?>
<?php endif; ?> <!– mdl-cell-8 //#기본 –>
</div>
사용자 정의 WordPress 방문 페이지 코딩이 거의 완료되었습니다. 스타일을 설정하기만 하면 됩니다. 이를 수행하는 가장 간단한 방법은 style.css 파일과 이에 필요한 코드만 사용하는 것입니다. 페이지가 표시되는 방식에는 말 그대로 무한한 옵션이 있으므로 따라야 할 엄격한 예는 제공하지 않습니다. 대신에 마음에 드는 스타일을 찾아서 복사하는 것이 좋습니다 . 그렇게 하면 기능의 여러 측면을 파악할 수 있습니다.