Při tvorbě blogu se úvahy autora, jak vylepšit jeho strukturu a vzájemné propojení jednotlivých textů, dříve či později pravděpodobně stočí k myšlence, jak na konci každého textu odkázat čtenáře k četbě dalších podobných textů. WordPress pro to nabízí jedno elegantní, dosud však poměrně skryté řešení, a to na bázi štítků (tagů).
Návod, jak vylepšit svůj blog pomocí odkazů na související příspěvky, není nijak tajný, naopak jej lze najít na řadě webů zabývajících se WordPressem. Skryté je ono řešení tím, že není dostupné jako jedna z obecně dostupných funkcí, které by šlo jednoduše zapnout někde v administraci webu, právě naopak. Je totiž třeba vstoupit přímo do zdrojového kódu šablony. Pokud tedy nechcete vzít zavděk některým pluginem, který daný úkol splní za vás, případně se omezovat jen na šablony, do nichž vývojáři tuto funkci také vložili. Ani jednu z těchto alternativ nedoporučuju, ať už z hlediska nezávislosti (na šabloně), či kvůli kontrole rizik (čím méně pluginů, tím méně teoretických bezpečnostních mezer). Úprava zdrojového kódu není vůbec složitá a teoreticky se jí dokáže stylem Ctrl+C – Ctrl+V zhostit každý.
Úpravy jsou v zásadě nutné dvě. Jednak je třeba na správné místo vložit kód pro zobrazení kontejneru s příspěvky, jednak je nutné mu dát vizuálně přívětivou podobu.
Kód se vkládá do souboru single.php (Vzhled > Editor souboru šablony > Zobrazení příspěvku), a to přímo pod řádek s funkcí get_template_part. Pokud je tato funkce přímo zavřena v tagu PHP (<?php … ?>), kód níže se vloží celý, jinak se první a poslední řádek vynechají. Jelikož se nechci jen chlubit cizím peřím, níže uvedený kód jsem oproti tomu běžně dostupnému trochu vylepšil.
<?php
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>3, // Počet zobrazených příspěvků
'caller_get_posts'=>1,
'orderby'=>'rand', // Náhodný výběr příspěvků. Lze vynechat
);
$my_query = new wp_query( $args );
$countposts = $my_query->found_posts;
if($countposts > 0){
echo '<div id="related"><h4>Související příspěvky</h4>';
while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<ul class="relatedlist"><li><div class="relatedthumb">
<a rel="nofollow" href="<? the_permalink()?>"><?php if(has_post_thumbnail()){the_post_thumbnail();}
else{echo wp_get_attachment_image(image_ID,'thumbnail');/*Doplňte vlastní image_ID*/}?><br />
<div class="relatedtitle"><?php the_title(); ?></div>
</a>
</div></li></ul>
<? }
echo '</div>';}}
$post = $orig_post;
wp_reset_query();
?>
Kontejner s nadpisem Související příspěvky jsem celý přesunul do podmínky if ($tags) a přidal vnořenou podmínku if ($countposts > 0), díky čemuž se zobrazí jen tehdy, když má příspěvek nějaký štítek společný s jiným textem. V opačném případě dochází k nežádoucí situaci, kdy se u samostatných příspěvků zobrazuje jen prázdný kontejner s nadpisem.
Dále jsem upravil způsob zobrazení náhledového obrázku. V původním kódu se zobrazil náhledový obrázek (thumbnail) jen tehdy, když byl k příspěvku přiřazen. Jenže v mém případě tomu tak z historických důvodů mnohdy není, takže v kontejneru zůstávalo prázdné místo, případně jen osamocené nadpisy. Vyřešil jsem to tak, že jsem si zvolil výchozí náhledový obrázek, který se zobrazí u každého příspěvku, jenž nemá přidán obrázek vlastní. V kódu se uvádí ID výchozího obrázku (image_ID), což je číslo, které lze najít v adresním řádku při editaci obrázku (/wp-admin/post.php?post=image_ID&action=edit).
Na závěr jsem do pole $args přidal hodnotu 'orderby' => 'rand', pomocí níž se zobrazují náhodné příspěvky se stejnými tagy, nikoli jen ty nejnovější.
Vzhled kontejneru se souvisejícími příspěvky se nejsnáz upravuje v přizpůsobení šablony (Vzhled > Šablony > Přizpůsobit). Tam šablony standardně umožňují nastavení vlastního CSS, kam se jednoduše vloží následující kód.
/*Souvisejici*/
#related{
background: #f9f9f9;
border: 1px solid #f4f4f4;
}
#related h4 {
padding-left:10px;
padding-top:10px;
text-align:center;
}
.relatedlist{
width:30%;
display:inline-grid;
justify-content: center;
align-items: center;
text-align:center;
background: #F8F8F8;
margin-left:2%;
}
.relatedthumb{
background: #F8f8f8;
padding: 5px;
margin-bottom: 5px;
clear:both;
width:100%;
}
.relatedtitle{
font-size: 16px;
text-align:center;
margin: 0% 1% 1% 1%;
font-style:oblique;
padding-bottom:10px;
}
Dodám, že je samozřejmě potřeba přizpůsobit v třídě relatedlist hodnotu width (šířka odkazu), případně i margin-left (levý okraj) v závislosti na tom, jaký počet příspěvků chceme zobrazit. Platí totiž, že součet šířek jednotlivých odkazů a okrajů musí být vždy o něco menší než 100 %, pokud chceme zachovat jednořádkové zobrazení (zde 3×(30+2)). Vlastnosti jako barva pozadí (background) a vzhled písma (font-size, font-style, popř. font-weight) jsou naopak dost tvárné a záleží na každém, jak je nastaví.
Přečteno 156krát.