简体   繁体   English

WordPress:如何添加与图像边缘右对齐的标题

[英]Wordpress: How to add a caption right-aligned to the edge of the image

So how do I align an image caption under an image tag to it's right hand edge? 那么,如何将图像标签下的图像标题与右边缘对齐?

Tried using div but obviously that's not allowed in wp. 使用div尝试过,但显然在wp中是不允许的。

What alternative css/tags do I need to use? 我需要使用哪些替代的CSS /标签?

Does this not work? 这行不通吗?

.wp-caption p.wp-caption-text { text-align:right; .wp-caption p.wp-caption-text {text-align:right; } }

I came up with a way to specify alignment on a per-caption basis. 我想出了一种根据字幕指定对齐方式的方法。

Basically, I copied the caption shortcode from the media.php and made it into my own custom function which accepts a "captionalign" argument. 基本上,我从media.php复制了标题简码,并将其放入我自己的自定义函数中,该函数接受“ captionalign”参数。

To use, paste the below code into your theme's "function.php" file - this will allow you to specify an option in your caption tag named captionalign. 若要使用,请将以下代码粘贴到主题的“ function.php”文件中-这将使您可以在标题标签中指定名为captionalign的选项。 By setting this to right, left, or center, you can specify a per-caption text alignment. 通过将此设置为向右,向左或居中,可以指定每个字幕的文本对齐方式。 Leaving out the attribute will have the caption default to whatever you have your default alignment as. 省略该属性将使标题默认为默认对齐方式。

An example of this in use: 一个使用中的例子:

[caption align="aligncenter" width="300" caption="My caption" captionalign="right"]
<a href="http://www.myawesomeblog.com/wp-content/uploads/2010/05/image.jpg">
<img title="My image" src="http://www.myawesomeblog.com/wp-content/uploads/2010/05/image.jpg-300x216.jpg" alt="My image" width="300" height="216" />
</a>
[/caption]

And here is the function: 这是函数:

add_shortcode('wp_caption', 'custom_img_caption_shortcode');
add_shortcode('caption', 'custom_img_caption_shortcode');

/**
 * The Caption shortcode.
 *
 * Allows a plugin to replace the content that would otherwise be returned. The
 * filter is 'img_caption_shortcode' and passes an empty string, the attr
 * parameter and the content parameter values.
 *
 * The supported attributes for the shortcode are 'id', 'align', 'width', and
 * 'caption'.
 *
 * @since 2.6.0
 *
 * @param array $attr Attributes attributed to the shortcode.
 * @param string $content Optional. Shortcode content.
 * @return string
 */
function custom_img_caption_shortcode($attr, $content = null) {

// Allow plugins/themes to override the default caption template.
$output = apply_filters('img_caption_shortcode', '', $attr, $content);
if ( $output != '' )
    return $output;

extract(shortcode_atts(array(
    'id'    => '',
    'align' => 'alignnone',
    'width' => '',
    'caption' => '',
    'captionalign' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
    return $content;

if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
. do_shortcode( $content ) . '<p class="wp-caption-text" style="text-align:' . $captionalign . '">' . $caption . '</p></div>';
}

Hope that helps someone! 希望能对某人有所帮助!

在Wordpress社区网站论坛上也被问到 ,没有回应,因此推测这不是2.2.1的功能

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM