Question

我正试图想出一种在wordpress上制作动态主页的方法，我希望能够编辑首页，并添加内容而无需对其进行硬编码。

基本上我想让我的主页看起来与此类似。

https://html5up.net/forty

我知道我需要主题选项才能做到这一点，我将如何将其整合到我的wordpress主题中。

我希望能够制作列，添加行，添加英雄形象等等。

不，我不想使用视觉作曲家。我目前正在使用高级自定义字段。

这是我主题的当前首页，我不想使用高级自定义字段，因为我仍然需要硬编码。

简而言之，如何为wordpress主题制作主题选项

模板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

好的，看来你已经完成了基本的主题选项。现在，如果你想创建真实的主题选项，比如每个人都在他们的主题中创建，那么你有三个很酷的选择。 WP Theme Customizer API，Redux和Codestars

你需要研究它们。您可以在项目中使用上述任何人。

wordpress开发如何为主页制作主题选项

1 个答案: