如何显示嵌入到我自己的wordpress视觉作曲元素中的图像？我需要通过php代码的方式
问题描述：
我创建了自己的元素，并成功实现了他的视觉作曲家。我创建了他的菜单，现在我需要帮助代码修复/检查，因为如何显示嵌入到我自己的wordpress视觉作曲元素中的图像？我需要通过php代码的方式
我无法弄清楚如何让图片显示。他不满我需要的地方。
我的元素是一个幻灯片，每个幻灯片上有5个幻灯片是徽标（img）内容（文本）签名（文本）。
我知道图片可以自动添加，但我想再次解决这个问题。
php语言对我来说是全新的，所以我使用教程来创建元素，然后我找到了调整这个代码，这将允许我将图像添加到我的幻灯片。
但我不知道如何来确定显示图像，我认为同样的任期由纯文本将被用来识别图像
我尝试这样做两件事情：
<div><img class="reference_content_img" src="' . $image1 . '" alt=""> </div>
<div><img class="reference_content_img" src="" alt="">' . $image1 . '</div>
当我通过我的视觉作曲家菜单上传图片，并没有显示的图像，并在浏览器中检查代码只是一些数字（像这样5546）
这里是我的程序（own-element.php）：
<?php
/*
* Element Description: VC Info Box
*/
// Element Class
class vcReferences extends WPBakeryShortCode {
// Element Init
function __construct() {
add_action('init', array($this, 'vc_references_mapping'));
add_shortcode('vc_references', array($this, 'vc_references_html'));
}
// Element Mapping
public function vc_references_mapping() {
// Stop all if VC is not enabled
if (!defined('WPB_VC_VERSION')) {
return;
}
// Map the block with vc_map()
vc_map(
array(
'name' => __('VC References', 'text-domain'),
'base' => 'vc_references',
'description' => __('References block', 'text-domain'),
'category' => __('My Elements', 'text-domain'),
'icon' => get_template_directory_uri() .'/assets/images/references-block-img.png',
'params' => array(
array(
'type' => 'textfield',
'holder' => 'h3',
'class' => 'title-class',
'heading' => __('Title', 'text-domain'),
'param_name' => 'title',
'value' => __('Default value', 'text-domain'),
'description' => __('Enter name of your section', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'General',
),
/*
* First content block
*/
array(
'type' => 'attach_image',
'holder'=> 'div',
'class' => '',
'heading' => __('Image', 'text-domain'),
'param_name' => 'image1',
'value' => __('Default Value', 'text-domain'),
'description' => __('Picture of a person', 'text-domain'),
'admin_level' => false,
'wight' => 0,
'group' => 'Slide 1',
),
array(
'type' => 'textarea',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Content', 'text-domain'),
'param_name' => 'content1',
'value' => __('Default value', 'text-domain'),
'description' => __('Text you need to show', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 1',
),
array(
'type' => 'textfield',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Autor', 'text-domain'),
'param_name' => 'autor1',
'value' => __('Default value', 'text-domain'),
'description' => __('Autor´s name', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 1',
),
array(
'type' => 'textfield',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Company', 'text-domain'),
'param_name' => 'company1',
'value' => __('Default value', 'text-domain'),
'description' => __('Name of company', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 1',
),
/*
* Second content block
*/
array(
'type' => 'attach_image',
'holder'=> 'div',
'class' => '',
'heading' => __('Image', 'text-domain'),
'param_name' => 'image2',
'value' => __('Default Value', 'text-domain'),
'description' => __('Picture of a person', 'text-domain'),
'admin_level' => false,
'wight' => 0,
'group' => 'Slide 2',
),
array(
'type' => 'textarea',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Content', 'text-domain'),
'param_name' => 'content2',
'value' => __('Default value', 'text-domain'),
'description' => __('Text you need to show', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 2',
),
array(
'type' => 'textfield',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Autor', 'text-domain'),
'param_name' => 'autor2',
'value' => __('Default value', 'text-domain'),
'description' => __('Autor´s name', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 2',
),
array(
'type' => 'textfield',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Company', 'text-domain'),
'param_name' => 'company2',
'value' => __('Default value', 'text-domain'),
'description' => __('Name of company', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 2',
),
/*
* Third content block
*/
array(
'type' => 'attach_image',
'holder'=> 'div',
'class' => '',
'heading' => __('Image', 'text-domain'),
'param_name' => 'image3',
'value' => __('Default Value', 'text-domain'),
'description' => __('Picture of a person', 'text-domain'),
'admin_level' => false,
'wight' => 0,
'group' => 'Slide 3',
),
array(
'type' => 'textarea',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Content', 'text-domain'),
'param_name' => 'content3',
'value' => __('Default value', 'text-domain'),
'description' => __('Text you need to show', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 3',
),
array(
'type' => 'textfield',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Autor', 'text-domain'),
'param_name' => 'autor3',
'value' => __('Default value', 'text-domain'),
'description' => __('Autor´s name', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 3',
),
array(
'type' => 'textfield',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Company', 'text-domain'),
'param_name' => 'company3',
'value' => __('Default value', 'text-domain'),
'description' => __('Name of company', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 3',
),
/*
* Fourth content block
*/
array(
'type' => 'attach_image',
'holder'=> 'div',
'class' => '',
'heading' => __('Image', 'text-domain'),
'param_name' => 'image4',
'value' => __('Default Value', 'text-domain'),
'description' => __('Picture of a person', 'text-domain'),
'admin_level' => false,
'wight' => 0,
'group' => 'Slide 4',
),
array(
'type' => 'textarea',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Content', 'text-domain'),
'param_name' => 'content4',
'value' => __('Default value', 'text-domain'),
'description' => __('Text you need to show', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 4',
),
array(
'type' => 'textfield',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Autor', 'text-domain'),
'param_name' => 'autor4',
'value' => __('Default value', 'text-domain'),
'description' => __('Autor´s name', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 4',
),
array(
'type' => 'textfield',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Company', 'text-domain'),
'param_name' => 'company4',
'value' => __('Default value', 'text-domain'),
'description' => __('Name of company', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 4',
),
/*
* Fifth content block
*/
array(
'type' => 'attach_image',
'holder'=> 'div',
'class' => '',
'heading' => __('Image', 'text-domain'),
'param_name' => 'image5',
'value' => __('Default Value', 'text-domain'),
'description' => __('Picture of a person', 'text-domain'),
'admin_level' => false,
'wight' => 0,
'group' => 'Slide 5',
),
array(
'type' => 'textarea',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Content', 'text-domain'),
'param_name' => 'content5',
'value' => __('Default value', 'text-domain'),
'description' => __('Text you need to show', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 5',
),
array(
'type' => 'textfield',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Autor', 'text-domain'),
'param_name' => 'autor5',
'value' => __('Default value', 'text-domain'),
'description' => __('Autor´s name', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 5',
),
array(
'type' => 'textfield',
'holder' => 'div',
'class' => 'text-class',
'heading' => __('Company', 'text-domain'),
'param_name' => 'company5',
'value' => __('Default value', 'text-domain'),
'description' => __('Name of company', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => 'Slide 5',
)
)
)
);
}
// Element HTML
public function vc_references_html($atts) {
$attributes = vc_map_get_attributes($this->getShortCode(), $atts);
extract(
shortcode_atts(
array(
'title' => '',
'image1' => '',
'content1' => '',
'autor1' => '',
'company1' => '',
'image2' => '',
'content2' => '',
'autor2' => '',
'company2' => '',
'image3' => '',
'content3' => '',
'autor3' => '',
'company3' => '',
'image4' => '',
'content4' => '',
'autor4' => '',
'company4' => '',
'image5' => '',
'content5' => '',
'autor5' => '',
'company5' => '',
),
$atts
)
);
$imageData1 = wp_get_attachment_image_src($image1, 'medium');
$imageData2 = wp_get_attachment_image_src($image2, 'medium');
$imageData3 = wp_get_attachment_image_src($image3, 'medium');
$imageData4 = wp_get_attachment_image_src($image4, 'medium');
$imageData5 = wp_get_attachment_image_src($image5, 'medium');
// Fill $html var with data
$html = '
<div class="reference_keyboard_arrow" id="reference_keyboard_arrow_l"><img src="http://jirischaffer.cz/wp-content/uploads/2017/08/keyboard_arrow.png" onclick="reference_plusSlide(-1)" alt="Doleva" width="50px" height="50px"></div>
<div class="reference_keyboard_arrow" id="reference_keyboard_arrow_r"><img src="http://jirischaffer.cz/wp-content/uploads/2017/08/keyboard_arrow.png" onclick="reference_plusSlide(1)" alt="Doprava" width="50px" height="50px"></div>
<div class="reference_wrap reference_section_center reference_font_setting">
<div class="reference_title_row reference_font_setting_title">' . $title . '</div>
<div class="reference_content_slider_row">
<div class="reference_slide_content reference_animation_R" id="reference_slide_0">
<div class="reference_content_img"><img class="reference_style_image" src="' .$imageData1[0]. '" alt=""></div>
<p class="reference_font_text_array reference_text_array">' . $content1 . '</p>
<p class="reference_font_sign">' . $autor1 . ' <br> ' . $company1 . '</p>
</div>
<div class="reference_slide_content reference_animation_R" id="reference_slide_1">
<div class="reference_content_img"><img src="' .$imageData2[0]. '" alt=""></div>
<p class="reference_font_text_array reference_text_array">' . $content2 . '</p>
<p class="reference_font_sign">' . $autor2 . ' <br> ' . $company2 . '</p>
</div>
<div class="reference_slide_content reference_animation_R" id="reference_slide_2">
<div class="reference_content_img"><img src="' .$imageData3[0]. '" alt=""></div>
<p class="reference_font_text_array reference_text_array">' . $content3 . '</p>
<p class="reference_font_sign">' . $autor3 . ' <br> ' . $company3 . '</p>
</div>
<div class="reference_slide_content reference_animation_R" id="reference_slide_3">
<div class="reference_content_img"><img src="' .$imageData4[0]. '" alt=""></div>
<p class="reference_font_text_array reference_text_array">' . $content4 . '</p>
<p class="reference_font_sign">' . $autor4 . ' <br> ' . $company4 . '</p>
</div>
<div class="reference_slide_content reference_animation_R" id="reference_slide_4">
<div class="reference_content_img"><img src="' .$imageData5[0]. '" alt=""></div>
<p class="reference_font_text_array reference_text_array">' . $content5 . '</p>
<p class="reference_font_sign">' . $autor5 . ' <br> ' . $company5 . '</p>
</div>
</div>
<div class="reference_slick_dots_row">
<div class="reference_dot reference_blue" id="reference_dot1" onclick="activeSlide(1)"></div>
<div class="reference_dot" id="reference_dot2" onclick="reference_activeSlide(2)"></div>
<div class="reference_dot" id="reference_dot3" onclick="reference_activeSlide(3)"></div>
<div class="reference_dot" id="reference_dot4" onclick="reference_activeSlide(4)"></div>
<div class="reference_dot" id="reference_dot5" onclick="reference_activeSlide(5)"></div>
</div>
</div>
<script>
var myIndex = 0;
reference_dot_move();
</script>
';
return $html;
}
} // End Element Class
// Element Class Init
new vcReferences();
?>
编辑：代码更新
答
好首先你需要映射你的东西：
$attributes = vc_map_get_attributes($this->getShortCode(), $atts);
，然后你可以从$attributes -array
你还需要载入图片类似这样的访问您的变量： wp_get_attachment_image_src($attributes['image1'], $size)这反过来会给你一个阵列。
在PHP 5上。4或更高版本你可以这样做：
<div><img class="reference_content_img" src="' .wp_get_attachment_image_src($attributes['image1'], 'medium')[0]. '" alt=""> </div>
编辑：
右下public function vc_references_html($atts) {
删除您PARAM提取和除
<div><img class="reference_content_img" src="' .wp_get_attachment_image_src($attributes['image1'], 'medium')[0]. '" alt=""> </div>
你写
$data = wp_get_attachment_image_src($attributes['image1'], 'medium');
<div><img class="reference_content_img" src="' .$data[0]. '" alt=""></div>
删除此：
extract(
shortcode_atts(
array(
'title' => '',
//'image1' => '',
'content1' => '',
'autor1' => '',
'company1' => '',
//'image2' => '',
'content2' => '',
'autor2' => '',
'company2' => '',
//'image3' => '',
'content3' => '',
'autor3' => '',
'company3' => '',
//'image4' => '',
'content4' => '',
'autor4' => '',
'company4' => '',
//'image5' => '',
'content5' => '',
'autor5' => '',
'company5' => '',
),
$atts
)
);
你做了这一切与$attributes = vc_map_get_attributes($this->getShortCode(), $atts);
你的所有数据，然后存储在$attributes变量中。
我认为你根本不知道你在做什么，因为你在那个extract 所有的值设置为''您不必PHP 5.4或更高版本，所以你不能做wp_get_attachment_image_src($attributes['image1'], 'medium')[0]
其余您代码也出错了。
做这样的：
<div class="reference_content_slider_row">
<div class="reference_slide_content reference_animation_R" id="reference_slide_0">
<div class="reference_content_img"><img src="' .$data[0]. '" alt=""></div>
<p class="reference_font_text_array reference_text_array">' . $attributes['content1'] . '</p>
<p class="reference_font_sign">' . $attributes['autor1'] . ' <br> ' . $attributes['company1'] . '</p>
</div>
我仍然不完全理解其中的代码这部分应插入。我没有安装PHP 5.4，所以这对我没有用。 – JaroslavM
请问你能更具体吗？ – JaroslavM
为什么我应该删除参数提取，我需要那个代码..？所以我做了你说的，但是我做错了，因为它还没有运行。我真的不明白“删除....”到底是什么意思。你能说出代码的每一部分应该插入的地方吗？删除你的参数提取，除了 - 你的意思是删除它全部或仅在shortcode_atts（或extract（）的所有内容的数组？ – JaroslavM