WP記事内に他の投稿(タイトル、アイキャッチ画像、抜粋)を埋め込むショートコード

・投稿記事に過去の投稿を表示させる。
・タイトル、アイキャッチ画像、抜粋文章、SNSボタンを表示させる。

function.phpの処理

/*過去記事をアイキャッチ付きで表示するショートコード*/
function add_other_post($params = array()) {
	extract(shortcode_atts(array(
		'id' => ''
		), $params));
		$html = '';
		if ($id == '') return $html;

		$queries = new WP_Query("pagename=$id");
		if (!$queries->have_posts()) {
			$queries = new WP_Query("p=$id");
		}

		while ($queries->have_posts()) {
			$queries->the_post();
 
			$link = '<a href="' . get_permalink() . '">';
			$html .=
				'<div class="refPost clearfix"><h2>' . $link . the_title('','',false) . "</a></h2>\n" .
					(has_post_thumbnail() ?
					$link . get_the_post_thumbnail() . '</a>' : ''
					) .
					'<p>'.mb_substr(strip_tags( get_the_content()), 0, 80).'</p>
					<div class="snsShare">
							<div class="sns_tw">
							<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-via="luis_skk" data-url="' . get_permalink() .'/" data-text="' . the_title('','',false) . '">ツイート</a>
							<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
						</div>
						<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
						<div class="sns_hatebu">
							<a href="http://b.hatena.ne.jp/entry/' . get_permalink() .'/" class="hatena-bookmark-button" data-hatena-bookmark-title="' . the_title('','',false) . '" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a>
							<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button_wo_al.js" charset="utf-8" async="async"></script>
						</div>
					</div>
				</div>'; 
		}

	wp_reset_postdata();
		return $html;
	}
	add_shortcode('refpost', 'add_other_post');

投稿編集画面に下記のショートコードを挿入

[refpost id=投稿ポストID]

ポストIDは投稿一覧などでタイトルリンクをマウスオーバーするなどして確認。

CSSで適宜デザインを整える

.refPost{
	background:#f1f1f1;
	border:1px dotted #ddd;
	padding:1em;
	margin:0 auto;
	margin-bottom:2em;
}
.refPost h2{
	margin:0;
	padding: 0 0 0.5em 40px !important;
	font-size: 120% !important;
	line-height: 18px !important;
	background:url(/images/iconRef.png) no-repeat !important;
}
.refPost img{
	width:20% !important;
	height:auto !important;
	float:left;
	margin:0 10px 0 0 !important;
	border:1px dotted #ddd;
}
.refPost p{
	margin:0 0 0.3em;
	font-size:100%;
	line-height:1.4;
}
.refPost .snsShare{margin-bottom:0;}

参照:サイト内の昔の記事にリンクを簡単にかつカッコよくアイキャッチ付きで表示するショートコード