Решил написать пост дополнение к моему видео о том как вывести ленту Instagram на сайте бесплатно и без API.

Вот видео :)

Дело в том, что у меня была потребность вывести ленту именно на статичной HTML / CSS странице и я думал, что те кто использует WordPress этим не заинтересуется и скорей найдут для себя удобный плагин, чем будут заморачиваться с HTML / CSS / JS.

Но мне написали с вопросом, как вывести ленту этим методом именно внутри поста WordPress и оказалось, что это достаточно просто.

Все делается внутри редактора поста, через блок HTML.

В блок вставляем вот такой код (это мой пример), а параметры меняем на свои.

В моем примере кода вывод сделан три раза т. к. я использую три варианта вывода под разные устройства — настольный компьютер, планшет и смартфон, для обеспечения адаптивности верстки.

<script src="https://tiku.ru/js/jquery.instagramFeed.min.js"></script>
<script>
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'ttiikkuu',
                'container': "#instfeed",
                'display_profile': false,
                'display_biography': false,
                'display_gallery': true,
                'callback': null,
                'styling': true,
                'items': 100,
                'items_per_row': 6,
                'margin': 0.25
            });
        });
    })(jQuery);
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'ttiikkuu',
                'container': "#instfeed2",
                'display_profile': false,
                'display_biography': false,
                'display_gallery': true,
                'callback': null,
                'styling': true,
                'items': 100,
                'items_per_row': 2,
                'margin': 0.25
            });
        });
    })(jQuery);
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'ttiikkuu',
                'container': "#instfeed4",
                'display_profile': false,
                'display_biography': false,
                'display_gallery': true,
                'callback': null,
                'styling': true,
                'items': 100,
                'items_per_row': 4,
                'margin': 0.25
            });
        });
    })(jQuery);
</script>
<!-- Display none none --><div class="display-none-none">
<!-- Display none --><div class="display-none">
<div id="instfeed"></div>
<!-- Display none --></div>
<!-- Display none none --></div>

<!-- Display desctop --><div class="display-desctop">

<!-- Display tablet none --><div class="display-tablet-none">
<div id="instfeed2"></div>
<!-- Display tablet none --></div>


<!-- Display none none --><div class="display-none-none">
<div id="instfeed4"></div>
<!-- Display none none --></div>

<!-- Display desctop --></div>

И вот так это выглядит внутри поста WordPress.

Надеюсь кому-то поможет.