Ответы пользователя по тегу HTML
  • Как прописать несколько "id" в ряд и задать им "class"?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Классы разделяются пробелом, например class="one two three" и допускается использование нескольких классов одновременно. Id же не может содержать пробел, и значение данного атрибута должно быть уникальным. Соответственно, использование нескольких id невозможно.

    Вопрос: зачем понадобилось несколько id? Я не могу себе представить ни один use case где такое может понадобиться и это нельзя решить другим путем (например, через data-attribute или тот же класс).
    Ответ написан
    1 комментарий
  • Как убрать информацию при печати страницы из сайта?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Если вы - разработчик страницы, то подключите стили для печати, как советует Егор Федосенко
    Если же вы как пользователь пытаетесь напечатать чужую страницу - клацните правой кнопкой мыши на странице, выберите "Инспектировать элемент". Дальше выбирайте ненужные элементы и просто удаляйте их из документа клавишей Delete. После такой "очистки" страницы - печатайте то, что осталось обычным способом. Результаты вашей ручной очистки будут сохранены до перезагрузки страницы в браузере.
    Ответ написан
    Комментировать
  • Под какие браузеры верстать?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    IE10+ (который очень даже адекватен) и graceful degradation, для IE7 и ниже сообщение "чувак, не гони, обнови браузер". Я уже давно не заморачиваюсь IE, по статистике в моих нишах в среднем это 4-12% посетителей, из них менее 2% - 8я версия и ниже. А версии 9+ вполне адекватны, только у 9й есть несколько особенностей, решаемых Normalize.css и одним-двумя полифилами (зависит от задач) или же тем же graceful degradation, который при подходе mobile first как бы по умолчанию идет.

    Вот вам 2 главных инструмента в помощь:
    gs.statcounter.com - статистика, можно фильтровать по странам и т.д.
    caniuse.com - что для какой версии
    Ответ написан
  • Самый оптимальный вариант для серверной части?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Если надо сделать быстро - только готовая CMS. При всей моей любви в WordPress, в данном случае взять специализированную типа OpenCart, PrestaShop и подобных. Под WordPress есть хорошие решения, тот же WooCommerce, но чтобы там что-то доделывать - нужно хорошо знать и PHP, и архитектуру WP + WC. Зачем лишние сложности?

    А еще есть другой вариант. Если вы не программист, а манагер / владелец этого магазина, то воспользуйтесь SaaS-площадкой, таковых на рынке масса. Через годик-другой работы магазина возможно перейдете на свое решение, возможно - нет.
    Ответ написан
    Комментировать
  • Какой правильный workflow по привязке верстки к wordpress?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    По слайдеру - лично я использую плагин Advanced Custom Fields Pro. Есть специализированные плагины - загружаете картинки, в нужном месте ставите шорткод и все.
    По всему остальному глобально:
    1. Берете тему underscores.me за основу
    2. Модифицируете главные контейнеры под свою структуру
    3. Делаете полный вывод реальных данных в шаблон
    4. Крутите CSS до полной готовности
    Ответ написан
    Комментировать
  • Как сделать вход в админку прямо с сайта?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Ну когда же люди научатся читать документацию :)

    codex.wordpress.org/Function_Reference/wp_login_form

    Если кратко:
    1. В нужном месте шаблона пишем:
    <?php wp_login_form(); ?>
    2. Профит!

    Если задача сразу перекидывать в админку, добавляем аргумент:
    'redirect' => site_url( '/wp-admin/' )

    Если задача давать доступ в админку только админам, а остальным нет (перекидывать на главную, например), в functions.php добавляем:
    function no_admin_access() {
        if( !current_user_can( 'administrator' ) ) {
            wp_redirect( home_url() );
            die();
        }
    }
    add_action( 'admin_init', 'no_admin_access', 1 );
    Ответ написан
    Комментировать
  • Вендорные префиксы умерли?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Вопрос не совсем корректно сформулирован :)
    Сами по себе префиксы не умирали. Старые версии браузеров не стали вдруг поддерживать эти свойства без префиксов. Изменилась лишь доля рынка у свежих и адекватных браузеров, следовательно, нет необходимости использовать префиксы. Концептуально не поменялось ничего, лишь наш с вами выбор - какие минимальные версии браузеров мы поддерживаем при разработке сайта.
    Ответ написан
    Комментировать
  • HTML5 как сделать правильный каркас?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    HTML 5, если уж так по-новомодному цепляться к этой магической цифре 5, строится в первую очередь вокруг семантики. Семантика выплывает из контекста, создаваемого контентом. Поэтому без понимания того, какой у вас контент этой страницы, все советы будут достаточно абстрактны. Разберитесь с блочными, строчными, и особенно секционирующими элементами. Разберитесь с семантической нагрузкой на элементы. А если совсем кратко, примитивная структура:
    header
    nav
    article
      header
      ... основной контент ...
      footer
    aside
      ... второстепенный контент ...
    footer

    или
    header
    nav
    section
      article
        header
        ...
        footer
      article
        header
        ...
        footer
    section
      header
      ...
      footer
    footer
    Ответ написан
    Комментировать
  • Стоит ли учить html(5) теги по-порядку и тратить на это отдельно время или же лучше на практике по ходу возникновения какой-либо проблемы?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Если речь именно об HTML5 - разобраться с семантикой, понять что такое строчные элементы, блочные элементы, а главное - секционирующие (sectioning elements). Получить общее представление о разных HTML5 APIs.

    Чтение спецификации с блокнотом в руках для того, чтобы делать себе пометки - 1 день. Выписываете важные моменты, и используете как шпаргалку. Можно в экселе забацать табличку, где разбить теги по типам и указать полезные замечания для каждого.

    Учиться по ходу - вполне нормально. Главное тратить на это достаточное количество времени и действительно учиться, а не копипастить из сети первый попавшийся кусочек кода - он вполне может оказаться не самой лучшей практикой, даже если будет висеть на первой странице результатов поиска.

    Еще полезно подписаться на rss-каналы правильных сайтов и блогов, регулярно читать новости и уроки. Это должно быть ежедневной рутиной.
    Ответ написан
    Комментировать
  • Ценится ли IT-специалист, который умеет все?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Могу по себе сказать. Так уж получилось, что карьера у меня началась с графического дизайна, но в это же время я увлекся html. Сделал карьеру в дизайне, доработался до старшего арт-директора крупного РА, потом креативного директора, получил несколько наград на фестивалях. Потом понял, что уперся в потолок, и ушел раззвиваться проджектом. Дослужился до технического директора интернет-департамента крупнейшего телеканала страны. В процессе сильно втянулся в программирование (html-css-js-php все это время было перманентным хобби и отчасти дополнительным фрилансом). Сейчас как раз выступаю в роли CTO в крупном стартапе, одновременно являясь "играющим тренером", пишущим большую часть кода и рисующим интерфейсы. Мое знакомство с компьютерами началось с Линукса - в универе в интернет-центре все компы были на нем. Итого, на выходе получился дизайнер, верстальщик, програмер, сисадмин, проджект-менеджер с хорошим пониманием всего процесса целиком и всех мелких процессов в каждом направлении, а также с четким понимаем того, как это все превращается в системный бизнес. На всех этапах моих карьер эти навыки приносили очень хороший доход. Но есть одно "НО" - у меня на это ушло 16 лет. Шестнадцать. Есть такое правило 7000 часов (если мне не изменяет память). То есть, занимаясь серьезно одним делом 7000 часов ты становишься профессионалом в этой сфере. Берем 8 рабочих часов в день, 40 часов в неделю, 50 недель в году. Итого - 2000 часов в год. 3,5 года, чтобы стать профессионалом в одной сфере. Это если отнестись к делу серьезно. Если же по-быстрому нахвататься обрывочных и общих знаний из разных областей - толку от этого мало. Такой "специалист" заявляет, что знает все, но на самом деле толком не знает ничего.
    Ответ написан
    Комментировать
  • Как вы верстаете Wordpress темы?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Использование _s - очень правильная идея. Верстка сначала в html - очень неправильная, разве что есть уже свой собственный базовый код, основанный на WordPress. Почему? Потому что WordPress генерит везде кучу своих CSS-классов, и правильно использовать именно их.

    Процесс такой:
    - идея, эскизы на бумаге, продумывание особенностей, модульные сетки, прототип
    - дизайн в фотошопе
    - сборка функциональной части шаблона - подключение нужных плагинов, вывод метаполей, весь кастомный вывод - в общем, необходимо вывести в шаблон (_s) весь реальный контент (или приближенный к реальному), а не верстать с Lorem Ipsum
    - а вот теперь самое интересное - SCSS, mobile first + javascript. В общем, чистый frontend.
    Ответ написан
    4 комментария
  • Как добавить в кешированную страницу данные авторизованного пользователя?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Я делаю javascript'ом. Чем не нравится решение? В том месте в шапке сайта, где у нас аватар + имя пользователя и иконка его меню, я вывожу по умолчанию "заглушку" и вращающийся спиннер. Проверяем куку локальную, если авторизован - выводим туда аватар + имя, не авторизован - выводим ссылки на вход и регистрацию. Если это сделать с легкой анимацией, то смотрится вполне отлично. Если куки нет, то эту "заглушку" может быть видно 0.5-3 секунды, зависит от того как долго будет срикпт с сервером общаться, если же кука есть, то чаще всего вообще никто ничего не заметит. Дабы сократить FOUC данный скрипт стоит в самом хтмл прямо в том месте где надо. Чтобы не ждать всех загрузок и т.д. а выполниться максимально быстро.
    Ответ написан
  • Как настроить установку логотипа через админку WordPress?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Либо ручками в коде - поправить тему либо сделать дочернюю (см. ответ @korobochkin), либо, если все-таки надо чтобы оно было в админке, есть у WordPress для этого родная фишка, называется Customization API. Код можно подсмотреть в штатной теме twentyfourteen, в файле

    /wp-content/themes/twentyfourteen/inc/customizer.php


    Хотя зачем на статичную штуку, которая делается 1 раз, создавать настройку и дергать базу данных - непонятно.
    Ответ написан
    3 комментария
  • Почему FireFox выдает такой бордак в шрифтах?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    В каком формате шрифт подключен?
    Вообще, если не заморачиваться IE меньше 9, можно оставить только один - woff. Его корректно понимают все браузеры. В крайнем случае дополнительно подключать ttf (который сгенерирован через WebFont Generator, а не родной из системы). Все остальные хаки пора уже отправлять на пенсию.
    Ответ написан
    Комментировать
  • Как уменьшить вес шрифтов при верстке?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    1. Кидать обычные ttf в папку - это вообще совсем неправильно. Это десктоп-версии шрифтов, они тяжелые.
    2. Необходимо использовать генератор webfonts, FontSquirrel - отличный вариант. Генерить только необходимые языки и символы, вырезать метаданные.
    3. Если нужна поддержка IE9+ (ну и все нормальные браузеры) - генерируйте только woff (см. поддержку). Это самый легкий формат.
    4. Если нужна поддержка IE8 и ниже - придется использовать EOT-формат.

    или использовать Google Fonts, который все это дело позволяет тоже настроить. К тому же, есть 2 бонуса:
    1. Это запросы на внешний домен, значит во время загрузки страницы свой файлы будут быстрее грузиться (загрузка будет идти параллельно с двух доменов)
    2. У многих пользователей шрифты уже будут в кеше.
    Ответ написан
    1 комментарий
  • Как сохранить пропорции картинок в WordPress?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Не надо подключать всякие BFI_thumb, TinThumb и прочую ересь, я вас умоляю! У WP есть родные средства!

    Получить урл картинки:
    <?php wp_get_attachment_image_src( $attachment_id, $size, $icon ); ?>

    где $size - либо название размера (medium, large), либо массив из двух чисел - высота и ширина
    На выходе получите массив:
    [0] => url
    [1] => width
    [2] => height
    [3] => boolean: true if $url is a resized image, false if it is the original.

    codex.wordpress.org/Function_Reference/wp_get_atta...
    Ответ написан
  • Какой плагин посовотуете на Wordpress для фильтрации страниц?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    https://facetwp.com/ - платный, но самый толковый
    https://wordpress.org/plugins/search-filter/
    https://wordpress.org/plugins/ultimate-wp-query-se...
    https://wordpress.org/plugins/advance-wp-query-sea...
    wordpress.org/plugins/relevanssi

    ACF толковый плагин для кастомных полей, но не для поиска и фильтрации. Хотя если сами поля есть, функционал фильтрации дописать самому не проблема, WP_Query штука мощная и гибкая.
    Ответ написан
    Комментировать
  • Как организовать выполнение заказа на перевёрстку сайта на фрилансе?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Слейте девелоперу бекап папки сайта и дамп базы, пусть себе локально разрабатывает, а на выходе даст архив с обновленным шаблоном, который Вы сами зальете и установите.
    Ответ написан
    Комментировать
  • Как поисковые боты относятся к якорям?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Поисковики скушают такую ссылку без проблем, другой вопрос какая от этого польза, что это за хеш и как он будет проиндексирован. Но то, что его робот поймет и не сломается - факт. С симулятором проблема.
    Ответ написан
    Комментировать