如何通过WordPress短代码属性调用图像?

时间:2014-03-21 15:06:44

标签: wordpress image wordpress-plugin shortcode

我正在为wordpress.org开发一个WordPress插件,这是我的第一个插件。有一个问题我不能自己解决(我做了很多谷歌,但仍然找不到任何解决方案)。但也许这个问题的解决方案对你们中的一些人来说非常简单。如果您知道直接解决方案,请回答;我将非常感激。

我的插件允许用户为每列创建带有横幅图像的表格。请检查 demo link

enter image description here

对于每个栏目的头部,有两个部分。一个是主题,另一个是图片。短代码看起来像

[head 主题 =“标准”图片 =“http://shahriarblog.com/wp-content/uploads/2014/03/hello-5.jpg “] [/头]

上面的短代码源代码如下:

function head($atts, $content = null) {
    extract( shortcode_atts( array(
        'color' => '#333',
        'banner' => 'visible',
        'subject' => 'Subject',
        'image' => 'http://shahriarblog.com/wp-content/uploads/2014/03/hello-5.jpg',
    ), $atts ) );
    return "<div class='gridacc'><h2 style='background:{$color}'>{$subject}</h2><div class='photo' style='display: {$banner}ne'><img src='{$image}' alt=''></div><dl>".do_shortcode($content)."</dl></div>";
}
add_shortcode ("head", "head");

如您所见,用户必须知道图像的网址才能在短代码中使用它们。但我没有使用图片网址,而只想使用图片名称。例如,我想使用图像 =“hello-5.jpg”而不是使用图像 =“http://shahriarblog.com/wp-content/uploads/2014 /03/hello-5.jpg“

另一件事: 现在要获取图像的网址,每个用户都需要通过WordPress Media上传图像,然后从媒体库中获取每个图像的网址。但是可以直接在我的插件文件夹中上传图像而不是默认的WordPress上传文件夹吗?

如果您有兴趣,请参阅此插件的文档的 link source code。非常感谢。

1 个答案:

答案 0 :(得分:1)

我认为最直接的是直接查询数据库,在hello-5.jpg表中查找附件wp_postmeta以获取其ID。然后,使用regular WP function来提取网址:

function head($atts, $content = null) {
    extract( shortcode_atts( array(
        'color' => '#333',
        'banner' => 'visible',
        'subject' => 'Subject',
        'image' => 'http://example.com/default_image.jpg',
    ), $atts ) );

    // The attribute image was passed in the shortcode [head image="hello-5.jpg"]
    if( $image != 'http://example.com/default_image.jpg' ) {
        global $wpdb;
        $attachment_id = $wpdb->get_var(
                    $wpdb->prepare( "
                        SELECT post_id
                        FROM $wpdb->postmeta
                        WHERE meta_value LIKE %s
                        AND meta_key = '_wp_attached_file'
                    ", "%{$image}%" 
                    )
                );
        // Found it, change the $image URL
        if( $attachment_id )
            $image = wp_get_attachment_image_src( $attachment_id, 'full' );
    }

    return "<div class='gridacc'>
        <h2 style='background:{$color}'>{$subject}</h2>
    <div class='photo' style='display: {$banner}ne'>
        <img src='{$image}' alt=''>
    </div>
    <dl>".do_shortcode($content)."</dl>
    </div>";
}

以下Q&amp; A展示了如何使用Ajax改进Shortcode TinyMCE按钮的界面:
Call PHP function inside TinyMCE modal window on the WordPress backend