具有自定义帖子类型的WordPress Ajax

时间:2015-12-11 07:33:26

标签: javascript php jquery wordpress

这是我website 您将在左侧看到列表链接。我想要做的是我希望每个链接显示图像和我添加的文本。我正在使用高级自定义字段(ACF)插件,现在我将从那里为每个链接添加图像。

现在,当我点击Focus 19>时,我想要做什么?它会在同一页面上显示焦点19图像。当我点击Austin 20>它将在同一页面上为奥斯汀加载图像。

这是我的页面模板

<?php
/*
Template Name: Home Design
 */

$design_name = get_field ('design_name');
$design_name_2 = get_field ('design_name_2');
$design_name_3 = get_field ('design_name_3');
$design_name_4 = get_field ('design_name_4');
$design_name_5 = get_field ('design_name_5');
$design_name_6 = get_field ('design_name_6');
$design_name_7 = get_field ('design_name_7');
$design_name_8 = get_field ('design_name_8');
$design_name_9 = get_field ('design_name_9');
$design_name_10 = get_field ('design_name_10');
$design_name_11 = get_field ('design_name_11');
$design_name_12 = get_field ('design_name_12');
$design_name_13 = get_field ('design_name_13');
$design_name_14 = get_field ('design_name_14');
$design_name_15 = get_field ('design_name_15');
$design_name_16 = get_field ('design_name_16');
$design_name_17 = get_field ('design_name_17');
$design_name_18 = get_field ('design_name_18');
$design_name_19 = get_field ('design_name_19');
$design_name_20 = get_field ('design_name_20');
$design_name_21 = get_field ('design_name_21');
get_header(); ?>

<section id="homedesign">
  <div class="container">  
  <h1>Home Designs</h1>
<hr style="background:#6d9aa0;">

            <h2>Single Storey Home Design</h2>


    <div class="row">
    <div class="col-md-3 borderright">
        <ul class="homedesign">
       <?php echo "$design_name";?>
          <?php echo "$design_name_2";?>
          <?php echo "$design_name_3";?>
          <?php echo "$design_name_4";?>
          <?php echo "$design_name_5";?>
          <?php echo "$design_name_6";?>
          <?php echo "$design_name_7";?>
          <?php echo "$design_name_8";?>
          <?php echo "$design_name_9";?>
          <?php echo "$design_name_10";?>
           <?php echo "$design_name_11";?>
          <?php echo "$design_name_12";?>
          <?php echo "$design_name_13";?>
          <?php echo "$design_name_14";?>
          <?php echo "$design_name_15";?>
          <?php echo "$design_name_16";?>
          <?php echo "$design_name_17";?>
          <?php echo "$design_name_18";?>
          <?php echo "$design_name_19";?>
          <?php echo "$design_name_20";?>
          <?php echo "$design_name_21";?>

        </ul>
        <h2>Dobule Storey Home Design</h2>
        <ul class="homedesign">


        </ul>
        </div>

    <div class="col-sm-9">
                <p class="homedesign-title">The Amazon 35</p>
                        <div class="col-md-12 white-bg">

                  <div class="col-md-3">
                  <ul id="houselist" class="homedesign2">
                     <li> Total Area <br> 355.16sqm</li>
                     <li> Overall Width <br> 12.83 </li>
                    <li> Optional Alfresco <br> 24.81 sqm </li>
                   </ul>
                  </div>
                  <div class="col-md-9" style="padding:0;">
                    <img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/carness.jpg" alt="Thumb">
                  </div>
                    </div>

                  <div class="col-md-3">
                        <img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
                    <div class="col-md-12 turq-bg">text goes here</div>
                            </div>

                            <div class="col-md-3">
                        <img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
                    <div class="col-md-12 turq-bg">text goes here</div>
                            </div>

                            <div class="col-md-3">
                        <img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
                    <div class="col-md-12 turq-bg">text goes here</div>
                            </div>

                            <div class="col-md-3">
                        <img src="http://www.abiglittlebiz.com/trevelle/wp-content/uploads/2015/12/img1.jpg" alt="">
                    <div class="col-md-12 turq-bg">text goes here</div>
                            </div>

            </div>
        </div>
    </section>
 <?php get_footer(); ?>

0 个答案:

没有答案