在单个帖子上添加特色图片

已发表: 2013-10-10

无论您如何将其添加到“编辑帖子”屏幕，您的档案特色图像（帖子缩略图）都将从特色图像中提取。

在您的单个帖子条目标题之前或之后显示的图像是从您插入帖子中的第一张图像中提取的，除非您将其删除。

您可以使用此页面上的代码片段之一删除或修改在单个帖子条目标题之前或之后显示图像的代码。

如果您将图像添加为特色图像，它将在您的档案中显示为帖子缩略图，而不是作为单个帖子标题之后的特色图像。

如果您不添加特色图片，则帖子中的第一张图片将显示在您的单个帖子条目标题之前或之后以及您的存档页面上。

在这篇文章中，我将为您提供几行 PHP 代码，您可以简单地将其粘贴到子主题 functions.php 文件的末尾。

该代码将使您能够在单个帖子的标题之前或之后显示您的帖子图像。

在单个标题之前发布图像

丹最近问了这个问题：

一直在绞尽脑汁搜索，使用在这个论坛中找到的不同代码，并导致发表了一个新帖子。

使用Minimum Pro，我只想在“单个帖子”页面中显示帖子的特色图片。 最好是上面的文字内容。 我在这个论坛上找到了代码并将其放在functions.php 中。 它显示了特色图片，但同时清除了文本内容。 所以很明显我做错了什么。

注意：如果您正在运行旧的 XHTML 标记而不是 HTML 5，请使用本文中的最后一个 PHP 代码片段，因为挂钩已更改。

在标题后显示特色图片

此代码在您的单个帖子标题之后显示图像。

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

在标题前显示特色图片

此代码在您的单个帖子标题之前显示您的图像。

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

在静态页面上显示特色图片

如果您还希望它适用于静态单页，只需将 page 添加到代码中，如下所示：

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'page' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

在静态页面和单个帖子上显示特色图片

如果您还希望它适用于静态页面和帖子，只需将页面添加到代码中，如下所示：

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular() ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

您的特色图像显示的位置可以使用定位优先级的第三个参数来确定。

在上面的代码中，只需将第三个参数从 5 更改为 15。

更改图像大小

这是根据您的媒体设置使用大尺寸的示例。

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

您还可以使用“设置”>“媒体”中配置的任何其他默认尺寸。

  • 缩略图
  • 中等的
  • 大的
  • 满的

您还可以使用您在函数文件中添加的任何自定义大小。

例子：

文件夹

add_image_size( 'portfolio', 540, 340, TRUE );

使用旧的 XHTML 循环挂钩

如果您仍在运行 XHTML 并且尚未转换为 HTML 5，则需要使用旧的 Loop Hooks：

 add_action( 'genesis_before_post_title', 'single_post_featured_image' ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

在标题和图像之间添加空格

下面是一些示例 CSS 代码，您可以将其添加到子主题 style.css 文件末尾的媒体查询代码之前，该代码会在您的特色图片和单个帖子的条目标题之间添加一个边距。

 .single .post-image { margin-bottom: 30px; }

将此示例用于页面：

 .page .post-image { margin-bottom: 30px; }

右对齐特色图像（后图像）

您还可以将您的帖子图像向右对齐。

只需在子主题 style.css 文件末尾附近的媒体查询之前添加此 CSS 代码：

 .single .post-image { float:right; margin:0 0 1em 1em; width: 285px; height: 285px; }

上面的代码会将您在所有单个帖子中添加为特色图像的图像对齐到您的内容右侧，因此其文本包装如下：

发布图片

您还可以将 alignright 类添加到 PHP 代码中，而不是使用 CSS。

 'class' => 'alignright'

只需将 PHP 代码中的 post-image 替换为 alignright，您的文本就会在内容右侧环绕您的图像。

左对齐特色图像（后图像）

您还可以将单个帖子的特色图片对齐到左侧。

 .single .post-image { float:left; margin: 1em 1em 0 0; width: 200px; height: 200px; }

结果如下：

向左飘浮

您还可以将 alignleft 类添加到 PHP 代码中，而不是使用 CSS。

 'class' => 'alignleft'

只需将 PHP 代码中的 post-image 替换为 alignleft，您的文本就会在内容左侧环绕您的图像。

注意：此 CSS 代码适用于 Genesis 2.0 HTML 5 子主题，并且可能不适用于使用不同类用于发布图像/特色图像的其他主题。

从特色图片中删除 href 链接

一位成员问我如何从代码中删除链接，所以这里是：

只需替换这部分代码：

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );

有了这个：

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); echo $img;

相关文章

  • 为单个帖子和存档页面使用不同特色图像的 2 种方法
  • 单个帖子上的特色图片上的条目标题
  • 在单个帖子或页面上添加或删除特色图像的复选框
  • 将特色图片链接到自定义 URL
  • 自定义单个帖子上特色图像的显示
  • 在任何主题的内容之前添加特色图片
  • 为每个类别设置后备特色图片