wordpress特色图像

 墨情博客  2019-04-15 09:05  122次阅读   评论 0 条

特色图像(有时也称为Post Thumbnails)是表示单个Post,Page或Custom Post Type的图像。 当您创建主题时,您可以通过多种不同的方式,在您的存档页面,标题或上面的一个帖子中输出特色图像。

支持特色图像#启用特色图像支持

在“特色图像”界面将出现在“编辑”屏幕上之前,主题必须声明对“特色图像”功能的支持。 通过在主题的functions.php文件中放置以下内容来声明支持:

  1. add_theme_support( 'post-thumbnails' );  

设置精选图像

一旦添加了对特色图片的支持,“精选图像”元框将在相应的内容项目的“编辑”屏幕上显示。 如果用户无法看到它们,则可以在屏幕选项中启用它。

默认情况下,wordpress主题特色图像元框显示在编辑帖子和编辑页面屏幕的侧栏中。

功能参考

  1. add_image_size()– 注册新图片大小…  
  2. set_post_thumbnail_size() – 注册文章缩略图的图片大小…  
  3. has_post_thumbnail() – 检查帖子是否附加了图片…  
  4. the_post_thumbnail() – 显示帖子缩略图…  
  5. get_the_post_thumbnail() – 检索Post Thumbnail …  
  6. get_post_thumbnail_id() – Retrieve Post Thumbnail ID…  

Image Sizes

WordPress的默认图像大小是“Thumbnail”,“Medium”,“Large”和“Full Size”(您上传的图像的原始大小)。 这些图像大小可以在WordPress管理媒体面板的“设置”>“媒体”下配置。 您还可以通过传递具有图像尺寸的数组来定义自己的图像大小:

  1. the_post_thumbnail(); // 没有参数 - >; 缩略图  
  2. the_post_thumbnail( 'thumbnail' ); // 缩略图(默认最大150px x 150px)  
  3. the_post_thumbnail( 'medium' ); // 中等分辨率(最大300px x 300px)  
  4. the_post_thumbnail( 'medium_large' ); // 中等大分辨率(默认768px x无高度限制)  
  5. the_post_thumbnail( 'large' ); // 大分辨率(最大640x x 640像素)  
  6. the_post_thumbnail( 'full' ); // 原始图像分辨率(未修改)  
  7. the_post_thumbnail( array( 100, 100 ) ); // 其他分辨率(高,宽)  

添加自定义特色图像大小

除了单独使用定义图像大小外

  1. the_post_thumbnail( array(  ,  ) );  

您可以在主题的功能文件中创建自定义的特色图像大小,然后可以在主题的模板文件中调用。

  1. add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)  

以下是在主题的functions.php文件中创建自定义精选图像大小的示例。

  1. if ( function_exists( 'add_theme_support' ) ) {  
  2.     add_theme_support( 'post-thumbnails' );  
  3.     set_post_thumbnail_size( 150, 150, true ); // default Featured Image dimensions (cropped)  
  4.    
  5.     // additional image sizes  
  6.     // delete the next line if you do not need additional image sizes  
  7.     add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)  
  8.  }  

设置特色图像输出尺寸

用于当前Theme的functions.php文件。
您可以使用set_post_thumbnail_size()通过按比例调整图像大小来设置默认的精选图像大小(即不扭曲图像):

  1. set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode  

通过裁剪图像(从侧面或从顶部和底部)设置默认的精选图像尺寸:

  1. set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode  

精选图片样式

  1. img.wp-post-image  
  2. img.attachment-thumbnail  
  3. img.attachment-medium  
  4. img.attachment-large  
  5. img.attachment-full  

您还可以使用the_post_thumbnail()中的attribute参数给精选图片自己的类。用“alignleft”类显示精选图像:

  1. the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) );  

默认使用

  1. // 检查帖子或页面是否分配有精选图片。  
  2. if ( has_post_thumbnail() ) {  
  3.     the_post_thumbnail();  
  4. }  
注意:

要返回特色图像以用于PHP代码而不是显示它,请使用: get_the_post_thumbnail()

  1. // 检查特色图像,然后将其分配给一个PHP变量供以后使用  
  2. if ( has_post_thumbnail() ) {  
  3.     $featured_image = get_the_post_thumbnail();  
  4. }  

链接发布固定链接或更大的图像

警报:不要在同一主题中一起使用这两个示例。

示例1.要在特定循环中将Post Thumbnails链接到Post固定链接,请在Theme的模板文件中使用以下内容:

  1. <?php if ( has_post_thumbnail()) : ?>  
  2.    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >  
  3.    <?php the_post_thumbnail(); ?>  
  4.    </a>  
  5.  <?php endif; ?>  

示例2.要将您网站上的所有Post Thumbnails链接到Post的固定链接,请将其放在当前的Theme的functions.php文件中:

  1. add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );  
  2.    
  3. function my_post_image_html( $html$post_id$post_image_id ) {  
  4.    
  5.   $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';  
  6.   return $html;  
  7.    
  8. }  

此示例链接到“large”Post Thumbnail图像大小,必须在“循环”中使用。

  1. <?php  
  2.  if ( has_post_thumbnail()) {  
  3.     $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');  
  4.     echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';  
  5.     the_post_thumbnail('thumbnail');  
  6.     echo '</a>';  
  7.  }  
  8.  ?>  

源文件

  1. wp-includes/post-thumbnail-template.php  

文章来源于:挖主题

本文地址:https://www.13qing.com/88.html
关注我们:关注请扫描底部右下角二维码,公众号:nygzs166
温馨提示:文章内容系作者个人观点,不代表墨情博客对观点赞同或支持。
版权声明:本文为原创文章,版权归 墨情博客 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情