如何使用 Wordpress Widget 填充 HTML 中的空白

Question

构建我的第一个 WP 小部件。（下图）需要提供客户端访问权限以输入 Thumbnail Link、Youtube Link、Project Title 和 Description。 Widget 正在存储和检索数据，但我对如何将该数据发送到 HTML 字段感到困惑。

<?php  
/*
Plugin Name: Red Viking Video
Plugin URI: http://digital-persona.com
Description: Bla Bla Bla
Version: 1.0
Author: Dan
Author URI: Bio Page
Licence: none
*/


class WP_red_viking_video extends WP_Widget {
    function __construct() {
        parent::__construct(false, $name = __('Red Viking Video'));
        }
    function form($instance) {
        $thumbnail = esc_textarea( $instance['thumbnail'] );
        $you_tube_link = esc_textarea( $instance['you_tube_link'] );
        $project_title = esc_textarea( $instance['project_title'] );
        $project_details = esc_textarea( $instance['project_details'] );
?>

<p>
  <label for="<?php echo $this->get_field_id('thumbnail'); ?>"><?php _e('Thumbnail' ); ?></label>
  <textarea class="widefat" rows="3" cols="30" id="<?php echo $this->get_field_id('thumbnail'); ?>" name="<?php echo $this->get_field_name('thumbnail'); ?>"><?php if (!empty($thumbnail)) echo $thumbnail; ?></textarea>
<p>
  <label for="<?php echo $this->get_field_id('you_tube_link'); ?>">
    <?php _e('You Tube Link', 'wp_widget_plugin'); ?>
  </label>
  <textarea class="widefat" rows="3" cols="30" id="<?php echo $this->get_field_id('you_tube_link'); ?>" name="<?php echo $this->get_field_name('you_tube_link'); ?>"><?php if (!empty($you_tube_link)) echo $you_tube_link; ?></textarea>
</p>
<p>
  <label for="<?php echo $this->get_field_id('project_title'); ?>">
    <?php _e('Project Title', 'wp_widget_plugin'); ?>
  </label>
  <textarea class="widefat" rows="3" cols="30" id="<?php echo $this->get_field_id('project_title'); ?>" name="<?php echo $this->get_field_name('project_title'); ?>"><?php if (!empty($project_title)) echo $project_title; ?></textarea>
</p>
<p>
  <label for="<?php echo $this->get_field_id('project_details'); ?>">
    <?php _e('Project Details', 'wp_widget_plugin'); ?>
  </label>
  <textarea class="widefat" rows="10" cols="30" id="<?php echo $this->get_field_id('project_details'); ?>" name="<?php echo $this->get_field_name('project_details'); ?>"><?php if (!empty($project_details)) echo $project_details; ?></textarea>
</p>
<?php
        }
    function update($new_instance, $old_instance) {
    $instance = $old_instance;
    // Fields
    $instance['thumbnail'] = esc_textarea($new_instance['thumbnail']);
    $instance['you_tube_link'] = strip_tags($new_instance['you_tube_link']);
    $instance['project_title'] = strip_tags($new_instance['project_title']);
    $instance['project_details'] = strip_tags($new_instance['project_details']);
    return $instance;
}
    function widget($args, $instance) {
        ?>
<div class="widget featured-video one-third column project"> 

  <!-- ====================== YOU TUBE LINK ======================= --> 
  <a class="youtube" href="<?php echo $you_tube_link; ?>" title="Orchestra London Promo"> 
  <!-- ==================== END YOU TUBE LINK ===================== -->
  <div class="thumbnail slide"> 
    <!-- ===================== THUMBNAIL LINK ======================= --> 
    <img class="thumbnail" src="http://<?php echo $thumbnail; ?>" /> 
    <!-- =================== END THUMBNAIL LINK ===================== -->

    <div class="project snipit"> 
      <!-- ==================== OVERLAY CONTENT ======================= -->
      <h4><?php echo $project_title; ?></h4>
      <!-- PROJECT TITLE -->
      <p><?php echo $project_details; ?></p>
      <!-- PROJECT DESCRIPTION --> 
      <!-- ================= END OVERLAY CONTENT ===================== --> 
    </div>
  </div>
  </a> </div>
<?php 
    }
}






add_action('widgets_init', function() {
    register_widget('WP_red_viking_video');
    })
?>

Answer 1

它们存储在 $instance 变量中，类似于您在 update() 函数中的内容。只需在 widget() 函数之上添加以下内容：

$thumbnail       = $instance['thumbnail'];
$you_tube_link   = $instance['you_tube_link'];
$project_title   = $instance['project_title'];
$project_details = $instance['project_details'];

如何使用 Wordpress Widget 填充 HTML 中的空白

How can I use a Wordpress Widget to fill in blanks in HTML

html

wordpress

widget