构建一个Bootstrap WordPress主题#7 添加内容和阅读按钮

我们先来添加摘要部分。

  1. 添加内容摘要

我们在9-column的div中添加如下代码:我们在9-column的div中添加如下代码:

</p>

<div class="excerpt">
	<?php echo get_the_excerpt(); ?>
</div>

到前端刷新页面,摘要出现了

内容摘要

  1. 添加阅读更多按钮
    在excerpt类下面,使用bootstrap类的btn 和 btn-default创建一个按钮。
    将href属性设置为the_permalink()。 对于文本,我们会说Read More and &raquo 。 我们还将在上面添加一个换行符br。
<br>
<a class="btn btn-default" href="<?php the_permalink(); ?>">
 Read More &raquo;
</a>

刷新前端页面
read more按钮

  1. 为没有图片的博客帖子设置模式
    我们之前设置无图帖子按照容器全部宽度显示,找到col-md-12 的div,在其内部输入以下代码覆盖IMAGE HERE文本:
<div class="col-md-12">

 <h2>
 <a href="<?php echo the_permalink(); ?>">
 <?php echo the_title(); ?>
 </a>
 </h2>
 <p class="meta">
 Posted at
 <?php the_time(); ?> on 
 <?php the_date(); ?> by 
 <strong><?php the_author(); ?></strong>
 </p>
 <div class="excerpt">
 <?php echo get_the_excerpt(); ?>
 </div>
 <br>
 <a class="btn btn-default" href="<?php the_permalink(); ?>">
 Read More &raquo;
 </a>

现在我们有了没有图片的帖子,而不只是一个空的空间。
无图帖子出现
如果我们没有使用条件语句,这里就像一个图片丢失的帖子。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值