К основному контенту

Легко конвертируйте HTML в WordPress

Компьютерное кодирование для веб-разработки

WordPress в настоящее время поддерживает 50 процентов всех веб-сайтов, присутствующих сегодня в Интернете. Как владелец веб-сайта, вы также захотите перейти на WordPress со своего статического HTML-сайта.

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

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

Создание папки темы

Вы должны начать с создания папки темы на рабочем столе с вашим именем. Наша папка называется my-theme. Выберите один из следующих вариантов;

  • Стиль.css
  • индекс.php
  • Заголовок.php
  • боковая панель.php
  • нижний колонтитул.php

Изменение CSS для сайта

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

/*

Название темы: Моя тема

Автор: Kipkugler

URI автора: https://programmers.io/tutorials/author/Kipkugler

Описание: Тема разработки, от статического HTML до WordPress

Версия: 1.0

Лицензия: GNU General Public License v2 или более поздняя версия

URI лицензии: http://www.gnu.org/licenses/gpl-2.0.html

*/

Разделите HTML-код веб-сайта

WordPress основан на PHP, поэтому вам придется разделить HTML. Ниже должен появиться код с различными кодами для изменения стилей веб-сайта:

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Writer and Instructor | RACHEL McCOLLIN</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">
</head>
<body>
<div class="header-bg">
<header role="banner">
<hgroup class="site-name three-quarters left">
<!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
<h1 id="site-title" class="one-half-left">
<a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a>
</h1>
<h2 id="site-description">Fiction and Technical Writer</h2>
</hgroup>
<div class="right quarter">
<a class="toggle-nav" href="#">☰</a>
</div> <!-- .right quarter -->
</header><!-- header -->
</div><!-- header-bg-->
<!-- full width navigation menu -->
<nav class="menu main">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="main-nav">
<ul class="menu">
<li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li>
</ul>
</div> 
</nav><!-- .main -->
<div class="main">
<div id="content" class="two-thirds left">
<article class="post">
<h2 class="entry-title">Welcome to This Website</h2>
<section class="entry-content">
<p>This site is comprised of one static HTML file.</p>
<p>You will be able to add more content later via the WordPress admin screens.
<h3>Here's a heading so you can check how it's styled</h3>
<p>And another paragraph underneath.</p>
<p>And a list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>And so on...</li>
</ul>
</section><!-- .entry-content -->
</article><!-- #post-## -->
</div><!-- #content -->
<aside class="sidebar one-third right">
<aside class="widget-area">
<div class="widget-container">
<h3 class="widget-title">Buy My Book</h3>
<img width="242" height="300" src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/snapshot-hero@2x.png?v=1" alt="WordPress: Pushing the Limits by Rachel McCollin" style="max-width: 100%; height: auto;" />
<p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
</div>
</aside>
</aside>
</div><!-- .main -->
<footer>
<div class="fatfooter">
<p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
</div>
</footer>
</body>
</html>

Header File 

