2018-12-14

WordPress puslapio šablono kūrimas (I dalis)

Sužinokite, kaip pačiam nesudėtingai susikurti WordPress svetainės puslapio šabloną, kurį galėsite panaudoti išskirtiniam turiniui pateikit.

WordPress puslapio šablonas – tai specialus Jūsų svetainės naudojamos WordPress temos šablonas, kuriame aprašoma turinio struktūra, stilius, skirtas specifiniam puslapiui ar jų grupei. Dažnai augant svetainei ima trūkti galimybių pateikti turinį kitaip, nei leidžia Jūsų naudojama tema. Ką Jūs tuomet galite daryti? Galite susisiekti su svetainę kūrusia įmone ir prašyti pagalbos (dažniausiai žinoma mokamos), galite susitaikyti su mintimi, kad turinį galite pateikti taip, kaip galite, arba išmokti patys susikurti norimą puslapio šabloną.

Pagrindiniai puslapio šablono privalumai, savybės:

  • Naudodami puslapio šabloną Jūs galite keisti konkretaus puslapio išvaizdą nepriklausomai nuo Jūsų svetainės naudojamos WordPress temos stiliaus. Puslapis gali atrodyti visiškai kitaip, turėti unikalų, išskirtinį stilių, jame turinys gali būti pateikiamas kitokia struktūra nei likusioje svetainėje.
  • Puslapio šablonas gali būti panaudojamas konkretiems puslapiams ar puslapių klasėms. Jeigu Jūs turite puslapių, pvz. skirtingiems produktams aprašyti, skirtingoms istorijoms pateikti ir pan., ir Jums reikia informaciją šiuose puslapiuose pateikti skirtingai, būtent čia Jūs galėtumėte panaudoti puslapio šabloną.
  • Puslapio šabloną galite puikiai pritaikyti statinei informacijai pateikti, kai reikalingas išskirtinis stilius, bet Worpress redagavimo priemonės ne, pvz. Jūs naujienlaiškius kuriate ne su WordPress, tačiau norėtumėte turėti juos pateiktus ne tik naujienlaiškių siuntimo tarnybose (pvz. mailchimp ar mailerlite), bet ir savo svetainėje.
  • Puslapio šabloną susikurti pakankamai lengva net ir nedidelę patirtį turinčiam WordPress naudotojui, kuris yra girdėjęs apie HTML, CSS ir turi įsivaizdavimą, kaip WordPress veikia.

Šioje WordPress puslapio šablono kūrimo serijoje sužinosite, kas yra puslapio šablonas, kaip susikurti savo pirmąjį puslapio šabloną, kaip pritaikyti jam unikalų stilių, kaip jį naudoti kartu su turima WordPress tema.

Pirmojoje dalyje susikurkime puslapio šabloną, kuriame bus atvaizduojamas turinys. Stilių aptarsime kitoje šios serijos dalyje.

Prieš pradėdami įsitikinkite, kad turite prisijungimus prie savo svetainės FTP arba esate jos administratorius ir svetainės failus galėsite pasiekti pasinaudoję vienu iš FTP įskiepių. Taip pat bus reikalingos minimalios HTML, CSS ir PHP žinios, tačiau jos nėra būtinos, jeigu esate imlūs naujiems dalykams.

 

1. Puslapio šablono failo sukūrimas

Puslapio šablono failo susikūrimas yra itin paprastas, žymiai sudėtingiau puslapyje pateikiamam turiniui vėliau pritaikyti dizainą. Atsidarykite kodo rengyklę (rekomenduojame naudoti Notepad++, tačiau tiks ir standartinis Notepad). Pradžioje nurodykime mūsų kuriamo šablono pavadinimą ir įrašykime statinį tekstą antraštei.

 

<?php
/*
Template Name: Išskirtinių pasiūlymų puslapis
*/
<!-- Statinis puslapio pavadinimas -->
<h1>Išskirtinių pasiūlymų puslapis</h1>

 

Gera praktika puslapių šablonus vadinti pagal tai, kokia bus jų paskirtis, pvz. vieno stulpelio puslapis, puslapis akcijoms ir pan. Išsaugokime failą kaip page_custom.php. Puslapio šablono pavadinimo forma turėtų būti tokia – page_mano_pavadinimas.php.

Puslapių šablonų failų pavadinimuose venkite naudoti “-” ženklus, nes šį ženklą pavadinime WordPress supras kaip specialų šabloną, skirtą tik vienam puslapiui, pvz. page-custom.php būtų suprantamas kaip šablonas, kuris bus išskirtinai skirtas puslapiui su konkrečiu “custom” pavadinimu.

 

Įkelkite išsaugotą page_custom.php failą į savo svetainės naudojamos temos page-templates direktoriją (jeigu tokios direktorijos nėra, susikurkite ją).

 

 

Įkėlę page_custom.php failą kurkite naują puslapį (Pages > Add New). Atsidariusiame puslapio redagavimo lange atkreipkite dėmesį į Template (Šablonai) skiltį. Išskleidę sąrašą pamatysite, jog ten yra atsiradęs ir Jūsų ką tik įkeltas šablonas – Išskirtinių pasiūlymų puslapis. Pasirinkite šį šabloną ir publikuokite puslapį. 

 

 

Atsidarę naujai sukurtą puslapį su Išskirtinių pasiūlymų puslapio šablonu kol kas matysite tik statinį tekstą, kurį įrašėte, tačiau dabar Jums atsiveria galimybės modifikuoti šį šabloną ir pateikti puslapio turinį taip, kaip Jūs norite.

 

 

