Question

我的WordPress插件用例非常简单。我想提供一个插件，用于设置自定义边栏小部件，用户可以激活该小部件，然后将其放置在所需的任何位置（或边栏小部件区域允许的位置）。

该插件提供了搜索功能，可以完成很多工作。 “搜索”功能完全以HTML / JS构建。

我已经完成了使用名为"Wordpress Plugins Development Tutorials"的Alessandro Castellani youtube系列创建WordPress插件样板的过程。

我的文件夹结构或多或少像该系列附带的教程代码（至少更多的小部件指定文件）。 Found Here

尽管本教程中使用的结构很复杂，并且我的特定用例过于简单，但我还是喜欢所使用的插件体系结构提供的可扩展性/可伸缩性。我离题了。

我已经创建并调用了正确的WP_Widget类方法；窗口小部件，表单和更新。

该插件已成功实例化了管理端的自定义侧边栏小部件，并可以“拖放”。

为了呈现前端内容，我正在使用 file_get_contents（）来检索 widget（）方法中HTML文件的内容。然后，在 $ args ['after_widget'] 声明之前回显内容。

这是小部件方法代码的代码片段。

public function widget( $args, $instance ) {
        $searchHTML = file_get_contents(PLUGIN_URL . '/api-search.html', __FILE__);
        echo $args['before_widget'];
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }
        //$searchHTML = file_get_contents(plugins_url('api-search.html', __FILE__));
        //echo $searchHTML;
        echo $args['after_widget'];
    }

当我检查正面时，HTML“搜索”功能以及排队的相邻JS文件将正确加载。它按预期工作。

问题是，尽管小部件像我希望的那样加载文件，但似乎会破坏其他小部件。

这是在回显HTML内容之前的样子。

这是回显HTML内容后的样子。

如果我应该提供部分代码来解决此问题，请告诉我，我会很乐意这样做。目前，无法想到会使用其他任何方法。 编辑：我的SO编辑部分未保存！

