Посадка сайта на вордпресс
Обновлено: 05.10.2024
HTML-сайты хороши своим быстродействием и чистотой кода. Их интересно использовать при небольшом объёме материалов и статических страниц в тех случаях, когда проект не требует частого внесения изменений и обновления контента. Панели управления в них нет, веб-страницы необходимо редактировать через код, а потом обновлять на хостинге, что очень неудобно. Вполне понятно желание перенести такой сайт на WordPress – популярную систему с удобной админкой, огромным выбором плагинов и шаблонов.
Использование CMS значительно повышает эффективность работы администратора сайта. Особенно в условиях необходимости его масштабирования. Также расширяются возможности по SEO-оптимизации и доработке функциональности. Перенос работающего HTML-сайта на WordPress – распространённая задача, она решается алгоритмами, отточенными многолетним опытом тысяч разработчиков.
Мы покажем шаги, необходимые для успешной миграции HTML-сайта на CMS WordPress. Все их можно выполнить самостоятельно.
Подготовка, общая информация
Суть задачи по переносу сводится к конвертации статических HTML-страниц в формат, подходящий для WordPress, также использующий, помимо HTML/CSS, и PHP-код. То есть один в один перенести код без оптимизации под CMS не получится, он не будет работать.
Далее появляется развилка. Если для вас важно сохранение текущего дизайна сайта (есть хороший трафик, оформление привычно и узнаваемо среди аудитории), то придётся немного повозиться с подгонкой текущего дизайна под формат WP без изменений. Для этого можно использовать плагины (о них дальше).
Также вы можете вручную собрать аналогичный шаблон для WordPress, но этот вариант для новичков неприемлем – он требует навыков опытного разработчика, скорее всего, придётся заказывать эту работу у специалиста. Придётся дополнительно вложиться, зато получите качественный результат.
Если же вы можете позволить себе изменить дизайн без особого ущерба для дела, то можно просто взять более-менее похожий (или совершенно не похожий) шаблон для WP, скопировать материалы (вручную или плагинами), добавить соответствующие формы, коммуникации и прочее из того, что было на оригинальном сайте, и получить сайт с прежним контентом, прошедший редизайн. Это более простой в реализации вариант.
Изначально нужно проанализировать, что из функциональности задействовано на HTML-сайте и подыскать соответствующие плагины либо встроенные инструменты, которые смогут их воспроизвести на WP. Сразу отметим, что это будет несложно, у CMS куча возможностей – там всё есть. Составьте чеклист из необходимого, и вы без труда это найдёте – лишь бы ничего не упустили. И не забудьте сделать бэкап текущей версии HTML-сайта.
Шаг 1 – выбираем хостинг, устанавливаем WordPress и создаём базу данных
По всему миру разбросано 118 дата-центров, штаб-квартира расположена в американском штате Юта. Серверы для управления всей этой империей там занимают около 5 000 квадратных метров. Всё работает на SSD-дисках, пространства выделяют много, даже на минимальном тарифе для сайтов WordPress ($2.63/мес) его 50 Гб.
Провайдер славится надёжностью, абузоустойчивостью – ваш сайт никогда не закроют просто так лишь потому, что кто-то из конкурентов подал липовую или даже обоснованную чем- то жалобу. Серверы хостинга работают в облаке, используется технология CDN, так что их расположение не влияет на скорость работы сайтов в рунете – она стабильно высокая. Зарубежное происхождение в случае с Bluehost выступает в чистом виде плюсом, опасаться этого фактора нет оснований.
Bluehost предоставляет круглосуточную техподдержку, дарит домен на первый год (если потребуется его регистрация), бесплатный SSL, а также обеспечивает 100% манибек в течении 30 дней. Для оптимизированного WP-хостинга вы также получите автоматические установку и обновление до новых версий, доступ к Microsoft Office 365, доменную почту, сотни бесплатных шаблонов, а также удобную и мощную панель управления.
Шаг 2 – работа с дизайном
В зависимости от выбранного пути – подбора похожей темы, использования плагина для переноса существующей либо её ручной адаптации к использованию в связке с WP, открывается 3 различных алгоритма действий. Опишем их в общих чертах.
Выбор нового шаблона
Конвертация HTML-шаблона
Тут вам помогут сторонние веб-сервисы вроде Theme Matсher, способные обработать и сгенерировать подходящий для WP дизайн на основе HTML-темы. Просто введите название текущего домена, и сервис преобразует файлы темы в формат для WP. Потом вы их просто скачаете и установите через панель управления как новый шаблон. Обычно результат получается хорошим, но могут потребоваться доработки. Это оптимальный вариант для тех, кто желает сохранить дизайн (по крайней мере, основные его элементы), но не владеет продвинутыми навыками кодинга.
Ручная адаптация шаблона под WP
Темы для WordPress состоят из нескольких файлов – style.css, index.php, header.php, sidebar.php и footer.php. Нужно создать пустые заготовки под них, а потом ковырять HTML-шаблон, выбирая из него необходимые элементы (стили и HTML-структуру) и вставляя их в нужные файлы будущего шаблона WP. Также потребуется добавление элементов синтаксиса CMS в различные области для того, чтобы тема оформления была принята системой. Это работа для специалиста, новичкам она не под силу, поэтому даже не будем подробно описывать процесс.
Шаг 3 – перенос контента
На этом этапе снова появляется развилка – ручной перенос контента либо автоматизированный при помощи плагина.
Перенос материалов вручную
Если у вас немного контента, лучше использовать этот вариант. Для этого необходимо скопировать HTML-код материалов в редактор, создав предварительно соответствующие статические страницы под это дело. Копируем только код, заключенный в теги
Как бы сильно не казалось, что адаптация HTML под WP это что-то страшное и сложное, мы будем создавать тему на WordPress за 10 минут. На самом деле всё очень даже легко и никаких магических способностей в этом деле не потребуется.
Всё что нужно это готовый HTML шаблон на руках. Бесплатный шаблон можно скачать здесь. Также потребуется развернуть чистый WordPress на хостинге. Далее работаем по инструкции:
Заходим в админ. панель WordPress
Копируем в новоиспеченную директорию файлы своего шаблона и создаем дополнительно файлы header.php и footer.php. Теперь пора вдохнуть жизнь, ну или динамику в нашу тему.
В корне нашей темы создаем папку framework-customizations в ней подпапку theme, а в ней ещё одну подпапку options. Уже в папке options создаем файлик settings.php. Вписываем в этот файл вот такой php код:
В файле header.php можно вывести логотип вот таким образом:
Создаем в корневой директории темы файлик functions.php и регистрируем наше меню. Заодно пропишем поддержку картинок у статей. Пропишем ширину и высоту постов, которые должны сохраняться при добавлении новой темы.
Вывод списка категорий на WordPress:
Вывод даты публикации на WordPress:
Сохраняем работу и идём в админку. Добавляем парочку пунктов меню и 2-3 статейки, чтобы посмотреть, что у нас получилось уже на реальных данных. При этом всём мы уже почти закончили со всей темой. Она уже выводит статьи, уже позволяет ставить плагины и может похвастаться настройкой логотипа в шапке из админки, а также своим меню. Осталось совсем немного, а именно подрубить footer и сделать страницу просмотра всей статьи.
Создаем файл single.php для страницы самой статьи и адаптируем его, таким образом, как и все прошлые.
На этом всё! У нас получилась готовая тема. Точно таким же образом делают огромные и многофункциональные темы для WordPress, которые потом продают.
Благодаря данному коду на страницу выведутся все посты с заголовками, датой публикации, тегами, комментариями. Кроме того, выводится постраничная навигация, если посты не поместились на одной странице.
Добавление виджетов в сайдбар
Создание динамического вертикального меню
Нижняя часть сайта может быть реализована в качестве виджетов, что позволит изменять их содержание из админ-панели.
3. В ПУ теперь можно настроить этот виджет и оформить нижнюю часть по своему усмотрению.
Закончив верстку на WordPress, вебмастер получает полностью динамический шаблон, сохранивший первоначальный внешний вид.
Автонаполняемый сайт на WordPress
После создания ресурса необходимо наполнить его контентом, который будет раскрывать тематику и заинтересовывать посетителей. Требуется постоянная периодическая публикация нового материала, новых статей.
Обновление информации самостоятельно занимает немало времени, поэтому иногда целесообразно настроить и запустить автонаполнение сайта.
Автоматически наполняемый ресурс на WordPress получает новые статьи за счет перепубликации информации с других ресурсов.
Если происходит размещение чужого контента на сайте, то следует указывать ссылку, чтобы автор не подавал в суд за нарушение его прав.
Как сделать автонаполняемый сайт
Самонаполняемый сайт с помощью плагинов обнаруживает и притягивает релевантные статьи с других ресурсов, используя RSS.
Для этих целей служат плагины-грабберы: FeedWordPress, Syndicate Out, SyndicatePress, CyberSyn, WP RSS Aggregator.
Принцип действия у плагинов практически идентичный. Граббер отбирает в соответствии с фильтрами подходящую по теме информацию и загружает на сайт в настроенное время. На автомате безнаказанно можно размещать 5-20 публикаций в день.
Чтобы хоть немного уникализировать новый контент применяется синонимайзер, который по возможности заменит слова на синонимы. В результате их работы тексты становятся уникальными, но немного страдает качество слога и смысловая суть. Unikalizator – лучший, но платный синонимайзер.
Поисковые роботы не приветствуют плагиат на просторах интернета, поэтому автопополнение следует применять осторожно.
Автонаполнение уникальными статьями сайта WordPress
Создание уникальных текстов требует времени и усилий, но их можно купить на специализированных биржах. Более того, портал TextSale предоставляет программу, которая может автоматически покупать релевантные статьи и публиковать их на сайте.
От владельца ресурса требуется только настроить процесс, указав группу ключевых словоформ и периодичность покупки, и пополнять баланс аккаунта на TextSale. Благодаря уникальному контенту сайт будет благополучно развиваться.
Заключение
Многие пользователи сети постепенно начинают настраивать заработок с ее помощью. Создание собственного интернет-ресурса и его сопровождение непременно приведут к построению своей аудитории и естественного заработка благодаря ее заинтересованности в предложениях, опубликованных на страницах сайта.
Имеются сверстанные 8 страниц с Bootstrap, версталось изначально не под WP , то есть просто CSS , JPG , JS и HTML файлики для каждой страницы. Мне нужно интегрировать все это на вордпресс с возможностью редактирования хотя бы текстового контента из админки.
Я посмотрел несколько статей и видеотуториалов, везде из готовой верстки делается новый шаблон для WP , вопрос чисто для понимания происходящего, можно ли взять тему-пустышку из underscore и грубо говоря распихать код из имеющихся HTML файлов по PHP файлам пустого шаблона ( header.php , footer.php , index.php , functions.php ), и если да, то нужно ли для каждой страницы создавать новый page.php ?
Если что то из написанного выше неправильно, то напишите пожалуйста краткий алгоритм посадки.
@ДмитрийГвоздь пожалуйста используйте обрамление кода ` только для кода. Не надо оборачивать все языки и технологии в эти метки.
еще такой вопрос, существуют ли какие то метки или теги в wp, в которые можно было бы обвернуть блок с текстом, который в последствии заказчик при желании может поменять в настройках темы или управление подобным контентом создается совсем по-другому?
2 ответа 2
Ответ просто для понимания :) да, можно взять тему-пустышку и раскидать код по файлам шапки, подвала и т. д. Трудности у вас могут возникнуть с навигационным меню, если вы захотите сделать его настраиваемым, а не жёстко зашить в код. Обычно меню, созданные с помощью всяких конструкторов типа бутстрапа, вызывают у новичков дикие сложности в процессе интеграции, будьте к этому готовы.
Для каждой страницы делать свой шаблон page-slug.php нужно только в том случае, если страницы не типовые и сильно различаются своей структурой. В противном случае одного шаблона будет достаточно.
В самом общем случае, если код шапки вы разместите в файле header.php , код подвала - в файле footer.php , код page.php будет выглядеть примерно следующим образом:
Всем привет! Сегодня рассмотрим такую сложную и интересную тему, как создание WordPress шаблонов (тем) и грамотную посадку готовой HTML верстки на WordPress. В качестве Theming-фреймворка будем использоваьть Unyson Framework. Особое внимание в уроке уделяется правильной работе с WordPress при посадке верстки шаблона на эту CMS. Ключевые моменты - генерация стартовой Underscores темы, создание кастомных шорткодов для билдера Unyson, работа с адаптивной сеткой, создание Theme Options (опции шаблона) различных типов, создание метабоксов в статьях, на страницах и в категориях, раширение функционала фреймворка, автоматическое подключение плагинов в WordPress посредством TGM.
Ресурсы урока:
Или скачать Unyson – Source code (zip) c GitHub (если первый вариант недоступен)
Интерфейс WordPress может отличаться, в зависимости от версии, но в целом, все интуитивно понятно, Unyson работает во всех версиях WordPress.
Если у вас установлена русскоязычная версия Unyson, то в списке расширений "Page Builder" - это "Конструктор страниц", "Sliders" - это "Слайдер", "Visual Page Builder" - теперь "Unyson Builder", "Layout Elements" - это "Элементы макета", "Content Elements" - это "Элементы контента".
Пример подключения нового CSS-файла с версией в последних релизах WordPress:
Читайте также: