我创建了一个简单的设计,用于向团队成员展示there图像,并与modal(引导程序4)链接。其显示如下:
<div class="col-lg-4 col-sm-6 text-center mb-4">
<img class="rounded-circle img-fluid d-block mx-auto" src="<?php echo get_template_directory_uri(); ?>/images/bestuur/jonas.jpg"
alt="">
<h3><strong>Jonas</strong>
<small>Trainer</small>
</h3>
<p>Ik sta in voor.. "korte beschrijving"</p>
<!-- Button trigger modal -->
<button type="button" class="btn" style="background-color: red; color: #ffff;" data-toggle="modal"
data-target="#ModalJonas">
Meer info & contact
</button>
<div class="modal fade" id="ModalJonas" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><i class="far fa-user-circle"></i> <strong>Jonas
</strong>
<small>Trainer</small></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Beshrijven van persoon/functie
<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry\'s standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book.
</p>
<div class=" text-left">
<p><i class="fas fa-phone"></i> 04 54 84 12</p>
<p><i class="far fa-envelope"></i> [email protected]</p>
<p><i class="fas fa-map-marker-alt"></i> 8
<br> 8560 </p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
现在的问题是,这需要分配代码。wordpress中是否有只需输入值(name、description\\u small、description\\u large、img\\u patch、modalname等)而不只是使用php while lus在我的wordpress页面上生成内容的功能?这使得向页面添加成员变得更加简单
我希望你明白我想做什么,anny建议?
最合适的回答,由SO网友:Castiblanco 整理而成
您可以使用shortcode, 例如,您可以将它们添加到functions.php
或create a plugin
这也是同样的道理。
检查this guide, 但是请记住,有很多关于WordPress和短代码的信息。
最后,您只需在任何地方调用您的短代码。短代码可以使用属性,因此可以这样结束:
[memberThing description="yes"] //...