编辑：添加“ api-search.html”的整个代码。我应该提到的是，这段代码是原型，并且还没有被清理干净……显然是笑了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MBE AUTOCOMPLETE</title>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link
      rel="stylesheet"
      href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"
    />

    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"
      integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"
      crossorigin="anonymous"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/css/mbe-style.css" />
    <script src="https://unpkg.com/ionicons@4.5.0/dist/ionicons.js"></script>
    <script
      type="text/javascript"
      src="/assets/scripts/mbe-api-functions.js"
    ></script>

    <style>
        @import url('https://fonts.googleapis.com/css?family=Thasadith');
        </style>

    <script type="text/javascript"> function hideSelectSubModal() {
      $("#selectSubcategory").modal("hide");
    }

    //$("#modal").on("load", createRadioButtonFromArray(subList));
    function getCategory() {
      let output = autocomplete();
      $(function() {
        $("#industry").autocomplete({
          source: output
        });
      });
      $("#industry").on("autocompleteselect", function(event, ui) {
        getSubList();
      });
    }

    function getSubList() {
      $("#industry").autocomplete({
        select: populateModal()
      });
    }</script>
  </head>
  <body class="mbe-plugin">
      <div class="ui-widget">
        <form role="form">
          <label for="industry">Search For Professional: </label>
          <input
            type="text"
            name="param"
            id="industry"
            oninput="getCategory()"
            size="30"
          />
          <td colspan="2" align="center">
            <button
              type="button"
              class="btn btn-primary"
              data-toggle="modal"
              data-target="#selectSubcategory"
              onclick="populateModal()"
            >
              Find
            </button>
            <!-- <input type="submit" value="Submit" /> -->
          </td>
        </form>
      </div>
      <!-- First Modal: selectSubcategory -->
      <div
        class="modal fade"
        id="selectSubcategory"
        tabindex="-1"
        role="dialog"
        aria-labelledby="selectSubcategoryLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="selectSubcategoryLabel"></h5>
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form id="select_subcategory" onclick="getCheckBox()"></form>
              <!--
                <input class="form-control" type="radio" id="subcategory_list"> </select>
              -->
            </div>
          </div>
        </div>
      </div>

      <!-- Inbetween -->
      <div
      class="modal fade"
      id="inBetween"
      tabindex="-1"
      role="dialog"
      aria-labelledby="inBetweenLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="inBetweenLabel">Just a few question:</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p> This is to better connect you with a proffesional, we will not sell your information.<p>
            <button type="button" class="btn btn-primary" onclick="initQuestionDisplay()">Save changes</button>
          </div>
          <div class="modal-footer">
          </div>
        </div>
      </div>
    </div>

      <!-- Form submission modal -->
      <div
        class="modal fade"
        id="formSubmit"
        tabindex="-1"
        role="dialog"
        aria-labelledby="formSubmitLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="formSubmitLabel">
                Enter your information
              </h5>
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form class="gform pure-form pure-form-stacked" method="post" data-email="mbetestemail@gmail.com" action="https://script.google.com/macros/s/AKfycbyBzmpwpTU9vPWVDE_p8KQI-_ZjWTdlJOJ-FZ41/exec">
                  <form class="gform pure-form pure-form-stacked" method="post" data-email="mbetestemail@gmail.com" action="CALL TO GOOGLE SCRIPT FILE">
                      <div class="form-elements">
                        <div class=" pure-g">
                          <!-- <fieldset class="pure-group"> -->
                          <fieldset class="pure-u-1-2 pure-u-md-1-3">
                            <label for="name">Name: </label>
                            <input id="name" class="pure-u-23-24" name="name" placeholder="Full name!" />
                          </fieldset>

                          <!-- <fieldset class="pure-group"> -->
                          <fieldset class="pure-u-1-2 pure-u-md-1-3">
                              <label for="email">Email:</label>
                              <input id="email" class="pure-u-23-24" name="email" type="email" value=""
                              required placeholder="your.name@email.com"/>
                              <span class="email-invalid" style="display:none">
                                Must be a valid email address</span>
                            </fieldset>

                          <fieldset class="pure-u-1 pure-u-md-1-3">
                              <label for="name">Phone Number: </label>
                              <input id="phone_number" class="pure-u-23-24" name="phone_number" placeholder="Name of your company or company you work for" />
                            </fieldset>

                          <fieldset id="form-answer-box" class="pure-u-1 pure-u-md-1-3">
                              <label for="answers"></label>
                              <!-- Shouldnt be input, insert data into a tag tag dynamically? with inner or cosument.write then hide -->
                              <input id="answer-field" class="pure-u-23-24" name="answer-field" placeholder="Name of your company or company you work for" />
                            </fieldset>


                        </div>

                          <button class="button-success pure-button button-xlarge" onclick="initResultDisplay()">
                            <i class="fa fa-paper-plane"></i>&nbsp;Submit</button>
                        </div>
                        <div class="thankyou_message" style="display:none;">
                            <h2><em>Thanks</em> for contacting us!
                              We will get back to you soon!</h2>
                        </div>
                    </form>

            </div>
          </div>
        </div>
      </div>

      <!-- Questions modal -->
      <div
        class="modal fade"
        id="questionsDisplay"
        tabindex="-1"
        role="dialog"
        aria-labelledby="questionsDisplayLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="questionsDisplayLabel">
                QUESTIONS
              </h5>
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div
              class="modal-body"
              data-bind="template: {name: 'template', data: $data}"
            ></div>
            <script type="text/html" id="template">
              <div class="diplay-frame" data-bind="foreach: {data: data, as: '_data'}">
                <div class="question-box">
                    <h2 class="question" id="ques" data-bind="text: _data['question']"/>
                    <div data-bind="foreach: {data: _data['answers'], as: 'answer'}">
                        <input type="radio" id="ans" data-bind="checked: $parent.selectedAnswer, attr:{name: $parent.optionGroupName, value: $data}" />
                        <span data-bind="text: answer"/>
                    </div>


                </div>
              </div>
            </script>
               <button
                  type="button"
                  onclick="captureAnswers()"
                  class="btn btn-secondary"
                  data-dismiss="modal"
                >
                  Next
                </button>
            </div>
          </div>
        </div>

      <!-- Search result Display Modal -->
      <div
        class="modal fade"
        id="searchResultDisplay"
        tabindex="-1"
        role="dialog"
        aria-labelledby="searchResultDisplayLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="searchResultDisplayLabel">
                Search Results
              </h5>
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div
              class="modal-body"
              data-bind="template: {name: 'template1', data: $data}"
            ></div>
            <script type="text/html" id="template1">
              <div class="diplay-frame" data-bind="foreach: {data: data, as: '_data'}">
                <div class="result-box">
                    <div class="bgtint"></div>
                    <section class="businesscard">
                        <div class="flip">
                            <div class="front">
                                <div class="logo">
                                    <img class="profile_image" width="50px" height="50px" data-bind="attr:{src: _data['profile_image']}"/>
                                    <a data-bind="attr:{href: _data['profile_link'], target: '_blank'}"><h2 class="user_name" data-bind="text: _data['username']"/></a>
                                    <div class="introduction"><h4 class="company_name" data-bind="text: _data['business_name']"/></div>
                                    <div class="arrow"></div>
                                </div>
                            </div>
                            <div class="userinfo">
                                <div class="col-sm-4" id="phone-box">
                                    <ion-icon name="call"></ion-icon>
                                    <p class="user_mobile" data-bind="text: _data['mobile']"/>
                                </div>
                                <div class="col-sm-4" id="email-box">
                                    <ion-icon name="mail"></ion-icon>
                                    <p class="user_email" data-bind="text: _data['email']"/>
                                </div>

                        </div>
                    </section>
                </div>
              </div>
            </script>
            </div>
            <div class="modal-footer">
            </div>
          </div>
        </div>
      </div>
      <script data-cfasync="false" type="text/javascript" src="assets/scripts/form-submission-handler.js"></script>
    </body>
</html>

为什么在wordpress侧栏小部件中我的html文件的回显会破坏其他小部件前端小部件样式？

0 个答案: