Pokročilé úpravy zobrazování náhledových obrázků v šabloně

Náhledové obrázky, které se nově objevily ve WordPressu 2.9, toho sice na první pohled moc neumí, ale s pomocí několika drobných zásahů je možné jejich zobrazení v šabloně libovolně upravovat. Nejčastějším způsobem těchto úprav je obvykle zápis dodatečné funkce do souboru functions.php ve vaší šabloně, ale v tomto případě to ani není nutné a vystačíme si s úpravou funkce the_post_thumbnail() a doplněním HTML. Na žádost našeho čtenáře si v tomto článku ukážeme úpravu zobrazení náhledových obrázků tak, aby odkazovaly přímo na příslušný příspěvek a braly si z něj jeho název pro atributy alt a title.

Existují sice i pluginy, které mají více možností nastavitelných klikáním myši, ale vzhledem k tomu, že jsou náhledové obrázky novou součástí WordPressu, tak doporučujeme naučit se s nimi pracovat a používat je. Narozdíl od sebelepších pluginů tak máte jistotu, že budou do budoucna podporovány. Celý náš vytyčený úkol je třeba rozdělit na dvě části. Nejdříve půjde o zobrazení náhledového obrázku, respektive o úpravu jeho atributů alt a title, které si bere tato funkce bere defaultně přímo z Knihovny médií.

the_post_thumbnail( $size, $attr );

Základní tvar funkce the_post_thumbnail() má tedy dva parametry, velikost a další atributy. První je vcelku jasnýa druhý parametr využijeme pro naše účely (libovolný soubor šablony, kde se bude zobrazovat náhledový obrázek):

the_post_thumbnail( 'medium', array( 'title' => $post->post_title, 'alt' => $post->post_title, 'class' => 'alignleft' ) );

A to je vlastně všechno. Říkáme tím WordPressu, aby zobrazil náhledový obrázek ve střední velikosti (medium) a upravil atributy obrázku title a alt (převezmeme uvnitř loopu název příspěvku přímo z proměnné $post->post_title) a přidal mu také třídu .alignleft, která obvykle určuje, že bude obrázek zarovnán doleva (vše musí být samozřejmě správně nastylováno v šabloně).

Druhý problém, tedy obalení náhledového obrázku odkazem na článek, má dokonce více možných řešení. Jedním z nich je opět úprava šablony, kde před (a za) výpis náhledového obrázku pomocí funkce (parametry si samozřejmě můžete libovolně doplnit) the_post_thumbnail() přidáme jednoduché HTML odkazu s využitím funkce get_permalink().

<a href="<?php echo get_permalink( $post->post_id ); ?>">
<?php the_post_thumbnail(); ?>
</a>

Protože byste to ale museli dělat ve všech souborech šablony, kde se budou náhledové obrázky zobrazovat (obvykle index.php, archive.php, ale třeba i search.php a další) , tak existuje i elegantnější řešení, když vložíte následující (upravený) kód do souboru functions.php ve vaší šabloně:

add_filter( 'post_thumbnail_html', 'moje_vlastni_html', 10, 3 );
function moje_vlastni_html( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '">' . $html . '</a>';
return $html;
}

Využijeme tak filtru WordPressu a odkaz tak přidáme už k vygenerovanému HTML pro náhledový obrázek. Potom už nemusíte nikde nic vkládat do šablony a odkaz se objeví u všech výskytů náhledových obrázků na webu. Pokud máte s uvedenými příklady nějaké problémy či konkrétní dotazy, tak se klidně ozvěte v komentářích…

Nejoblíbenější hosting pro WordPress WEDOS.cz

26 thoughts on “Pokročilé úpravy zobrazování náhledových obrázků v šabloně”

  1. Dobrý den,
    šlo by něco takového vytvořit i na tlačítko v editoru. Mám na mysli, že bych tam měl tlačítko, označil bych text pak klikl na tlačítko a on se mi tam přidal odkaz na příspěvek, který bych právě vytvářel… Díky

  2. Používám WP 3.3.1 + šablonu Recipy a úplně mi zmizel panel pro nastavení náhledového obrázku příspěvků, přestože v šabloně pro ně prostor je. Nevíte, jak panel náhledového obrázku “reaktivovat” nebo jinak spustit?

  3. Nemůže to být nějaké nastavení šablony? Díval jste se do záložky “Nastavení zobrazených informací” (v pravé horní části), kde se povoluje zobrazování jednotlivých částí administrace?

  4. Dobrý den,

    je možné přidávat druhý náhledový obrázek s jinou velikostí? Např. do single.php s velikostí medium.
    Děkuji.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *