效果

教程

第一步

在主题目录--->wp-content ---> themes ---> zibll ---> pages创建tool.php文件，然后把下面的php代码添加进去。

<?php

/**
 * Template name: AOTIAN-工具
 * Description:   AOTIAN - tool
 */

// 傲天网页工具
get_header();
$post_id = get_queried_object_id();
$header_style = zib_get_page_header_style($post_id);
?>
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
        <?php  if($header_style != 1){echo zib_get_page_header($post_id);}?>
            <div class="theme-box radius8">
            <?php  if($header_style == 1){ echo zib_get_page_header($post_id);}?>
                   <html>
                     <head>
                    <style>
                        .wiiuii-card-nav{display:flex;flex-wrap:wrap;margin:20px 0}.wiiuii-card-nav .item{width:25%;padding:10px}.wiiuii-card-nav .nav{display:flex;align-items:center;border-radius:8px;box-shadow:0px 0px 10px rgba(0,0,0,0.2);transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;padding:20px 10px}.wiiuii-card-nav .nav .avatar{min-width:40px;min-height:40px;width:40px;height:40px;background-size:cover;border-radius:8px;margin-right:10px}.wiiuii-card-nav .nav .content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.wiiuii-card-nav .nav svg{width:18px;height:18px;min-width:18px;min-height:18px;fill:#fff}.wiiuii-card-nav .nav:hover{text-decoration:none !important;-webkit-transform:translate3d(0, -5px, 0);transform:translate3d(0, -5px, 0)}@media (max-width: 1200px){.wiiuii-card-nav .item{width:33.3333333%;padding:10px}}@media (max-width: 992px){.wiiuii-card-nav .item{width:50%;padding:10px}.wiiuii-card-nav .nav svg{display:none}.wiiuii-card-nav{margin:15px 0}}@media screen and (max-width: 768px){.wiiuii-card-nav .item{width:100%;padding:10px}.wiiuii-card-nav .nav svg{display:none}.wiiuii-card-nav{margin:15px 0}}
                    </style>
                    </head>
                     <body>
                      <div class="wiiuii-card-nav">
                    <!---->
                       <div class="item"> 
                        <a href="https://www.atbkw.cn/videos" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://www.atbkw.cn/wp-content/uploads/aotian/logo/ico.png)"></span> <span class="content" style="font-weight: bold;">视频解析</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> 
                       </div>
                       <div class="item"> 
                        <a href="https://www.atbkw.cn/css" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://www.atbkw.cn/wp-content/uploads/aotian/logo/ico.png)"></span> <span class="content" style="font-weight: bold;">CSS代码</span> <i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> 
                       </div>
                       <div class="item"> 
                        <a href="https://www.atbkw.cn/epidemicsituation" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://www.atbkw.cn/wp-content/uploads/aotian/logo/ico.png)"></span> <span class="content" style="font-weight: bold;">实时疫情</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> 
                       </div>
                       <div class="item"> 
                        <a href="https://www.atbkw.cn/" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://www.atbkw.cn/wp-content/uploads/aotian/logo/ico.png)"></span> <span class="content" style="font-weight: bold;">傲天博客待添加</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> 
                       </div>
                       <div class="item"> 
                        <a href="https://www.atbkw.cn/" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://www.atbkw.cn/wp-content/uploads/aotian/logo/ico.png)"></span> <span class="content" style="font-weight: bold;">傲天博客待添加</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> 
                       </div>
                       <div class="item"> 
                        <a href="https://www.atbkw.cn/" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://www.atbkw.cn/wp-content/uploads/aotian/logo/ico.png)"></span> <span class="content" style="font-weight: bold;">傲天博客待添加</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> 
                       </div>
                    <div class="item"> 
                        <a href="https://www.atbkw.cn/" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://www.atbkw.cn/wp-content/uploads/aotian/logo/ico.png)"></span> <span class="content" style="font-weight: bold;">傲天博客待添加</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> 
                       </div>
                    <div class="item">
                       <a href="https://www.atbkw.cn/" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://www.atbkw.cn/wp-content/uploads/aotian/logo/ico.png)"></span> <span class="content" style="font-weight: bold;">傲天博客待添加</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> 
                       </div>

                      </div>
                     </body>
                    </html>
                     <br> <br> <br> <br> <br>
                      </div>
<?php comments_template('/template/comments.php', true); ?>
                    </div>
   </div>
    
    </main>
<?php
get_footer();

第二步

WordPress后台—>新建页面—>自己填标题(内容不要动他)—>模板选一下AOTIAN-工具—>发布文章如图：

温馨提示：本文最后更新于2022-05-12 03:35:24，某些文章具有时效性，若有错误或已失效，请在下方留言或联系乡野博文。

您阅读这篇文章共花了： 0小时00分00秒

-----本页内容已结束，喜欢请分享！-----

感谢您的来访，获取更多精彩文章请收藏本站。

版权声明 1 本网站名称：乡野博文
2 本站永久网址：www.zau.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ:550966987进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END