() translation by (you can also view the original English article)
Ang isa sa mga layunin ng isang website ay upang makabuo ng mga lead. Maaaring mangyari ito sa ilang mga paraan: maaari kang magkaroon ng isang kabuuan para sa mga tao na makipag-usap sa iyo para sa isang partikular na kasabihan, maaari mong hikayatin ang mga tao na gumawa ng isang account kapag bumibili ng mga kagamitan sa iyong site, o maaari kang magkaroon ng pangunahin panghikayat na binibigyan mo ng mga tao sa bumalik sa pagbibigay ng kanilang email address.
Kung gumagamit ka ng lead magnet o ikaw ay may isang pahina sa iyong site na partikular na dinisenyo upang magbenta ng isang gamit na kung saan ay isang subscription, isang serbisyo o isang produkto na nais mong pigilan ang mga tao mula sa pagpindot, ang layo mula sa pahinang iyon nang walang pagbili o pagbibigay sa iyo ng kanilang email address.
Ang ganitong uri ng pahina ay tinatawag na isang landing page. Ito ay isang pahina na idinisenyo upang maging bahagi ng iyong marketing funnel, upang makabuo ng mga lead o magbenta ng isang bagay. Ang layunin ng pahina ay napaka-simple lamang, at hindi mo nais ang mga tao na gumawa ng ano mang bagay kapag nakita nila ito.
Upang paliitin ang mga pagkakataong mag-nabigasyon ang mga tao bago sila bumili o naka-rehistro, gusto mong bawasan ang bilang ng mga link sa iyong landing page. Dapat walang mga widget, walang mga menu ng nabigasyon. Hindi mo nais ang mga tao na iwan ito upang mamasyal sa iyong site. Kahit na ang link sa home page sa itaas ay kailangang nandodoon, kasama ang anumang mga link sa iyong colophon sa pinakailalim ng pahina.
Sa pagtuturo na ito ipapakita ko sa iyo kung paano lumikha ng isang template ng pahina para sa iyong tema. Ito ay hindi naglalaman ng mga link sa anumang bagay sa labas ng nilalaman ng pahina. Ang mga bisita sa pahina ay walang pagpipilian ngunit upang pindutin ang pindutang Bumili o Mag-rehistro.
Upang gawin ito kami ay nagtatrabaho sa ilang mga file sa aming tema:
- Lilikha kami ng bagong gawa na template ng pahina para sa mga landing page.
- Papalitan namin ang header ng datos kaya kapag ipinakita ang template na iyon, wala ang mga link.
- Papalitan namin ang datos ng ibabang parte upang alisin ang mga widget at anumang mga link sa colophon.
Magsimula na tayo!
Ang iyong mga kakailanganin
Upang sumunod sa pagtuturo na ito, kakailanganin mo ang:
- Ang pag-install ng WordPress ay hindi maaaring idagdag ang landing page sa iyong kasalukutan na site hanggang makita mo ito.
- Isang tema na maaari mong palitan. Kung ito ay isang pang-ibang parte na tema, lumikha ng tema ng bata at palitan iyon.
- Isang nakapagpapalit ng koda.
Ang Simula na Pahina
Gumawa ako ng isang hindi totoong pahina sa aking site para magamit bilang isang landing page. Narito kung ano ang hitsura nito gamit ang normal na template ng pahina:
Sa panahon ng pagtuturo na ito, aalisin ko ang menu ng nabigasyon, sidebar at ang mga lugar ng widget sa ibaba, at tiyaking wala sa labas ng nilalaman ang isang napipindot na link.
Paano Gumawa ng isang Landing Template na Pahina
Una kailangan mong lumikha ng isang template ng landing page. Gawin ito sa isa sa dalawang paraan:
Kung nagtatrabaho ka sa iyong sariling tema, gumawa ng kopa na page.php at palitan ang pangalan nito.
Kung nagtatrabaho ka sa isang pangatlong parte na tema, lumikha ng tema ng bago. Gumawa ng isang kopya na page.php mula sa tema ng luma sa tema ng bago at palitan ang pangalan nito.
Huwag bigyan ito ng isang pangfalan ng datos na nagsisimula sa page- dahil malito nito ang WordPress kung sa ibang pagkakataon ay lumikha ka ng isang pahina gamit ang pangalan na iyong ginagamit pagkatapos ng page-. Tatawagin ko ang aking landing-page-template.php.
Ngayon buksan ang iyong template na datos. Idagdag ang linyang ito ng koda sa itaas:
1 |
*/ |
2 |
Template Name: Landing Page Template |
3 |
/* |
Itabi ito at makikita mo na ngayon na maaari mong piliin ang bagong template kapag lumikha ka ng isang bagong pahina sa iyong site:
Tanggalin ang sidebar na tawag mula sa datos. Buksan ang linyang ito:
1 |
<?php get_sidebar(); ?> |
... at tanggalin ito. Itabi ang iyong datos. Ang iyong bagong template ng pahina ay handa na. Ngunit hindi ka pa nakagagawa.
Pagpapalit ng Datos ng Itaas
Ang susunod na hakbang ay palitan ang
header.php na datos, upang tanggalin ang ano mang mga link kapag ginamit ang
template ng pahina na iyon. Para sa mga ito gagamitin namin ang
is_page_template() kondisyon na pangalan.
Buksan ang iyong header.php na datos at hanapin ang koda para sa pamagat ng iyong site.
Tandaan: Kung gumagamit ka ng tema ng ikatlong partido, lumikha ng header.php na datos sa tema ng iyong bagong isang kopya ng isa mula sa tema ng luma at palitan iyon.
Sa aking tema ay mukhang ganito:
1 |
<a href="<?php echo site_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> |
2 |
<?php bloginfo( 'name' ); ?> |
3 |
</a>
|
Palitan ito upang magbasa ito ng ganito, na gumagawa ng mga pagsasaayos para sa iyong sariling tema:
1 |
<h1 id="site-title"> |
2 |
|
3 |
<?php if ( is_page_template( 'landing-page-template.php' ) ) { |
4 |
bloginfo( 'name' ); |
5 |
}
|
6 |
else { ?> |
7 |
<a href="<?php echo site_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> |
8 |
<?php bloginfo( 'name' ); ?> |
9 |
</a>
|
10 |
<?php } ?> |
11 |
|
12 |
</h1>
|
Kung ginamit ang template ng landing page, ipapakita pa rin ang pangalan ng site, ngunit hindi ito isasalin bilang isang link.
Kailangan mo ring tanggalin ang nabogasyon. Hanapin ang koda para sa iyong pangunahing menu. Sa aking tema ay mukhang ganito:
1 |
<nav class="menu main"> |
2 |
|
3 |
<div class="skip-link screen-reader-text"> |
4 |
<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>"><?php _e( 'Skip to content', 'tutsplus' ); ?></a> |
5 |
</div>
|
6 |
|
7 |
<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> |
8 |
|
9 |
</nav><!-- .main --> |
Palitan ito upang ang lahat ng koda para sa menu ay ilalagay sa loob ng isang kondisyon na pangalan na sumusuri na hindi namin ginagamit ang template ng landing page:
1 |
<?php if ( ! is_page_template( 'landing-page-template.php' ) ) { ?> |
2 |
|
3 |
<nav class="menu main"> |
4 |
|
5 |
<div class="skip-link screen-reader-text"> |
6 |
<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>"><?php _e( 'Skip to content', 'tutsplus' ); ?></a> |
7 |
</div>
|
8 |
|
9 |
<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?> |
10 |
|
11 |
</nav><!-- .main --> |
12 |
|
13 |
<?php } ?> |
Kung mayroong anumang iba pang mga menu o mga link sa iyong pang-itaas na datos, palibutan ang mga may parehong kondisyunal na pangalan ang pareho para sa anumang mga lugar ng widget.
Ngayon itabi ang header.php na datos at isara ito.
Pagpapalit ng Datos ng sa Ibaba
Ang huling yugto ay upang matiyak na ang anumang mga lugar ng widget ay hindi ipinapakita sa pang-ibaba.
Gagamitin namin ang parehong kondisyunal na pangalan sa mga lugar lamang na widget ng kalalabasan kung hindi gumagamit ng template ang landing page.
Buksan ang template ng iyong footer.php (o lumikha ng isang kopya sa tema ng iyong pang-bata kung may kaugnayan).
Hanapin ang koda upang palabasin ang iyong mga widget. Narito ang kalalabasan:
1 |
<div class="fatfooter"> |
2 |
|
3 |
<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?> |
4 |
<div class="one-third left widget-area first"> |
5 |
<?php dynamic_sidebar( 'first-footer-widget-area' ); ?> |
6 |
</div><!-- .first .widget-area --> |
7 |
<?php } ?> |
8 |
|
9 |
<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?> |
10 |
<div class="one-third left widget-area second"> |
11 |
<?php dynamic_sidebar( 'second-footer-widget-area' ); ?> |
12 |
</div><!-- .first .widget-area --> |
13 |
<?php } ?> |
14 |
|
15 |
<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?> |
16 |
<div class="one-third left widget-area third"> |
17 |
<?php dynamic_sidebar( 'third-footer-widget-area' ); ?> |
18 |
</div><!-- .first .widget-area --> |
19 |
<?php } ?> |
20 |
|
21 |
</div>
|
Ngayon balutin na sa isang kondisyon na pangalan sa parehong paraan na iyong ginawa sa pang-itaas na datos.
1 |
<?php if ( ! is_page_template( 'landing-page-template.php' ) ) { ?> |
2 |
|
3 |
<div class="fatfooter"> |
4 |
|
5 |
<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?> |
6 |
<div class="one-third left widget-area first"> |
7 |
<?php dynamic_sidebar( 'first-footer-widget-area' ); ?> |
8 |
</div><!-- .first .widget-area --> |
9 |
<?php } ?> |
10 |
|
11 |
<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?> |
12 |
<div class="one-third left widget-area second"> |
13 |
<?php dynamic_sidebar( 'second-footer-widget-area' ); ?> |
14 |
</div><!-- .first .widget-area --> |
15 |
<?php } ?> |
16 |
|
17 |
<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?> |
18 |
<div class="one-third left widget-area third"> |
19 |
<?php dynamic_sidebar( 'third-footer-widget-area' ); ?> |
20 |
</div><!-- .first .widget-area --> |
21 |
<?php } ?> |
22 |
|
23 |
</div>
|
24 |
|
25 |
<?php } ?> |
Susunod, kailangan nating baguhin ang colophon. Maaaring kasama dito ang isang link sa iyong home page at/o sa WordPress site.
Narito ang kalalabasan:
1 |
<section class="colophon" role="contentinfo"> |
2 |
<small class="copyright left"> |
3 |
Copyright <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> |
4 |
<?php bloginfo( 'name' ); ?> |
5 |
</a>
|
6 |
</small><!-- #copyright --> |
7 |
|
8 |
<small class="credits right"> |
9 |
Proudly powered by <a href="https://wordpress.org/">WordPress</a>. |
10 |
</small><!-- #credits --> |
11 |
</section><!--#colophon--> |
Gumamit ngayon ng isang kondisyon tag upang palabasin ang colophon nang walang mga link sa landing page:
1 |
<?php if ( is_page_template( 'landing-page-template.php' ) ) { ?> |
2 |
|
3 |
<section class="colophon" role="contentinfo"> |
4 |
<small class="copyright left"> |
5 |
Copyright <?php bloginfo( 'name' ); ?> |
6 |
</small><!-- #copyright --> |
7 |
|
8 |
<small class="credits right"> |
9 |
Proudly powered by WordPress. |
10 |
</small><!-- #credits --> |
11 |
</section><!--#colophon--> |
12 |
|
13 |
<?php } |
14 |
|
15 |
else { ?> |
16 |
|
17 |
<section class="colophon" role="contentinfo"> |
18 |
<small class="copyright left"> |
19 |
Copyright <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> |
20 |
<?php bloginfo( 'name' ); ?> |
21 |
</a>
|
22 |
</small><!-- #copyright --> |
23 |
|
24 |
<small class="credits right"> |
25 |
Proudly powered by <a href="http://wordpress.org/">WordPress</a>. |
26 |
</small><!-- #credits --> |
27 |
</section><!--#colophon--> |
28 |
|
29 |
<?php } ?> |
Surrin ng dalawang beses ang datos mo para sa anumang iba pang mga link at kung mayroong ano pa man, balutin ang mga ito sa isang kondisyon na pangalan.
Pagsasaayos ng Pag-istilo
Maaari mong makita na ang pag-alis ng
sidebar mula sa iyong template ng landing page, kailangan mong ayusin ang
estilo para sa nilalaman. Kung ang lugar ng nilalaman ay tumatagal pa rin ng
dalawang tatluhan ng screen, maaari mong gamitin ang klase ng katawan na binuo
ng WordPress para sa template ng pahina upang ayusin ito.
Kaya sabihin nating mayroon kang sumusunod na estilo para sa iyong nilalaman at sidebar:
1 |
.content { |
2 |
float: left; |
3 |
width: 65%; |
4 |
}
|
5 |
.sidebar { |
6 |
float: right; |
7 |
width: 32%; |
8 |
}
|
Kakailanganin mong magdagdag ng ilang karagdagang estilo sa ibaba upang maabot ang klase ng nilalaman sa iyong template ng landing page:
1 |
.page-template-landing-page-template .content {
|
2 |
width: 100%; |
3 |
} |
Kakailanganin mong ayusin ito upang isaalang-alang ang anumang mga margin o padding na ginagamit mo ngunit nagbibigay ito sa iyo ng pangkalahatang ideya.
Ang Huling Pahina
Narito ang aking landing page nang walang anumang mga link:
Mukhang medyo walang laman sa ngayon ngunit mapupuno mo ito ng maraming maganda na nilalaman na may nais manghikayat sa mga tao na bumili o mag-rehostro, mga pulang pindutan, na uri ng bagay! At makikita mo na walang makakaabala sa bisita mula sa nilalaman ng pahina.
Umaasa ako na ang iyong landing page ay nakakaranas ka ng maraming mapagkaka-kitaan. Galingan mo!
