在WordPress4.4版本的时候你会发现,你在写一篇文章的时候,输入自己博客的一篇文章链接后,会自动转化成一个卡片的形式文章,虽然说是给读者可以更好的体验,但是...这Css,功能什么的都不是很给力,最重要的是还会拖累WordPress的加载速度。
那么本文就教大家创建一个类似Post Embed的功能。
首先在functions.php
加入:
- function xx_insert_posts( $atts, $content = null ){
- extract( shortcode_atts( array('ids' => ''), $atts ) );
- global $post;
- $content = '';
- $postids = explode(',', $ids);
- $inset_posts = get_posts(array('post__in'=>$postids));
- foreach ($inset_posts as $key => $post) {
- setup_postdata( $post );
- $content .= '
- <div class="wp-embed-post">
- <p class="wp-embed-post-heading"><a target="_blank" class="wp-embed-post-title" href="' . get_permalink() . '">'. get_the_title() . '</a></p>
- <div class="wp-embed-post-excerpt">'.wp_trim_words( get_the_content(), 100, '...' ).'</div>
- <div class="wp-embed-post-footer">
- <div class="wp-embed-post-site-title">
- <a href="'.get_author_posts_url( get_the_author_meta( 'ID' ) ) .'" title="查看作者 '.get_the_author().' 发布的所有文章" rel="author">'
- .get_avatar( get_the_author_meta('email'), '16' ).'<span>'.get_the_author().'</span>
- </a>
- </div>
- <div class="wp-embed-post-meta">
- <div class="wp-embed-post-comments">
- <a target="_blank" class="wp-embed-post-title" href="' . get_permalink() . '#comments"> 评论 ' . get_comments_number(). '</a>
- </div>
- </div>
- </div>
- </div>';
- }
- wp_reset_postdata();
- return $content;
- }
- add_shortcode('xx_insert_post', 'xx_insert_posts');
加入之后,我们在加上一点Css:
- .wp-embed-post {
- background: #fff;
- border: 1px solid #e5e5e5;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
- color: #82878c;
- font-size: 14px;
- overflow: auto;
- padding: 16px;
- margin-bottom: 16px;
- }
- .wp-embed-post a {
- color: #666;
- text-decoration: none;
- }
- .wp-embed-post-featured-image {
- margin-bottom: 20px;
- }
- .wp-embed-post-featured-image img {
- border: medium none;
- height: auto;
- width: 100%;
- }
- .wp-embed-post-featured-image.square {
- float: left;
- margin-right: 20px;
- max-width: 160px;
- }
- .wp-embed-post p {
- margin: 0;
- }
- p.wp-embed-post-heading {
- font-size: 20px;
- margin: 0 0 4px!important;
- }
- .wp-embed-post-heading a {
- color: #32373c;
- }
- .wp-embed-post .wp-embed-post-more {
- color: #b4b9be;
- }
- .wp-embed-post-footer {
- display: table;
- margin-top: 16px;
- width: 100%;
- }
- .wp-embed-post-site-title .avatar {
- border: 0 none;
- height: 25px;
- left: 0;
- position: absolute;
- -ms-transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -o-transform: translateY(-50%);
- transform: translateY(-50%);
- width: 25px;
- }
- .wp-embed-post-site-title a {
- display: inline-block;
- padding-left: 32px;
- position: relative;
- }
- .wp-embed-post-meta, .wp-embed-post-site-title {
- display: table-cell;
- }
- .wp-embed-post-meta {
- text-align: rightright;
- vertical-align: middle;
- whitewhite-space: nowrap;
- }
- .wp-embed-post-comments, .wp-embed-post-reads {
- color: #666;
- display: inline;
- }
- .wp-embed-post-comments a, .wp-embed-post-share-tab-button {
- display: inline-block;
- }
- .wp-embed-post-comments + .wp-embed-post-share {
- margin-left: 10px;
- }
那我们在使用的试试如何使用呢?
直接输入:
- [xx_insert_post ids=XXX]
注意:XXX是你要引用文章的ID。