Как натянуть сайт на wordpress подробная инструкция - RukovodstvoRus.ru - инструкции пользования и руководства

После создания сайта на 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» на код:

<html <?php language_attributes(); ?>>
<head>
<meta charset=»<?php bloginfo( ‘charset’ ); ?>»>
<meta name=»viewport» content=»width=device-width»>
<link rel=»profile» href=»http://gmpg.org/xfn/11″>
<link rel=»pingback» href=»<?php bloginfo( ‘pingback_url’ ); ?>»>
<link rel=»stylesheet» href=»<?php bloginfo(‘stylesheet_url’); ?>» type=»text/css» media=»screen» />
<title><?php bloginfo(‘name’); ?></title>
<?php wp_head(); ?>
</head>

Отредактировать «index.php» касательно header. Проверить, что в начале кода имеется оператор:

<?php get_header(); ?>

Если он отсутствует, то прописать его. Данный оператор активирует шапку сайта.
Заодно проверить, что в конце файла есть операторы:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

И если они отсутствуют, то прописать их. Последние два оператора активируют боковой бар и нижний отдел сайта.

После данных действий новая тема будет отображаться в ПУ и ее можно активировать. Но меню еще пока остается статичным и отображается только одна страница ресурса. Поэтому посадка верстки на WordPress будет продолжена.

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

В «header.php» участок кода с таблицей этого меню заменить на оператор:

<?php wp_nav_menu(‘menu=menu’); ?>

Чтобы меню отобразилось в ПУ сайта, перейти во «Внешний вид» — «Настроить» — «Меню», назвать созданное меню как «menu» или создать новое меню, если его все-таки еще нет, и присвоить название «menu».

Это обязательное имя нужно потому, что файл «header.php» с функцией «wp_nav_menu(‘menu=menu’);» активирует меню строго под именем «menu». Хотя оно при необходимости может заменяться другим, но должно совмещаться с указанным в настройках ПУ сайта и в «header.php».

Создание динамического названия и описания сайта

Имя сайта и его описание удобно изменять в админ-панели. Они должны восприниматься из настроек, для чего следует заменить часть кода, отвечающего за текст в шапке, на следующий набор кода:

<div id=»logo»>
<h1><a href=»#»><?php bloginfo(‘name’); ?></a></h1>
<h2><a href=»№» id=»metamorph»><?php bloginfo(‘description’); ?></a></h2>
</div>

На этом корректировка «header.php» заканчивается.

Адаптация index.php

Дальнейшая верстка шаблона для платформы WordPress касается публикации контента. Для корректного отображения всех имеющихся страниц в файле «index.php» необходимо изменить блок «right», но проще поменять весь код файла одним махом на следующий:

<?php get_header(); ?>
<!— Основной блок —>
<div id=»right»>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href=»<?php the_permalink() ?>»><?php the_title(); ?></a></h2>
<?php the_time(‘j’) ?> <?php the_time(‘M’) ?> <?php the_time(‘Y’) ?> / <?php the_tags(», ‘, ‘, »); ?> / <?php comments_popup_link(‘Комментариев 0’, ‘1 комментарий’, ‘Комментариев %’); ?>
<?php the_excerpt(); ?>
<?php endwhile; ?>

<?php else : ?>
<h1>А здесь нет ничего 🙁 404 </h1>
<?php endif; ?>

<?php if (function_exists(«emm_paginate»)) {
emm_paginate();
} ?>
</div>
<!— Конец основного блока —>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

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

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

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

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

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

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

<?php wp_nav_menu(‘menu=left_menu’); ?>

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

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

<!— Левая панель —>
<div id=»left»>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<?php endif; ?>
<h3>Меню</h3>
<?php wp_nav_menu(‘menu=left_menu’); ?>
</div>
<!— Конец левой панели —>

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

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

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

register_sidebar(array(
‘name’ => ‘foot’,
‘before_widget’ => »,
‘after_widget’ => »,
‘before_title’ => ‘<p>’,
‘after_title’ => ‘</p>’,
));

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

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

