Как натянуть верстку на wordpress

Как натянуть верстку на wordpress

Спасибо, вы успешно подписаны на рассылку!

После создания сайта на WordPress можно воспользоваться стандартным шаблоном или установить другой, который не предлагается в комплекте платформы. После выбора темы со стороны ее нужно будет внедрить в код созданного сайта. Этот процесс называют версткой или натяжкой верстки. Рассмотрим подробнее этапы верстки новой темы для сайта на WordPress.

Натяжка верстки на WordPress: план действий

Предполагается, что уже создан сайт и есть в наличии код шаблона (для примера взят «Corpbiz»), который нужно установить на WordPress.

Как натянуть верстку шаблона на WordPress быстро и без ошибок, станет ясно из следующего описания последовательности действий:

1. Зайти в панель управления сайта.
2. В схеме кода сайта найти папку «themes» и создать в ней папку «сorpbiz», в которой будет проводиться верстка шаблона.
3. В новую папку перенести все файлы из архива шаблона. Убедиться, что есть файлы «header.php», «index.php», «sidebar.php» и «footer.php». Если в архиве шаблона WordPress все коды находятся в файле index-html, то создать обозначенные 4 файла и перенести в них соответствующие участки кода.
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», но проще поменять весь код файла одним махом на следующий:

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

Добавление виджетов в сайдбар

Далее начинается работа с файлом «functions.php», в котором запускаются все функции шаблона. Для добавления виджетов в теме необходимо идентифицировать боковую область с помощью функции register_sidebar(), которая прописывается в « functions.php» со всеми параметрами для сайдбара.

Также необходимо будет настроить стили «style.css» для оформления сайдбара. Если все проделано верно, то в панели управления во вкладке «Внешний вид» появятся подразделы «Виджеты» и «Меню», в которых можно настраивать содержимое этих объектов.

Создание динамического вертикального меню

• В «sidebar.php» необходимо убрать вложенный листинг меню и добавить код:

• В админке «добавить меню» и дать ему название «left_menu», так как оно должно совмещаться с названием в коде «sidebar.php». После сохранения изменений динамическое вертикальное меню должно отображаться правильно и изменяться в ПУ.

Код «sidebar.php» уменьшится и будет выглядеть так:

Адаптация файла «footer.php»

Нижняя часть сайта может быть реализована в качестве виджетов, что позволит изменять их содержание из админ-панели.

1. Открыть «fnction.php», до дескриптора?> вставить код:

Данный код зарегистрирует набор виджетов с характерным названием «foot».

1. В «footer.php» программный код внутри заменить строчкой, которая активирует блок «foot»:

3. В ПУ теперь можно настроить этот виджет и оформить нижнюю часть по своему усмотрению.

Закончив верстку на WordPress, вебмастер получает полностью динамический шаблон, сохранивший первоначальный внешний вид.

Автонаполняемый сайт на WordPress

После создания ресурса необходимо наполнить его контентом, который будет раскрывать тематику и заинтересовывать посетителей. Требуется постоянная периодическая публикация нового материала, новых статей.

Обновление информации самостоятельно занимает немало времени, поэтому иногда целесообразно настроить и запустить автонаполнение сайта.

Автоматически наполняемый ресурс на WordPress получает новые статьи за счет перепубликации информации с других ресурсов.

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

Как сделать автонаполняемый сайт

Самонаполняемый сайт с помощью плагинов обнаруживает и притягивает релевантные статьи с других ресурсов, используя RSS.

Для этих целей служат плагины-грабберы: FeedWordPress, Syndicate Out, SyndicatePress, CyberSyn, WP RSS Aggregator.

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

Процесс настройки и запуска граббера демонстрируется на работе самого распространенного плагина «FeedWordPress».

• Установить его через админ-панель.
• В разделе «Syndication» перейти в «Options» для настройки:
  1. Параметр «Check for new posts» настроить «Automatically»(копировать на автомате).
  2. Параметр «Unfamiliar categories» настроить «Don’t create new categories» (не создавать категории).
  3. «Permalinks point to» настроить «this website» (создание страницы для поста).
  4. «Posts by new authors» — «are assigned to admin» (администратора считать автором поста).
• Перейти в «Syndication» для добавления рсс-каналов, указав «Add», РСС-ленты следует подбирать с узкоспециализированных родственных по тематике порталов.

После проведенной настройки плагин-граббер спустя некоторое время разместит в качестве черновиков множество новых материалов. Вручную придется их переводить из статуса «Ожидает утверждения» в статус «Опубликовано».

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

Поисковые роботы не приветствуют плагиат на просторах интернета, поэтому автопополнение следует применять осторожно.

Автонаполнение уникальными статьями сайта WordPress

Создание уникальных текстов требует времени и усилий, но их можно купить на специализированных биржах. Более того, портал TextSale предоставляет программу, которая может автоматически покупать релевантные статьи и публиковать их на сайте.

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

Заключение

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

Как натянуть свою верстку на Wordpress?

Приветствую
Решил научиться работать с Wordpress, так как часто просят клиенты натягивать верстку на какую-нибудь цмс. Установил, немного погуглил и сразу же возникло множество вопросов, прошу ответить на самые главные из них:

1) Какие секции/блоки/записи сайта нужно «связывать» с цмской? В смысле, вот есть простенький сайт — xxx.ru.
Я уже зарегистрировал 2 виджета для верхнего и нижнего меню, можно добавлять пункты с панели. Но вот там есть блоки «Что это такое?» «Схема работы» и т.п. Это нужно интегрировать в Вордпресс? Это не заказ, взял старую свою верстку просто, интересует что обычно требуют заказчики?

2) Второй вопрос вытекает из предыдущего, каким образом, блоки текста, которые не являются ни статьями, ни пунктами меню, ни какими-либо виджетами, переносить в панель управления, чтобы клиент мог редактировать их по своему усмотрению?

Из 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 код:

Дальше нам надо активировать саму тему, но сейчас она попросту не обнаруживается WP в разделе «Внешний вид». Чтобы это исправить создаем файлик style.css в корне нашей темы и вписываем туда простой css комментарий вот такого вида:

Переходим в админку WP и активируем нашу новую тему. Выбираем пункт «Внешний вид» ➜ «Темы» ➜ Активировать». После этого в разделе «Внешний вид» появится пункт «Настройки темы». Теперь туда можно загружать логотип.

В файле header.php можно вывести логотип вот таким образом:

Создаем в корневой директории темы файлик functions.php и регистрируем наше меню. Заодно пропишем поддержку картинок у статей. Пропишем ширину и высоту постов, которые должны сохраняться при добавлении новой темы.

Открываем файл sidebar.php из темы «twentyfifteen» и копируем вывод меню для нашей шапки. На этом с ней будет покончено.

Смотрим, как реализован index.php у шаблона «twentyfifteen» и повторяем аналогичную реализацию index.php для нашего шаблона.

Выносим структуру статей в файл content.php и адаптируем его точно таким же образом, как в это сделано в теме «twentyfifteen». Некоторых моментов, например, категории или даты публикации статьи «twentyfifteen» не имеет, поэтому копируйте код ниже.

Вывод списка категорий на WordPress:

Вывод даты публикации на WordPress:

Сохраняем работу и идём в админку. Добавляем парочку пунктов меню и 2-3 статейки, чтобы посмотреть, что у нас получилось уже на реальных данных. При этом всём мы уже почти закончили со всей темой. Она уже выводит статьи, уже позволяет ставить плагины и может похвастаться настройкой логотипа в шапке из админки, а также своим меню. Осталось совсем немного, а именно подрубить footer и сделать страницу просмотра всей статьи.

В файл footer.php переносим закрывающий тег body из index.php. Адаптируем footer само собой по аналогии с «twentyfifteen». Не забудем прописать в конце файла index.php функцию:

Создаем файл single.php для страницы самой статьи и адаптируем его, таким образом, как и все прошлые.

На этом всё! У нас получилась готовая тема. Точно таким же образом делают огромные и многофункциональные темы для WordPress, которые потом продают.

Как перенести HTML-код на Wordpress: пошаговая инструкция с советами

Готовый HTML, CSS и JS код требуется перенести на какую-нибудь админку, чтобы для добавления нового контента и расширения функционала не приходилось лезть в директории проекта, создавать там новые файлы, копаться в коде. Это наилучшее решение не только для обычных пользователей, но и разработчика, так как сильно экономит время при расширении готового сайта. Самой популярной админкой является WordPress. Весь готовый код проекта можно перенести на нее и использовать в качестве собственной темы.

Варианты переноса HTML-сайта на WordPress

Перенос HTML-сайта с готовой структурой на WordPress не такая сложная процедура, как может показаться. Есть три варианта действий:

1. Переносить вручную. На это придется потратить много времени, плюс, для этого требуются определенные навыки веб-разработки и программирования. Однако так можно лучше разобраться в работе как своего сайта, так и CMS. Доступ к корневой папки с HTML, CSS, JS файлами придется получить через FTP-клиент. В его структуру потребуется добавить несколько PHP-файлов для инициализации темы в WordPress.
2. Приобрести готовую тему. Данный вариант можно рассматривать в том случае, если у вас нет разработанной темы. На WordPress можно найти много уже готовых бесплатных тем, а установить их не составит труда даже для пользователя, слабо знакомого с веб-разработкой. Есть также платные темы с премиальным функционалом.
3. Заказать перенос. Суть заключается в том, что вы ищите разработчика, который перенесет готовый сайт на WordPress и адаптирует его в качестве темы. Иногда подобные услуги предлагает сам хостинг, на котором размещается сайт.

Пример редактора тем в WordPress

Подробно будет рассмотрен только первый вариант.

Установка WordPress

Вне зависимости от выбранного варианта вам придется изначально выполнить установку WordPress. Если он уже установлен, то пропускайте этот этап. Рассмотрим процесс установки вкратце:

1. Скачайте архив с дистрибутивом WordPress с официального сайта.
2. Распакуйте архив. Пока файлы из него можно вынести куда-нибудь на компьютер.
3. Создайте базу данных MySQL на вашем сервере или запросите к ней доступ, если используете сторонний хостинг. Обратите внимание, что у некоторых тарифов хостинга может не быть поддержки MySQL и PHP. Выбирайте тариф только с их поддержкой.
4. Откройте перечень файлов, которые ранее разархивировали. Переименуйте файл wp-config-sample.php в wp-config.php.
5. Переместите папку с файлами WordPress к себе на сервер в корневую папку сайта.
6. Перейдите в любом браузере по ссылке wp-admin/install.php для доступа к админки вашего сайта. Там вам придется указать имя пользователя и пароль.

Добавление информации для доступа к админ-панели

Перенос готового HTML-шаблона на WordPress

Если вам нужно перенести не только контент сайта, но и его дизайн, то придется создавать тему. Для этого потребуется не только доступ ко всем файлам сайта, но и удобный редактор кода, например VisualStudio Code или другой похожий. Далее разделим для удобства весь процесс на несколько этапов.

Этап 1: Создание файлов темы

Создайте на компьютере отдельную папку, где будет хранится информация о вашей теме. Эту папку нужно открыть в выбранном для работы редакторе кода. Создавать в ней новые файлы рекомендуется как раз через редактор кода. В Visual Studio Code это можно сделать. Создайте файлы со следующими наименованиями:

• style.css;
• index.php;
• header.php;
• sidebar.php;
• footer.php.

Базовая файловая структура для темы

Пока вы только создали структуру. Представленные файлы придется правильно заполнить, чтобы WordPress распознал вашу тему.

Этап 2: Прописывание стилей

Для начала вам придется отредактировать файл style.css. В него, в самом начале пропишите этот код:

После этого кода вставьте основные стили вашего сайта. Они должны быть записаны в файлу style.css или main.css, который находится в директории сайта. Просто откройте данный файл и скопируйте все его содержимое. Затем переключитесь на файл style.css, который расположен в корневой папке темы и вставьте туда CSS-код после вводных данных, которые были прописаны ранее.

Этап 3: Перенос HTML-кода

На этом этапе нужно перенести данные из файла index.html в index.php. Ничего страшного, что верстка будет в PHP-файле. Он умеет корректно обрабатывать HTML. Это необходимо из-за особенностей WordPress, так как HTML-файлы он воспринимает не очень хорошо, поэтому все ключевые элементы сайта желательно прописывать в PHP-файлах, пускай PHP-кода там почти и нет.

Откройте header.php. В него из главного HTML-файла сайта скопируйте отрывок, который отвечает за функционирование меню и всей верхней части сайта. Аналогичную операцию нужно провести для файла sidebar.php, но только скопировать и вставить код боковой панели или панелей. В случае с файлом footer.php нужно скопировать и вставить часть отвечающую за подвал сайта.

Все, что осталось в index.html копируйте в index.php. Не нужно копировать данные о шапке, боковых меню и футере, так как они уже добавлены в отдельный файл.

Этап 4: Инициализация index.php

В качестве завершающего этапа настройки темы нужно провести инициализацию файла index.php. Перед началом основного HTML-кода вставьте строку:

Она необходима для подключения файла header.php. В скобках пропишите путь до объекта. По аналогии пропишите в самом конце HTML-разметки строки для вызова бокового меню и подвала:

В качестве завершающего этапа нужно настроить вывод новых статей и других важных новостей ресурса на главной странице сайта. Код нужно добавить в блок с контентом на главной странице. Сам PHP-код выглядит так:

Теперь осталось только доделать мелкие детали, например, переподключить сторонние файлы, что-то подправить, если верстка в итоге съехала и можно сохранять файл. На этом создание темы для WordPress завершено.

Этап 5: Добавление темы в WordPress

Созданную тему осталось только загрузить в админку сайта и применить. Папку с новой темой нужно переместить по пути: /wp-content/themes/. Начальная часть адреса может отличаться в зависимости от хостинга, сервера и самой структуры сайта. Теперь останется только выбрать загруженную тему в панели управления:

1. Авторизуйтесь в админке сайта, введя соответствующую ссылку в адресную строку браузера, а также свои логин и пароль.

2. Переключитесь во вкладку “Внешний вид” в левом меню.

3. В новом окне воспользуйтесь кнопкой “Добавить новую” и выберите свою тему среди доступных. Если вы ее загрузили на хостинг, то она должна там быть.

Переход к разделу с темами

4. Или загрузите тему, воспользовавшись кнопкой “Загрузить тему”.

Загрузка готовой темы через WordPress

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

Заключение

Преобразовать готовую верстку в полноценный HTML-шаблон несложно, но важно потом проверить код и саму тему на корректность работы. Наиболее “уязвимыми” местами являются адреса для привязки файлов, так как они могут быть изменены при преобразовании верстки в полноценную тему, следовательно, разработчику придется менять адреса на корректные. Также из-за добавления постороннего кода в index-файл некоторые элементы на сайте могут съехать или отображаться некорректно. Это тоже придется исправить после создания темы, правда, процесс исправления не должен занять много времени.