Создаем адаптивный шаблон для WordPress используя Bootstrap


Вам могут понравиться и эти статьи...

комментариев 59

Если Вы хотите добавить код в свой комментарий, заключите его в теги <pre lang="php"></pre>

  1. Mikhail:

    Спасибо за перевод этой крутейшей статьи!
    Такая проблема:
    На шаге 11 не подключаются стили.
    Возможно это из-за размещения на локальном хостинге(денвер).
    Не подскажите как это можно решить? В чем может быть проблема?

    • jul jul:

      Да, статья Зака просто отличнейшая — одна из наилучших, на мой взгляд, по созданию шаблона на Bootstrap.
      Надеюсь, у Вас, Михаил, уже получилось разобраться с возникшей проблемой, если же нет, то я могу посоветовать немногое: перепроверить все свои предыдущие шаги, так как фактически каждый шаг зависит от предыдущего. Размещение сайта на локалхосте никак не влияет на его создание (создаваемый мною сайт в статье, также находится на локалхосте).
      По правде сказать, ни один из создаваемых мною шаблонов на Bootstrap, не доставлял хлопот с подключением родных бутстраповских стилей через @import.

    • Была та же проблема, на 11 шаге, оказалось что на шаге 2 архив почему-то распаковывается в bootstrap и путь выглядел как bootstrap\bootstrap\css\style.css проверьте, может и у вас.

  2. Людмила:

    Отличный перевод. Спасибо!
    Мне очень помог разобраться, наконец, с созданием адаптивной темы.

  3. Искандер:

    Хотел испробовать другом образце, но что то у меня не получается, кто пытался сделать на другом готовом образце?

  4. Ева:

    Спасибо большое за такой полезный урок! Единственная загвоздка вот в этом коде: Когда его в таком виде ставишь в файл home.php, выдает ошибку. И у Вас дальше в шаге 24 он уже стоит как Если ставить так, то всё ок. В целом всё очень доступно, грамотно и подробно. Сделала шаблон и очень довольна результатом. Еще раз большое спасибо за материал и удачи Вам в развитии Вашего блога.

    • jul jul:

      Спасибо, Ева, за отзыв и пожелание!
      Удивлена, что у Вас возникала ошибка при добавлении тегов [em] в код главной страницы. У меня ошибки не было, в источнике, который послужил идеей урока, эти теги также стоят в коде home.php, да и они настолько просты и незначительны (курсив большой роли для кода не играет…), что даже любопытно как они мыгли вызвать ошибку. Но главное, что Вы во всем разобрались и у Вас получился собственный шаблон! Успехов и Вам!

      • Ева:

        Ну, может у меня какие-то настройки стояли не те. Я в теме php не сильна пока. Но Вы правы, главное то, что у меня в итоге всё получилось, благодаря Вам. Так что еще раз спасибо. Ваш сайтик в закладочках. Буду заходить :-)

  5. diman:

    Здравствуйте, дохожу до 11 шага и всё ступор, тема такого вида не получается( что делать.

  6. diman:

    извините разобрался с ошибкой не так извлёк папку с bootstrap

  7. Roman:

    Спасибо! Мне очень помогло!

  8. Сергей:

    Ничего себе сколько всего нужно сделать что бы подключить шаблон=(

    Проще скачать готовый и править))

  9. Ольга:

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

  10. Александр:

    Здравствуйте, отличная статья. Но есть вопрос касательно функции «exclude». Допустим я хочу исключить несколько страниц, то как мне будет корректно указать страницы в коде »,’exclude’ => 4)); ?>

  11. Павел:

    Вот уж действительно спасибо Вам, помогли! Я два дня, по куче запросов искал как мне свой сверстанный html шаблон запилить в вордпресс, всю голову сломал , одна вода в рунете!!

  12. Сергей:

    Jul, спасибо большое за интересную статью. Материал изложен доходчиво и интересно. Вообще очень понравился Ваш ресурс. Видно, что сделан для людей. Побольше бы таких в Интернете. Удачи Вам в ваших начинаниях.

    P.S. Просматривал Ваш сайт со смартфона, все отлично отображается. Адаптивная верстка работает :-).

  13. Очень хороший перевод, спасибо. Как раз заинтересовался разработкой шаблона bootstrap для своего нового сайта. Статья как раз во время, не тратил много времени. Удачи вам и процветания вашему блогу :)

  14. Евгений:

    Наконец то нашел толковое описание. Огромное спасибо!!!

  15. Григорий:

    Почему то все криво стало отображаться. Неделю или две назад заходил на ваш сайт, читал эту статью, все было отлично.

    • jul jul:

      Спасибо, что подметили и сообщили. После обновления wordpress и ряда плагинов поломался код, еще не все статьи успела поправить. Эта статья теперь в порядке.

  16. Павел:

    А как же всплывающее (вложенное) меню?
    К сожалению, не нашел этого момента…
    Добавил несколько дочерних страниц в родительскую, чтобы проверить всплывающее меню, ан нет, обломище, однако…
    Если есть желание, освятите, пожалуйста, сею тему.
    Был бы очень признателен.

  17. Александр:

    Статья интересная, только, к сожалению, в конце почему-то отказалась отображаться страница с записями(Блог).
    Второй раз делал просто копировал все коды поочередно и в новые файлы и до проверки «Блога» все было прекрасно… и страница с записями открылась… остальное доделал и страница статей открывается белой((((
    А все так хорошо начиналось…

    • Александр:

      Выпас фишку..
      В строке про время публикации пропущен первый апостроф, сразу после открывающей скобки.
      Должно быть так —

  18. Доброго! Как сделать так что бы при добавлении изображений через админку этому изображению присваивался «фирменный» класс bootstrap, который эту картинку делает адаптивной.
    Спасибо!

  19. Статья уже немного устарела, комментарии для версии 3.0, для версии 4.1 уже не подходят……. Сайдбар встает криво на главной странице, дата и время не отображаются….. Короче статья все же не для новичков, многое не понятно…. А так спасибо огромное за перевод, статья помгла мне во многом разобраться!!!!!!!!!!!

  20. Вячеслав:

    застопорился на 11 шаге, проверил по несколько раз, может ли это быть связанно с версией WP
    У меня 4,2,2?

    • Roman:

      добился нужного результата:
      @import url(«../mytheme/bootstrap/css/bootstrap.min.css»);
      @import url(«../mytheme/bootstrap/css/bootstrap-theme.min.css»);

      • Roman:

        Точнее смог подключить css файлы bootstrap. Сама стариница выглядит по другому. Устарел код

  21. Вячеслав:

    путь по Bootstrap прописан верно, если что )

  22. Нде, видимо с 12 года многое поменялось и в бутстрапе и в вордпресе.
    Отличная статья, хотя и не смог пройти до конца.
    Интуитивно многое сделал, но окончательно застрял на пункте 12, т.к. после добавления файла functions.php не только не подгружаются скрипты, но что то нарушается в самом вордпрессе и слетает кодировка:
    h t tp :/ /joxi. r u/ 823n6kKSBRbxmO

  23. Виктория:

    Отличная статья, и очень подробная! Спасибо за перевод.

    Единственное: почему-то не работал указанный здесь формат даты (пока не убрала формат, страница вообще грузиться не хотела). Ну и ещё необходимо сделать примечание, что этот туториал для старой версии bootstrap.

  24. Татьяна:

    Здравствуйте! Отличная статья, спасибо Вам большое!

    Подскажите пожалуйста как на шаге 17 исключить несколько страниц из горизонтального меню?

    Спасибо

  25. Дмитрий:

    Автору уважуха спасибо большое!

  26. Александр:

    Автор просто умница. Спасибо!

  27. Dos:

    Спасибо большое! Очень помогло понять основную структуру шаблона для WP

  28. vova:

    шаблон не рабочий :(

  29. Евгений:

    Не верные css комманды указанны в статье. По этой причине стили не подгружаются.
    @import url(‘bootstrap/css/bootstrap.css’);
    @import url(‘bootstrap/css/bootstrap-responsive.css’);

    Решение:
    @import url(css/bootstrap.css);
    @import url(css/bootstrap-responsive.css);

    Отличный урок!!! Спасибо большое.

  30. Далее добавим специфичную для Bootstrap разметку, чтобы получить макет из двух колонок. Измените шаблон page.php таким образом, чтобы включить в него специальные классы «row», «span8» и «span4». Мы используем «span8» для колонки с контентом, а «span4» для колонки с сайдбаром.

  31. аноним:

    Я быстро научилась как делать адаптивный сайт на WordPress. Теперь это просто. Обзор плагинов здесь
    ifish2.ru/adaptivnyi-sai-t-na-wordpress-obzory..
    В этом блоге есть все про WordPress

  32. Александр:

    Статья просто «ОГОНЬ». Все сделал, как надо, прикрутил Botstrap 3.3.7. Работает отлично! Автору большой респект и уважуха! А тот, кто говорит, что на Botstrap 3 не работает, так просто не хочет голову напрягать :-)

  33. Михаил:

    Здравствуйте! Чуть уперся на 14 шагу (финальная строчка). Подскажите, пожалуйста, каким образом убрать три столбца и вместо них пустить сплошной текст? Заранее спасибо!

  34. Добрый день.
    Не могу понять, почему строка меню «наезжает» на строку меню плагина и ни как не хочет изменять свое местоположение. Хотя в мобильной версии она становится ниже и между строкой меню темы и строкой меню плагина белый пробел.

  35. Иван:

    Сделал по образцу, все получилось. Но не сразу)

    По этой же инструкции, перенес свой сайт на WordPress и прикрутил блог. Учитесь пользоваться поиском)

    Автору огромное спасибо за перевод, ничего более стоящего не видел.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *