• ДОБРО ПОЖАЛОВАТЬ В КЛУБ ПО WORDPRESS

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

    Присоединяйтесь к нам, вам обязательно понравится - Присоединится

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

Wildcdu

Wildcdu

ЭКСПЕРТ
Доброго времени суток, Уважаемые форумчане.
Хочу начать серию о создании шаблона WordPress из HTML шаблона.
Это будет первый пост в котором я хочу поделится мыслью и услышать Ваше мнение.
Если данный пост будет востребован и окажется достаточно правильным думаю его можно будет после перенести в Базу решений
И так для начала давайте создадим исходник для работы
Исходный шаблон HTML я размещу из официального источника (он платный но для Вас форумчане доступен бесплатно)
[DOWNCLOUD]https://www.dropbox.com/s/ykpgw0hi63uydfd/themeforest-4410285-polishop-responsive-ecommerce-html-template-file-and-license.zip?dl=1[/DOWNCLOUD]
И сгенеренная пустая тема
[DOWNCLOUD]https://www.dropbox.com/s/ogvay3czg8vhh0k/clubwp-ru.zip?dl=1[/DOWNCLOUD]

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

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

Сегодня начинаем когда закончим еще не понятно... Каждый пост я буду заканчивать рабочими исходниками проделанных трудов.
На сегодня все, жду комментариев и пожеланий в предверии совместной деятельности.
 
Начнем потихоньку.
Пока подготовительные этапы.
Надеюсь кто заинтересовался скачали исходники.
Далее нам нужно:
  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 будущей темы.
Пока все. Скоро продолжим.
 
И так продолжим.
Давайте рассмотрим исходный HTML шаблон внимательно.
В нем 2 меню 2 виджета слайдер. (это нам нужно для понимания что где вставлять и прочее)
Давайте для начала разместим стили и разместим меню
Открываем functions.php style.css header.php
В предыдущем сообщении мы вставили в пустой style.css код в котором авторизовали себя как автора.

Давайте чтоб не мудрить из пустой темы WP (исходники) style.css скопируем в папку css (исключая шапку дабы было чище)
В нашем файле style.css который лежит в корне темы вставим данный код
[CSS]
@import url("css/style.css");
@import url("css/stylesheet.css");
[/CSS]
Таким образом мы подключили нужные нам стили из папки.

Чуть позже продолжим.
 
Последнее редактирование:
Продолжим
Теперь откроем functions.php и разберемся с меню
В functions.php есть код
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
Немного его переделаем и добавим еще несколько меню
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
Если нужны будут комментарии пишите думаю тут все просто... Мы в функции темы добавили еще 3 меню (на всякий случай) и теперь если зайти в админку и посмотреть области меню то мы увидим 4 меню которые можем использовать для темы
Давайте пока не закрыли файлик функций добавим туда виджетов, нам их нужно минимум 2 (выбор языка, выбор валюты) но если подумать то 3 тк удобнее всего разместит слайдер темы в виджете и легко и непринужденно использовать виджет например от слайдера революция (можно и не использовать тогда слайдер просто не появится)
И так смотрим код
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
Это то что уже есть в теме
добавим своих
Код: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
Вот так. Думаю тут так же пояснений не требуется
 
