这是我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(); ?>