Задать вопрос
  • Wp_query для кастомных типов записей?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    О боги! Такое ощущение, что все начинающие работать с WordPress учатся по одному какому-то старому уроку, написанному таким же начинающим. Сколько уже исписано - не используйте query_posts. Никогда!

    Если нужно получить 1 пост - get_post()
    Если нужно получить несколько постов вне контекста - get_posts()
    Если нужно модифицировать основной запрос - фильтр pre_get_posts
    Во всех остальных случаях - только WP_Query.

    В вашей ситуации, если нужно, например, на главной странице, где уже есть основной запрос, дополнительно вывести блок с кастомными записями (участники), делайте secondary loop с помощью WP_Query:

    $args = array(
        'post_type' => 'participants' // или как там он у вас называется
        'posts_per_page' => 5,
    );
    $participants = new WP_Query( $args );
    // дальше - loop
    if( $participants->have_posts() ) :
        while( $participants->have_posts() ) :
            $participants->the_post();
            // тут выводим пост
        endwhile;
    endif;
    wp_reset_postdata(); // возвращаем глобальные переменные к состоянию главного запроса


    Если же нужно вывести архив ваших участников - просто создайте шаблон archive-participants.php (вместо participants - ваше название custom post types).

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

    function my_modified_query( $query ) {
        // вместо is_home - проверяйте на соответствующий задаче шаблон
        // is_main_query - чтобы убедиться, что меняем именно основной запрос
        if ( $query->is_home() && $query->is_main_query() ) {
            $query->set( 'post_type', 'participants' );
            $query->set( 'posts_per_page', 20 );
        }
    }
    add_action( 'pre_get_posts', 'my_modified_query' );


    Судя по всему, английскую документацию вы либо не читали, либо сложно понять всю суть на английском. Есть отличный источник информации на русском: wp-kama.ru/function/wp_query
    Ответ написан
    Комментировать
  • Как для обычного юзера, с помощью вордпресса, сделать простым добавление специфичного контента?

    seoperin
    @seoperin
    Full stack web developer. Laravel / Vue
    advanced custom fields, например. В про версии есть option page, можно сделать страницу настроек слайдера, а там допполями (например полем repeater) задать всю инфу по слайдам
    Ответ написан
    2 комментария
  • Натяжка верстки Wordpress?

    @mr_ko
    Javascript, Node.js. React.js, Vue.js, Wordpress
    Нужно поправить CSS с учетом нюансов Wordpress.
    Ответ написан
    Комментировать
  • Bootstrap или свои стили?

    @megrel90 Автор вопроса
    Все спасибо за ответы.
    Как я понял, bootstrap лучше использовать с самого начала проекта, ибо в моем случае это только геморой лишний на голову)
    Ответ написан
    Комментировать
  • Как убрать непонятный отступ сверху изображения?

    к #photo-wrap поставьте font-size: 0;
    у вас картинка имеет некоторые характеристики строчного элемента ( display: inline-block;)
    Поэтому нужно их "обнулить"
    Ответ написан
    6 комментариев
  • Как сделать на css прозрачный фон, как у картинки?

    @desuvin
    Если макет в фотошопе, то выделите фон, посмотрите там цвет, а также прозрачность, которая установлена. Цвет легко определить с помощью отключения прозрачности и пипетки
    Далее напишите в css у нужного дива background-color: rgba(цвет из фотошопа, прозрачность из фотошопа)
    Например, background-color: rgba(255,255,255, 0.6);
    Ответ написан
    Комментировать
  • Почему на сайте шрифты отображаются так медленно?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    1. Шрифты тяжелые. Средний шрифт может весить от нескольких килобайт, до пары мегабайт, вот и думайте как такой ждать. Попробуйте оптимизировать такой шрифт, воспользовавшись генератором вроде этого: www.fontsquirrel.com/fontface/generator Такой генератор позволяет выкидывать из шрифта не используемые символы и существенно облегчать его вес.
    2. Опять же плюс генераторов в том, что в итоге, шрифт будет лежать на вашем сервере и не зависеть от стороннего хостинга.
    Ответ написан
    Комментировать
  • Как сверстать круги с линиями?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Как всегда рекомендую для этих целей использовать D3.js, который отлично умеет строить такие штуки. Причем динамически! И обновлять хоть несколько раз в секунду, например: bl.ocks.org/mbostock/4062045

    Воспользовавшись HTML+CSS вы конечно сможете сверстать такое, но это будет жутко фиксированная конструкция, внести изменения в которую будет уже не реально. Тогда уж проще картинкой вставить.
    Ответ написан
    2 комментария
  • Наиболее легкий способ использования svg?

    Лучший способ — inline-svg.
    Используем какой-нибудь gulp-svg-symbols, собираем все иконки в один большой файла, в котором будут использоваться символы.
    Далее, в верстке используем конструкцию вида:
    <svg>
      <use xlink:href='pathToImage.svg#iconName'> </use>
    </svg>

    use — это способ использовать символ, который объявлен где-то еще по его ID.
    Однако, способ с внешним файлов не работает в ИЕ — потому подключаем svg4everybody.

    Плюсы по сравнению с deSVG – один запрос, а не по запросу для каждой картинки; для всех браузеров, кроме ие не нужны никакие костыли — в deSVG будет же замена картинки на svg, лишние операции с домом.
    Плюсы по сравнению со шрифтами — иконочные шрифты в мелком размере на low-dpi экранах отображаются весьма плохо.
    Ответ написан
    6 комментариев
  • Как правильно хранить и обрабатывать данные в JS?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Например у вас есть селект:
    <select>
        <option value="dsp">ДСП</option>
        <option value="lmdf">ЛМДФ</option>
    </select>


    Заведите еще объект с данными:
    var type_price = {
        dsp: 10,
        lmdf: 20
    };


    Теперь, при изменении значения селекта, просто читайте его value. Оно будет или "dsp" или "lmdf".
    Чтобы получить цену на этот тип, достаточно будет запросить её такой инструкцией:
    var val = select.value; // например "dsp"
    var current_price = type_price[val];


    И так же для всех остальных селектов.
    Ответ написан
    3 комментария
  • Карусель с ползунком?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Добавьте к своему owl карусель Ion.RangeSlider
    В опциях задайте тип "single", from: 0, to: {кол-во ваших слайдов}
    + добавьте коллбэк onChange. Внутри этого коллбэка запускайте owl-каруселевский метод goTo (или как он там называется).

    В итоге получим, что тягая ползунок вы так же переключаете слайды.
    Ответ написан
    7 комментариев
  • Анимация при появлении нового элемента, как?

    FMars
    @FMars
    Я бы реализовал с помощью CSS, а не JS.
    Рекомендую использовать готовый набор анимаций: Animate.css. Просто подключите скачанный css-файл и добавьте к элементу который должен появиться класс "animated" и вид анимации, например:
    <span class="animated fadeIn">Test 6</span>
    Ответ написан
    6 комментариев
  • Как сделать появление блока как на images.google.com?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    1. Кликаем по картинке, в новом блоке показываем её, только увеличенную например на 500%.
    2. Поверх картинки отдельным слоем показываем какой-нибудь прелоадер.
    3. Создаем через JS новое изображение, добавляем ему слушатель onLoad
    4. Ждем полной загрузки картинки, потом вставляем её в DOM вместо слоя с прелоадером.
    5. Profit!

    P.S. Если нужно отслеживать время до загрузки то поможет: stackoverflow.com/questions/22502943/jquery-ajax-p...
    Ответ написан
    2 комментария
  • Не могу понять надо ли мне подключать шрифт или нет?

    YuriMolotov
    @YuriMolotov
    Дизайн и вёрстка сайтов — Molotov.pro
    В браузере (как и в любой другой программе) шрифтов нет. Шрифты установлены в операционной системе компьютера. Соответственно, установленная и отображаемая у вас Helvetica у других пользователей сайта будет заменена на шрифт по-умолчанию (напр. Times New Roman).
    В подключении не нуждаются стандартные шрифты, принудительно установленные у всех: Arial, Tahoma, Verdana и т.д.

    Чтобы подключить свой кастомный шрифт на сайт надо разместить его файлы на хостинге и подключить с помощью font-face в стилях:

    @font-face {
        font-family: Bebas;
        src: url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.eot');
        src: url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.eot?#iefix') format('embedded-opentype'),
             url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.woff') format('woff'),
             url('http://tottem.ru/wp-content/themes/ipinpro/font/bebasneue_bold.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }


    Для каждого начертания по четыре файла в разных форматах для разных браузеров (cконвертировать можно через онлайн-конвертеры), или хотя бы только ttf или otf для распространённых.

    "Bebas" меняете на удобное вам имя, например "HB", "HL" и т.д.
    В урл указываете адрес начертания на хостинге (можно неполный).

    Всё. Далее в стилях у нужных элементов задаёте в font-family нужный шрифт через заданное имя:
    h1 {
    font-family: HB;
    }
    .thin {
    font-family: HL;
    }
    Ответ написан
    2 комментария
  • Позиционирование посредством js для div с отступом сверху?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Для некоторых браузеров есть position: sticky )
    Ну и куча JS реализаций, например https://github.com/filamentgroup/fixed-sticky
    https://github.com/matthewp/position--sticky-
    Ответ написан
    Комментировать
  • Как сделать эффект нажатия частей картинки?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Вариант номер 1 - найти какое-нибудь полуготовое решение для работы с такими вещами. Думаю что на d3js.org такое уже сто раз решали, и есть какие-то готовые плагины.
    Вариант номер 2 - по идее, если такую карту нарисовать в каком-нибудь Иллюстраторе, то там же можно будет её экспортировать в виде svg. После этого лишь надо будет "подчистить" этот свг и затем для областей (отдельные path элементы) добавлять класс через js, который будет их как то перекрашивать и делать прочую нужную вам магию (с возможностью использования transition и так далее).
    Ответ написан
    Комментировать
  • Как с помощью jQuery определить что устройство - планшет?

    AlexanderTsymbal
    @AlexanderTsymbal
    tsymbal.su
    thematthewhudson.com/current-device вам поможет Device.js
    Это маленький скрипт (~4кб), который я вставляю перед jQuery во всех своих проектах. Безотказно определяет тип устройства, ОС и разворот экрана.

    UPD 2021: Актуальная ссылка: https://github.com/matthewhudson/current-device
    Ответ написан
    1 комментарий