Последнее редактирование:
И так мы добавили 3 меню, 2 нам нужно, 1 добавим для футера (ну вдруг захочется)
Добавили 5 виджетов, Был стандартный (мы потом с ним разберемся) и добавили для слайдера, для приветствия (под слайдером), для валюты и выбора языка, и для произвольного меню.
Подключили стили из темы HTML
Давайте теперь продолжим собирать тему откроем header.php
найдем такие строки
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
под строкой разместим этот код
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
С помощью этой строки мы разместили виджеты валюты, языка и верхнего меню
Продолжим...
Теперь разместим логотип нашей темы...
найдем этот код
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
Заменим на этот
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
В принципе ни чего особенного мы добавили только одну строчку и кое что удалили строка эта <?php the_custom_header_markup(); ?> нужна для того чтобы включить встроенный механизм брендирования сайта (Вам же захочется менять логотип на свой) удалили (можно не удалять а закомментировать так разумнее) мы только дополнительный вывод названия сайта
Продолжим вставим под <!-- .site-branding -->
этот код
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
Этим кодом мы вставили меню, это не все мы должны еще его оформить в CSS чтоб было как на оригинале и прочее
Добавим еще кое что и можно закрывать хедер
Вставим после <!-- #masthead -->
этот код
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
Мы разместили виджет слайдера и текста велком
Сохраняем и наслаждаемся...
Не очень похоже? работаем дальше...
Открываем stylesheet.css
ищем этот код
[CSS]/********** Top Links **********/
#header .links { position: relative; float:right; line-height:30px; margin-right:-10px;}
#header .links li {display: inline-block; padding:0px 10px; color: #444; text-decoration: none; font-size:12px; position:relative;}
#header .links li + li:before{display:inline-block; content: "|"; clear: both; height: 0; color:#444; font-size:11px; padding-left:12px; position:absolute; left:-15px;}
#header .links li:hover{color:#D45C93;}
#header #welcome {color: #999999; float:left;}[/CSS]

Ниже добавим
[CSS]#header1 {background:#222; margin:15px 0px; height:40px; padding:0px 0px 0px 3px;}
#header1 .links1 li {display: inline-block;}
#header1 li:hover > a {color:#fff; background:#d45c93; }
#header1 .links1 a { font-size:14px; color: #FFF; line-height:40px; text-decoration: none; display: block; padding:0px 10px 0px 10px; z-index: 1009; position: relative; font-weight:bold; text-transform:uppercase;}[/CSS]
Эти три строки делает наше меню над слайдером как на оригинале выводит его в строчку и прочее (единственное чего нет это значка домика... можно добавить но это Ваше домашнее задание)
построчно первая строка делает прямоугольник для размещения меню
вторая распределяет пункты меню в строчку
третья меняет цвет при наведении
Четвертая задает внешний вид строчек меню
вот теперь мы еще ближе к цели...
Сохраняем нашу работу и проверяем ошибки...
Почти все.
Осталось
Установить: ревслайдер, VC и добавить нужное в нужные места.
Разобраться с сайдбаром стандартным и изменить футер как в оригинале. По сути нужно в футере добавить несколько виджетов и меню...
Почему нужен VC? ну причин множество, во первых расширим набор возможностей, но основная причина это куча примочек на главной, если мы будем пилить подобные карусельки ручками то это достаточно сложно будет как конструкция и основной минус придется писать отдельную админку под управление а это долго и нудно. Почему ревслайдер? Тут вариантов больше можно и другой с поддержкой виджетов.
В целом наша задача сделать не просто копию темы а тему которую в последствии можно гибко и быстро использовать и плюс в том виде котором она уже практически получилась... это супер быстрая и легкая тема.
Как вариант можно отказаться от рев слайдера и встроить нивослайдер который будет несколько проще и легче но управление этим слайдером будет сложнее, и будет очень и очень мало эффектов.
Продолжение следует...
 
Последнее редактирование:
Для примера вот что у меня уже получилось
Безымянный222211.jpg
 
Продолжим доделывать мелочи.
Добавим поддержку WC в наш шаблон.
Это очень просто.
Делаем копию файла page.php под именем woocommerce.php
Открываем ищем этот код
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
Удаляем его и вставляем этот
<?php woocommerce_content(); ?>
Сохраняем, закрываем
далее открываем functions.php и в самом конце вставляем это
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.
Сохраняем, закрываем радуемся. Теперь тема поддерживает WC
 
И так добавлю.
Как Вы заметили логотип в хедере при добавлении не очень смотрится ))) он во весь размер....
Поправим.
открываем custom-header.php ищем этот код И меняем значения как написано (это размер логотипа исходной темы HTML) Вы можете взять свой логотип и выставить размер по своему вкусу
PHP: 
У вас нет прав на просмотр содержимого кода, Войдите или Зарегистрируйтесь.

Делать это не обязательно, это по желанию.
 
Последнее редактирование:
Печально, что в теме не отметились профи, с комментариями.
 
Войдите или зарегистрируйтесь для ответа.

Последние сообщения

Назад
Сверху