• Прикрутка лендинга к блогу?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Ты можешь сделать следующим образом:

    - Определить в теме на wordpress, там где предполагается разместить блог, 2 файла:
    - - header-landing.php
    - - footer-landing.php
    Соответственно в них, в шапке определяешь стили, head и тд. в футере скрипты. А среднюю часть запихиваешь в index.php в папке темы, причем, я подозреваю, что именно лэндинг у тебя будет на главной (а за это будет как раз отвечать вот такой index.php), а в меню где то будет пункт, к примеру с произвольной ссылкой "Блог", вести она будет по адресу, к примеру site.ru/category/posts (ну а для этого создаешь рубрику posts из коробки в wp и пуляешь туда свои посты)

    index.php:

    // в шапку выносишь все то, что ты хочешь видеть в шапке, то есть, то что постоянно на каждой странице тут
    <?php get_header("landing"); ?>
    
    // здесь html твой, средней части лэндинга
    
    // тоже самое футер, срипты итд
    <?php get_footer("landing"); ?>


    Потом делаешь динамическое меню (свое), прикручиваешь его в шапку, в любом месте (но до этого его на зарегистрировать в functions.php [menu_name]), выводишь функцией в любом, к примеру

    <?php
    $args = [
      'theme_location' => 'menu_name'
    ];
     wp_nav_menu($args);?>


    Потом в админке уже можешь добавить пункт в меню "Блог", дать ему ссылку на рубрику постов и все. На главной лэндинг, по ссылке - блог. Но вообще все индуивидуально, смотря какая тема там у тебя, может еще надо покопаться, посмотреть настройки в админке, но суть изначально вот такая. Как я себе это вижу

    ---

    у меня лендинг -одна страница (index.htm) на которой ссылка на блог site.ru/blog, лендинг соответственно имеет свои папки css и javascript и images. Вот как все это распределить в теме и настроить так, чтобы основная страница выводилась -лендинг, а по ссылке блог выводился уже блог вордпресс. Лендинг можно не делить на хэдер и футер и т.д. он статичен- у него одна страница. Как грамотно все это разместить в теме и настроить там function.php и т.д. и в настройках админки.


    А в таком случае не проще сделать так: на сервере в корне лендинг -одна страница (index.htm) с папки css и javascript и images. Создать еще одну директорию, blog, туда устанавливаем wp с любой темой. И таким образом будет на главной лэндинг, а при переходе в /blog/ будет открываться и обрабатывать запросы wp. (Может быть слегка придется подправить в /blog/ .htaccess или VirtualHost , чтобы точка входа в блог была /blog/index.php, ну или root на nginx ). Ну и прописывать в принципе ничего не надо будет никуда больше, в functions.php и тд. Если что то катомизировать в теме, уже идем в /blog/ и там копаемся.
    Ответ написан
    8 комментариев
  • Как быстрее освоить Ajax?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    грубо говоря аякс это посылка запроса на сервер (асинхронный джаваскипт и xml), то есть кликнул чето (кнопку), она автоматом взяла данные, в фоне пульнула их на сервер, обработчик их принял, обработал, отправил ответ, в зависимости че пришло, произошло то и то (выскочило окно, отрендерились данные, разметка, чего хочешь). Самый эффект, это то что страница не перезагружается, все идет фоном (хотя там вроде и синхронный режим можно вкл. но его никто не вкл.), пока идет все действо, продолжаешь работать с сайтом, как ни в чем не бывало. Никакой серверный язык тут не нужен (если ты, конечно, сам обработчик на сервере не пишешь, че он там делает), объект XmlHttpRequest в оригинале или же низкоуровневый $.ajax({...}) jquery. То есть это просто один раз сделать и уже поймешь, что там и учить нечего особо)
    Ответ написан
  • Как сделать отдельную мобильную версию на wordpress?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Комментировать
  • Как сделать preloader?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Примерно следующим образом.

    В самом начале скрываем допустим основной контент, который находится во враппере, ну к примеру задав прозрачность 0

    #wrapper {
        opacity: 0;
    }
    
    #main_preload{
      position: fixed;
      width: 64px;
      height: 64px;
      left: 50%;
    }


    В разметке делаем страницу, которая будет отображаться пока идет загрузка, но мне проще ориентироваться будет на прелоадер (как то привычнее, но смысл реализации будет тем же). Поэтому сделаем пустой див #main_preload

    Вообще разметка примерно следующего типа:

    <!doctype html>
    <html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    <span id="main_preload"></span>
    <div id="wrapper">
    <!-- content -->
    </div>
    <script type="text/javascript" src="path/to/loader.js"></script>
    </body>
    </html>


    Делаем скрипт loader.js, примерный код дернул со старого своего проекта (поэтому полностью на код ориентироваться не стоит), прелоадер (gif) будет крутится в центре экрана, пока не загрузится основной контент:

    var preload = $("#main_preload"), 
        w = $(window).width() / 2 - 30, 
        h = $(window).height() / 2 - 30;
    preload.html('<img src="/path/to/preload.gif" alt="load content."/>');
    preload.css({"top": h + 'px', "left": w + 'px'});
    $(window).load(function () {
        setTimeout(function () {
            preload.animate({opacity: "0"}, 50, function () {
                preload.html("")
            });
            $("#wrapper").animate({opacity: "1"}, 50)
        }, 250)
    });


    Суть в использовании $(window).load( ); setTimeout тут не помню уже зачем, вроде для какой то красивой задержки, но эта задержка не имеет ничего общего с основной загрузкой. Там плавный переход получается такой: прелоадер крутится, пока весь контент не будет загружен (и картинки и тд), потом идет плавное затухание прелоадера на прозрачность 0 и одновременное появление основного контента (прозрачность 1).

    https://jsfiddle.net/sm2yfbxj/
    Ответ написан
    9 комментариев
  • Сайт перестал подстраиваться под меньшие разрешения устройствах от 640 до 1200px, почему?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Статическая ширина в px

    .main-description:after
    вот тут из за этого width: 711px; происходит. Переверстай этот момент

    5afb945d0c404091b23eb1dbf786d518.png

    потом .content-wrapper ширина в статике 1160px, нужно убрать это значение. Поставь width: 100%;
    Скрин
    Ответ написан
  • Оптимальные настройки веб сервера (nginx->apache->php) для api?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Про настройку nginx можно почитать здесь
    Ответ написан
    Комментировать
  • Как корректно закрыть модальное окно?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    https://jsfiddle.net/pgqytmw4/10/

    Код разберете сами, если что не понятно, — спрашивайте в комментариях
    Ответ написан
  • По клику на кнопку добавлять стиль родительскому контейнеру?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    https://jsfiddle.net/rrzharikov/9k09hr1e/1/

    Идею дал) Дальше сами. Игра со стилями. Сейчас родительскому контейнеру присваивается класс, если хотя бы один пинбокс активен, иначе класс пропадает. Название класса boxcontainer_active
    Ответ написан
  • Как сделать так штуку?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Ответ написан
    Комментировать
  • По клику на кнопку активировать фиксированный фон позади блока, в котором была нажата кнопка?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Обернуть pinbox в див с классом wrapper-pinbox каждый дополнительно

    Вот если немного js модернизировать:

    $(function() {
      $('.emb').each(function() {
        $(this).on('click', function() {
    
          var block = $(this).next('.meta-data'),
            pinbox = $(this).parents('.pinbox');
    
          pinbox.toggleClass('pinbox_active');
          pinbox.parent().toggleClass('pinbox_parent_active');
    
          if (pinbox.hasClass('pinbox_active')) {
            block.slideDown(100);
            $(document).on('click', function(event) {
              if ($(event.target).closest(pinbox).length)
                return;
              block.hide(100);
              pinbox.removeClass('pinbox_active');
              pinbox.parent().removeClass('pinbox_parent_active');
              event.stopPropagation();
            });
          }
        });
      });
    });


    И CSS:

    * {
      margin: 0px;
      padding: 0px;
    }
    
    .pinbox {
      position: absolute;
      background-color: #2DC5F2;
      width: 321px;
      border-radius: 12px;
      -webkit-border-radius: 12px;
      position: relative;
      margin: 14px 0 66px 0;
    }
    
    .pinbox_active {
      -moz-transition: all 150ms linear;
      -o-transition: all 150ms linear;
      transition: all 150ms linear;
      -webkit-transition: all 150ms linear;
      z-index: 10;
      box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.8), 70px 50px 85px -8px rgba(57, 70, 78, 0.3);
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
    }
    
    .pinbox_parent_active {
      background: #ccc;
    }
    
    .pinbox .img {
      background-color: #2DC5F2;
      width: 321px;
      border-radius: 12px;
      -webkit-border-radius: 12px;
    }
    
    .pinbox .preview .thumb {
      height: 120px;
      display: block;
      overflow: hidden;
      position: relative;
    }
    
    .pinbox .preview .thumb img {
      -webkit-border-radius: 11px 11px 0 0;
      border-radius: 11px 11px 0 0;
      height: auto;
      max-width: 321px;
      width: 100%;
    }
    
    .emb {
      cursor: pointer;
      position: absolute;
      width: 20%;
      height: 65px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .pinbox .meta-data {
      display: none;
      position: relative;
      font-weight: bold;
      height: 75px;
      z-index: 1;
    }
    Ответ написан
    8 комментариев
  • Нужно "связать" два скрипта отзывающиеся по клику?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    $(function () {
        $('.emb').each(function () {
            $(this).on('click', function () {
    
                var block = $(this).next('.meta-data'),
                    pinbox = $(this).parent('.pinbox');
    
                pinbox.toggleClass('pinbox_active');
    
                if (pinbox.hasClass('pinbox_active')) {
                    block.slideDown(100);
                    $(document).on('click', function (event) {
                        if ($(event.target).closest(pinbox).length)
                            return;
                        block.hide();
                        pinbox.removeClass('pinbox_active');
                        event.stopPropagation();
                    });
                }
            });
        });
    });


    Попробуй так.
    Верно работает? Или нет? Вот исходник: https://jsfiddle.net/rrzharikov/ng46k39q/
    Ответ написан
  • Добавлять стили css по клику одноименным объектам?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    $(function () {
        $('.emb').each(function () {
            $(this).on('click', function () {
                $(this).parents('.pinbox').toggleClass('pinbox_active');
            });
        });
    });
    Ответ написан
  • Wordpress. Подключение защищено не полностью. Как решить?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    У вас так происходит, потому что вывод ссылок в html идет по протоколу http:// (просмотрите исходный html-код и поиском пройдитесь по http://, все ссылки там у вас загружаются по http, а нужно по https), поэтому получается такая ситуация. Нужно чтобы система генерировала ссылки по https. Это касается всего, — ссылки для подключения css, js. Ссылки, в контенте, которые уже берутся из бд.

    В этом случае, в шаблоне вашего сайта, если прописаны абсолютные url, советую заменить http на https. Если используете по всюду функции вывода из бд, тогда надо менять в бд. Но лучше попробуйте такой код (если у вас сайт на wordpress). Еще есть встроенная функция, определяющая, какой протокол использует веб-сервер, для отдачи страниц, — is_ssl( ).

    В файл functions.php вставьте:

    add_filter('the_content', 'replace_url_to_https', 30);
    function replace_url_to_https($text)
    {
        $text = preg_replace('~http(://(?:www.)?' . preg_quote($_SERVER['HTTP_HOST']) . ')~', 'https\1', $text);
        return $text;
    }

    Вроде это должно помочь.

    Еще можно запросами к бд попробовать, тогда и код выше не понадобится:

    UPDATE wp_options SET option_value = replace(option_value, 'http://site.ru', 'https://site.ru') WHERE option_name = 'home' OR option_name = 'siteurl';
    
    UPDATE wp_posts SET guid = replace(guid, 'http://site.ru', 'https://site.ru');
    
    UPDATE wp_posts SET post_content = replace(post_content, 'http://site.ru', 'https://site.ru');


    Тут site.ru — ваш домен подставляете. Все абсолютные пути в базе станут с https

    А везде, где ссылки выводятся не через бд, а напрямую хардкорно прописаны где либо http, замените на https://
    Ответ написан
    2 комментария
  • Актуальные материалы для изучения по WordPress?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    wp-kama.ru
    очень много полезной инфы с примерами.

    Еще книга. WordPress для профессионалов, разработка и дизайн сайтов. Б. Уильямс, Д. Дэмстра, Х. Стэрн. Ищется в гугле

    Кодекс. На оф. сайте

    Код. Внутри код вп, комментарии к функциями, классам, методам. Тоже можно поразбираться
    Ответ написан
    6 комментариев
  • Как правильно заполнить блок фоном в css?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    overflow: hidden;

    Добавьте блоку в стили и заработает.
    Ответ написан
    5 комментариев
  • Как тестировать верстку?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Статья habrahabr.ru/post/114256

    1. Проверка соответствия макету.
      Допускается расхождение до 5px для текста. Разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков (разница размерах в 1-2px на разных страницах).
      В качестве инструмента можно использовать Pixel Perfect (см. статью).

    2. Кроссбраузерность. Корректное отображение в браузерах, указанных в задаче на тестирование.
    3. Проверка на всех необходимых разрешениях
      Всегда следует проверять, как страница реагирует на уменьшение масштаба, таким образом, эмулируя просмотр на устройстве с большим экраном.
      Особенно это актуально, если на странице есть фоновая картинка, которая должна быть на всю область экрана. Это позволяет проверить, что она не вставлена с обрубками.

    4. Проверка на всех необходимых устройствах.
      Даже сайты, не адаптированные под мобильное устройство, должны на нем более-менее корректно смотреться. На мобильных устройствах следует проверять хотя бы в двух браузерах.
      Интересный сервис: webmark.com.ua/mobile
      Можно средствами браузера.
      Адаптивная верстка - рекомендую бутстрап, getbootstrap.com

    5. Отсутствие js-ошибок. В консоли браузера не должно выдаваться ошибок.
    6. Валидация html - validator.w3.org/. Наличие предупреждений (Warning) при проверки возможно. Ошибок не должно быть.
    7. Валидация css.
    8. Корректная работа при вбивании реального текста, надёжность вёрстки.
    9. Оптимизация скорости загрузки.
      https://gtmetrix.com/
      https://developers.google.com/speed/pagespeed/insights/

    10. Наличие Win/Mac/Linux-аналогов шрифтов. При использовании нестандартных шрифтов (определить подгрузку таких шрифтов - также в консоли на закладке Network), проверить, что в случае их незагрузки сайт нормально смотрится.
      Как эмулировать их незагрузку? Например, если шрифт грузится с google fonts, закрыть к нему доступ через файл hosts. Сайт будет смотреться иначе, но ничего не должно слишком сильно разваливаться.

    11. Label и input/select должны быть слинкованы
    12. Проверка корректности заполнения форм на JS. В верстке формы должны валидироваться: обязательные поля подсвечиваться, поле email проверяться на корректность и т.п. Поля для ввода телефона должны иметь маску (если телефон, скорее всего, российский), возможно маски на другие поля (дата, время).

    13. Переключение между элементами форм по кнопке tab
    14. Лого на внутренних страницах должно вести на главную страницу (должно быть ссылкой)
    15. Интерактивность соответствующих элементов - реакция на наведение и нажатие
    16. Skype-плагин не должен ломать вёрстку
    17. Ресайз textarea не должен ломать вёрстку
    18. Ссылки на сторонние сайты должны быть с target=”_blank” (открываться в новой вкладке)
    19. Проверка орфографии, в том числе автоматизированными средствами (Word'ом)
    Ответ написан
    1 комментарий
  • Как применять Less на практике?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Кстати с недавнего времени сам начал интересоваться.
    Вот может помочь этот ресурс: sass-scss.ru
    И вот эта либа: leafo.net/scssphp
    Конкретно ее можно использовать и написать свою обертку даже. Или воспользоваться готовыми модулями на ее основе, например в wordpress:
    https://ru.wordpress.org/plugins/wp-scss/
    или битрикс:
    marketplace.1c-bitrix.ru/solutions/olegpro.csscompiler
    Там все интуитивно понятно. Компилятор работает хорошо. Остальное можно почерпнуть из sass-scss.ru
    Ответ написан
    2 комментария
  • Как правильно подключать js скрипты на страницу?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    $(function(){
     if($('#tab-container').length) {
        $('#tab-container').easytabs();
      }
    });

    Можно проверить, есть ли элемент на странице и уже потом запускать табы
    Ответ написан
    4 комментария
  • Как взять переменную из цикла JQUERY?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Но когда я назначаю переменную в цикле, уже вне цикла эта переменная не работает

    Это происходит потому что срабатывает один из фундаментальных принципов js вообще, - замыкания. Простыми словами одно из проявлении ее сути заключается в том, что мы не можем получить доступ к переменным, объявленным во вложенных функциях, которые скрывают контекст от того уровня, где мы в данный момент находимся, но вложенные функции, т.е. их контекст имеет доступ к родительским переменным
    --
    Пока писал долгое вступление, автор поста выше вроде дал правильный код :)
    Ответ написан
  • Когда использую поиск в WP то везде выводит результат, а если нахожусь на single.php то ничего не происходит, почему?

    alone_lion1987
    @alone_lion1987
    Веб-разработчик
    Может быть у вас что-то не настроено или настроено неверно.
    Сперва вам нужно вынести форму поиска в отдельный шаблон, этот шаблон в теме называтся searchform.php , в нем примерно такой код, в большинстве случаев он стандартный:
    <form id="searchform" class="navbar-search" method="get" action="<?php echo home_url( '/' );?>">
    <input type="text" class="search-query" placeholder="Поиск" name="s" id="s" value = "<?php echo get_search_query();?>">
    </form>

    Затем нужно вызывать данную форму в шаблоне, который подключается ко всем страницам, например это шаблон шапки, header.php, ниже функция выведет код формы из файла searchform.php , вам нужно будет просто эту функцию вызвать в том месте в котором вы хотите:
    <?php get_search_form(); ?>
    После этого уже вам нужно создать файл search.php, в папке темы и реализовать примерно такую логику:
    <? if( have_posts() ):						   
           while(have_posts()): the_post(); ?>
            // вывод...
          <? endwhile; ?>
    <? else: ?>
    <p> По запросу &laquo;<? the_search_query(); ?>&raquo; ничего не найдено</p>
    <? endif; ?>
    Ответ написан