插件内的 Wordpress 简码

Question

这是我正在编写的其中一个插件中 shortcodes.php 文件的片段。

if($home_loop->have_posts()) {
        switch($display) {      

        case "static":

                while ($home_loop->have_posts()): $home_loop->the_post();

                        if(has_post_thumbnail() ) { 
                            $content .= '<div class="parallax">';
                            $content .= get_the_post_thumbnail($post->ID, 'wrapper-wide', array('class' => "img-responsive")); 
                            $content .= '</div>';
                            $content .= '<div class="container">';
                            $content .= get_the_content();
                            $content .= '</div>';

                            $content .= '<style>';
                            $content .= '.parallax{//css style here}';

                            $content .= '</style>;



                        } else {
                            //Something
                        }

                endwhile;

                break;

这很完美。如果我将特色图片缩略图放在我的主页 post 中，它将以我的视差 div 显示。我的问题是不是将缩略图放在 div 中，而是希望它具有背景图像：url()。我在下面找到了这段代码

<?php
$background = get_field( 'background_image' );

if($background):
?>
<style>
.main-wrapper {
 background-image: url(<?php echo $background ?>);
}
</style>
<?php endif; ?>

我如何在 $content 中合并运行类似的内容？我试图将图像作为 background-image:url() 的原因是我可以添加特定的 css 样式，如背景位置、大小、重复、附件。

Answer 1

为什么不直接在代码中将图像添加为背景图像？ [wp_get_attachment_image_src][1] 将 return 的数组 url，任意附件的宽度和高度。将特色图片的 ID 传递给它，并灵活地使用您想要的任何尺寸，而不仅仅是实际的特色图片尺寸。然后使用内联 CSS 将其作为背景放置。如果需要，可以在 CSS sheet 中覆盖它。

($home_loop->have_posts()) {
        switch($display) {      

        case "static":

                while ($home_loop->have_posts()): $home_loop->the_post();

                        if(has_post_thumbnail() ) {
                            $post_thumnail_info = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'wrapper-wide' );
                            $content .= '<div class="parallax" style="background-image: url( \'' . $post_thumbnail_info[0] . '\' );">';

插件内的 Wordpress 简码

Wordpress Shortcode inside of plugin

css

php

wordpress

shortcode