<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
max-width: 980px;
margin: auto;
display: flex;
justify-content: space-between;
}
ul>li{
width:20%;
text-align: center;
border-left: 1px solid #333;
float: left;
cursor: pointer;
line-height: 40px;
}
ul>li:last-child{
border-right: 1px solid #333;
}
.items{
max-width: 980px;
margin: 30px auto;
}
.item-content{
background:#999;
margin: 10px 0;
width: 100%;
height: 100px;
padding: 10px;
}
.active{
background: #339;
color: #fff;
position: relative;
}
.active::after{
content: '';
position: absolute;
display: block;
left: 50%;
transform: translate(-50%,-50%) rotate(45deg);
width:16px;
height: 16px;
background:#339;
}
.item-content{
display: none;
}
.items .item-content:first-child{
display: block;
}
</style>
<ul>
<li class="active">A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
<div class="items">
<div class="item-content">1</div>
<div class="item-content">2</div>
<div class="item-content">3</div>
<div class="item-content">4</div>
<div class="item-content">5</div>
</div>
<script>
$(document).ready(function(){
"use strict";
$("ul li").on("click",function(){
$(this).addClass("active").siblings().removeClass("active");
$(this).parent().next().children().eq($(this).index()).show().siblings().hide();
})
})
</script>
wordpress获取特色图片地址
function get_attachment($size, $id)
{
if (empty($size)) {
$size = ‘medium’;
}
$output = ”;
if (has_post_thumbnail($id)) {
$output = wp_get_attachment_image_url(get_post_thumbnail_id($id), $size);
} else {
$attachments = get_posts(array(
‘post_type’ => ‘attachment’,
‘numberposts’ => 1,
‘post_parent’ => $id,
‘post_mime_type’ => ‘image’,
));
if (!empty($attachments)) {
$output = wp_get_attachment_image_url($attachments[0]->ID, $size);
} else {
$output = get_template_directory_uri() . ‘/assets/img/default.jpg’;
}
}
return $output;
}
wordpress小工具
①注册
/* Register widget area*/
function theme_widgets_init() {
register_sidebar( array(
'name' => __( 'Blog Sidebar', 'twentyseventeen' ),
'id' => 'sidebar-1',
'description' => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'theme_widgets_init' );
②输出
<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Blog Sidebar', '' ); ?>">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->