2014-09-24 83 views
5

我真的需要你的幫助guyz,我在我的辦公室得到了wordpress項目,客戶選擇了一個頁面的html模板,並要求將其轉換爲wordpress。我知道如何將HTML轉換爲worpdress正常主題,但由於主題只有一個頁面,多個div用作頁面。我失去了想法如何去做。html單頁模板轉換爲wordpress

我很抱歉,因爲這不是一個如何平臺,但我需要一個起點。

主題標記是如下

<!--Home Page 
=============================--> 
<div id="home" class="item"> 
       <!--<img src="assets/img/2.jpg" alt="The Spice Lounge" class="fullBg">--> 
       <div class="clearfix"> 
      <div class="header_details"> 
       <div class="container"> 
        <div class="header_icons accura-header-block accura-hidden-2xs"> 
         <ul class="accura-social-icons accura-stacked accura-jump accura-full-height accura-bordered accura-small accura-colored-bg clearFix"> 
         <li id="1"><a href="#" class="accura-social-icon-facebook circle"><i class="fa fa-facebook"></i></a></li> 
         <li id="2"><a href="#" class="accura-social-icon-twitter circle"><i class="fa fa-twitter"></i></a></li> 
         <li id="3"><a href="#" class="accura-social-icon-gplus circle"><i class="fa fa-google-plus"></i></a></li> 
         <li id="4"><a href="#" class="accura-social-icon-pinterest circle"><i class="fa fa-pinterest"></i></a></li> 
         <li id="5"><a href="#" class="accura-social-icon-linkedin circle"><i class="fa fa-linkedin"></i></a></li> 
         </ul> 
        </div> 
       <div class="call"> 
        <div class="home_address"> 
         #12 FIFTH MAIN STREET,<br> NY 10307, USA.<br> 
        </div> 
        <i class="fa fa-phone"></i>&nbsp;&nbsp;+1 123 456 7890 
       </div> 
      </div> 
<!-- Mainheader Menu Section -->  
<div class="mainheaderslide" id="slide"> 
    <div id="mainheader" class="header"> 
     <div class="menu-inner"> 
      <div class="container"> 
       <div class="row"> 
     <div class="header-table col-md-12 header-menu"> 

     <!-- Logo section --> 
     <div class="brand"><a href="#home" class="nav-link">The <span> Spice </span>Lounge</a></div> 
     <!-- // Logo section --> 

<!-- Home Page Menu section --> 
         <nav class="main-nav"> 
         <a href="#" class="nav-toggle"></a> 
          <ul id="home_nav" class="nav"> 
          <li><span class="nav-link selected1">Main</span></li> 
          <li><a href="#about" class="nav-link">About</a></li> 
          <li><a href="#" class="nav-link">Menu<span class="sub-toggle"></span></a> 
           <ul class="submenu"> 
           <li><a href="#" class="panel">Menu 1 <i class="pull-right fa fa-angle-right direction"></i> <span class="sub-toggle"></span></a> 
            <ul> 
            <li><a href="#menuwithoutimage2" class="nav-link">Menu without image2</a></li> 
            <li><a href="#menu1" class="nav-link">Menu without image</a></li> 
            <li><a href="#menu2" class="nav-link">Menu with image (Big)</a></li> 
            <li><a href="#menu3" class="nav-link">Menu with image (small)</a></li> 
            </ul> 
           </li> 
           <li><a href="#menu4" class="nav-link">Menu pdf</a></li> 
           <li><a href="#menu5" class="nav-link">Menu Toggle</a></li> 
           <li><a href="#special" class="nav-link">Today Specials</a></li> 
           <li><a href="#weeklymenu" class="nav-link">Weekly Menu</a></li> 
           <li><a href="#loungebar" class="nav-link">Lounge Bar</a></li>      
           </ul> 
          </li> 
          <li><a href="#" class="nav-link">Pages<span class="sub-toggle"></span></a> 
         <ul> 
          <li><a href="#chefbio" class="nav-link">Chef-Bio</a></li> 
          <li><a href="#giftcards" class="nav-link">Gift Cards</a></li> 
          <li><a href="#locations" class="nav-link">Our Locations</a></li> 
          <li><a href="#privatedining" class="nav-link">Private Dining</a></li> 
          <li><a href="#catering" class="nav-link">Catering</a></li> 
         </ul> 
        </li> 
          <li><a href="#gallery" class="nav-link">Gallery</a></li>  
          <li><a href="#event" class="nav-link">Events</a></li> 
          <li><a href="#reservation" class="nav-link">Reservation</a></li> 
          <li><a href="#" class="nav-link">Contact<span class="sub-toggle"></span></a> 
         <ul> 
          <li><a href="#contact" class="nav-link">Contact Us</a></li> 
          <li><a href="#contactform" class="nav-link">Contact Form</a></li> 
         </ul> 
        </li>  
          </ul> 
         </nav> 
<!-- // Home Page Menu section --> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
      <!-- // Mainheader Menu Section --> 
     </div> 
      <!-- VEGAS --> 
    <div id="vegas_page"> 
<div class="banner_bg1"> 
<div class="ban_pattern_bg3"> 
<div class="clearfix"> 
<!--Vegas slider--> 
<div class="clearfix" id="home_ban"> 
<div class="col-md-12"> 

     <div id="anchor1"></div> 
     <div id="home-fullWidth" class="clear"> 
      <div> 
       <ul class="slider-controls"> 
        <li><a id="vegas-next" class="s-next" href="#"></a></li> 
        <li><a id="vegas-prev" class="s-prev" href="#"></a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="main-title title-fullWidth"> 
      <div class="title-container"> 
       <div class="welcome hideme dontHide element_from_bottom">The <span>Spice</span> Lounge</div> 
       <ul> 
        <li class="sliding_title">Come hungry. Leave happy.</li> 
        <li>Delicious Food </li> 
        <li>Best Taste Great Price</li> 
       </ul> 
      </div> 
     </div> 
     <div id="logx"></div> 
</div> 
</div> 
<!-- // Vegas slider --> 
</div> 
</div> 
</div> 
</div> 
    <!-- /VEGAS --> 
     </div> 
     </div> 

<!--About us 
=============================-->  
<div id="about" class="item" style="background-color:#999999;"> 
       <img src="assets/img/12.jpg" alt="The Spice Lounge" class="fullBg"> 
       <div class="content"> 
        <div class="content_overlay"></div> 
         <div class="content_inner"> 
<div class="row contentscroll"> 
    <div class="container"> 
      <div class="col-md-6 empty">&nbsp;</div> 
          <div class="col-md-6 content_text"> 
          <h1>About Us</h1> 
          <div class="clearfix pad_top13"> 
          <div class="col-md-6"> 
           <p class="row"> 
           <span class="bold">Specializes in Non-veg , 65, Thanthuri, Sandwich, 65 smoked sandwich.</span><br/><br/> Our team of highly qualified professionals headed by an experienced Chef. Lnim ad minim veniam, quis nostrud.<br /><br /> 

Exercitation ullamco laboris nisi ut aliquip ex ea commodo. Duis aute dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla do tempore ercitationem ut labore. et dolore magna aliqua.        </p> 
          </div> 
          <div class="col-md-6"> 
           <div class="right_content "> 
            <div class="sub_title"> 
             <h4>Opening hours:</h4> 
            </div> 

           <div class="hour_table"> 
            <table> 
             <tr> 
              <td class="days">mon - Fri</td> 
              <td>9:00am - 4:00pm</td> 
             </tr> 
             <tr> 
              <td class="days">Sat</td> 
              <td>9:00am - 2:00pm</td>  
             </tr> 
             <tr> 
              <td class="days">Sun</td> 
              <td>8:30am - 1:00pm</td>  
             </tr> 
            </table> 
           </div> 
            <div class="sub_title"> 
             <h4>book your table:</h4> 
            </div> 

           <p> 
            We welcome walk-in guests,online at<br/><br><a class="button nav-link" href="#reservation">Book table</a>        </p> 
           </div> 
          </div> 
          </div> 
          </div> 
    </div> 
       </div> 
        </div> 
     </div> 
    </div>   
<!-- // About us 

============================= - >

它的一些代碼來說明主題是如何設計的,它實際上是一個帶有代表頁面的ID的div。

這裏是鏈接的模板

http://www.accurathemes.com/tf/The_Spice_Lounge/v_1_2/site/white-version/index-vegas-another-version.htm

我將非常感謝你的幫助,尋找了很多計算器後是我最後的希望:)

問候 Raheel

+0

可以請你發佈一些關於你如何最終做到這一點的更多信息?我面臨同樣的問題,想知道如何開始 – 2015-05-31 13:45:32

+0

我做了什麼,我做了單個文件的index.php,我用get_pages函數遍歷所有頁面。在我的index.php頁面中,我有div元素,如div#home,div#等等,所以在我的循環中,我設法將頁面的內容放在各自的div中。其餘的是通過jQuery的滑動的東西和所有。 – 2015-06-01 10:32:31

+0

好吧,這是有道理的。我怎樣才能使wordpress控制檯中的每個頁面都可以改變(主要是文本)? – 2015-06-01 16:26:59

回答

2

您可以使用此WordPress插件在WordPress中開發此頁面網站:https://wordpress.org/plugins/page-scroll-to-id/

+1

我已經通過將所有div分隔爲wordpress管理員和索引中的頁面進行了轉換。 php的get_pages函數。其餘的工作已經由javascript處理。謝謝 – 2014-09-27 14:14:12

+0

很高興它幫助... :-) – 2014-09-29 03:51:07