id подразумевает уникальность элемента, следовательно, на странице не может быть два элемента с одинаковыми ID. Метод VK.Widgets.Comments() первым параметром принимает именно этот самый ID элемента. Вам надо сделать что-то вроде такого:<div id="vk_comments_1"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments_1", {redesign: 1, limit: 20, width: "1060", attach: "*"});
</script><div id="vk_comments_2"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments_2", {redesign: 1, limit: 20, width: "1060", attach: "*"});
</script>VK.Widgets.Comments() передать третий параметр с уникальным ID, иначе ВК будет в обоих виджетах отображать одинаковые комментарии. Например, у первого виджета можно поставить число 1, а у второго - число 2 Что это такое и зачем это нужно я отвечал вот здесь: Как сделать чат из комментариев ВК? (см. комментарии к ответу). 
div {
position: relative;
width: 200px;
height: 200px;
background: #000;
overflow: hidden;
border-radius: 50%;
animation: ROTATION 5s linear infinite;
}
div:before {
position: absolute;
display: block;
content: "";
top: 0; left: 0;
width: 50%; height: 100%;
background: #999;
}
div:after {
position: absolute;
display: block;
content: "";
top: 0; right: 0;
width: 50%; height: 100%;
background: #f00;
}
@keyframes ROTATION {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<body>$(window).on('load', function() { ... });$(window).on('load', function () {
var pre= $('.preloader');
var indicator = pre.find('.indicator');
indicator.fadeOut();
pre.delay(350).fadeOut('slow');
});
<div class="wrap">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
.box-1 {
width: 5rem;
height: 10rem;
background: #000;
}
.box-2 {
width: 10rem;
height: 5rem;
border: .25rem solid #000;
margin-left: -5px;
}
.box {
display: inline-block;
vertical-align: middle;
}<div class="wrap">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
.box-1 {
width: 5rem;
height: 10rem;
background: #000;
}
.box-2 {
width: 10rem;
height: 5rem;
border: .25rem solid #000;
}
.wrap {
display: flex;
flex-flow: row nowrap;
align-items: center;
}<div class="wrap">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
.box-1 {
width: 5rem;
height: 10rem;
background: #000;
}
.box-2 {
width: 10rem;
height: 5rem;
border: .25rem solid #000;
margin-top: 2rem;
}
.box {
float: left;
}
the_content() пишете the_excerpt(). Этот код будет выводить анонс поста, если он явно указан, либо первые сколько-то слов поста (по умолчанию вроде бы 55). Что бы вывести ссылку на полную версию поста, например на главной странице сайта, то после the_excerpt() можете вставить <a class="read-more-link" href="<?php the_permalink(); ?>">Read More</a>
$posts = $wpdb->get_results( "SELECT * FROM " . $wpdb->prefix . "posts WHERE post_type='post' AND post_status='publish' ORDER BY id DESC LIMIT 4" );
..
/blog/ - папка WordPress, откуда и будет работать блог
/assets/ - ваша статика обычного сайта, не WordPress
index.php - главная страница обычного сайта (или роутер)// 1. Просим WordPress выполнить только загрузку ядра (ключевого функционала)
define( 'SHORTINIT', true );
// 2. Загрузить среду WordPress
require( '/path/to/wp-load.php' );
// 3. Теперь доступна глобальная переменная $wpdb для работы с БД WordPress
$posts = $wpdb->get_results('SELECT * FROM '. $wpdb->prefix.'posts');