Как натянуть вёрстку на WordPress (материалы для новичка)?
Добрый день. Во-первых, есть кодекс WP — https://codex.wordpress.org/Theme_Development Во-вторых, есть небольшой видеокурс — https://www.youtube.com/playlist?list=PLzi5JvpYf_hh6NaL1o0aYIpEdICG7P0gK В-третьих, статья на хабре — https://habr.com/post/228523/ В-четвёртых, здесь достаточно доступно описан процесс «натягивания» html шаблона — https://wp-best.ru/kak-natyanut-html-shablon-na-wordpress-chast-1.html В-пятых, если совсем лень «курить», можно воспользоваться этим видео — https://www.youtube.com/watch?v=7akPICFR-AI Что-то линки не вставляются как надо.
dexterh 5.4 года назад
Спасибо Вам за ответ!
webazex 5.4 года назад
Здравствуйте. В принципе возник тот же вопрос. Делаю свою тему, к ней нужно подключить плагин. Он подключается но корректно не работает. Есть подозрение что связано это с отсутствием файла functions.php. Главной вопрос. Что должно быть в этом файле, точнее как мне его сформировать? Скопировать с существующей — возникают ошибки. Если писать самому — что писать? Какие функции? Какой шаблон самого файла хотя бы?
Kama 5.4 года назад
Создай functions.php файл в теме, только с текстом
и дальше «сувай» туда любые коды. Это прочитай еще.
OLD_Grays 5.4 года назад
А какой плагин подключаете? И как он не работает корректно, что делает/чего не делает (скриншоты в студию)) )? Если совсем в двух словах, то functions.php расширяет функционал темы. А дальше. В первую очередь, Вам сюда — https://wp-kama.ru/id_71/fayl-shablona-functionsphp-v-wordpress.html
Во вторую, когда решите какой функционал хотите реализовывать, Вам сюда — https://wp-kama.ru/functions — и сюда — https://wp-kama.ru/hooks Для примера, можете взять файл из стандартной темы типа TwentyEleven и посмотреть какие переменные там инициализируются/создаются/используются, какие функции/классы создаются. Тут ведь большой разброс от глобальных настроек до мелких сниппетов.
Комментировать
Здравствуйте! У меня такой вопрос. По поводу натягивания вёрстки на WordPress. Я конечно понимаю, что об этом уже много всего написано и много видео есть в интернете. Но всё-таки хочу спросить. Есть непонятный момент. Не могу разобраться. Когда я в установленном WordPress устанавливаю какую-либо тему из репозитория, то получаю практически пустой сайт, в который я при помощи PageBuilder вставляю контент. При этом в файлах темы ничего не меняется. В файле index.php всего несколько строк. Куда же записывается весь контент? Если мы поменяем тему на другую, то весь контент остаётся, но меняется его вид (стили). А когда речь идет о натягивании вёрстки, то мы переносим нашу вёрстку в файл index.php. Мы записываем в index.php все тексты, картинки и т.п. И если мы потом поменяем тему на какую-то другую, то мы потеряем весь контент. И еще — index.php это шаблон страницы. А мы ведь можем создать много разных страниц, и чем они будут заполняться? Я смотрел видео про натягивание вёрстки, там говорят, что переносим основное содержимое файла index.html в файл index.php, шапка при этом помещается в header.php. А если у нас несколько html страниц, то куда их переносить ? Я никак не могу понять. Натянуть вёрстку это что значит? Перенести весь контент ? или нет . Или мы так же должны получить пустой сайт, в который заказчик сам будет вставлять свой контент ? Я так понимаю, что свёрстанный сайт, он уже со всеми страницами, картинками и прочее, и мы его переносим на WordPress, прямо в файлы темы. А как тогда заказчик потом будет дополнять, менять контент, картинки, тексты, он что, будет лезть в файлы темы, править php файлы ? скорее всего нет, он должен вооружиться каким либо PageBuilder’ом. А как тогда это всё совместить?
Из HTML в WordPress за 10 минут
Как бы сильно не казалось, что адаптация HTML под WP это что-то страшное и сложное, мы будем создавать тему на WordPress за 10 минут. На самом деле всё очень даже легко и никаких магических способностей в этом деле не потребуется.
Всё что нужно это готовый HTML шаблон на руках. Бесплатный шаблон можно скачать здесь. Также потребуется развернуть чистый WordPress на хостинге. Далее работаем по инструкции:
Заходим в админ. панель WordPress
Заходим в раздел «Плагины» ➜ «Добавить новый» ➜ Находим плагин «Unyson» ➜ Жмем кнопку «Установить» ➜ Активируем плагин. Он нам пригодится в первую очередь для создания страницы настроек нашего шаблона, чтобы админ сайта мог выбрать логотип, название сайта и т.д.
Дальше временно перенесемся на локалку, просто потому, что так быстрее. Заходим в папку wp-content ➜ themes и создаем папку с названием нашей новой темы «truestory»
Копируем в новоиспеченную директорию файлы своего шаблона и создаем дополнительно файлы header.php и footer.php. Теперь пора вдохнуть жизнь, ну или динамику в нашу тему.
Открываем файл header.php в стандартной теме WordPress ➜ «twentyfifteen» и смотрим, как там всё устроено. Правим по аналогии файл header.php из нашей темы, копируем в неё стандартные php вставки, вплоть до вставок wp_head и body_class. Пути к стилям тоже не забываем подправить. Что касается картинки логотипа, то её путь мы сейчас не можем вывести динамично, так как у нас ещё нет таких настроек в админке WP. Давайте исправим эту ситуацию прямо сейчас.
В корне нашей темы создаем папку framework-customizations в ней подпапку theme, а в ней ещё одну подпапку options. Уже в папке options создаем файлик settings.php. Вписываем в этот файл вот такой php код:
if( !defined('FM') ) die('Silence is golden'); $options = array( 'logo_image' => array( 'type' => 'upload', 'label' => __('Logo','truestory'), 'images_only' => true ) );
Дальше нам надо активировать саму тему, но сейчас она попросту не обнаруживается WP в разделе «Внешний вид». Чтобы это исправить создаем файлик style.css в корне нашей темы и вписываем туда простой css комментарий вот такого вида:
/* Theme Name: True Story */
Переходим в админку WP и активируем нашу новую тему. Выбираем пункт «Внешний вид» ➜ «Темы» ➜ Активировать». После этого в разделе «Внешний вид» появится пункт «Настройки темы». Теперь туда можно загружать логотип.
В файле header.php можно вывести логотип вот таким образом:
echo fw_get_db_settings_option('logo-image')['url'];
Создаем в корневой директории темы файлик functions.php и регистрируем наше меню. Заодно пропишем поддержку картинок у статей. Пропишем ширину и высоту постов, которые должны сохраняться при добавлении новой темы.
register_nav_menus(array( 'primary' => __('Primary Menu', 'truestory') )); add_theme_support('post-thumbnails'); set_post_thumbnail_size(360, 500, true);
Открываем файл sidebar.php из темы «twentyfifteen» и копируем вывод меню для нашей шапки. На этом с ней будет покончено.
wp_nav_menu( array( 'theme_location' => 'social', 'depth' => 1, 'link_before' => '', 'link_after' => '', ) );
Смотрим, как реализован index.php у шаблона «twentyfifteen» и повторяем аналогичную реализацию index.php для нашего шаблона.
Выносим структуру статей в файл content.php и адаптируем его точно таким же образом, как в это сделано в теме «twentyfifteen». Некоторых моментов, например, категории или даты публикации статьи «twentyfifteen» не имеет, поэтому копируйте код ниже.
Вывод списка категорий на WordPress:
-
‘; wp_list_categories( $args ); echo ‘
Вывод даты публикации на WordPress:
the_date();
Сохраняем работу и идём в админку. Добавляем парочку пунктов меню и 2-3 статейки, чтобы посмотреть, что у нас получилось уже на реальных данных. При этом всём мы уже почти закончили со всей темой. Она уже выводит статьи, уже позволяет ставить плагины и может похвастаться настройкой логотипа в шапке из админки, а также своим меню. Осталось совсем немного, а именно подрубить footer и сделать страницу просмотра всей статьи.
В файл footer.php переносим закрывающий тег body из index.php. Адаптируем footer само собой по аналогии с «twentyfifteen». Не забудем прописать в конце файла index.php функцию:
get_footer();
Создаем файл single.php для страницы самой статьи и адаптируем его, таким образом, как и все прошлые.
На этом всё! У нас получилась готовая тема. Точно таким же образом делают огромные и многофункциональные темы для WordPress, которые потом продают.
Для наглядности посмотрите видео версию урока от «Хауди Хо»
Заказать натяжку сайта на WordPress
Как натянуть свой шаблон на WordPress движок?
Добрый день, друзья!
У меня появилась задача с которой мне сложно справится одному, поэтому я вынужден просить вашей помощи. Задача следующая: натянуть свой шаблон сайта на движок WordPress так, чтобы можно было управлять содержимым из админ панели WordPress (у меня конечно же есть HTML разметка и таблица стилей CSS). Подскажите пожалуйста как это лучше всего сделать. Мне приходила в голову мысль, что можно разбить общий шаблон контента на плагины. Но опять же таки как это сделать, и где регистрировать эти плагины? Надеюсь на вашу помощь!
- Вопрос задан более трёх лет назад
- 102500 просмотров
Комментировать
Решения вопроса 2
Лучше всего посмотреть видеоуроки по адаптации чистого HTML/CSS для WordPress. Вот сам учился на этом уроке: https://www.youtube.com/playlist?list=PLzi5JvpYf_h.
UPD: текстовая статья на Хабре habrahabr.ru/post/228523
Как натянуть самостоятельно верстку на WordPress
После создания сайта на WordPress можно воспользоваться стандартным шаблоном или установить другой, который не предлагается в комплекте платформы. После выбора темы со стороны ее нужно будет внедрить в код созданного сайта. Этот процесс называют версткой или натяжкой верстки. Рассмотрим подробнее этапы верстки новой темы для сайта на WordPress.
Натяжка верстки на WordPress: план действий
Предполагается, что уже создан сайт и есть в наличии код шаблона (для примера взят «Corpbiz»), который нужно установить на WordPress.
Как натянуть верстку шаблона на WordPress быстро и без ошибок, станет ясно из следующего описания последовательности действий:
- Зайти в панель управления сайта.
- В схеме кода сайта найти папку «themes» и создать в ней папку «сorpbiz», в которой будет проводиться верстка шаблона.
- В новую папку перенести все файлы из архива шаблона. Убедиться, что есть файлы «header.php», «index.php», «sidebar.php» и «footer.php». Если в архиве шаблона WordPress все коды находятся в файле index-html, то создать обозначенные 4 файла и перенести в них соответствующие участки кода.
- Интегрировать шаблон с платформой WordPress.
Далее статичную тему, которая уже загружена в WordPress, предстоит преобразовать в динамичную, чтобы подгружались настройки и данные CMS. В коде макета будут попадаться PHP-операторы, начинающиеся «?». Они, как правило, вызывают выполнение функций системы.
Интеграция шаблона с платформой
Дальнейшая верстка под WordPress предусматривает ряд самых сложных операций, требующих повышенного внимания и точности.
Адаптация header
Чтобы натянуть шаблон и придать ему динамичность, придется поработать с кодами основных файлов движка.
- Открыть файл верхней части «header.php», поменять в нем участок кода до тега «body» на код:
- Отредактировать «index.php» касательно header. Проверить, что в начале кода имеется оператор:
- Если он отсутствует, то прописать его. Данный оператор активирует шапку сайта.
- Заодно проверить, что в конце файла есть операторы:
- И если они отсутствуют, то прописать их. Последние два оператора активируют боковой бар и нижний отдел сайта.
После данных действий новая тема будет отображаться в ПУ и ее можно активировать. Но меню еще пока остается статичным и отображается только одна страница ресурса. Поэтому посадка верстки на WordPress будет продолжена.
Создание динамического горизонтального меню
В «header.php» участок кода с таблицей этого меню заменить на оператор:
Чтобы меню отобразилось в ПУ сайта, перейти во «Внешний вид» — «Настроить» — «Меню», назвать созданное меню как «menu» или создать новое меню, если его все-таки еще нет, и присвоить название «menu».
Это обязательное имя нужно потому, что файл «header.php» с функцией «wp_nav_menu(‘menu=menu’);» активирует меню строго под именем «menu». Хотя оно при необходимости может заменяться другим, но должно совмещаться с указанным в настройках ПУ сайта и в «header.php».
Создание динамического названия и описания сайта
Имя сайта и его описание удобно изменять в админ-панели. Они должны восприниматься из настроек, для чего следует заменить часть кода, отвечающего за текст в шапке, на следующий набор кода:
На этом корректировка «header.php» заканчивается.
Адаптация index.php
Дальнейшая верстка шаблона для платформы WordPress касается публикации контента. Для корректного отображения всех имеющихся страниц в файле «index.php» необходимо изменить блок «right», но проще поменять весь код файла одним махом на следующий:
»>
/ /
А здесь нет ничего �� 404
emm_paginate();
> ?>
