怎么调用主题文件夹里的图片?-wordpress开发

在wordpress主题开发过程中,该如何调用呢?这一次的wordpress开发教程就和大家分享下,怎么调用主题文件夹里的图片

在开发主题时,我们常常需要调用自己准备的图片,在wordpress主题开发过程中,该如何调用呢?这一次的wordpress开发教程就和大家分享下,怎么调用主题文件夹里的图片。

根据下方代码演示,您可以根据自己的需要进行调整使用即可。

<img src="<?php echo get_template_directory_uri() . '/images/logo.png'; ?>" />


怎么调用子主题里的图片

<img src="<?php echo get_stylesheet_directory_uri();?>/assets/logo.svg" />

当然,在函数中,您哈可以这样用:

//获取图片
$alignleft_logo = get_template_directory_uri() . '/img/alignleft.svg';

调用:

<img class="img-tags" src="'.$alignleft_logo.'" alt="上一页" title="上一页"/>

获取img代码

要在媒体库中显示图像,请使用wp_get_attachment_image()功能。

echo wp_get_attachment_image( $attachment->ID, 'thumbnail' );


您将获得具有所选缩略图大小的以下HTML输出

<img width="150" height="150" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample-150x150.jpg" class="attachment-thumbnail size-thumbnail" ... />

您可以指定其他尺寸,例如原始图像的“完整”或“中”和“大”,用于在“ 管理”屏幕中的“设置”>“媒体”设置的尺寸,或任何宽度和高度对作为数组。您还可以使用add_image_size()自由设置自定义大小字符串;

echo wp_get_attachment_image( $attachment->ID, Array(640, 480) );

获取图像的URL

如果要获取图像的URL,请使用wp_get_attachment_image_src()。它返回一个数组(URL,width,height,is_intermediate),或者false,如果没有可用的图像。

$image_attributes = wp_get_attachment_image_src( $attachment->ID );
if ( $image_attributes ) : ?>
    <img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" />
<?php endif; ?>

路线

在站点中添加图像时,可以将图像对齐指定为right,left,center或none。WordPress核心自动添加CSS类来对齐图像:

  • alignright
  • alignleft
  • 居中对齐
  • alignnone

这是选择中心对齐时的样本输出

<img class="aligncenter size-full wp-image-131" src= ... />

为了利用这些CSS类进行对齐和文本换行,您的主题必须在样式表中包含样式,例如主样式表文件。您可以使用style.css捆绑的官方主题,如Twenty Seventeen作为参考。

Top ↑

标题

如果在媒体库中为图像指定了标题,则HTML img元素由短代码和[/ caption]括起来。

<div class="mceTemp"><dl id="attachment_133" class="wp-caption aligncenter" style="width: 1210px"><dt class="wp-caption-dt"><img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" /></dt><dd class="wp-caption-dd">Sun set over the sea</dd></dl></div>

并且,它将以HTML格式呈现为图形标记:

<figure id="attachment_133" style="width: 1200px" class="wp-caption aligncenter">
    <img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" srcset= ... />
     
<figcaption class="wp-caption-text">Sun set over the sea</figcaption>
 
</figure>

与对齐类似,您的主题必须包含以下样式。

  • wp-caption
  • wp-caption-text

参考文献

国外主题

Weeland - 砌体生活方式WordPress博客主题

2019-12-16 7:01:59

动态年限版权功能 - wordpress教程

2020-3-5 7:37:00

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索