<php dynamic_sidebar(‘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 (у меня конечно же есть HTML разметка и таблица стилей CSS). Подскажите пожалуйста как это лучше всего сделать. Мне приходила в голову мысль, что можно разбить общий шаблон контента на плагины. Но опять же таки как это сделать, и где регистрировать эти плагины? Надеюсь на вашу помощь!

Вопрос задан

более трёх лет назад
102131 просмотр

Источник

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

Шаг 1: подготовьтесь
Шаг 2: напишите HTML и CSS
Шаг 3: загрузите код на сайт
Шаг 4: проверьте результат
Шаг 5: оптимизируйте сайт
Ошибки при нятежке верстки на WordPress
Основные функции PHP, которые нужно знать для натяжки верстки
В заключении

Шаг 1: подготовьтесь

Перед тем как начать натягивать верстку на WordPress, вам нужно подготовиться. Сначала вам нужно будет создать новую тему WordPress или найти уже существующую тему, которую вы хотите использовать. Если вы создаете свою собственную тему, то вам нужно будет создать файл style.css, в котором будет храниться ваш код CSS. Также вам будет нужно создать файл functions.php, в котором вы можете добавить некоторые функции, необходимые для работы темы. Если вы используете уже существующую тему, то вам нужно будет найти файлы style.css и functions.php и открыть их в редакторе кода.

Шаг 2: напишите HTML и CSS

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

Шаг 3: загрузите код на сайт

После того, как вы напишете код HTML и CSS, вам нужно будет загрузить его на сайт. Для этого вам нужно будет войти в административную панель WordPress, найти раздел “Внешний вид” и выбрать “Редактор”. Здесь вы увидите список файлов темы, включая файлы style.css и functions.php. Откройте файл style.css и вставьте туда свой код CSS. Также вы можете вставить код HTML в файл header.php, footer.php или другой файл, который отвечает за внешний вид сайта. После того, как вы вставите код, не забудьте сохранить изменения.

Шаг 4: проверьте результат

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

Шаг 5: оптимизируйте сайт

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

Ошибки при нятежке верстки на WordPress

Неправильное отображение сайта

Одной из самых распространенных ошибок, которые могут возникнуть при натягивании верстки на WordPress, является неправильное отображение сайта. Это может быть связано с неправильно написанным кодом HTML и CSS, несовместимостью темы с версией WordPress или другими проблемами. Чтобы исправить эту ошибку, нужно проверить код на наличие ошибок, убедиться, что тема совместима с текущей версией WordPress, а также проверить, что нет конфликтов с другими плагинами или темами.

Ошибка форматирования текста

Другой часто встречающейся ошибкой является неправильное отображение форматирования текста. Это может быть связано с неправильно написанным кодом CSS, который не учитывает специфику разных браузеров. Чтобы исправить эту ошибку, нужно проверить код CSS на соответствие стандартам, а также убедиться, что он совместим с разными браузерами. Вы можете использовать сервисы, такие как Can I Use, чтобы узнать, какие свойства CSS поддерживаются разными браузерами.

Ошибки изображений

Еще одной проблемой, с которой можете столкнуться при натяжке верстки на WordPress, является неправильное отображение изображений. Это может быть связано с неправильно указанными путями к изображениям в коде HTML или с несовместимостью изображений с текущей темой. Чтобы исправить эту ошибку, нужно проверить код HTML на наличие неправильно указанных путей к изображениям, а также убедиться, что изображения совместимы с текущей темой.

Основные функции PHP, которые нужно знать для натяжки верстки

PHP является языком программирования, который широко используется для разработки веб-приложений, в том числе и для создания сайта на WordPress. Если вы хотите натянуть верстку на WordPress, то стоит ознакомиться с основными функциями PHP, которые нужно знать для этого.

Одной из самых важных функций PHP является функция echo. Она используется для вывода строки или переменной на экран. Например, чтобы вывести строку “Hello, World!” на экран, вы можете использовать следующий код:

echo "Hello, World!";

Другой важной функцией PHP является include или require. Они используются для включения файла в текущую страницу. Это может быть полезно, например, если у вас есть общий шаблон для всех страниц сайта, который хотите использовать на каждой странице. Чтобы включить файл с именем header.php, вы можете использовать следующий код:

Другой важной функцией PHP является if. Она используется для условного выполнения кода. Например, чтобы вывести строку “It’s raining” только в том случае, если переменная $isRaining равна true, вы можете использовать следующий код:

if ($isRaining) {
echo "It's raining";
}

Другой важной функцией PHP является foreach. Она используется для итерации по массиву и выполнения определенного кода для каждого элемента массива. Например, чтобы вывести на экран список элементов массива $items, вы можете использовать следующий код:

foreach ($items as $item) {
echo $item . "<br>";
}

Еще одной полезной функцией PHP, которую стоит знать при натяжке верстки на WordPress, является wp_head. Она вызывается в шапке сайта и используется для вывода мета-тегов, стилей и скриптов, необходимых для работы WordPress. Например, чтобы вывести стили, вы можете использовать следующий код:

wp_head();

Эти функции являются лишь небольшим примером того, какие функции PHP могут быть полезны для натяжки верстки на WordPress. Стоит также ознакомиться с функциями, такими как while, do while, switch, array, isset, unset, empty, и многими другими, чтобы получить более полное представление о возможностях PHP и о том, как их можно использовать в своей работе. Обратите внимание, что некоторые из этих функций могут быть устаревшими и не рекомендуется использовать их в новых проектах. Поэтому стоит следить за актуальностью технологий и иногда обновлять свои знания.

Где искать информацию по PHP

Документация PHP может быть найдена на официальном сайте PHP: https://www.php.net/manual/ru/index.php. На сайте вы можете найти информацию обо всех функциях PHP, а также узнать, как их использовать в своей работе. Также на сайте есть раздел с примерами кода, которые можно использовать в своих проектах. Рекомендуется ознакомиться с документацией PHP, чтобы получить более полное представление о возможностях языка и узнать, как их можно использовать в своей работе.

В заключении

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

Источник

10 июня 2018, 11:08

Alex

WordPress

0

49210

0

Как бы сильно не казалось, что адаптация HTML под WP это что-то страшное и сложное, мы будем создавать тему на WordPress за 10 минут.
На самом деле всё очень даже легко и никаких магических способностей в этом деле не потребуется.

Всё что нужно это готовый HTML шаблон на руках. Бесплатный шаблон можно скачать здесь. Также потребуется развернуть чистый WordPress на хостинге. Далее работаем по инструкции:

Заходим в админ. панель WordPress

Заходим в раздел «Плагины» ➜ «Добавить новый» ➜ Находим плагин «Unyson» ➜ Жмем кнопку «Установить» ➜ Активируем плагин.
Он нам пригодится в первую очередь для создания страницы настроек нашего шаблона, чтобы админ сайта мог выбрать логотип, название сайта и т.д.

Дальше временно перенесемся на локалку, просто потому, что так быстрее. Заходим в папку wp-content ➜ themes и создаем папку с названием нашей новой темы «truestory»

Копируем в новоиспеченную директорию файлы своего шаблона и создаем дополнительно файлы header.php и footer.php. Теперь пора вдохнуть жизнь, ну или динамику в нашу тему.

header

Открываем файл 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:

echo '';
	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

Поделиться с друзьями

Источник

В начале (Интернета) все веб-сайты были созданы только с текстом и статическим HTML кодом. Теперь, спустя более 20 лет, Интернет стал совсем другим. Веб-сайты стали намного сложнее. Они обеспечивают более богатые и приятные впечатления как для создателей сайтов, так и для посетителей.

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

Вот почему таким заядлым пользователям WordPress, как я, почти трудно поверить, что в 2023 году кто-то все еще может управлять статическим веб-сайтом HTML вместо сайта на WordPress с темой и плагинами. Но факт в том, что все еще существует значительное количество активных сайтов только на HTML либо HTML с небольшим количеством CSS.

Конечно, у этих владельцев сайтов могут быть веские причины не выполнять обновление или преобразование. Может быть, содержание их сайта никогда не меняется, а простое форматирование и дизайн, которые уже есть, можно использовать. Или, может быть, это меньше хлопот, чем беспокоиться об обновлении сайта WordPress. Оба варианта являются уважительными причинами. Яркие примеры: «Не ремонтируйте то, что не сломано».

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

Как это часто бывает с WordPress, есть несколько способов решить эту проблему. Ниже я собрал несколько вариантов.

Содержание

Варианты преобразований статический HTML сайт в WordPress
Подготовка: перенос HTML на WordPress
Перенос статического HTML-сайта в WordPress вручную
Шаг 1. Создайте новую папку темы и необходимые файлы
Шаг 2. Скопируйте существующий CSS в файл style.css
Шаг 3. Разделите HTML-код
Шаг 4. Завершите работу над файлом Index.php
Шаг 5: Загрузите новую тему
Использование готовой темы WordPress и импорт HTML-содержимого
Вывод

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

Есть три основных варианта как перенести HTML сайт на WordPress:

Вручную — создайте тему WordPress на основе вашего текущего статического HTML-сайта. Для этого вам потребуется войти в свой код. Вам нужно будет получить доступ к текущему каталогу сайта через FTP и использовать существующий код в качестве отправной точки. Оттуда вам нужно будет создать необходимые файлы для темы WordPress и скопировать фрагменты кода из кодекса WordPress. Это довольно просто и понятно, если у вас есть некоторый опыт работы с HTML, CSS и немного PHP.
Установить готовую тему и просто перенесите свой контент. Это, наверное, лучший вариант на стыке простоты и стоимости. Предполагая, что у вас уже есть хостинг для вашего текущего веб-сайта, вам нужно будет потратить деньги, только если вы решите приобрести премиальную тему. Плагин, который мы будем использовать для импорта контента, находится в свободном доступе в официальном репозитории плагинов WordPress.
Олатить услугу преобразования HTML в WordPress, чтобы пересоздать ваш сайт. Это самое простое решение, так как оно не требует от вас особых действий. Однако это не поможет вам познакомиться с WordPress, и стоимость будет варьироваться в зависимости от того, кого вы решите нанять. Я не буду описывать этот вариант в следующих разделах, потому что, если это интересующий вас маршрут, вы можете просто выполнить быстрый поиск поставщиков услуг, и они позаботятся обо всем остальном.

Заказать у специалиста: Перенос html сайта на WordPress

Подготовка: перенос HTML на WordPress

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

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

После того, как вы выбрали, вам нужно будет установить WordPress и войти в WP Admin. Это точка, в которой наши два возможных пути расходятся.

Перенос статического HTML-сайта в WordPress вручную

Если ваша цель — не только перенести контент со статического HTML-сайта в WordPress, но и продублировать ваш текущий дизайн, это означает, что вам нужно будет создать свою собственную тему. К счастью, это не так страшно, как может показаться сначала. Для этого нужно всего лишь создать несколько папок и файлов, немного скопировать и вставить, а затем загрузить результат.

Вам понадобится редактор кода, такой как Sublime или Notepad ++, и доступ как к каталогу вашего HTML-сайта, так и к каталогу вашей новой установки WordPress.

Шаг 1. Создайте новую папку темы и необходимые файлы

На рабочем столе создайте новую папку для хранения файлов вашей темы. Назовите его, как хотите, например myTheme.

Затем создайте несколько файлов (все они будут в папке новой темы) в редакторе кода. Пока ничего с ними не делайте. Просто оставьте их открытыми для дальнейшего редактирования.

Style.css
Index.php
header.php
sidebar.php
footer.php

Шаг 2. Скопируйте существующий CSS в файл style.css

Если вы хотите продублировать дизайн, это, вероятно, означает, что у вас есть хотя бы какой-то CSS, который вы хотите сохранить. Итак, первый файл, который вы захотите отредактировать, — это ваш файл Style.css.

Для начала добавьте следующее в начало файла.

Theme Name: Замените на имя вашей темы

Theme URI: URL вашей темы (сайта)

Description: Краткое описание темы

Version: 1.0

Author: Ваше имя

Author URI: Ссылка на ваш соц. аккаунт или сайт.

После этого раздела просто вставьте существующий CSS ниже. Сохраните и закройте файл.

Шаг 3. Разделите HTML-код

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

Поэтому, когда я говорю, что мы собираемся «разрезать» ваш существующий HTML, на самом деле мы просто вырезаем и вставляем части вашего существующего кода в различные файлы, которые мы только что создали, чтобы WordPress знал, где отображать их. Вот так.

Сначала откройте файл index.html вашего текущего сайта . Выделите все, от начала файла до открывающего тега div class = «main». Обычно с этого тега начинается контент сайта. Скопируйте и вставьте этот раздел в свой файл header.php, сохраните и закройте.

Во-вторых, вернитесь к вашему файлу index.html. Выделите содержимое боковой колонки, начинающая с элемента aside class = ”sidebar” и все, что внутри него. Скопируйте и вставьте этот раздел в свой файл sidebar.php, сохраните и закройте.

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

Наконец, в файле index.html выберите все, что осталось — это должен быть раздел основного содержимого. Вставьте его в файл index.php. Сохраните, но пока не закрывайте.

Файл index.html можете закрыть и перейти к последним шагам. Почти готово!

Шаг 4. Завершите работу над файлом Index.php

Чтобы завершить работу над файлом index.php вашей новой темы, вам необходимо убедиться, что он может вызывать другой раздел (помимо основного содержимого), который находится в других созданных вами файлах. Или, другими словами, собрать элементы, которые мы только что «порубили».

В самом верху файла index.php поместите следующую строку php кода.

<?php get_header(); ?>

Затем в самом низу файла index.php поместите эти строки.

<?php get_sidebar(); ?>

<?php get_footer(); ?>

И наконец, мы должны добавить то, что называется The Loop. Это основной бит php, который WordPress использует для отображения содержимого вашего сообщения посетителям. Итак, последний шаг в создании файла index.php вашей новой темы — это добавление приведенного ниже кода в раздел содержимого.

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<h2><a href=«<?php the_permalink(); ?>« rel=«bookmark» title=«Permanent Link to <?php the_title_attribute(); ?>«><?php the_title(); ?></a></h2>

</div><!—end post header—>

<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail(); ?>

<?php the_content(); ?>

<?php edit_post_link(); ?>

<?php wp_link_pages(); ?> </div>

<!—end entry—>

</div><!—end post footer—>

</div><!—end post—>

<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>

</div><!—end navigation—>

<?php else : ?>

<?php endif; ?>

Сохраните ваш index.php и закройте. Ваша тема готова! Осталось только загрузить его на сайт с установкой WordPress.

Шаг 5: Загрузите новую тему

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

Поместите новую папку с темой в /wp-content/themes/. Затем вернитесь к WP Admin> Внешний вид> Темы, и ваша вновь созданная тема должна появиться там. Активируйте её!

Все, что осталось сделать на этом этапе, — это заполнить ваш новый веб-сайт WordPress содержимым вашего старого сайта. Следуйте инструкциям в разделе ниже (пропуская часть об использовании готовой темы), чтобы увидеть, как это делается.

Использование готовой темы WordPress и импорт HTML-содержимого

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

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

После того, как вы выбрали понравившуюся тему и скачали ее заархивированный пакет файлов, вам нужно перейти в WP Admin> Внешний вид> Темы> Добавить новую и активировать выбранную тему WordPress.

Как только это будет сделано, у вас будет новый веб-сайт и тема WordPress — но больше ничего. Когда вы просматриваете свой сайт, он будет пустым и, вероятно, будет выглядеть скучно. Это нормально, потому что теперь мы собираемся импортировать контент вашего старого сайта.

В WP Admin перейдите в Плагины> Добавить новый и найдите плагин под названием HTML Import 2 от Stephanie Leary. После того, как этот плагин установлен и активирован, следуйте его удобному руководству пользователя, чтобы импортировать весь каталог HTML-страниц. В комплекте с изображениями!

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

Вывод

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

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

Если вы «поймали ошибку WordPress», то официальный веб-сайт WordPress.org полон полезных тем, плагинов и других ресурсов. Если вы хотите дополнительно настроить файлы тем, изучите Кодекс, чтобы получить лучшие советы, приемы и варианты.

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

Источник