仿Post Embed功能的文章内链短代码

现在,WP已经自带Post Embed功能,直接贴地址就自动转换,但是通过iframe加载文章信息太多,修改起来不方便。正好在常阳时光那里看到了自定义的版本,就收藏起来,方便折腾。实际更早的时候也用大发的代码折腾过,但是需要自己写CSS,由于不会写就放弃了。自定义版本调用文章需要用到文章id,我的固定链接中没有使用文章id,每次去找很麻烦,干脆在文章页面的标签下面显示每篇文章的id。

一、实现方式:

需要启用 WP-PostViews 插件,或者替换掉相关函数。

1、下面的代码加入当前主题的functions.php中

// WordPress 文章内链短代码 - https://fatesinger.com/76585
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-reads">阅读 
							'.the_views(false, '', '', false).'
						</div>
						<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');

2、下面的代码加入到css文件,根据自己的需要适当修改:

/** WordPress 文章内链短代码 New Embed**/
.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: right;
    vertical-align: middle;
    white-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;
}
/** WordPress 文章内链短代码 New Embed - END **/

3、直接在文章中(html 代码模式下)使用短代码 (xx_insert_post ids=1234)即可(把小括号改成中括号)。如果不是在文章内容中,而是在其他地方想调用,则可使用 do_shortcode('(xx_insert_post ids=1234)') 来调用(把里面的小括号改成中括号)。

4、演示效果:

WordPress在中英文间自动加入空格

为了增强美观,我们在书写的时候一般会按照中文的书写习惯来排版,比如,每段开头空两格等。在中英文混写的文章里,英文单词和中文自己有一定的空格也会增强美观,方便阅读,但是手动添加的话工作量太大,这里有自动...


本人五毒俱全且有严重暴力倾向,现实生活中建议远离,否则后果自负。

《仿Post Embed功能的文章内链短代码》上有 5 条评论

  1. 不错,赞一个!

  2. avatar

    惊见大发的广告植入…… :wink:

    • avatar

      @Betty 专门为你,让你能够时时想起哈尔滨的那套房子

  3. avatar

    好东西,分享的很不错

  4. avatar

    不错!我一般超链接~~反正要点过去看~

世界有你更精彩!

与 从良未遂 联络感情