WordPress – Sisu parendamine ehk näpime koodi

Teemad

Selle peatükiga kavatsen nö WordPressi põhiõpingud ära lõpetada. Edasi tuleb õppida, kuidas viia kokku oma veebikujundus WordPressi mootoriga. Selleks on vaja tunda natuke veebilehe telgitaguseid. Selle peatüki eesmärk ongi natuke näidata, kuidas saab koodi muuta ning mis sellest juhtuma hakkab.

  • animeeritud bänner
  • sisu kohandamine CSS abil
  • tunnuspildi muutmine
  • väljavõte

Ettevalmistus

Alustuseks teeme nii, et valime mõne lihtsama kujunduse. Seda sellepärast, et siis on faile ja koodiridu vähem ning peaks olema lihtsamini mõistetav. Valitud teema Writer.

Et saaksime oma eesmärki täita, peab postitustel olema lisatud tunnuspilt.

Animeeritud bänner

Kui uus kujundus on aktiveeritud, siis lähme otsime üles mõne pistikprogrammi, mis suudab pilte vahetada. Minule jäis silma Meta Slider. Paigaldan ja aktiveerin selle. See lisab administraatori menüü  lõppu kenasti lingi Meta Slider Lite

Sellele klikkides avaneb menüü, kus paremas ääres saad määrata erinevaid seadistusi. Jätame need esialgu nii nagu on. Aga uue bänneri lisamiseks leiame vasakust servast “+” märgi ning kui see toimis siis piltide lisamiseks klikime Add Slide. Pildite kirjelduse ja lingi võid ka hiljem lisada.

Kui pildid olemas, siis paremal ääres, kõige lõpus, on vihjed kuidas seda animeeritud bännerit kasutada.

Esimest Shortcode koodi saad lisada otse postitusse või näiteks lehele. Teine, Template Include, tuleb lisada juba kujundusmalli koodi ja see jääb seotuks selle kujundusmalliga. Vali nüüd menüüst Välimus>Toimetaja.

Keskel, suurelt, avatakse kujundusfaili sisu ja paremal näeme kujundusega kaasasolevaid faile (Mallid). Idee on lihtne: kliki soovitud failil, tee muudatus ja salvesta.

Klikime siis index.php failil, mis kannab nime Esilehe mall. See avab meile faili sisu ning me peame otsima, kuhu me oma animeeritud bänneri lisada tahame. Lisame kohe kõige algusesse, enne postitusi.

Selle tulemusena peaks nüüd kenasti avalehel ja enne postitusi olema meie bänner.

Sisu kohandamine CSS abil

Bänneri suurust sai seadetest muuta. Aga teeme nii, et meile selle vaikimisi laius 604px sobib. Aga siis tuleks teha muudatusi kujundusfailis. Ava style.css fail ja leia sealt üles #wrapper. Seal on kirjas, et maksimum laius on 960px aga meie tahame 604px.

Nüüd peaks postituste ja piltide laius olema kenasti ühes tulbas.

Tunnuspildi muutmine

Nüüd on eesmärgiks vaadata, kus asub WordPressi dokumentatsioon ning selle abil muuta tunnuspilt väiksemaks ja joondada vasakule.

Dokumentatsioonile on antud nimi WordPress Codex, mis sisaldab kõike mida iganes sa vajad. Arvatavasti kui sa googlest midagi otsid, siis suunatakse sind siia. Avame kujundusmalli index.php ning otsime üles rea, mis vastutab postituse tunnuspildi eest.

<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>

See on tingimuslause, mis tunnuspildi olemasolul selle ka väljastab. Meil oleks vaja muuta pildi suurust. Sisestan google otsingumootorisse ja kohe esimene vastus sobib: http://codex.wordpress.org/Function_Reference/add_image_size

Siit leian kirjelduse ja vajaliku koodi. Ja kui seda edasi lugeda, siis on hunnik näiteid ja seletusi. Seega kui ma soovin muuta pildi suurust ja seda kärpida, et see jääks neljakandilisena, siis lisan järgmise koodi.

<?php if ( has_post_thumbnail() ) { the_post_thumbnail(array( 'homepage-thumb',200,200, true)); } ?>

CSS kujundusfailis on olemas klass vasakule joondusega, siis võiksime seda siin kasutada.

<?php if ( has_post_thumbnail() ) { the_post_thumbnail(array( 'homepage-thumb',200,200, true), array('class'=>'alignleft')); } ?>

Nüüd peaks pilt olema tekstist vasakul.

Muudame pildi aktiivseks ehk kui sellel klikkida, siis avatakse postitus. Aktiivse postituse lingi saame, kui kasutame WordPress funktsiooni the_permalink(). Nüüd peaks meie kood olema samasugine.

Väljavõte

Väljavõte on postituse lühikirjeldus, kui seda ei lisata, siis võetakse postituse esimesed 55 sõna ning lõppu lisatakse märk […]. Iseenesest on see lihtne, leia üles index.php dokumendist järgmine rida:

<?php the_content(); ?>

ja asenda see järgmise reaga:

<?php the_excerpt(); ?>

Selle tulemusena peaksid postitused väljanägema nii.

Kui dokumentatsiooni lugeda, siis the_excerpt() funktsioon lubab need kolm täppi asendada oma tekstiga. Sinna võiksime lisada lingi [Loe edasi…]. Pealkirja alt ‘Make the “read more” link to the post’ loeb välja, et järgmine kood tuleb kopeerida functions.php dokumenti.

Nüüd peaks väljavõtte lõpus olema soovitud link.

Viimased postitused

Meist

metshein.com on pakkunud juba üle kümne aasta tasuta eestikeelseid infotehnoloogiaga seotud kursusi. Sama kurssi püütakse järgida ka edaspidi. Eesmärk muuta arvutiõpe võimalikult lihtsaks!

metshein.com: parim eestikeelne koolitusportaal

Autorist ja kontakt: kliki siia

Hetkel õpivad:

There are no users currently online

Kontrolli tunnistust

Tööribale