2. Informacijos šablone pateikimas

Toliau redaguokime page_custom.php failą ir nurodykime, kad į puslapio šabloną atkeliautų puslapio pavadinimas, turinys, komentarai. Kodo redaktoriuje atlikite žemiau pateiktus page_custom.php failo pakeitimus. Atnaujintą failą įkelkite į Jūsų svetainės temos page-templates direktoriją.

 

<?php
/*
Template Name: Išskirtinių pasiūlymų puslapis
*/
?>
<?php 
/* Gauname svetaines temos Header dali */
wp_head();
?>
<!-- Elementas, kuriame bus rodomas turinys -->
<div class="page-custom-content">

  <!-- 
  Ciklas, kuris patikrina ar yra irasu 
  Rodomas iraso turinys, iraso komentarai ir papildomos nuorodos redaguoti irasa
  -->
  <?php if (have_posts()): while (have_posts()) : the_post(); ?>

    <!-- Irasas -->
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

      <!-- Puslapio pavadinimo rodymas -->
      <h1><?php the_title(); ?></h1>

      <!-- Iraso turinys -->
      <?php the_content(); ?>

      <!-- Iraso komentarai -->
      <?php comments_template( '', true ); ?>

      <!-- Iraso redagavimo nuorodos -->
      <?php edit_post_link(); ?>

    <!-- /Iraso pabaiga -->
    </article>

  <!-- Pabaigiame cikla -->
  <?php endwhile; ?>

  <!-- Pabaigiame If sakini -->
  <?php endif; ?>

</div>

<?php 
/* Gauname svetaines temos Footer dali */
wp_footer(); 
?>

 

Trumpai paaiškinsime, ką reiškia tam tikri kodo elementai:

  • wp_head(); – WordPress funkcija, kurios pagalba puslapyje užkraunami stiliaus failai, įvairios naudojamos bibliotekos ir pan.
  • if (have_posts()): while (have_posts()) : the_post(); – itin dažnai WordPress šablonuose naudojamas if sakinys ir ciklas, kurių pagalba tikrinama ar konkretus svetainės puslapis (URL) turi įrašų (if (have_posts())), jei įrašų yra, nuskaito tuos įrašus (while (have_posts()) : the_post()).
  • the_title(); – WordPress funkcija, kuri grąžina puslapio ar įrašo pavadinimą.
  • the_content(); – WordPress funkcija, kuri grąžina įrašo turinį.
  • comments_template(); – WordPress funkcija, įterpianti komentarų įvedimo formą, taip pat pačių komentarų sąrašą.
  • edit_post_link(); – WordPress funkcija, kuri prie konkretaus įrašo įterpia jo redagavimo nuorodas. Kuomet prisijungiate prie savo svetainės, šios nuorodos tampa aktyvios (edit page), jas paspaudus patenkama tiesiai į puslapio redagavimo aplinką.
  • wp_footer(); – WordPress funkcija, kuri pakrauna puslapio Footer dalį. Footer dalyje įprastai įterpiami visi JS failai.

Turėdami tokią puslapio šablono struktūrą Jūs jau galite pilnai pateikti puslapio pavadinimą ir turinį. Užpildykite puslapio, kuriam priskyrėte kuriamą šabloną, turinį.

 

 

Perkraukite naujai susikurtą puslapį, kuriam parinkote Išskirtinių pasiūlymų puslapio šabloną. Puslapio pavadinimas, turinys bei komentarų forma (jeigu nurodėte, kad puslapį komentuoti galima) tapo matomi.

 

 

Tai Jūsų naujasis puslapio šablonas! Žinoma tam, kad jis Jums iš tiesų būtų naudingas, reikia stiliaus. Apie stiliaus pritaikymą puslapio šablonui parašysime kitoje WordPress puslapio šablono kūrimo serijos įraše. Sekite naujienas. O jeigu kyla klausimų, neaiškumų besinaudojant WordPress turinio valdymo sistema, susiekite arba parašykite savo nuomonę, klausimą komentaruose.

Peržiūrėti demo Atsisiųsti page_custom.php failą

Daugiau panašių naujienų

Interneto puslapių dizaino idėjos #2 – užrašai

Užrašų dominavimas ir šriftų įvairovė - nauja stiliaus tendencijas kuriant interneto svetainių dizainą. Pateikiame 10 įdomių realizacijos sprendimų.

Peržiūrėkite

WordPress – šrifto dydžių reikšmių pridėjimas

Sužinokite kaip nedidelio kodo pagalba galite keisti savo WordPress tekstinio redaktoriaus šrifto dydžių pasirinkimą

Peržiūrėkite

Interneto puslapių dizaino idėjos #1 – minimalizmas

10 dizaino idėjų Jūsų naujai minimalistinio ir šviesaus dizaino interneto svetainei. Nauja, modernu ir įdomu.

Peržiūrėkite

Dirbkime kartu

Mes prisitaikome prie kliento. Jeigu Jums reikia tik puslapio dizaino, mes sukursime puslapio dizainą. Jeigu Jums reikia interneto svetainės, mes sukursime interneto svetainę. Jeigu Jūs nenorite sukti galvos, kur Jūsų svetainė bus patalpinta, kaip veiks paštas – nesukite, patikėkite šiuos rūpesčius mums.

Daugiau apie mūsų paslaugas Neradote informacijos? Susiekite