Добро пожаловать в клуб по WordPress

Хотите присоединиться к не имеющему себе равных клубу по WordPress?
Не стесняйтесь и станьте частью большого сообщества. Пройдите простую регистрацию,
чтобы пользоваться всеми возможностями нашего клуба.
Присоединяйтесь к нам, вам обязательно понравится.

Урок "Натягиваем" HTML или создаем шаблон WP из HTML

Тема в разделе "Основы, описания, уроки.", создана пользователем Wildcdu, 7 апр 2017.

  1. Доброго времени суток, Уважаемые форумчане.
    Хочу начать серию о создании шаблона WordPress из HTML шаблона.
    Это будет первый пост в котором я хочу поделится мыслью и услышать Ваше мнение.
    Если данный пост будет востребован и окажется достаточно правильным думаю его можно будет после перенести в Базу решений
    И так для начала давайте создадим исходник для работы
    Исходный шаблон HTML я размещу из официального источника (он платный но для Вас форумчане доступен бесплатно)

    И сгенеренная пустая тема


    Сразу оговорюсь, возможно в процессе мы откажемся от автосгенеренной темы и будем создавать из пустых файлов тему (Порой это удобнее и плюс не факт что у меня хватит ума где то)

    И так как для начала ознакомьтесь с этой темой Работа с темами в WordPress
    Для чего? Чтобы не повторяться наверное. И не писать одно и тоже (я же то же ленивый...)

    Сегодня начинаем когда закончим еще не понятно... Каждый пост я буду заканчивать рабочими исходниками проделанных трудов.
    На сегодня все, жду комментариев и пожеланий в предверии совместной деятельности.
     
    danila_sch и Попай нравится это.
  2. Начнем потихоньку.
    Пока подготовительные этапы.
    Надеюсь кто заинтересовался скачали исходники.
    Далее нам нужно:
    1. Текстовый редактор, например, Sublime Text 2, Notepad++, AkelPad или любой другой (только не стандартный блокнот windows!)
    2. Браузер (кому какой это не важно)
    3. Сайт для тестирования темы либо локальный либо в интернете.
    4. Понимание базовое HTML, CSS, PHP.
    5. Терпение... Пару вагонов + две тележки.
    6. 1000000 долларов мелкими купюрами! Шутка.
    Напомню что шаблон WP состоит из множества файлов
    Это основа без нее тема не будет существовать для WP
    • index.php – основной шаблон страницы;
    • style.css – файл стилей.
    Ну и много других про часть из них напомню
    • header.php, для вывода шапки всех страниц;
    • sidebar.php, для вывода боковой колонки;
    • footer.php, который выводит подвал сайта;
    • page.php, шаблон для статических страниц
    • single.php, шаблон для страниц записей;
    • archive.php, шаблон архивов и рубрик;
    • comments.php, шаблон комментариев;
    • functions.php, функции темы;
    Основа нашей задачи в том чтобы исходник HTML превратить в тему WP
    Работает или точнее работать мы будем по такому принципу:
    Берем готовую пустую тему WP (у нас же есть исходник) и постепенно переделываем ее совмещая с HTML шаблоном
    Замечу что тема HTML это изначально магазин, поэтому мы сразу усложнили себе задачу тк будем делать тему совместимую с WC

    Для гурманов и знающих людей, если в процессе я буду ошибаться или что то подобное то я с удовольствием приму поправки на условиях, что они будут с описанием и из расчета уважительного изложения к форумчанам те в виде корректного разъяснения и примера. Прошу учитывать что я не являюсь профи. Данные уроки будут в качестве собственного-личного развития предоставлены для всех.

    И так распакуем исходники и откроем папку HTML темы и создадим там файл style.css

    В него вставим такой код

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Вы можете внести свои данные

    В нашем примере в файле style.css будет содержаться только базовая информация о теме, а сами стили будут находится в папке css и тех файлах стилей, которые есть в этой папке.

    Далее скопируем в пустую WP тему все файлы HTML темы
    В итоге мы получим пустую готовую для работы в WP тему.
    Тема абсолютно пустая рабочая и ее даже можно установить на WP, правда проку от нее будет очень мало. )))

    Далее мы начнем работу с файлом header.php
    перенесем в него данные из index.html относящиеся к header.php будущей темы.
    Пока все. Скоро продолжим.
     
  3. И так продолжим.
    Давайте рассмотрим исходный HTML шаблон внимательно.
    В нем 2 меню 2 виджета слайдер. (это нам нужно для понимания что где вставлять и прочее)
    Давайте для начала разместим стили и разместим меню
    Открываем functions.php style.css header.php
    В предыдущем сообщении мы вставили в пустой style.css код в котором авторизовали себя как автора.

    Давайте чтоб не мудрить из пустой темы WP (исходники) style.css скопируем в папку css (исключая шапку дабы было чище)
    В нашем файле style.css который лежит в корне темы вставим данный код

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:


    Таким образом мы подключили нужные нам стили из папки.

    Чуть позже продолжим.
     
    #3 Wildcdu, 9 апр 2017
    Последнее редактирование: 10 апр 2017
  4. Продолжим
    Теперь откроем functions.php и разберемся с меню
    В functions.php есть код

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Немного его переделаем и добавим еще несколько меню

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Если нужны будут комментарии пишите думаю тут все просто... Мы в функции темы добавили еще 3 меню (на всякий случай) и теперь если зайти в админку и посмотреть области меню то мы увидим 4 меню которые можем использовать для темы
    Давайте пока не закрыли файлик функций добавим туда виджетов, нам их нужно минимум 2 (выбор языка, выбор валюты) но если подумать то 3 тк удобнее всего разместит слайдер темы в виджете и легко и непринужденно использовать виджет например от слайдера революция (можно и не использовать тогда слайдер просто не появится)
    И так смотрим код

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Это то что уже есть в теме
    добавим своих

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Вот так. Думаю тут так же пояснений не требуется
     
    #4 Wildcdu, 9 апр 2017
    Последнее редактирование: 9 апр 2017
  5. И так мы добавили 3 меню, 2 нам нужно, 1 добавим для футера (ну вдруг захочется)
    Добавили 5 виджетов, Был стандартный (мы потом с ним разберемся) и добавили для слайдера, для приветствия (под слайдером), для валюты и выбора языка, и для произвольного меню.
    Подключили стили из темы HTML
    Давайте теперь продолжим собирать тему откроем header.php
    найдем такие строки

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    под строкой разместим этот код

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    С помощью этой строки мы разместили виджеты валюты, языка и верхнего меню
    Продолжим...
    Теперь разместим логотип нашей темы...
    найдем этот код

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Заменим на этот

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    В принципе ни чего особенного мы добавили только одну строчку и кое что удалили строка эта <?php the_custom_header_markup(); ?> нужна для того чтобы включить встроенный механизм брендирования сайта (Вам же захочется менять логотип на свой) удалили (можно не удалять а закомментировать так разумнее) мы только дополнительный вывод названия сайта
    Продолжим вставим под <!-- .site-branding -->
    этот код

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Этим кодом мы вставили меню, это не все мы должны еще его оформить в CSS чтоб было как на оригинале и прочее
    Добавим еще кое что и можно закрывать хедер
    Вставим после <!-- #masthead -->
    этот код

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Мы разместили виджет слайдера и текста велком
    Сохраняем и наслаждаемся...
    Не очень похоже? работаем дальше...
    Открываем stylesheet.css
    ищем этот код

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:



    Ниже добавим

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:


    Эти три строки делает наше меню над слайдером как на оригинале выводит его в строчку и прочее (единственное чего нет это значка домика... можно добавить но это Ваше домашнее задание)
    построчно первая строка делает прямоугольник для размещения меню
    вторая распределяет пункты меню в строчку
    третья меняет цвет при наведении
    Четвертая задает внешний вид строчек меню
    вот теперь мы еще ближе к цели...
    Сохраняем нашу работу и проверяем ошибки...
    Почти все.
    Осталось
    Установить: ревслайдер, VC и добавить нужное в нужные места.
    Разобраться с сайдбаром стандартным и изменить футер как в оригинале. По сути нужно в футере добавить несколько виджетов и меню...
    Почему нужен VC? ну причин множество, во первых расширим набор возможностей, но основная причина это куча примочек на главной, если мы будем пилить подобные карусельки ручками то это достаточно сложно будет как конструкция и основной минус придется писать отдельную админку под управление а это долго и нудно. Почему ревслайдер? Тут вариантов больше можно и другой с поддержкой виджетов.
    В целом наша задача сделать не просто копию темы а тему которую в последствии можно гибко и быстро использовать и плюс в том виде котором она уже практически получилась... это супер быстрая и легкая тема.
    Как вариант можно отказаться от рев слайдера и встроить нивослайдер который будет несколько проще и легче но управление этим слайдером будет сложнее, и будет очень и очень мало эффектов.
    Продолжение следует...
     
    #5 Wildcdu, 10 апр 2017
    Последнее редактирование: 10 апр 2017
  6. Для примера вот что у меня уже получилось
    ClubWP.ru - Клуб WordPress
     
  7. Продолжим доделывать мелочи.
    Добавим поддержку WC в наш шаблон.
    Это очень просто.
    Делаем копию файла page.php под именем woocommerce.php
    Открываем ищем этот код

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Удаляем его и вставляем этот
    <?php woocommerce_content(); ?>
    Сохраняем, закрываем
    далее открываем functions.php и в самом конце вставляем это

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Сохраняем, закрываем радуемся. Теперь тема поддерживает WC
     
  8. И так добавлю.
    Как Вы заметили логотип в хедере при добавлении не очень смотрится ))) он во весь размер....
    Поправим.
    открываем custom-header.php ищем этот код И меняем значения как написано (это размер логотипа исходной темы HTML) Вы можете взять свой логотип и выставить размер по своему вкусу

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Делать это не обязательно, это по желанию.
     
    #8 Wildcdu, 10 апр 2017
    Последнее редактирование: 11 апр 2017
  9. Печально, что в теме не отметились профи, с комментариями.
     
  10. Почему забросили? Продолжайте.
     
Загрузка...