WordPress-Entwicklung, wie man Themenoptionen für Homepage

Question

Ich versuche, eine Möglichkeit zu finden, eine dynamische Homepage auf WordPress zu machen, ich möchte die Möglichkeit, die Titelseite zu bearbeiten, und Inhalt hinzufügen, ohne es hart zu codieren.

Grundsätzlich möchte ich meine Homepage ähnlich aussehen.

https://html5up.net/forty

und ich bin mir bewusst, dass ich Thema Optionen müssen dies tun, wie würde ich in meinem Wordpress-Theme zu integrieren, dass.

Ich möchte in der Lage sein, Spalten zu machen, fügen Sie Zeilen, Held Bild hinzufügen usw.

und nein, ich habe nicht den visuellen Komponisten verwenden möchten. Ich verwende derzeit erweiterte benutzerdefinierte Felder.

Hier ist aktuelle Titelseite zu meinem Thema, ich möchte nicht erweiterte benutzerdefinierte Felder verwenden, weil ich immer noch hart Code haben.

Auf den Punkt gebracht, wie Thema Optionen für Wordpress Theme

Template-frontpage.php

<?php 
/** 
* Template Name: Front Page 
* 
* @package Eli 
*/ 
$image = get_field('hero_image'); 
get_header(); 
?> 
<div class="row"> 
    <div class="hero" style="background-image:url(<?php echo $image;?>); width:100%; min-height:350px; background-size: cover;"> 
     <div class="container"> 
      <div class="col-md-12"> 
       <header class="hero-text"> 

       <?php if (get_field('hero_title')):?> 

        <h1 style="color:#fff;"><?php the_field('hero_title'); ?></h1> 

       <?php endif;?> 

       <?php if (get_field('hero_span')):?> 

        <span><?php the_field('hero_span'); ?></span> 

       <?php endif;?> 


       <?php if (get_field('hero_span_2')):?> 

        <span id="move"><?php the_field('hero_span_2'); ?></span> 

       <?php endif;?> 




       </header> 

      </div> 
     </div> 
    </div> 
</div> 
<section class="section-home"> 
    <div class="row"> 
     <div class="container"> 
      <div class="line"></div> 
      <?php if (get_field('content_block_left')):?> 
      <div id="cbl" class="col-md-4 col-xs-12"> 
       <?php the_field('content_block_left_icon'); ?> 
       <?php the_field('content_block_left'); ?> 

      </div> 
      <?php endif;?> 
      <?php if (get_field('content_block_left2')):?> 
      <div id="cbl" class="col-md-4 col-xs-12 "> 
       <?php the_field('content_block_left_2_icon'); ?> 
       <?php the_field('content_block_left2'); ?> 

      </div> 
      <?php endif;?> 
      <?php if (get_field('content_block_left3')):?> 
      <div id="cbl" class="col-md-4 col-xs-12"> 
       <?php the_field('content_block_left_3_icon'); ?> 
       <?php the_field('content_block_left3'); ?> 

      </div> 
      <?php endif;?> 

     </div> 

    </div> 
</section> 
<div class="section-about"> 
    <div class="row"> 
     <h1>Beat Your Rivals</h1> 
     <div class="line"></div> 
     <div class="container"> 
      <?php if (get_field('image_left')):?> 
      <div id="cbl2" class="col-md-6 offset-md-3 col-xs-12"> 

       <img src="<?php echo the_field('image_left'); ?>" width:"400px" height:"300px"> 

      </div> 
      <?php endif;?> 
      <?php if (get_field('caption_text')):?> 
      <div id="cbl2" class="col-md-6 offset-md-3 col-xs-12"> 

       <?php the_field('caption_text'); ?> 

      </div> 
      <?php endif;?> 
     </div> 
    </div> 
</div> 
<?php 
$image2 = get_field('test_image'); 
?> 
<div class="section-test" style="background-image:url(<?php echo $image2['url'];?>); width:100%; min-height:300px; background-size: cover;"> 
    <div class="row"> 
     <div class="container"> 
      <?php if (get_field('test_text')):?> 
      <div id="cbl3" class="col-md-12 col-xs-12"> 

       <?php the_field('test_text'); ?> 

      </div> 
      <?php endif;?> 

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


<div class="about-us"> 
    <div class="row"> 

     <div class="container"> 

     <?php if (get_field('about_us')):?> 
      <div class="col-md-12 col-xs-12"> 

       <?php the_field('about_us'); ?> 

      </div> 
     <?php endif;?> 


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



<?php 
$image3 = get_field('cons_image'); 
?> 

<div class="consult"> 
    <div class="row"> 
     <div class="my-block-left" style="background-image:url(<?php echo $image3['url'];?>); background-size: cover;" > 

      <div class="container"> 

      <?php if (get_field('consult_us')):?> 
       <div class="col-md-12 col-xs-12"> 

        <?php the_field('consult_us'); ?> 

       </div> 
      <?php endif;?> 


      </div> 


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


<?php if (get_field('contact_us')):?> 
<div class="contact-us"> 
    <div class="row"> 

     <div class="container"> 

     <h1 class="contact-h1">Contact Us</h1> 

     <div class="line"></div> 


      <div class="col-md-12 col-xs-12"> 

       <?php the_field('contact_us'); ?> 

      </div> 



     </div> 
    </div> 
</div> 
<?php endif;?> 

<?php get_footer(); ?> 

Answer 1

Ok zu machen, Es scheint, dass Sie bereits die grundlegenden Optionen Thema gemacht haben. Wenn Sie jetzt echte Themenoptionen erstellen möchten, wie sie alle in ihren Designs erstellen, haben Sie drei coole Optionen. WP Theme Customizer API, Redux und Codestars

Sie müssen sie studieren. Jeder der oben genannten können Sie in Ihrem Projekt verwenden.