2014-09-24 18 views
5

Ho seriamente bisogno di aiuto di te guyz, ho ottenuto un progetto di wordpress nel mio ufficio e il cliente ha selezionato un modello html di una pagina e ha chiesto di convertirlo in wordpress. So come convertire html in worpdress normali temi, ma come il tema è solo una pagina con più div che agiscono come pagina. Ho perso la testa come farlo.html modello da una pagina alla conversione di wordpress

Mi dispiace, perché questo non è un come piattaforma, ma ho bisogno di un punto di partenza.

Il markup tema è il seguente

<!--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 

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

È un po 'di codice per illustrare come è stato progettato il tema è in realtà un div con un ID che rappresenta la pagina.

ecco il link per il modello

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

Io sarò davvero grato per il vostro aiuto, come dopo aver cercato uno StackOverflow molto è la mia ultima speranza :)

saluti Raheel

+0

puoi per favore pubblicare ulteriori informazioni su come si finisce a fare questo? Sto affrontando lo stesso problema e voglio sapere come iniziare –

+0

Quello che ho fatto è, ho creato un file index.php e ho usato la funzione get_pages per scorrere tutte le pagine. Nella mia pagina index.php ho elementi div come div # home, div # about etc, quindi nel mio loop sono riuscito a inserire il contenuto della pagina nei rispettivi div. Il resto è fatto tramite roba jquery scorrevole e tutto. –

+0

Ok questo ha senso. Come posso rendere una parte di ogni pagina modificabile (principalmente testo) dalla console di wordpress? –

risposta

2

È possibile sviluppare questo sito Web di una pagina in WordPress utilizzando questo plug-in per WordPress: https://wordpress.org/plugins/page-scroll-to-id/

+1

L'ho convertito separando tutti i div in pagine in admin wordpress e su index. funzione php get_pages. Il resto del lavoro è già gestito da javascript. grazie –

+0

Felice che abbia aiutato ... :-) –

Problemi correlati