Задать вопрос
  • Идентичность отображения шрифта в PSD и в браузере, CSS настройки. Как сделать?

    Lynn
    @Lynn
    nginx, js, css
    Никак. Забудьте об этом. Вы не должны этого хотеть.
    Ответ написан
    Комментировать
  • Начал осваивать CSS. Поможете?

    Все стили вынести в отдельный .css файл, стараться избегать такого "ul li:hover" и делать так .list .list__item:hover, вообще лучше всем элементам задать свой класс.
    Ответ написан
    1 комментарий
  • Как изучать WP_Query?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    Как насчёт официальной документации:
    https://codex.wordpress.org/Class_Reference/WP_Query
    Ответ написан
    2 комментария
  • Как наложить градиент на тег img?

    Stalker_RED
    @Stalker_RED
    К сожалению к img не применяются :before и :after
    Но можно так: jsfiddle.net/Stalk/4uvgu3sh
    Ответ написан
    2 комментария
  • Как сделать распознание radio на jquery?

    @Vovchikvoin
    $('[name=lp_ab]:checked') // выбранный элемент
    Ответ написан
    Комментировать
  • Как сделать Эффект "потертой-состаренной" бумаги с помощью HTML/CCS?

    @artem_music
    1. Паттерн-текстура на фон блока
    2. Чистым CSS (градиент) + JS (состарить с помощью https://github.com/DanielRapp/Noisy)
    3. С помощью Canvas генерировать заломы самому, но это для истинных ценителей сложных путей :)
    4. Ну и проще всего - цельное изображение листа на фон блока.
    Ответ написан
    Комментировать
  • Как выбрать последнее слово в предложении и его вывести?

    MaxDukov
    @MaxDukov
    впишусь в проект как SRE/DevOps.
    explode по пробелам и взять последний элемент массива?
    Ответ написан
    6 комментариев
  • "Умный" ресайз картинок на CSS?

    mr_dev1l
    @mr_dev1l
    Технический верстальщик
    img {
     width:100%;
     object-fit:cover;
    }
    Ответ написан
    Комментировать
  • Вызов php get_header() или сам код шапки в Wordpress?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Ну, чисто математически, код шапки в основном темплейте будет грузиться чуточку быстрее, так как если это отдельный файл, то его надо прочитать из файловой системы. С другой стороны, использование opcache в PHP или HHVM нивелирует эти потери. Так что, в реальности, это совсем уж нанооптимизация. Какой-либо ощутимой разницы не будет. Если уж вы реально заморочились оптимизацией, то у вас работы - непочатый край, и данный вопрос - на стотыщдесятом месте. Сначала оптимизация, и только потом микрооптимизация. Нанооптимизацию в топку. В большинстве случаев простым смертным и в микрооптимизации нет необходимости - benefit порядка нескольких милисекунд. На реальном high-load подобные штуки, комплексно, позволяют экономить реальные доллары. Но это уж совсем на крупных и высоконагруженных проектах, которые, кстати, вряд ли будут на PHP.

    Ну и, не так просто шапку проигнорить. Дело в том, что если в папке темы отсутствует файл header.php, WordPress будет использовать свой стандартный, который находится в wp-includes/theme-compat/header.php

    И вообще, пользы от использования темплейта header.php для простого смертного - предостаточно. Во-первых, модульность шаблонов, удобство. Особенно когда шаблонов становится много. Во-вторых, гибкость. Функция get_header() может принимать параметром часть названия файла, таким образом, можно иметь разные шапки для разных шаблонов. Например, крупная шапка со слайдером на главной странице, и уменьшенная версия без слайдера на внутренних страницах. А еще одна шапка для страницы 404й ошибки. Используется так:

    // Подключить header.php
    get_header();
    // Подключить header-full.php
    get_geader( 'full' );
    // Подключить еще какой-то header-blah-blah.php
    get_header( 'blah-blah' );


    А еще во время вызова этой функции срабатывает одноименный хук get_header, который иногда бывает весьма полезен.
    Ответ написан
    2 комментария
  • Как сделать image адаптивным, если картинка в css?

    @soledar10
    html css3 js jquery
    background-size: cover;
    Ответ написан
    Комментировать
  • Что лучше использовать reset.css или normalize.css?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Конечно же нормалайз! Ресет - древнее тупое г**нище.
    Принципиальная разница в том, что нормалайз делает одинаково, а ресет, тупо всё обнуляет. Там где надо и там где вообще не надо.
    Ответ написан
    Комментировать
  • Как в wordpress в теме добавить выбор нескольких изображений?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    Возможны несколько вариантов исполнения, и предлагаемый мной не является единственно правильным, а просто поможет Вам сэкономить время и понять как всё работает. Я (лично я) последнее время подсел на PODs и почему-то везде его сую. Так вот, если использовать PODs, то решение вашей задачи будет такой:
    - Инсталируем "PODs" в "Wordpress": PlugIns > Add New > Pods - Custom Content Types and Fields;
    - Добавляем для записей типа "Page" дополнительное поле: Pods Admin > Add New > Extend Existing > Post Type - Poge > Add Field.
    - Так как это будут некие файлы, и их будет несколько, то надо добавить поле (Add Field), например с такими параметрами:
    • Label: Gallery Images
    • Name: page_gallery_images
    • Field Type: File / Image / Video
    • Upload Limit: Multiple Files
    • File Uploader: Attachments
    • Restrict File Types: Images

    - Сохраняем и смотрим что получилось. В редактировании станиц должно появиться: Extra Fields с полем Gallery Images и кнопкой Add File. Сюда и загружаем (или выбираем из имеющихся в библиотеке) нужные картинки.
    - Для вывода картинок в шаблоне есть несколько вариантов, используя функции "WordPress" или функции "PODs", или и то и другое. В этом примере используем функцию "WordPress" get_post_meta():

    $page_images = array(); //Сюда будем записывать информацию о картинках
    $page_id = get_the_ID(); //ID нынешней страницы
    
    //Получаем информацию из созданного нами поля "page_gallery_images":
    $page_images = get_post_meta($page_id, 'page_gallery_images');
    //Если нужно получить только одну (первую) картинку, то в конце добавим true:
    //$page_images = get_post_meta($page_id, 'page_gallery_images', true);
    //Документация здесь: https://developer.wordpress.org/reference/functions/get_post_meta/
    
    //Разные поля PODs возвращают разные типы данных, 
    //в нашем случае, это будет массив с информацией о картинках
    //посмотреть содержимое которого можно (например) так:
    //echo '<pre>';
    //print_r ($page_images);
    //echo '</pre>';
    
    //Выводим картинки:
    foreach ( $page_images as $image ){
       echo '<img src="' . $image['guid'] . ">';
    }


    Если надо сделать несколько "слайдеров", то можно создать несколько полей для загрузки изображений в Pods Admin и вывести их в шаблоне. Для тех кто не хочет ничего выводить в шаблоне, существуют Shortcodes и MagicTags.

    Также совсем не обязательно поля привязывать к страницам, а можно сделать отдельную страницу с настройками (Pods Admin > Add New > Custom Settings Page), для вывода полей которой пригодиться этот код:

    $settings = pods('name_of_custom_settings_pod');
    $some_field = $settings->field( 'name_of_field_from_settings' );


    Надеюсь эта "инструкция" будет Вам полезна :)
    Ответ написан
    7 комментариев
  • Почему the_date() в WordPress выводится через раз в цикле?

    dimasmagadan
    @dimasmagadan
    это стандартное поведение этой функции

    When there are multiple posts on a page published under the SAME DAY, the_date() only displays the date for the first post (that is, the first instance of the_date()). To repeat the date for posts published under the same day, you should use the Template Tag the_time() or get_the_date() (since 3.0) with a date-specific format string.

    https://codex.wordpress.org/Function_Reference/the_date

    используйте the_time() или get_the_date()
    Ответ написан
    Комментировать
  • Как убрать лишние теги у wp_nav_menu()?

    7kmarat
    @7kmarat
    впепеу
    Ответ написан
    Комментировать
  • Как сделать такой эффект смены фона?

    cesnokov
    @cesnokov
    <head>&nbsp;</head>
    Это несколько блоков, идущих друг за другом с верху в низ, например:
    <div> … </div>
    <div> … </div>
    <div> … </div>

    Для каждого из них установлены в качестве фона разные картинки одинакового размера, которые с помощью CSS растянуты на весь экран и фиксированы по отношению к окну браузера:

    div {
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url('http://...');
    }
    Ответ написан
    Комментировать
  • Какое легкое решение для модальных окон вы используете?

    @sitev_ru
    sitev.ru - мой блог ...
    Ответ написан
    Комментировать
  • Какое легкое решение для модальных окон вы используете?

    twixoff
    @twixoff
    Несомненно fancybox)
    Иногда magnific popup, но не проверял на кроссбраузерность.
    Также частенько пользуюсь modal от bootstrap, когда нужен быстрый и просто прототип.
    Ответ написан
    Комментировать
  • Как с помощью jQuery сбросить все инлайн-стили (с некоторым исключением)?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Ну как... В цикле проходить.
    Ну а дальше всё зависит от логики. Можно озадачиться и формировать классы, формируя их на лету (и такая логика будет весьма непроста), а можно просто перезаписывать инлайн-атрибут style, оставляя только нужное.

    Вариант попроще
    var usefulRules = [
    	'text-align',
    	'font-size',
    	'color'
    ];
    
    $('.description [style]').each(function (elem) {
    	var style = [];
    
    	$(this).attr('style').split(';').forEach(function (rule) {
    		if (usefulRules.indexOf($.trim(rule.split(':')[0]) >= 0) {
    			style.push(rule);
    		}
    		/*А ещё тут есть elem.tagName...*/
    	});
    	$(this).attr('style', style.join(';'));
    });
    Ответ написан
    Комментировать
  • Как добиться плавности высоконагруженной анимации?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Так как я уже убитый после рабочего дня и войны с кастомными скроллбарами, то полного ревью по веб-перфу дать не смогу. Но по мелочам пробежаться могу.
    1) Вот так выглядит таймлайн сайта, после полного скролла вниз, а затем вверх (смотреть на верхний график).
    YjaRo9S.png
    Если в кратце, то все печально :) На всех переходах фпс стабильно падает до 30 (и иногда ниже). Ваша цель - 60 фпс в среднем, и не ниже 40 на паре-тройке фреймов при переходах.
    Если вы чайник в замерах веб-перформанса с помощью таймлайна (и дев тулс вообще), то вам сюда:
    а) https://developers.google.com/web/fundamentals/per... - святой грааль.
    б) https://www.udacity.com/course/browser-rendering-o... - по сути дела дополнение к текстовому варианту, но только в виде отличных видео и мини-тестами. Там же на udacity есть похожил курс от Григорика.
    в) Искать другие годные статьи в дайджестах и блогах, пилить/изучать демки и все такое.
    2) Очень беглый осмотр показал, что у некоторых элементов анимация происходит с помощью изменения таких свойств как left например (вылезающий и жутко тормозящий блок справа на 3 странице). В 90% случаев для анимации движения/перемещения/отображения прилично использовать только transform/opacity, особенно когда речь идет о больших элементах. С анимацией всяких left/top/width и подобных вещей для больших элементов можете вообще забыть о 60фпс.
    3) Основную ставку вам надо будет делать на создание отдельных слоев для элементов, проще говоря юзать translateZ/backface-visibility. Но только юзать это надо с умом, и каждый раз все профилировать через таймлайн. В веб-перфе есть одна крылая фраза "Tools, not rules".
    Ответ написан