WordPress的短代碼問題嵌入HTML格式

我爲我的網站創建了一個自定義的html表單。如果我把所有的代碼放在Wordpress頁面中，一切正常。問題是，當我嘗試用短代碼嵌入它時。最終的結果是不同的，因爲標籤和選擇的項目在線顯示。在附上屏幕截圖。有人能幫我嗎？嵌入進來低於：WordPress的短代碼問題嵌入HTML格式

add_shortcode("searching_form", "searching_form_render"); 

function searching_form_render() { 
    return'<form class="searching_form" name="input" action="demo_form_action.asp" method="get"> 
     <div class="field"> 
      <label>Search Practitioners & Therapists</label> 
      <select name="Select a Therapy"> 
      <option value="0" classname="invalid">Select a Therapy...</option> 
      <option value="1">Deep Tissue Massage</option> 
      <option value="2">Remedial Massage</option> 
      <option value="3">Relaxation & Pregnancy Massage</option> 
      <option value="4">Reflexology</option> 
      <option value="5">Lymphatic Drainage Massage</option> 
      <option value="6">Shiatsu</option> 
      </select> 
      <span>e.g. yoga, naturopath</span> 
     </div> 

     <div class="field"> 
      <label>Where?</label> 
      <select name="Select Location"> 
      <option value="0">ALL</option> 
      <option value="1">NSW</option> 
      <option value="2">QLD</option> 
      <option value="3">SA</option> 
      <option value="4">TAS</option> 
      <option value="5">VIC</option> 
      <option value="6">WA</option> 
      </select> 
      <span>e.g. NSW</span> 
     </div> 

     <div class="field"> 
      <input class="search_button" type="submit" value="Search"> 
     </div> 

     <div class="clear"></div> 

     </form>'; 
}

這是CSS代碼：

.searching_form { 
    padding: 22px; 
    webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    -ms-border-radius: 8px; 
    -o-border-radius: 8px; 
    border-radius: 8px; 
    margin-bottom: 44px; 
    background-color: #004062; 
} 

.searching_form label { 
    color: white; 
    font-size: 16px; 
    font-weight: bold; 
    margin-left: 4px; 
} 

.searching_form span { 
    color: cyan; 
    margin-left: 4px; 
} 

.searching_form select { 
    font-size: 14px; 
    font-weight: normal; 
    padding: 10px; 
    height: 40px; 
    webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    -ms-border-radius: 2px; 
    -o-border-radius: 2px; 
    border-radius: 2px; 
    background-color: #fafafa; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

.searching_form .field { 
    float: left; 
    margin-right: 12px; 
} 

.searching_form .search_button { 
    border: 1px solid #006; 
    background-color: #FAA21B; 
    display: block; 
    padding: 11px 20px; 
    font-weight: bold; 
    margin-left: 6px; 
    webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -o-border-radius: 4px; 
    border-radius: 4px; 
    color: white; 
    cursor: pointer; 
} 

.searching_form .search_button:hover { 
    background-color: #faae3a; 
} 

.clear { 
    clear:both; 
    height:0px; 
    width:0px; 
    display:table; 
    content:""; 
}

來源

2014-06-10 user3727275

添加display: block;屬性.searching_form label同時也.searching_form select

來源

2014-06-10 19:11:05

WordPress的短代碼問題嵌入HTML格式

回答

相關問題