wordpressの開発ホームページのテーマオプションの作り方

Question

私はWordPressで動的なホームページを作る方法を見つけようとしています。私はフロントページを編集し、それをハードコードしないでコンテンツを追加したいと思っています。

基本的に私は私のホームページをこのように見せたいと思っています。

https://html5up.net/forty

と私は私のワードプレスのテーマであることに統合する方法を、私はこれを行うには、テーマオプションが必要であることを認識しています。

など私は、列を作るの行を追加し、英雄のイメージを追加できるようにしたい

、

といいえ、私は視覚的な作曲を使用したくありません。私は現在、高度なカスタムフィールドを使用しています。

私のテーマでは現在のフロントページですが、高度なカスタムフィールドを使用したいのは、まだハードコードが必要なためです。ワードプレスのテーマ

テンプレート-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]をテーマオプションを作成する方法を一言で言えば

、あなたがすでに基本的なテーマオプションを行っているようです。あなたがテーマで作成したような本当のテーマオプションを作成したい場合は、3つのすばらしいオプションがあります。 WP Theme Customizer API,ReduxおよびCodestars

あなたはそれらを勉強する必要があります。あなたのプロジェクトで上記のものを使用できます。