WordPress添加一个网页集合页面

WordPress添加一个网页集合页面

效果

图片[1]-WordPress添加一个网页集合页面-乡野博文

教程

第一步

主题目录--->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-工具—>发布文章如图:

图片[2]-WordPress添加一个网页集合页面-乡野博文
温馨提示:本文最后更新于2022-05-12 03:35:24,某些文章具有时效性,若有错误或已失效,请在下方留言或联系乡野博文
您阅读这篇文章共花了: 0小时00分00秒
-----本页内容已结束,喜欢请分享!-----
© 版权声明
THE END
喜欢本站内容,请点【点赞】【分享】和【收藏】~
点赞7 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容