<!DOCTYPE html>
<!--[if lt IE 7]><html lang="en-US" class="ie6"><![endif]-->
<!--[if IE 7]><html lang="en-US" class="ie7"><![endif]-->
<!--[if IE 8]><html lang="en-US" class="ie8"><![endif]-->
<!--[if IE 9]><html lang="en-US" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en-US"><![endif]-->
<!--[if !IE]><html lang="en-US"><![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>WordPress Writer and Instructor | RACHEL McCOLLIN</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Assistant|Oswald" rel="stylesheet">
<?php wp_head();?>
</head>
<body>
<div class="header-bg">
<header role="banner">
<hgroup class="site-name three-quarters left">
<!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
<h1 id="site-title" class="one-half-left">
<a href="https://rachelmccollin.com/" title="RACHEL McCOLLIN" rel="home">RACHEL McCOLLIN</a>
</h1>
<h2 id="site-description">Fiction and Technical Writer</h2>
</hgroup>
<div class="right quarter">
<a class="toggle-nav" href="#">☰</a>
</div> <!-- .right quarter -->
</header><!-- header -->
</div><!-- header-bg-->
<!-- full width navigation menu -->
<nav class="menu main">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="main-nav">
<ul class="menu">
<li class="menu-item"><a href="https://rachelmccollin.com/">Home</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/about-me/">About Me</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/books/">Books</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/bookclub/">Book Club</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/blog/">Blog</a></li>
<li class="menu-item"><a href="https://rachelmccollin.com/contact/">Contact</a></li>
</ul>
</div> 
</nav><!-- .main -->

Sidebar

<aside class="sidebar one-third right">
<aside class="widget-area">
<div class="widget-container">
<h3 class="widget-title">Buy My Book</h3>
<img width="242" height="300" src="https://premium.wpmudev.org/wp-content/themes/wpmudev-2015-1/assets/img/projects/snapshot-hero@2x.png?v=1" alt="WordPress: Pushing the Limits by Rachel McCollin" style="max-width: 100%; height: auto;" />
<p><em>WordPress: Pushing the Limits</em> will help you become a professional WordPress developer.</p>
</div>
</aside>
</aside>

Footer.php

</div><!-- .main -->
<footer>
<div class="fatfooter">
<p>Add footer content here with <a href="#">widget areas</a> - the tutorials will show you how.</p>
</div>
</footer>
<?php wp_footer();?>
</body>
</html>

Загрузить тему в WordPress

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

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

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Опробование GPT4All в Arch Linux

Изображение
Итак, вы хотите запустить свой собственный GPT на своем компьютере? Да и я тоже. Таким образом, доступны некоторые модели LLaMA (если у вас видеокарта 24G) и другие способы сделать это, но GPT4All обещает быть другим решением. Я увидел этот твит и должен был его проверить. Так кто же запускает двоичный файл на своей машине из какого-то рандо в Интернете? Обычно не я. Тем не менее, Брайан Реммеле кажется законным парнем, и многие люди, которых я уважаю, следуют за ним. Поэтому я решил довериться ему и запустить это на своем ноутбуке. Возможно, нет. Если это так, запустите это на виртуальной машине или на Tails или что-то в этом роде. Вот еще немного информации о GPT4All . С их сайта: GPT4All Chat — это локально работающее приложение для чата с искусственным интеллектом, работающее на основе чат-бота GPT4All-J Apache 2 License. Модель работает на процессоре вашего компьютера, работает без подключения к Интернету и не отправляет данные чата на внешние серверы (если вы не согласитесь на...
Далее...

10 способов использовать генеративный ИИ для продвинутого SEO

 Искусственный интеллект может улучшить все аспекты ваших усилий по SEO. Вот 10 применений генеративного ИИ для SEO с использованием ChatGPT, Bing Chat и Claude. Генеративный искусственный интеллект совершает революцию в SEO, особенно для крупных веб-сайтов, имеющих дело со сложными техническими задачами. Откройте для себя 10 способов улучшить SEO с помощью инструментов генеративного искусственного интеллекта, таких как ChatGPT, Bing Chat и Claude от Anthropic. 1. Совершенствование информационной архитектуры Внутренняя структура ссылок, оптимизированная для покупательского пути клиента и поискового поведения, захватывает поисковый трафик в верхней и средней части воронки. Это также улучшает пользовательский опыт, повышая вовлеченность и конверсию. Генеративный ИИ может помочь организовать данные о запасах, контенте и спросе для создания оптимальной структуры внутренних ссылок. Структурирование инвентаря для SEO-дружественной таксономии Используйте генеративный ИИ для изучения текущ...
Далее...

Как настроить Atom как Python IDE?

Изображение
Atom — это мощный текстовый редактор с открытым исходным кодом, который можно использовать для создания и отладки программ Python. С помощью диспетчера пакетов Atom можно легко устанавливать и настраивать пакеты для расширенных функций, таких как подсветка синтаксиса, автозавершение кода и анализ кода. В этой статье мы обсудим, как настроить Atom в качестве Python IDE и воспользоваться его полезными функциями. Мы узнаем, как установить необходимые пакеты, настроить интерфейс и включить инструменты отладки в наш рабочий процесс. К концу этого руководства у вас будут все знания, необходимые для того, чтобы сделать Atom вашим текстовым редактором для разработки приложений Python для Atom ide. Давайте начнем! Что такое атом? Atom — это кроссплатформенный текстовый редактор с открытым исходным кодом, разработанный GitHub для разработчиков. Atom - это настольное приложение, основанное на веб-технологиях, построенное с использованием HTML, JavaScrip...
Далее...

Yandex.Metrika counter

☌