Чёкатилло

Ну, так привяжите размер блока к скроллу...
например, так:

document.getElementById("myDiv").style.height = document.body.scrollTop/2+"px"

Готовое решение.
https://jsfiddle.net/aheeferq/5/

WordPress Social Login хорош, гибок, удобен с точки зрения разраба.

width: calc(100% + 68px);

В таких случаях, проще вообще ссылку не использовать и заменить её на SPAN или DIV

$(".menu-item-search").click(function(e){
    e.preventDefault();
});

скрипт инициализируется и строит DOM комментариев единожды, т.е. открыв аяксом пост скрипт просто не построит нужные элементы, т.к. считает, что он это уже сделал и больше не надо.
с подобной проблемой сталкиваются практически все кто работает с аякс -))
плагины не расчитаны на такую работу, надо смотреть скрипт и искать способы переинициализировать его,
убивать HC_LOAD_INIT не вариант, т.к. тогда каждый аякс будет добавлять новый тэг script

сейчас гляну код твоего плагина, может подскажу -))

UPD: насколько я вижу по документации виджет позволяет динамическую подгрузку....
https://www.hypercomments.com/ru/documentation/dyn...
и загрузку нескольких виджетов на странице
https://www.hypercomments.com/ru/documentation/sev...

т.е.
в свой аякс
success:function(data){}
тебе просто надо вставить

document.getElementById('hypercomments_widget').innerHTML = '';
var _hcp = {};
_hcp.widget_id = WIDGET_ID
_hcp.xid   = PAGE_XID; 
HC.widget("Stream", _hcp);

а если ты генеришь несколько постов и для каждого нужен виджет комментариев
используй второй способ

<div id="hypercomments_widget2"></div>
<script type="text/javascript">
_hcwp.push({widget:"Stream", widget_id: WIDGET_ID, xid: "page_2", append: "#hypercomments_widget2", hc_disable: 1});
</script>

P.S. непонятно, что тебе мешало самому внимательно посмотреть документацию к плагину =)

если у родительского задано позиционирование, то дочерний будет считаться исходя из положения родителя,
с z-index максимум можно использовать значение -1
что мешает разместить блоки соседями с общим родителем?

UPD:
если я все правильно понял...
никаких fixed и никаких z-index
https://jsfiddle.net/s9hvuj9L/

UPD2:
немного переделал, убрал ссылку с крестиком, реализовав ее на CSS + добавил крестику fixed позиционирование
и подправил скрипты
https://jsfiddle.net/moLw0qef/1/

grsmto.github.io/simplebar

Существует шорткод:

Это не шорткод, функция get_template_part просто подключает суб-шаблон.

Можно ли его модернизировать таким образом, что бы при клике на него не попадать на страницу поста а попадать в архив, где все посты будут с той же датой?

Можно попробовать так:

<?php 
$archive_year  = get_the_time('Y'); 
$archive_month = get_the_time('m'); 
$archive_day   = get_the_time('d'); 
?>
<a href="<?php echo get_day_link( $archive_year, $archive_month, $archive_day); ?>"><?php echo get_the_date('d.m.Y'); ?></a>

Вставить между

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

и
<?php endwhile; endif; ?>

Так?
<p>Категории: <?php the_category(', '); ?></p>

Добавь в css

.fluid-width-video-wrapper iframe{border-radius: 10px;}

function openbox(className){
    display = document.getElementsByClassName(className).style.display;

    if(display=='none'){
       document.getElementsByClassName(className).style.display='block';
    }else{
       document.getElementsByClassName(className).style.display='none';
    }
}

<a href="#" onclick="openbox(className); return false">Открыть</a>
<div id="className" style="display: none;">Отображаемый блок</div>

но будь аккуратней, возвращаться будут все элементы с данным классом

codepen.io/Cyber-host/pen/ALEAXy

$(function(){
  $(document).on('click','.toggler', function(){
    var block=$('.footerwrapper');
    if(block.is(':hidden')){
      block.slideDown();
    } else {
      block.slideUp();
    }
  })
})
$(window).on('scroll', function() {
    var scrollTop = $(this).scrollTop();
    var block = $('.footerwrapper');
    block.slideUp();
    if (scrollTop < 545) {
         block.slideUp();
    }
});

Либо не через классы:

$(window).scroll(function () {
  if ($(this).scrollTop() >= 0 && $(this).scrollTop() < 100) {
    $('div').css('backgroundColor', 'red');
  } else if ($(this).scrollTop() >= 100 && $(this).scrollTop() < 200) {
    $('div').css('backgroundColor', 'blue');
  } else if ($(this).scrollTop() >= 200 && $(this).scrollTop() < 300) {
    $('div').css('backgroundColor', 'green');
  } else if ($(this).scrollTop() >= 300 && $(this).scrollTop() < 400) {
    $('div').css('backgroundColor', 'yellow');
  } else {
    $('div').css('backgroundColor', 'black');
  }
});

codepen.io/AmateR/pen/rLkqKZ

$(window).scroll(function() {
    if ($(this).scrollTop() > 228) {$('div').addClass('green');}
});

228 можешь вычислять к примеру через .offset() дива. если нужно в каком-то положении

Попробуйте этот? https://wordpress.org/plugins/malinky-ajax-pagination/ Здесь попроще. Задаете селектор где выводятся все посты, потом селектор отдельного поста, селектор контейнера с навигацией и селектор кнопки на следующие посты. Работает с пагинацией и можно сделать кнопку "загрузить еще"или бесконечный скроллинг.
Еще обратите внимание на эту рекомендацию в описании плагина :

Isotope / Masonry
If your using an isotope / masonry layout then you'll need to add a callback in the settings to layout the new posts when they are added. This should be in the following format.

$('.grid').isotope('reloadItems').isotope();

Change the reference to the class name .grid to your own container element.