如何创建一个接受html输入的小部件?

时间:2020-07-09 作者:Manohar Bhatia

我是网络开发和WordPress新手。因为,我还在学习,我想通过自己的研究取得成果。当它没有帮助时,只有这样我才会寻求帮助。这可能是我第一次发帖。不浪费时间,我将回答我的问题:

I have tried to put together a widget that shows the carousel. The carousel slides will have a Headline, some text below the headline and then a link formatted as button. 所有这些都将在左侧和右侧,我将有一个图像。

Whatever I mentioned above was achievable with a little research. However, I want to submit the headline input as:

<h1>
    <span class="headline">
        <strong class="text-primary">Some heading starts here</strong>
        and ends here
    </span>
</h1>
下面是小部件输入字段的代码,运行良好。

        <p>
            <label for="<?php echo $this->get_field_id(\'headline\'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name(\'headline\'); ?>" id="<?php echo $this->get_field_id(\'headline\'); ?>" value="<?php echo $instance[\'headline\']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id(\'description\'); ?>">Description</label><br />
            <textarea type="text" name="<?php echo $this->get_field_name(\'description\'); ?>" id="<?php echo $this->get_field_id(\'description\'); ?>" class="widefat"><?php echo $instance[\'description\']; ?></textarea>
        </p>

        <p>
            <label for="<?php echo $this->get_field_id(\'link_title\'); ?>">Link Title</label><br />
            <input type="text" name="<?php echo $this->get_field_name(\'link_title\'); ?>" id="<?php echo $this->get_field_id(\'link_title\'); ?>" value="<?php echo $instance[\'link_title\']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id(\'link_url\'); ?>">Link URL</label><br />
            <input type="text" name="<?php echo $this->get_field_name(\'link_url\'); ?>" id="<?php echo $this->get_field_id(\'link_url\'); ?>" value="<?php echo $instance[\'link_url\']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?= $this->get_field_id( \'image_uri\' ); ?>">Image</label>
            <img class="<?= $this->id ?>_img" src="<?= (!empty($instance[\'image_uri\'])) ? $instance[\'image_uri\'] : \'\'; ?>" style="margin:0;padding:0;max-width:100%;display:block"/>
            <input type="text" class="widefat <?= $this->id ?>_url" name="<?= $this->get_field_name( \'image_uri\' ); ?>" value="<?= $instance[\'image_uri\']; ?>" style="margin-top:5px;" />
            <input type="button" id="<?= $this->id ?>" class="button button-primary js_custom_upload_media" value="Upload Image" style="margin-top:5px;" />
        </p>
我知道下面的代码无助于实现预期的结果。

        <p>
            <label for="<?php echo $this->get_field_id(\'headline\'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name(\'headline\'); ?>" id="<?php echo $this->get_field_id(\'headline\'); ?>" value="<?php echo $instance[\'headline\']; ?>" class="widefat" />
        </p>
因此,我想知道我的选择,以实现预期的结果。

谢谢

1 个回复
最合适的回答,由SO网友:Manohar Bhatia 整理而成

感谢@TomJNowell就使用textarea.

这就是我为实现自己的目标所做的。这是有目的的,但我不确定这是不是正确的方式。

我更改了以下输入字段:

        <p>
            <label for="<?php echo $this->get_field_id(\'headline\'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name(\'headline\'); ?>" id="<?php echo $this->get_field_id(\'headline\'); ?>" value="<?php echo $instance[\'headline\']; ?>" class="widefat" />
        </p>

textarea:

        <p>
            <label for="<?php echo $this->get_field_id(\'headline\'); ?>">Headline</label><br />
            <textarea name="<?php echo $this->get_field_name(\'headline\'); ?>" id="<?php echo $this->get_field_id(\'headline\'); ?>" class="widefat" rows="5"><?php echo $instance[\'headline\']; ?></textarea>
        </p>
这是我的更新功能:

    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
        $instance = $old_instance;
        $instance[\'headline\']   =   wp_kses_post($new_instance[\'headline\']);
        $instance[\'description\'] = strip_tags( $new_instance[\'description\'] );
        $instance[\'link_title\'] = strip_tags( $new_instance[\'link_title\'] );
        $instance[\'link_url\'] = strip_tags( $new_instance[\'link_url\'] );
        $instance[\'image_uri\'] = strip_tags( $new_instance[\'image_uri\'] );
        return $instance;       
    }

相关推荐

My widgets do not save

每次我保存我的小部件并离开页面时,我的小部件都会消失。侧边栏已完全清空,不会保存任何更改。控制台或PHP日志中没有任何错误。如果我将小部件直接复制并保存在数据库中widgets_text, 它们将被显示,但我仍然无法在侧边栏中添加或删除任何内容。这只发生在我的右侧边栏上,左侧边栏工作正常,但它们都以相同的方式注册。这是我注册侧边栏的方式:function my_widgets_init() { register_sidebar( array ( \'name\'