WordPress – Tipy a triky #2

Tentokrát se v našem miniseriálu o Wordpressu opět podíváme na soubor šablony jménem functions.php a konkrétně na to, jak zprovoznit náhledové obrázky v šabloně a definovat jejich velikosti.

Autor:
Jiří Hýbek
Publikováno:
25. 09. 2013
Kategorie:
,
Zobrazení
Celá obrazovka

Soubor s názvem functions.php je nepovinná součást grafické šablony RS WordPress. Je určen pro zápis vlastních funkcí a pro volání konfiguračních funkcí WP, případně pro aktivaci pokročilých vlastností šablony. V podstatě se jedná o klasický PHP soubor, který je použit (pomocí funkce include) před vykreslením šablony a též i v administraci. Z toho plyne, že pokud v tomto souboru uděláte syntaktickou chybu, nepůjde Vám ani front-end, ani administrace.

Aktivace náhledových obrázků

Aby Vám WordPress umožnil přidávání náhledových obrázků ke stránkám a příspěvkům, je nutné mu oznámit, že šablona tuto funkci podporuje. To učiníme zavoláním následující funkce v soubor functions.php.

<?php
add_theme_support('post-thumbnails');

Funkce add_theme_support přijímá dva parametry. Prvním je název dané funkce. Druhým jsou případné argumenty. V tomto případě náhledových obrázku žádné argumenty předávat nemusíme.

Nastavení velikosti náhledových obrázků

Na 90% budeme chtít určit, jak velké mají být naše náhledové obrázky, aby nám seděly do šablony. To provedeme zavoláním funkce set_post_thumbnail_size a jako parametry předáme šířku a výšku obrázku. Třetím parametrem je, zda se má obrázek oříznout tak, aby vyplnil celou plochu náhledu – tzv. crop.

<?php
set_post_thumbnail_size(217, 155, true);

Vlastní velikosti obrázků

Může nastat případ, kdy budeme chtít využít v šabloně více velikostí náhledových obrázků, např. na homepage větší a ve výpisu příspěvků menší. To zařídíme funkcí add_image_size.

<?php
add_image_size('home-featured', 624, 206, true);

Prvním parametrem je interní název velikosti obrázku, který využijeme při vkládání do šablony. Druhým a třetím parametrem je šířka a výška obrázku. Čtvrtým a posledním parametrem je, zda se má obrázek oříznout a vyplnit celou plochu – crop.

A nyní vložení náhledového obrázku do šablony

Náhledový obrázek do šablony vložíme pomocí funkce the_post_thumbnail.

<?php
<div class="post-thumbnail">
     <?php the_post_thumbnail(); ?>
</div>

Funkce přijímá dva nepovinné parametry. Prvním je interní název velikosti obrázku a druhým jsou atributy výpisu funkce – například alternativní popisek nebo třída HTML elementu. Více v dokumentaci. Pokud prvním parametr neuvedeme, vloží se náhledový obrázek ve výchozí velikosti, kterou jsme nastavili funkcí set_post_thumbnail_size. Nyní si ukážeme vložení vlastní velikosti obrázku.

<?php
<div class="post-thumbnail">
     <?php the_post_thumbnail('home-featured'); ?>
</div>

A pokud bychom chtěli, aby náhledový obrázek odkazoval na stránku s příspěvkem, zapíšeme jej následovně.

<?php
<div class="post-thumbnail">
     <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('home-featured'); ?></a>
</div>

Pokud nevíme, zda uživatel nahrál náhledový obrázek, můžeme použít funkci has_post_thumbnail, která nám vrátí, zda je obrázek nahrán či nikoliv. Uvedeme si příklad, ve kterém zobrazíme výchozí obrázek.

<?php
<div class="post-thumbnail">
     <?php if(has_post_thumbnail()): ?>
          <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('home-featured'); ?></a>
     <?php else: ?>
          <a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/default-thumbnail.jpg" alt="Výchozí obrázek" /></a>
     <?php endif; ?>
</div>

V praxi narazíte na situace, kdy je potřeba se vyhnout HTML kódu, které generují výše uvedené šablonovací funkce (template tags), to by bylo ovšem na delší povídání. Proto uvedu odkazy na dokumentaci jednotlivých funkcí.

A příště…

se podíváme na short-codes, nebo-li zkratkové kódy, které můžeme zapisovat do obsahu příspěvků.