列出类别帖子:在单个链接中输出缩略图和帖子标题

时间:2017-01-25 作者:Tim Batale

一段时间以来,我一直在使用列表类帖子来输出链接的基本列表。现在,我想通过为每个链接添加缩略图并允许它们水平滚动,使它们看起来更有吸引力。

使用the W3C example 在此基础上,我使用以下代码创建了一个菜单:

<style type="text/css">
div.scrollmenu {
overflow: auto;
white-space: nowrap;
}

div.scrollmenu a {
display: inline-block;
color: black;
text-align: center;
padding: 0;
text-decoration: none;
width: 218px;
white-space: normal;
vertical-align: text-top;
}

div.scrollmenu a:hover {
background-color: #aa0000;
}
</style>

<div class="scrollmenu">
<a href="www.thisismylink.com/a"><img src="a.jpg" /><br />First story</a>
<a href="www.thisismylink.com/b"><img src="b.jpg" /><br />Second story</a>
<a href="www.thisismylink.com/c"><img src="c.jpg" /><br />Third story</a>
</div>
我现在需要让列表类别帖子输出代码,以匹配div中的内容。使用自定义模板,我已经能够接近,但还不够接近。这就是我得到的:

<div class="scrollmenu">
<a href="www.thisismylink.com/a" title="First story"><img width="218" height="117" src="www.thisismylink.com/a" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink.com/a" title="First story">First story</a>   
<a href="www.thisismylink.com/b" title="Second story"><img width="218" height="117" src="www.thisismylink.com/b" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink.com/c" title="Second story">Second story</a>   
<a href="www.thisismylink.com/c" title="Third story"><img width="218" height="117" src="www.thisismylink.com/c" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink.com/c" title="Third story">Third story</a>
</div>
显然,我需要做的是将缩略图和图像包装在同一个链接中。但我看不出有什么方法可以做到这一点,只需破解核心列表类帖子插件文件。我不愿意这样做,因为当我已经使用了列表类帖子时,它会把之前的所有实例都搞砸(这也不是一个好的做法)。

有人能提出解决方案吗?我想知道是否有可能在我的自定义模板中重写CatListDisplayer类,但我认为这是不可能的,因为它正在其他地方调用。

1 个回复
SO网友:Beeblebrox

我一直在寻找同样的东西,我想我已经得到了答案的三分之二。。。

首先,为插件定义一个自定义模板;

https://github.com/picandocodigo/List-Category-Posts/wiki/Template-System

在该模板中,您可以通过构建(根据演示模板的示例)来构建输出(包含元素+每个项目)。事实证明,您还可以访问这些列表中的默认WordPress函数。。

$lcp_display_output .= "<li>";   
$lcp_display_output .=  \'<a href=\\"\' . get_permalink($post->ID) . \'\\">\';
$lcp_display_output .= $this->get_thumbnail($post);
$lcp_display_output .= $this->get_post_title($post, \'h3\');
...
$lcp_display_output .= "</a>";
$lcp_display_output .= "</li>";
这是您构建所需样式的地方。

然后,在您的帖子中,指定您不希望标题充当链接(您可以在模板级别使用标记和类来修饰它们);

[catlist name="cat1" template=your-template-name thumbnail=yes link_titles=false]
问题在于,它仍然以格式化链接的形式返回缩略图。我无法通过插件将其恢复为缩略图src:

https://github.com/picandocodigo/List-Category-Posts/blob/master/doc/FAQ.md#no_link

这是我的第一段Wordpress代码,所以我相信有一种方法可以从内置的Wordpress函数中获得它。

相关推荐