Pași simpli pentru codarea unei pagini de destinație WordPress personalizată

Nu este nevoie de multă experiență cu designul web pentru a afla că crearea unei pagini de destinație bună nu este ușoară. Trebuie să aveți o idee clară despre ce ar trebui să fie pagina dvs. de destinație . Și trebuie să vă înțelegeți vizitatorii și să le îndreptați atenția către conversie. Din fericire, dacă sunteți familiarizat cu elementele de bază ale codificării web, veți avea libertatea necesară pentru a vă optimiza pagina după cum credeți de cuviință. Având în vedere asta, să vedem despre ce este vorba despre codificarea unei pagini de destinație WordPress personalizată .

Importanța unei pagini de destinație

Înainte de a trece peste pașii specifici de codare, să detaliem mai întâi de ce este important să aveți o pagină de destinație bună. Nu există aproape un ghid online pentru construirea de site-uri web care să nu menționeze importanța vitală de a avea o pagină de destinație decentă . Indiferent dacă site-ul dvs. este despre vânzarea unui produs, oferirea unui serviciu sau culegerea de date, trebuie să aveți o pagină de destinație bună.

Din păcate, crearea unei pagini de destinație bună nu este ușoară. Trebuie să ai o idee clară despre cum ar trebui să fie aterizarea ta. Și trebuie să vă înțelegeți publicul pentru a-l ghida către conversii. O pagină de destinație prost optimizată vă poate scădea considerabil performanța și vă poate distruge prezența online, altfel stelară. Rețineți că pagina de destinație este de obicei ultimul pas înainte ca vizitatorul dvs. să se transforme în client . Așadar, fă tot posibilul ca să fie cât mai bun posibil. Din fericire, dacă cunoașteți elementele de bază ale programării web, puteți codifica cu ușurință o pagină de destinație personalizată. Acest lucru vă oferă o cantitate considerabilă de libertate, care este de obicei necesară pentru o pagină cu adevărat funcțională . Deci, având în vedere acest lucru, să mergem pas cu pas în codul necesar pentru crearea unei pagini de destinație WP.

Codarea unei pagini de destinație WordPress personalizată

Deși pașii pe care îi vom schița sunt destul de simpli, ar trebui să vă gândiți întotdeauna să consultați un designer web profesionist. Anumite site-uri web pot fi destul de complicate cu numeroase plugin-uri care rulează în fundal . Și unele dintre aceste pluginuri pot cauza sau întâmpina probleme dacă nu sunteți sigur ce faceți. Deși puteți dezactiva pluginurile fără acces la zona de administrare, chiar ar trebui să evitați să vă puneți prea multe probleme . Dacă întâmpinați dificultăți în continuare, contactați un designer web profesionist pentru a vă ajuta.

Creați o temă copil

Deși puteți, teoretic, să creați o temă părinte nou-nouță, ar trebui să alegeți o temă copil. Sunt mult mai potrivite pentru personalizare, ceea ce vă oferă mai multă libertate de a crea pagini de destinație unice. Deoarece am descris cum să creăm o temă copil, nu o vom mai analiza aici. Singurul lucru pe care îl vom menționa este că trebuie să aveți atât fișierele style.css, cât și fișierele functions.php în directorul cu tema copilului pentru a continua.

Creați un fișier Style.css

În fișierul style.css trebuie pur și simplu să adăugați următorul cod:

/*

Numele temei: Tema paginii de destinație

Descriere: temă copil cu pagină de destinație personalizată

Autor: Default Writer

URI autor: https://www.wpfullcare.com

*/

Construiți un fișier Functions.php

În fișierul functions.php, trebuie să adăugați următorul cod. Acest lucru vă va permite să înregistrați fișierul pentru foaia de stil pentru copilul dvs.

<?php

// Stiluri teme părinte //

// https://codex.wordpress.org/Child_Themes //

funcția theme_enqueue_styles() {

$parent_style = 'stil-parent';

wp_enqueue_style( $style_parent, get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'stil copil',

get_stylesheet_directory_uri() . „/style.css”,

matrice ($parent_style)

);

}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles');

Instalează și activează tema copilului tău

După ce ați făcut acest lucru, puteți continua să instalați și să activați tema copilului. Când vine vorba de temele WordPress în general, doriți să le testați local pe un alt site web WP. După cum am menționat, accidentele se întâmplă. Și chiar ar trebui să evitați dezactivarea site-ului dvs. După ce ați configurat un site WordPress local, continuați să vă încărcați tema. Odată ce îl activați, asigurați-vă că tema copilului funcționează și că puteți adăuga stiluri. Accesați fișierul style.css și modificați unele părți ale codului pentru a vedea dacă funcționează.

Creați o pagină personalizată

Dacă totul este în ordine, puteți continua să creați o pagină personalizată în tema copilului dumneavoastră. Pentru a face, trebuie să creați un fișier nou în tema copilului dumneavoastră. Odată ce faci asta, salvează-l ca page-landing.php. În acel fișier trebuie să adăugați următorul cod:

<?php

/**

Nume șablon: Pagina de destinație

**/

?>

Acum, mergeți la meniul derulant al șablonului și alegeți pagina de destinație din meniu. Va trebui să alegeți o imagine prezentată pe care să o utilizați ca fundal ( alegeți ceva mare și simplu deocamdată, așa cum puteți experimenta mai târziu ). Apoi adăugați copia dvs. și publicați pagina adăugată. Încercarea de a vă revizui pagina acum vă va aduce doar la un ecran negru. Acest lucru se datorează faptului că încă nu ați adăugat următorul markup la page-landing.php.

<div id=”landing-page” class=”hfeed site”>

<div class="site-branding">

<p class=”site-title aligncenter”><a href=”<?php echo esc_url( home_url( '/' ) ); ?>” rel="home”><?php bloginfo( 'nume' ); ?></a></p>

</div><!– .site-branding –>

Odată ce îl adăugați și previzualizați pagina, ar trebui să vedeți titlul site-ului împreună cu un fundal alb și o imagine mare de fundal.

Afișează conținut

Pentru a afișa restul conținutului pe pagina de destinație, trebuie să adăugați următorul markup la page-landing.php. Trebuie să faceți acest lucru chiar sub linia <!– .site-branding –> pentru ca acesta să funcționeze corect.

<div class="sidebar sidebar-bribe”>

<?php if (have_posts()) : ?>

<?php while (au_postări()): the_post(); ?>

<h1 class="landing-title"><?php the_title(”); ?></h1>

<?php the_content(); ?>

<!– https://codex.wordpress.org/Function_Reference/wp_link_pages –>

<?php endwhile; ?>

<?php endif; ?> <!– mdl-cell-8 //#primary –>

</div>

Codarea unei pagini de destinație WordPress personalizată este aproape gata. Tot ce trebuie să faci este să-i configurezi stilul. Cel mai simplu mod de a face acest lucru este doar fișierul style.css și codul necesar pentru acesta. Deoarece există opțiuni nelimitate pentru modul în care poate arăta pagina dvs., nu vă vom oferi un exemplu strict de urmat. În schimb, vă vom recomanda să găsiți un stil care vă place și să-l copiați . În acest fel, vă veți da seama cum sunt diferite aspecte ale funcției sale.