Aihesivu WordPressiin

Haluatko esitellä tiettyyn luokkaan tai asiasanaan liittyvät artikkelit? Luo teemaasi uusi sivupohja aihetta varten.

Tämän sivuston artikkelit on luokiteltu kategorioihin. Valikot perustuvat näihin luokkiin, mutta jokaiselle kategorialle on oma esittelysivunsa. Esittelytekstin jälkeen tulee kaikki aiheen artikkelit (artikkelikuva, otsikko ja ote). Tällaista ei yleensä ole valmiina WordPress-teemoissa, mutta sellaisen voi tehdä itse.

Vähimmällä ylläpidolla pääsee automatisoimalla. Tässä esimerkissä sivun polkutunnus määrittää suoraan haettavan luokan. Eli jos sivun polkutunnus on "wordpress" niin sivun lopussa näytetään kaikki luokan "wordpress" artikkelit (siis luokan polkutunnus on "wordpress"). Samanlaisen esittelysivun voi tehdä avainsanoille.

Tee page.php:sta kopio nimellä topic.php. Jos page.php:ta ei ole teemassa niin kopioi se emoteemasta. Lisää teeman alun komentteihin Template Name:

/**
 * The template for displaying topic pages
 *
Template Name: Topic
 *
 */

Lisää topic.php:n loppupuolelle, mutta pääsisällön div-elementin (tai main-elementin, jos sellainen on) sisään:

<?php
$args = array( 
    'category_name' => get_post_field( 'post_name' ),
    'numberposts' => -1,     // All posts
    'orderby' => 'title',    // Alphabetically
    'order' => 'ASC'         // From A to Z
);
$topicposts = get_posts( $args );

foreach ( $topicposts as $post ) {
    setup_postdata( $post );
    ?>
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php if ( has_post_thumbnail() ) { the_post_thumbnail('thumbnail'); } ?>
    <header class="entry-header listing">
        <a href="<?php the_permalink(); ?>">
            <?php the_title( sprintf( '<h3>', '</h3>' )); ?>
        </a>
    </header><!-- .entry-header -->
    <?php the_excerpt(); ?>
    </article><!-- #post-## -->
<?php    
}
wp_reset_postdata();
?>

Ainoa hankaluus liittyy alun <?php ja lopun ?> -merkintöihin. Jos koodi lisätään sivulla PHP-koodin sekaan, niin ne pitää ottaa pois. HTML-koodissa ne taas tarvitaan.

Koodin alun $args sisältää näytettävien artikkelien kriteerit. Tärkein on ensimmäisenä, eli category_name -kenttään haetaan sivun polkutunnus. Avainsanoille käytetään 'tag' => get_post_field( 'post_name' ). Muut kentät säätävät tulosten määrää ja järjestystä. Poistamalla rivit saa oletukset eli viisi artikkelia kerralla, aikajärjestyksessä, uusin ensimmäisenä.

Käyttö:

  1. Luo uusi sivu ja vaihdan sivupohjaksi Topic.
  2. Kirjoita haluamasi esittelyteksti.
  3. Aseta sivun polkutunnukseksi sama mikä on halutulla luokalla (tai avainsanalla).

 

Polyangin kielivalikko

Kuinka teen oikean yläkulman kielivalikon kun käytössä on WordPress ja Polylang.

Tämä sivusto on kaksikielinen: suomeksi ja englanniksi. WordPressiin on useita kielilisäosia, joista tässä on käytössä Polylang. Polylang on muuten täysin toimiva ja käyttökelpoinen, mutta ei tarjoa suoraan Suomessa yleistä valikkotyyppiä: Suomeksi | På Svenska | In English. Sellaisen kirjoittaminen omaksi lisäosakseen osoittautui hankalaksi, joten tässä on artikkeli miten sellaisen saa aikaiseksi.

Kielivalikko vaatii muokkauksia teemaan. Helpointa on tehdä lapsiteema ja siihen löytyy paljon ohjeita. Lapsiteeman style.css-tiedostoon lisätään:

/* Languages horizontally */
#language ul { margin: 0; padding: 0; }
li.lang-item { list-style-type: none; display: inline; }
li.lang-item:before { content: " | "; }
li.lang-item:first-child:before { content: none; }

Teeman functions.php-tiedostoon lisätään määrittely uudelle vimpainalueelle:

register_sidebar( array(
        'name'          => 'Language',
        'id'            => 'language',
        'description'   => 'Polylang switcher area.',
        'before_widget' => '<div id="language">',
        'after_widget'  => '</div>'
) );

Teeman header.php-tiedostoon lisätään sopivaan kohtaan vimpainalue:

<aside id="language-nav" role="navigation">
    <?php dynamic_sidebar( 'language' ); ?>
</aside><!-- .language-nav-widgets -->

Lopuksi lisätään hallintapaneelissa Language Switcher vimpainalueelle Language.

Vimpainalueen saa tasattua oikeaan laitaan esimerkiksi laittamalla style.css-tiedostoon määrittely:

aside#language-nav {
  text-align: right;
  margin-left: auto;
}