Hutasublogi on nyt avattu

Hei kaikki rupelihatut, sedät ja tädit, nörttineitoset ja muutkin karvakamut. Hutasun uusi blogi on nyt avattu ja julkaistu. Että mitäkös se niinkuin tarkoittaa? No sitä, että tänne on tarkoitus tehdä nopeita ja "nopeita" blogikirjoituksia aiheeseen liittyvistä puuhasteluista. Kirjoitukset tulevat olemaan myös vähemmän tarkkaan harkittuja sekä sisällöltään että kieliasultaan, joten toivottavasti kielipoliisit eivät tästä pahastu. Korjauksia aina toki saa ehdottaa ja kommentointikin laitetaan kuntoon jahka kerkiää.

Hutasun blogin myötä sivustolle avautuu uusi aikakausi, missä on tarkoitus tuottaa materiaalia suomeksi, suomalaisille harrastajille ja alasta kiinnostuneille - hieman eri muodossa kuin mitä muualla sivuilla on nähtävissä. Toivottavasti blogi tulee olemaan hyödyksi edes yhdelle ihmiselle internetissä.

Blogijärjestelmä perustuu wordpressiin, tai siis itse asiassa on juurikin se. Alla pari linkkiä, jos sinua kiinnostaa blogin integrointi omille kotisivuillesi:

https://codex.wordpress.org/Integrating_WordPress_with_Your_Website 
https://wordpress.org/support/topic/i-successfully-embed-my-wordpress-blog-into-my-website

Alla myös muutama juttu joihin itse törmäsin matkan varrella. Pari-kolme iltaa tässä integroimisessa ja modaamisessa/koodailussa vierähtikin.

WordPressin integroiminen php:llä tehtyyn sivustoon

Jos joku integroi wordpressiä sivuillensa, niin itse onnistuin tässä aluksi käyttämällä iframe tagia, joka tuossa ylemmässä linkissä mainitaankin. Toki joutuu vähän opiskelemaan muutakin, mutta näillä pääsin eteenpäin.

Iframe-toteutus ei ollut kuitenkaan pitemmän päälle kovin mukava eikä vaikuttanut helposti muokattavalta ominaisuudelta näin ylläpitäjän kannalta, joten päätin perehtyä WordPressin toimintaan hieman paremmin.

Kaikki taika perustuu index.php tiedoston sisältöön, eli siis kotisivun pääsivun toimintaan. Kun WordPressin asentaa, niin tiedostohakemistoon ilmestyy wordpressin oma index.php, jonka sisältö näyttää suurinpiirtein tältä:

...
define('WP_USE_THEMES', true); 

/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp-blog-header.php' );

if ( have_posts() ) 
{
 while ( have_posts() ) 
 {
     the_post(); 
 } // end while
} // end if
?>

Ensimmäisellä rivillä määritetään halutaanko käyttää WordPressin omia hienoja teemoja - define('WP_USE_THEMES', true) määrittelee tämän. Koska en halunnut sotkea sivustoni ulkoasua blogin vuoksi, määrittelin parametrin true --> false. Tällöin WP ei käytä mitään teemaa, vaan kaikki tyylit ja muotoilut täytyy tehdä itse.

While-loopissa käydään läpi kaikki julkaistut postaukset ja niille voidaan sitten loopin sisällä tehdä käytännössä mitä vain... Kuitenkaan WordPressin asennuksen jälkeen pelkkä index.php -tiedostossa sijaitseva koodi ei juurikaan postauksia näytä, vaan vaaditaan muutakin.

Aluksi lähdin ihan kylmästi kokeilemaan WP:n tutoriaalien mukaisesti, millä funktiolla saan edes yhden postin näkyviin. Tämän seikkailun tuloksena syntyi seuraava koodi:

while ( have_posts() ) 
 {
 // Otsikko ja pvm
 ?>
 <h1><a href="<?php the_permalink(); ?>" rel="bookmark" title="Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
 <small style="margin-left:10px"><?php the_time('F j, Y'); ?></small>
 <p>&nbsp;</p>
 <?php
 the_post(); 
 // Sisältö
 the_content();
 
 } // end while

Kyseinen pätkä louhii tietokannan uumenista kunkin postauksen otsikon, päivämäärän ja sisällön. Sisältö tulee näkyviin the_content() -funktiolla ja the_post() funktio käsittelee WP:n sisäisiä indeksejä ja muita taikajuttuja. Joka tapauksessa, se vaaditaan postauksen käsittelyssä silloin kun ollaan loopin sisällä. (WordPressissä on monta tapaa saada postaukset näkyviin eikä tuo silmukkajuttu ole suinkaan ainoa).

Okei hyvä homma, mulla näkyi nyt yksi testijulkaisu. Seuraava pähkinä purtavaksi olikin se, miten saan blogikirjoituksen näkymään kuten sivuston muut sivut. Tätä varten googlailin ja kokeilin kaikenlaista. Lopulta päädyin siihen, että lisään index.php tiedostoon ennen while-silmukkaa seuraavat pätkät jotka johdattava sivuston tyylitiedostoihin:

<head>
<link href="../css/omat.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
</head>

Tällä sain tyylit kohdalleen ja suurinpiirtein (pieniä paikallisia viilauksia lukuunottamatta) sivun näkymään sellaisena kuin pitääkin.

Koska olin tehnyt koko homman iframe-toteutuksella ja halusin saada näkyviin esimerkiksi blogilistauksia, eli lista missä näkyy kaikki blogin sisältö sekä muuta mukavaa (navigointi esim), niin jouduin nakkaamaan iframen romukoppaan ja aloittamaan ikäänkuin puhtaalta pöydältä. Nythän sentään tiesin miten saan blogipostauksen näkyviin ja stailattua.

Kun käyttäjä saapuu hutasun sivuille, niin ensimmäisenä tulee vastaan index.php, vaikka se ei aina selaimen osoiterivillä näykkään - mutta siellä se vain on. Kyseinen tiedosto ei ole sama kuin wordpressin index.php johtuen siitä, että wp:n index-tiedosto sijaitsee hieman eli polussa. Nyt minun täytyi saada oma index.php muokattua sellaiseksi, että se osaa käsitellä wordpressin sisällön. Tämä olikin urakan suurin vaihe.

Moralla kylykeen sano...

Tarkkaavainen lukija huomannee, että sivustollani liikutaan vasemman navigointipalkin avulla ja osoiteriville ilmestyy sivu_id parametri, kun valikkoa klikkaa. Tämän parametrin avulla minun index.php tietää mitä sivua näyttää. Mutta koska wordpress toimii eri tavalla kuin minun sivuni, täytyi tiedostoa puukottaa hyvinkin rankasti.

Krhm... niille jotka eivät tiedä, niin puukotus on nörttislangia ja tarkoittaa muokkaamista/editoimista. Noniin.

Koska en halua paljastaa lähdekoodia tietoturvasyistä, niin tyydyttänee kiinnostunutta lukijaa se että koitan suomen kielellä muotoilla kuinka homma toimii.

Ensiksikin minun tuli ohjelmoida index.php tarkistamaan ollaanko navigoinnin mukaisella blogisivulla. Jos ollaan, niin tarkistetaan onko urlissa lisäparametria "blogi". Mikäli ei ole, niin se sitä että blogi-nappia on painettu ja blogin etusivu on syytä näyttää. Blogin etusivulla näytetään kolme viimeisintä postausta, sekä blogin valikko oikeassa reunassa (sijainti voipi muuttua vielä että elekkee hättäilkö). On ruma tiijän. Itse asiassa blogin sisältövalikon hoitaa toinen .php -tiedosto, mutta siitä ei nyt sen enempää.

Kun ja jos taas ei olla blogin etusivulla, täytyy parametrin mukaan hakea oikea postaus ja näyttää se. Parametrille suoritetaan joukko tarkistuksia ja jos arvo on validi, niin tietokannasta haetaan haluttu postaus. Navigointipalkki tulostetaan myös sen mukaan miten tietokannasta postauksia löytyy.

Huhhuh. Kuulostaa tosi yksinkertaiselta kun sen näin jälkikäteen selittää "paperille" mutta kyllähän tuo jonkun verran harmaita hiuksia tuotti.

Vielä viimeinen funktio vain...

Lopuksi muutama sananen käytetyistä funktioista:

get_the_ID() -funktio palauttaa tietokantaan tallennetun postauksen ID-numeron. Tätä käytetäänkin postauksien näyttämiseen tällä sivulla.

get_posts() hakee kaikki postaukset ja tälle voi antaa parametreina erilaisia suodatuksia ja lajitteluita jne.

get_post() puolestaan hakee yhden postauksen tietyn hakuehdon perusteella joka funktiolle syötetään. Palautettava arvo on WP_Post objekti, joka pitää sisällään kaiken(?) tiedon postauksesta.

WP_Post -objektista saatua sisältöä (post_content) ei kannata tai voi ilmeisesti suoraan tulostaa ruudulle vaan kannattaa tehdä se esim. näin:

// Tulostetaan yksittäinen postaus
$post = get_post($postBySomeValue);
$content = $post -> post_content;
echo apply_filters('the_content',$content);

Jos postauksia käsitellään silmukassa (eli käsiteltäviä postauksia on useita), niin tehdään esimerkiksi näin:

// Valitaan suotimet ja järjestys
$args = array('order' => 'desc', 'orderby' => 'date');

// get_posts palauttaa taulukon 
$myposts = get_posts( $args );

// käsitellään postaukset silmukassa
foreach( $myposts as $post )
{ 
   // setup_postdata asettelee yksittäisen postauksen tiedot paikalleen 
   // $post muuttujaan
   setup_postdata($post);
    
   // päivämäärän voi tonkia esille esim näin:
   $date = $post -> post_date;
   ...
}

Ja silmukassa käsittelyn jälkeen on ilmeisesti hyvä kutsua wp_reset_postdata() funktiota. Vissiin palauttelee sisäisiä juttuja takas sinne minne pitääkin.

Että näin.

Jätä kommentti

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *