File: /www/wwwroot/www.scdc-marine.com/wp-content/themes/scdc-marine/TempParts/Main/Sidebar/sidebar.php
<?php
use Heku\HekuClass\View\Sidebar_Walker_Menu;
/**
* Sidebar 列表
*
*/
?>
<?php if(is_single()||is_archive()||is_tag()){ ?>
<div id="sidebar_products" class="sidebar-bg wow slideInLeft">
<div class="sidebar-title">
<h2><span class="icon iconfont icon-chuan2"></span>Product Categories</h2>
</div>
<div class="sidebar-container">
<!-- star heku-top-menu -->
<?php $arg = array(
'theme_location' => 'sidebar-product',
'container_id' => '',
'container_class' => 'sidebar-nav-container',
'menu_id' => '',
'menu_class'=> 'sidebar-nav-menu',
'echo' => FALSE,
'items_wrap' => '<ul class="%2$s">%3$s</ul>',
'item_spacing' => 'preserve',
'fallback_cb' => '__return_false'
);
$arg['walker'] = new Sidebar_Walker_Menu();
echo wp_nav_menu($arg); ?>
<!-- end heku-top-menu -->
</div>
</div>
<?php } ?>
<?php if(is_single()||is_archive()||is_tag()){ ?>
<div id="sidebar_news" class="sidebar-bg wow slideInLeft">
<div class="sidebar-title">
<h2><span class="icon iconfont icon-fuwu1"></span>Service & Support</h2>
</div>
<div class="sidebar-container">
<ul class="sidebar-list-ul">
<?php $news_posts = get_posts( [
'fields' => 'ids',
'posts_per_page' => 4,
'post_type' => 'news',
'numberposts' => 4, // 获取的文章数量
'orderby' => 'post_date', // 根据发布日期排序
'order' => 'DESC', // 降序，最新的文章在前面
] );
if( isset( $news_posts[0] ) && ( count($news_posts) > 0 ) ){ ?>
<?php foreach( $news_posts as $post): ?>
<?php setup_postdata($post); ?>
<?php get_template_part("TempParts/Main/item-Template/item-sidebar-news"); ?>
<?php endforeach; ?>
<?php wp_reset_postdata();
} ?>
</ul>
</div>
</div>
<?php } ?>
<style>
/* ----------------------------------------------------
43) #sidebar_products 产品侧边列表 ，展示模板：Sing-news-temp01 css样式
------------------------------------------------------- */
.single-sidebar{width:320px;}
.sidebar-bg{background-image:linear-gradient(45deg,#93a5cf 0%,#e4efe9 100%);border-radius:var(--radius_big);-webkit-box-shadow:var(--box_shadow);box-shadow:var(--box_shadow);margin-bottom:25px;}
.sidebar-title{background-image:url(/wp-content/themes/scdc-cms/assets/img/43.png);padding:24px 26px 0px 24px;background-position:top right;background-repeat:no-repeat;background-size:50px;}
.sidebar-title h2{padding-bottom:15px;border-bottom:1px solid #f2f2f2;font-size:20px;color:#000;}
.sidebar-container{padding:8px 0px 8px 0px;}
#sidebar_products .sidebar-title{padding:15px 10px 10px 10px;border-bottom:1px dashed var(--forecolor);}
#sidebar_products .sidebar-title h2{color:#000;padding:5px;border-bottom: none;}
#sidebar_products .sidebar-title .icon{font-size:24px;padding:0 12px 0 0px;}
#sidebar_products .sidebar-nav-menu li.sidebar-li{list-style:none;}
#sidebar_products .sidebar-nav-menu > li .sidebar-cat-img{width: 50px;padding-right: 10px;}
#sidebar_products .sidebar-nav-menu > li{list-style: none;line-height:60px;overflow: hidden;}
#sidebar_products .sidebar-nav-menu .current-menu-item .sub-menu-0,
#sidebar_products .sidebar-nav-menu .current-menu-parent .sub-menu-0{max-height: 500px;overflow: hidden;}
#sidebar_products .sidebar-nav-menu > li .icon:before{content:"\e61a";}
#sidebar_products .sidebar-nav-menu li.current-menu-item > div > .icon:before,
#sidebar_products .sidebar-nav-menu li.current-menu-parent > div > .icon:before{content:"\e61b";}
#sidebar_products .sidebar-nav-menu > li .icon{float: right;padding-right: 5px;}
#sidebar_products .sidebar-nav-menu .sub-menu-0 {padding: 0 20px;max-height: 0px;overflow: hidden;-webkit-transition:all 0.7s ease-out 0s;-moz-transition:all 0.7s ease-out 0s;-ms-transition:all 0.7s ease-out 0s;-o-transition:all 0.7s ease-out 0s;transition:all 0.7s ease-out 0s;}
#sidebar_products .sidebar-nav-menu .sub-menu-0 > li{border-bottom:1px solid var(--forecolor);border-bottom-style:dashed;color:var(--forecolor);list-style:none;}
#sidebar_products .sidebar-nav-menu li.current-menu-item .sidebar-menu-li,
#sidebar_products .sidebar-nav-menu li.current-menu-parent .sidebar-menu-li,
#sidebar_products .sidebar-nav-menu > li:hover .sidebar-menu-li{background:var(--forecolor_translucent_3) ;border:1px solid #ceb4b4;border-right:3px solid #e32626;border-left:3px solid #e32626;}
#sidebar_products .sidebar-nav-menu li.current-menu-item .sidebar-menu-li a span,
#sidebar_products .sidebar-nav-menu li.current-menu-parent .sidebar-menu-li a span,
#sidebar_products .sidebar-nav-menu > li:hover .sidebar-menu-li a span{font-size:16px;color:var(--color_eye);}
#sidebar_products .sidebar-nav-menu li .sidebar-menu-li a span{font-size: 16px;}
#sidebar_products .sidebar-nav-menu li .sidebar-menu-li{padding:0 6px;border:1px solid #ffffff00;border-right:3px solid #ffffff00;border-left:3px solid #ffffff00;}
#sidebar_products .sidebar-nav-menu .sub-menu{max-height: 0px;overflow: hidden;}
#sidebar_products .sidebar-nav-menu .current-menu-item > .sub-menu{max-height: 1500px;}
#sidebar_products .sidebar-nav-menu .sub-menu-0 > li:last-child{border-bottom: none;}
/* ----------------------------------------------------
43) #sidebar_news 新闻详情页 ，展示模板：Sing-news-temp01 css样式
------------------------------------------------------- */
#sidebar_news .sidebar-title h2{padding-bottom:15px;border-bottom:1px solid #f2f2f2;font-size:20px;color:#000;}
#sidebar_news .sidebar-title .icon{font-size:24px;padding:0 8px 0 0px;}
#sidebar_news .sidebar-container{padding:5px 0px 20px 0px;}
#sidebar_news .sidebar-li-title h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;word-break:break-all;font-size:14px;padding-top: 4px;}
#sidebar_news .sidebar-li-title time{font-size:12px;color:#fff;margin-top:4px;}
#sidebar_news .sidebar-li-box{display:flex;align-items:center;}
#sidebar_news .sidebar-li-img{padding:8px 0px 8px 10px;border-radius:var(--radius_big);}
#sidebar_news .sidebar-img-box{overflow:hidden;border-radius:5px;width:110px;}
#sidebar_news .sidebar-img-box img{width: 100%;}
#sidebar_news .sidebar-li{list-style: none;padding: 5px 18px;}
#sidebar_news .sidebar-li:hover {background:#93a5cf;}
#sidebar_news .sidebar-li:hover .sidebar-li-title h2{color: #fff;}
#sidebar_news .sidebar-li:hover .sidebar-li-title time{color:var(--color_eye);}
#sidebar_news .sidebar-li:hover .sidebar-img-box img{transform:scale(1.2);transition:filter 375ms .2s,transform .6s;}
/* --- 1) 小于780尺寸时候使用¸ --- sm --- */
@media only screen and (max-width:768px){}
/* --- 1) 小于780尺寸时候使用 手机 mobile --- */
@media (max-width:576px){}
/* --- 2) 大于768px尺寸 min --- */
@media(min-width:768px){}
/* --- 3) 大于992px尺寸 mid --- */
@media(min-width:992px){}
/* --- 4) 显示规定 大于1200尺寸时候使用 max --------- */
@media(min-width:1200px){}
/* --- 4) 显示规定 大于1667尺寸时候使用 max --------- */
@media(min-width:1667px){}
</style>