Question

当WordPress输出窗口小部件时，通常情况如下：

<widget_area_wrapper>
    <title></title>
    <content></content>
</widget_area_wrapper>

但是我怎么做才能使它显示如下：

<widget_area_wrapper>
    <content></content>
    <title></title>
</widget_area_wrapper>

谢谢您的帮助！

Answer 1

有几种解决方法：

“硬”编码方式：使用“自定义HTML”小部件，您可以将标题留空，添加内容（使用HTML格式化），然后在内容后添加标题，如下所示：

<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta name="title" content="Slider.js: Slideshow with jQuery and CSS Transitions - example with Flickr">
  <meta name="Description"
    content="Slider.js is an easy-to-use customizable Javascript library to create image slideshows. It relies on the power of CSS Transitions to perform awesome and efficient effects. Slider.js can optionally uses HTML5 Canvas to perform some non trivial transitions.">
  <meta name="Keywords" content="slider.js slider slideshow javascript jquery css transitions canvas css3 flickr">
  <title>Slider To Video</title>
  <script type="text/javascript" async="" src="http://api.flattr.com/js/0.6/load.js?mode=auto"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="slider.js"></script>
  <link href="slider.min.css" rel="stylesheet" type="text/css">

  <!-- demo related resources -->
  <script type="text/javascript" src="demo.js"></script>
  <link href="demo.min.css" rel="stylesheet" type="text/css">
  <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->



  <style type="text/css">
    code,
    pre {
      font-family: monospace;
      color: #e6e1dc;
      background-color: #222222;
    }

    .lnr {
      color: #cccccc;
      background-color: #555555;
    }

    span.caption {
      display: none;
    }

    .Error {
      color: #ffc66d;
      background-color: #990000;
    }

    .htmlItalic {
      font-style: italic;
    }

    .htmlBold {
      font-weight: bold;
    }

    .Underlined {
      color: #80a0ff;
      text-decoration: underline;
    }

    .Normal {
      color: #e6e1dc;
      background-color: #222222;
    }

    .Constant {
      color: #6d9cbe;
    }

    .Keyword {
      color: #cc7833;
    }

    .Identifier {
      color: #6d9cbe;
    }

    .Function {
      color: #ffc66d;
    }

    .Special {
      color: #da4939;
    }

    .Statement {
      color: #cc7833;
    }

    .xmlEndTag {
      color: #e8bf6a;
    }

    .Title {
      color: #ffffff;
      font-weight: bold;
    }

    .String {
      color: #a5c261;
    }

    .Type {
      color: #da4939;
    }

    .PreProc {
      color: #e6e1dc;
    }

    .xmlTagName {
      color: #e8bf6a;
    }

    .xmlTag {
      color: #e8bf6a;
    }

    .Comment {
      color: #666666;
      font-style: italic;
    }

    .btn {
      padding: 4px;
    }

    .img {
      position: relative;
      float: left;
      width: 100px;
      height: 100px;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>


  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>


  <div id="wrapper">


    <section class="slider">
      <form id="options">
        <fieldset id="slider_options">
          <legend>Slider options</legend>
          <dl>
            <dt>
              <label for="transitions">Transition effect :</label>
            </dt>
            <dd>
              <select id="transitions">
                <option value="circles">Circles</option>
                <option value="squares">Squares</option>
                <option value="circle">Circle</option>
                <option value="diamond">Diamond</option>
                <option value="verticalSunblind">Vertical Sunblind</option>
                <option value="verticalOpen">Vertical open</option>
                <option value="clock">Clock</option>
                <option value="horizontalOpen">Horizontal open</option>
                <option value="horizontalSunblind">Horizontal Sunblind</option>
                <option value="transition-opacity">Opacity</option>
                <option value="transition-simple1">Simple</option>
                <option value="transition-zoomin">Zoom in</option>
                <option value="transition-zoomout">Zoom out</option>
                <option value="transition-flip">Flip</option>
                <option value="transition-cardflip">Card flip</option>
                <option value="transition-rotatezoomin">Rotate and scale in</option>
                <option value="transition-rotatezoomout">Rotate and scale out</option>
                <option value="transition-topfade">Top fade</option>
                <option value="transition-skewflip">Skew flip</option>
                <option value="transition-left">Left</option>
                <option value="transition-top">Top</option>
                <option value="transition-oblique">Oblique</option>
              </select>
            </dd>
          </dl>
          <dl>
            <dd>
              <select id="themes" style="display:none;">
                <option default value="no-control"></option>
              </select>
            </dd>
          </dl>
        </fieldset>
        <fieldset id="flickr_options">
          <input type="file" id="images" multiple style="display:block;" />
          <legend>
            <button class="btn btn-info" id="flickr_enabled" type="submit">Start Processing</button>
          </legend>

        </fieldset>

      </form>

      <div id="demo">
        <div class="slider transition-topfade no-control" style="width: 600px; height:400px;">
          <div class="loader"><span class="spinner"></span> <span class="percent">100</span>%</div>
          <div class="slide-images" style="width: 600px; ">
            <div class="slide-image" style="width: 600px;">

              <canvas id="myCanvas" class="slide-images" width="600" height="400"></canvas>
            </div>

          </div>
        </div>
      </div>

    </section>

  </div>



  <!--<iframe style="display: none;"></iframe>-->
</body>

</html>

“程序化”方式：对这个问题使用birgire的解决方案：https://wordpress.stackexchange.com/questions/136284/insert-custom-content-before-widget-title-after-widget-opening-tag

如何输出WordPress小部件以使标题显示在内容下方，而不是上方？

1 个答案: