Question

我正在WordPress中创建自定义短代码，我想允许用户使用媒体模式窗口选择或上传某些媒体作为整个过程的一部分。

调用添加媒体模式的最佳方法是什么？

function CheesyEmbed_func($atts){

  $atts = shortcode_atts(array(
            'type' => '',
            'source' => ''
        ), $atts);

  if($atts['type'] == 'youtube'){
    $output = "<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/" . $atts['source'] . "?modestbranding=1&rel=0&showinfo=0&color=white&iv_load_policy=3' frameborder='0' allowfullscreen></iframe></div>";
    return $output;
  }

  if($atts['type'] == 'image'){
    $output = "<img src='" . $atts['source'] . "' class='img-responsive'>";
    return $output;
  }
}
add_shortcode('CheesyEmbed','CheesyEmbed_func');

Answer 1

function CheesyEmbed_func($atts){

    $atts = shortcode_atts(array(
        'type' => '',
        'source' => ''
    ), $atts);

    ob_start(); ?>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Media</button>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
    <?php
    $output = ob_get_clean();

    if($atts['type'] == 'youtube'){
        $output .= "<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/" . $atts['source'] . "?modestbranding=1&rel=0&showinfo=0&color=white&iv_load_policy=3' frameborder='0' allowfullscreen></iframe></div>";
    }

    if($atts['type'] == 'image'){
        $output .= "<img src='" . $atts['source'] . "' class='img-responsive'>";
    }

    else{
        $output .= 'No Content Here';
    }

    $output .= '</div></div></div></div>';

    return $output;

}

add_shortcode('CheesyEmbed','CheesyEmbed_func');

如果您使用的是Bootstrap，则上述代码应该可以正常工作。如果没有，你可以使用其他方法来激活模态窗口，并使用相同的逻辑编辑html。

您可以使用类型属性添加上传按钮，如下所示：

if($atts['type'] == 'upload'){
    $output .= "<form action='somewhere.php'><input id='upload' type='file'><input type='submit' value='Upload'></form>";
}

你可以使用jquery来处理用户的选择：

$("#myModal").on("click", "img, iframe", function () {
    //Append this somewhere else in the page.
    //Or upload $atts['source'] value to server. etc
});
$( "#myModal form" ).submit(function(e) {
    //Do something
});

希望有所帮助。如果没有随意问！

Wordpress Shortcode - 添加媒体模式

1 个答案: