HTML2WP. Серия #4. Подвал. Добавляем настройки и виджеты

Артем Абрамович

Меня зовут Артем Абрамович и я являюсь фрилансером-вордпресером. Занимаюсь настройкой и редактированием сайтов созданных на CMS WordPress. Это основная моя специализация, есть еще несколько работ, которыми я занимаюсь, но обо этом вы можете более подробно узнать из моего портфолио.

54 комментария к “HTML2WP. Серия #4. Подвал. Добавляем настройки и виджеты”

  1. Этот ролик был самый легкий. Где нужно масштаб увеличивался, где надо паузы были с объяснениями. Думаю стримы нужны, но вот в прошлый стрим я спал. Время у нас в часовых поясах разное.
    Я вам вконтакте свою проблему написал…

    Ответить
  2. Здравствуйте, не дадите совет. Я недавно зарегестрировался на Upwork’e, взял первый заказ. Надо было сайт ускорить. Ну для начала решил обновить заказчику плагины и тему. В итоге из-за этого на сайте весь дизайн полетел. Нашел какой-то плагин, который делает откаты. Все плагины удалось откатить до предыдущих версий, а вот тему нет. Ну думаю, сейчас скачаю старую версию темы и переустановлю. В итоге, вообще весь сайт испортил. В общем пришлось извиняться перед заказчиком и удалять профиль.

    Вот мне интересно, сколько таких нюансов есть, что можно сайт испортить, причем достаточно серьезно? Может Вы сможете записать видео, что точно нельзя делать на wordpresse новичкам? Старнно все это — вроде просто обновляешь плагины и тему, а они все ломают. Я думаю, раз 100 испортишь сайтов — станешь хорошим веб-разработчиком на базе wordpress)

    Ответить
    • Добрый день! Вообще, перед каждым обновление сам ВП рекомендует делать резервную копию. Так-то совсем не поправимых вещей не бывает, надо просто знать как исправить. Скорее всего ломается не тема а именно плагины, но чаще всего эти ошибки не фатальны и достаточно просто знать как исправить.
      Видео записать? Попробую, хотя тут надо наборот наверное, что надо делать в первую очередь) Подумаю как лучше
      А так, да многое с опытом приходит. Просто тренироваться надо сначала «на кошках» а не на реальных сайтах)

      Ответить
    • На Upwork’e кстати, есть специальные тесты по wordpress’y. И там встечаются очень часто вопросы на знание каких-то функций, не подскажите, что это за язык программирования. Вот хотя бы отсюда самый первый вопрос если взять: http://upwork-wordpress-test-answers-2015.blogspot.ru/

      Это же не просто HTML и CSS. Это что-то типа javascript’a или php — не могу понять. И можете посоветовать какие языки стоит начать учить, чтобы стать профи в wordpress’e? Ну или хотя бы понимать куда лезть, если что-то вдруг случиться.

      Ответить
    • Это php. Вордпресс написан на php. Можно сказать что сегодня ВП — это такой фреймворк для создания сайтов. Могу посоветовать как я учился. В порядке изучения
      1. html+css https://htmlacademy.ru/
      2. Синтаксис php и базовые функции http://php.net/manual/ru/intro-whatis.php по синтаксису поищите на ютубе много инфы
      3. Вордпресс для разработчиков https://developer.wordpress.org
      4. Много-много практики
      5. Пробовать писать собственные простые плагины. Например плагины шорткодов или плагины вывода записей в нужном порядке и тд

      Обычно беру тему или плагин и начинаю его разбирать на составляющие — как и что работает. Лучше начинать с тем, в них функции попроще для понимания

      Ответить
  3. Знаете тему IsleMag? Можете о ней что-то сказать? Хочу себе на сайт поставить

    Ответить
  4. Смотрю не регулярно… немного путаница с сериями нумерация в комментариях к видео нумерация 1-5, а реально 3.1,3.2,3.3, …

    Ответить
    • Ну все правильно, в заголовках по смыслу разделяется, а в описании просто по порядку

      Ответить
  5. Привет. Нет в планах видео по OptionsTree, так чтобы от и до по всем нюансам?

    Ответить
    • Привет! Планировал в этом сериале показать некоторые нюансы. А на сайте что-то вроде справочника сделать

      Ответить
    • Да, запили по OptionsTree. Оно то вроде все и понятно, но все же.. OptionsTree — мега крутая вещь. Я сам писал настройки с нуля, и поверьте, это очень … это не трудно, но там запутаться легко. OptionsTree — настоящее спасение, плюс, еще так хорошо оформлено. А за видосы спасибо!! Пока это мой любимый сериал из всех!

      Ответить
    • Ну раз столько желающих, то запишу, где только на все это время найти….

      Ответить
    • Согласен, только в данных уроках познакомился с данным плагином. Как жаль, что раньше не видел.

      Ответить
  6. Артем, вопрос относительно виджетов в подвале, некоторые виджеты вылезают из div (у класса grid_4 ширина = 370px), скрин: https://goo.gl/8xrvmB.
    Это накладно видно, если в подвале добавить по календарю в каждую область (они «наедут друг на друга).
    Как правильнее сделать? (имею ввиду, что бы огород их css правил не городить. Если сетка сделана через grid4 (этот класс общий и он ещё присвоен ряду элементов темы, как я понял… может через перекрестное наследование сделать? что-то вроде grid4 width-footer. Или есть варианты лучше?)
    С версткой сталкиваюсь, но некоторые формы записи не особо понятны, в частности первый раз увидел такой формат:
    .container [class*=»grid_»] (не встречал ранее, что бы класс брался в квадратные скобки)

    Ответить
    • Это не класс в скобках, а обозначение того, что данные правила будут применяться ко всем классам где есть grid_
      А на счет календаря — это надо просто стили календаря настроить.

      Ответить
    • просто я отталкиваюсь от того, что календарь — виджет стандартный и если выйдет обновление движка (естественно стили собьются, если правки не вносить в отдельный файл и подключать к теме).
      Просто думал, может можно как-то вписать календарь, думал через резину (задать ширину в процентах блоку, где располагается виджет), но не получилось.
      Наверное правы, проще отдельно поправить стили у календаря или у того виджета, который будет «вылезать»

      * Если кстати зайти с мобильника, календарь просто выезжает «за экран»
      ** совершенно случайно заметил подобный косяк в верстке у логотипа (его текстовом виде) при отображение с мобильных устройств, он вылезает за границы экрана, а адптируется: https://goo.gl/6EPrzT (как поправить? через медиазапросы?)

      Это единственные косяки по верстки, которые пока встретил 🙂

      Ответить
    • Виджет-то стандартный, а стили для него в каждой теме свои прописываются

      Да, лого через медиа запросы надо просто немного размер шрифта изменить

      Ответить
    • С кондачка не получилось, тоже думал, что шрифт, но так как html версии такого бага нет (все нормально при отображение на мобильных устройствах)
      Да и если глянуть в хроме, на отображение в различных устройствах, можно заметить странное поведение блока…
      до выполнения медиазапроса заточенного под max-width 479px: http://shot.qip.ru/00Tvmq-5T5tGu25N/
      и после выполнения медиазапроса: http://shot.qip.ru/00Tvmq-6T5tGu25O/
      Блок просто «съежает», мне кажеться тут проблема или в разметки, или позиционирование…ХЗ в чем…мне кажется не в шрифте.

      * Как видите, вылез ещё косяк по верстке 🙂 (выше бренда) где меню, его дескрипшин тоже вылезает за границы.

      Ответить
    • Не понял в чем проблема. Там есть класс brand_name, у него есть атрибуты размера шрифта. Его и надо менять

      Ответить
    • Совершенно верно! Утром, что-то у меня дело не пошло, вот, может кому полезно будет, ничего не вылезает (затачивал естественно под название логотипа), но размер подогнать под свои цели достаточно быстро:
      @media (max-width: 979px) {
      .brand_name {
      font-size: 60px;
      }
      .rd-mobilepanel_title {
      font-size: 20px;
      }
      }

      @media (max-width: 479px) {
      .rd-mobilepanel_title {
      font-size: 12px;
      }
      header a[href^=»tel:»] {
      margin-top: 0;
      font-size: 20px;
      }
      .brand_name {
      font-size: 44px;
      }
      }
      Артем, такой вопрос, хотел использовать относительные величины шрифта (что бы он автоматически), в зависимости от размера экрана. Но тут через фиксированные велечины (px) заданы практически все размеры. Можно ли как-то «малой кровью» шрифту присвоить относительные величины, или только сидя и правя ручками все?

      Ответить
  7. Все ясно и понятно в уроке, спасибо. Артем, подскажите пожалуйста, как сделать так, чтобы конкретный сайдбар выводился на определенных страницах? Я пока это реализовал, создав отдельный шаблон для конкретной страницы и дополнительный файл sidebar-about.php… но сдается мне это не рациональный подход, уверен есть другой способ, типа: если страница = about или = contact тогда подключаем sidebar-1.php….если страница = home или = other тогда подключаем sidebar-2.php…. Как правильно определить страницу в условии? Буду очень признателен

    Ответить
  8. Здравствуйте! На гитхабе в архиве нет html верстки нигде. ни в одном уроке. Кроме того верстка начиная с 3-го урока не соответствует верстке на видео.Очень нужна инфа. Очень полезная информация. Иду след в след. Учусь…

    Ответить
  9. Почему то, с прошлого урока на всех страницах кроме главной нет прокрутки вниз. А в этом уроке после добавления content раздела в index.php пропало прилипание меню, если вернуть index.php в первоначальный вид то прилипание меню возвращается. Также нет прокрутки в низ на других страницах. Вставил вашу папку lesson_04 за место своей темы — такая же ситуация, скажите с чем это может быть связано? может это на маках так, хотя я же ведь в хроме смотрю, в сафари и в фаерфоксе также

    Ответить
    • Там где-то ошибка была, я ее пофиксил в следующих уроках, даже вроде разбирали это. Не должно зависеть от компа, но у меня нет возможности проверить

      Ответить
    • а ну если в следующих уроках будет исправление, то норм, буду смотреть, Спасибо!

      Ответить
  10. Здравствуйте. Помогите пожалуйста решить следующую проблему. До этого урока все получалось, и в этом вроде бы ничего не предвещало беды, но….почему то игнорится index.php из папки темы, т.е копирую в него контент, но страница главной не меняется (хедер отображается). Опытным путем выявил что за главную почему то отвечает index.php из корневой директории WP. Это файл .htaccess надо ковырять?
    Если добавить файл front-page.php и скопировать контент туда, то главная работает норм, но пытался победить index. Да, и скопированный контент на странице отображается не полностью, получается как-бы без прокрутки, и все что ниже просто не видно, хотя в инспекторе кода все присутствует……какая то странная проблема, помогите решить плиз))) или пните в нужную сторону где прочитать решение)) Заранее спасибо!

    Ответить
    • Доброго! Зачем так издеваться над index.php? Чем не устраивает front-page.php?

      Ответить
    • Та вполне все устраивает, просто понять хочу…..везде пишут про то, что если front-page.php отсутствует (как в нашем случае по дефолту), то WP ищет index.php из папки темы….а в моем случае игнорируется index.php из папки темы, а загружается index.php из корневой директории вордпресса. Заранее извиняюсь за возможно сумбурное изложение мыслей))

      Ответить
    • Вам надо подтянуть структуру файлов ВП. front-page.php — это статическая главная, а index.php — вывод ленты записей обычно. Может не работать если в настройках указана статическая главная, тогда он будет или front-page.php искать или страницу указанную в настройках

      Ответить
    • Ага, понятно! Спасибо за ответы. И отдельное спасибо за классные уроки:))

      Ответить
  11. А у меня почему-то нету вкладки warning у плагина query-monitor? https://i.imgur.com/f0ttNdn.png
    Я специально тоже оставил дополнительный неиспользуемый параметр в функции, что увидеть ошибку, но плагин мне ее не показывает.

    Ответить
    • А с чего она будет? Данная вкладка появляется когда есть ошибки на сайте, а если не видно значит и ошибок нет. Хотя может быть так что QM их не видит, тут еще хорошо дебагом пользваться штатным

      Ответить
  12. Доброго времени суток, Артём Абрамович.
    11:15 у меня такое ощущение, что подстановка кода как бы запаздывает при обработке jQuery.
    А с php это мгновенно происходит?
    14:34 почему-то не отрабатывает в phpShtorm трансформация кода:
    не трансформируется в
    не трансформируется в
    так же не работает.
    А ещё у меня не трансформируется из первых серий когда мы регистрировали меню, то вы просто написали wp_nav_menu и она трансформировалась в огромную функцию.
    Как вообще это сделать? Подскажите, пожалуйста, куда посмотреть. Глядел в настройках, даже прописывал в шаблонах — ничего не работает.
    Очень хороший контент!
    С меня поклон, респект, спасибо и лайк =)

    Ответить
    • Ну видимо у вас в Штроме Эммет не включен, потому и не отрабатывает трансформация.

      КОнечно подстановка запаздывает, пока браузер не отрисует всю страницу ничего не появится

      Ответить
    • @Финты WordPress о как! за наводку на эммет спасибо, погуглю что это вообще такое! =)

      Ответить
    • @Финты WordPress оказывается это плагин и его всего-то надо было установить =) делов-то на секунду, а я эти шаблоны мучаю и мучаю =) и главное толком про сниппеты нигде про emmet не указано! все в шаблонах делают то, что я искал!
      Спасибо! =)

      Ответить

Добавить комментарий

%d такие блоггеры, как: