Posted on

对应内容切换

<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>
Posted on

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;
}
Posted on

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 -->