...
WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

Как создать тему WordPress с нуля: руководство для начинающих (2020)

326

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

WordPress – это широко используемая во всем мире система управления контентом (CMS) с открытым исходным кодом. В общей сложности 34,7% сайтов используют WordPress. Вы также можете выбрать эту платформу, чтобы создать сильное присутствие в Интернете и без особых усилий создать свой бизнес в Интернете с помощью мощного программного обеспечения для создания веб-сайтов WordPress. WordPress – очевидный выбор и самый простой для начала. И это основная причина, по которой каждый разработчик предлагает выбрать его в качестве основы для своего сайта. Однако, если вы все еще не уверены в том, что такое WordPress или CMS с открытым исходным кодом, то чтение этого руководства определенно прольет свет на ваши знания.

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

Как создать тему WordPress? Учебник для новичков

Дизайнеры и разработчики подсознательно относятся к темам на основе WordPress не по одной, а по нескольким причинам. Иногда какой-то клиент специально запрашивает сайт WordPress. И главная причина огромной популярности WordPress кроется в его простоте. По сути, это очень гибкая и мощная CMS. Следовательно, те, кто работает с любыми другими CMS, такими как Joomla, Drupal и т.д., Могут иногда захотеть перейти, например, с Joomla на WordPress или так далее. Итак, давайте теперь разберемся, почему людям так нравится эта платформа.

Каковы требования для создания темы WordPress?

1. Установка WordPress локально

Первым делом вам необходимо установить WordPress. Не волнуйтесь, научиться устанавливать WordPress – это не ракетостроение. Вы легко можете сделать это сами.

2. Процедура создания темы WordPress с нуля.

  • Руководство – создание темы WordPress с помощью кодирования
  • Автоматизировано – создание темы WordPress с помощью WordPress Theme Builder

Для темы WordPress все будет сделано только в каталоге wp_content. Просто создайте новую подпапку темы в папке wp_content → Themes. Предположим, вы назвали его «мифема».

Второе – определиться с оформлением темы. Здесь в руководстве показан базовый макет, состоящий из заголовка, основной области, нижнего колонтитула и боковой панели.

По сути, WordPress нужно всего 2 файла, т.е. style.css и index.php. Но для этого макета вам нужно 5 файлов, как показано ниже;

  • header.php – содержит код заголовочного раздела темы.
  • index.php – содержит код для основной области и указывает, куда будут включены другие файлы. Это основной файл темы.
  • sidebar.php – содержит информацию о боковой панели.
  • footer.php – обрабатывает нижний колонтитул.
  • style.css – отвечает за стилизацию вашей темы.
  • bootstrap.css – отдельный CSS-код не требуется; очень отзывчивый.
  • bootstrap.js – предоставляет собственные js для панели навигации, вкладок и т. д.

Вам необходимо скачать пакет Bootstrap. Файл Bootstrap.js и Bootstrap.cs необходимо скопировать в папку темы.

Как шаг за шагом создать собственную тему WordPress?

  1. Создание темы WordPress с нуля путем кодирования (вручную)

  2. Создайте тему WordPress с TemplateToaster (автоматически)

Вы можете создавать эти файлы локально с помощью текстового редактора, например Блокнота. Ниже приведены файлы, которые необходимо создать, чтобы начать работу.

Шаги по созданию темы WordPress с нуля путем кодирования

Шаг 1: файл header.php

Вам нужно поместить этот код в файл header.php.

<html>
<head>
<title>Tutorial theme</title>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery.js'; ?>">
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/jquery-ui.min.js'; ?>">
</script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri().'/js/bootstrap.js'; ?>">
</script>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>

<body>

<div id="ttr_header" class="jumbotron">
<h1>HEADER</h1>
</div>
<div class="container">

Этот файл Header.php содержит код для части заголовка, в которой связаны файлы js и style. Он отображает заголовок страницы.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

Эта строка, добавленная после заголовка, указывает WordPress загрузить файл style.css, который будет обрабатывать стили веб-сайта.

Вот,

<?php bloginfo('stylesheet_url'); ?>

– это функция WordPress, которая фактически загружает таблицу стилей.

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">

Здесь мы используем Bootstrap. Это один из хорошо известных фреймворков для адаптивного веб-дизайна. Он предоставляет встроенные файлы CSS для стилизации вашего сайта. Вы можете сохранить файл bootstrap.css в папке theme / css.

Затем добавляется «div» с классом ttr_header, и это будет основной контейнер веб-сайта. Теперь установите для него класс, чтобы вы могли изменить его через файл style.css.

После этого добавьте простую метку HEADER в «div id» с классом «ttr_header», который позже будет указан в классе «jumbotron».

Шаг 2: файл index.php

Основной файл index.php будет содержать следующий код;

<?php get_header(); ?>
<div id="ttr_main" class="row">
<div id="ttr_content" class="col-lg-8 col-sm-8 col-md-8 col-xs-12">

<div class="row">
<?php if (have_posts()): while (have_posts()): the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

Самая первая строка кода в этом файле

<?php get_header(); ?>

будет включать файл header.php и код в нем на главной странице.

<?php if (have_posts()): while (have_posts()): the_post(); ?>
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
</div>
<?php endwhile; else: ?>

Приведенный выше код отображает основное содержимое сообщения, созданного вами в административной области WordPress.
Затем добавьте файл sidebar.php, как показано ниже.

<?php get_sidebar(); ?>

В этом файле вы можете отображать свои недавние сообщения, архивы, контактную информацию и т.д.

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

Наконец, добавлена ​​последняя строчка

<?php get_footer(); ?>

который будет включать файл footer.php.

Шаг 3. Файл Sidebar.php

В sidebar.php добавьте следующий код

<div id="ttr_sidebar" class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<h2 ><?php _e('Categories'); ?></h2>
<ul > <?php wp_list_cats('sort_column=namonthly'); ?> </ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul > <?php wp_get_archives(); ?> </ul>
</div>

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

    ).

    Шаг 4: файл footer.php

    Добавьте следующие строки кода в файл footer.php:

<div id= "ttr_footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>

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

Шаг 5: файл style.css

Добавьте следующие строки в файл style.css

body
{
text-align: left;
}
#ttr_sidebar
{
border-left: 1px solid black;
}
#ttr_footer
{
width: 100%;
border-top: 1px #a2a2a2 solid;
text-align: center;
}
.title
{
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}

Этот файл CSS устанавливает базовый вид вашей темы. Это установит фон страницы и добавит границы в соответствии с вашими потребностями.

Ваша страница будет выглядеть примерно так:

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

Но для этого потребуется знание функций HTML, PHP и WordPress. Таким образом, лучшей альтернативой является использование мощного генератора тем WordPress, который не содержит ни одной строки кода. Да! Без кодирования! Программное обеспечение, которое позволяет вам создавать собственную тему WordPress с нуля без каких-либо знаний в области программирования.

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

Как создать тему WordPress с TemplateToaster?

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

Выполните следующие действия, чтобы создать тему WordPress и начать разработку темы WordPress

Шаг 1. Выберите платформу

Здесь вы можете выбрать CMS. Поскольку мы создаем тему WordPress, очевидным выбором для меня является WordPress.

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Теперь вы можете увидеть экран с двумя вариантами: «Использовать образцы шаблонов» и «Начать с нуля». Вы можете легко найти один подходящий шаблон для своего веб-сайта из множества бесплатных тем WordPress. Поскольку мы участвуем в разработке шаблонов WordPress, я выберу «Начать с нуля».

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Теперь вы увидите самое первое всплывающее окно, то есть для выбора цвета и типографики из заданных параметров. И нажмите кнопку ОК.

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Шаг 2. Создайте заголовок

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

Как создать тему WordPress с нуля: руководство для начинающих (2020)

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

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Теперь вы можете добавить в заголовок «Текстовую область» и «Социальные значки» и сделать его настолько интерактивным, насколько захотите.

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Заголовок готов.

Шаг 3. Создайте меню

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

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Вы также можете установить цвет фона, градиент или изображение в меню из опции «Фон».

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Теперь поместите логотип в меню из заданных параметров. Однако вы также можете создать собственный логотип.

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Теперь выберите «Свойства кнопки меню», а затем выровняйте кнопку, например, «Выравнивание» → «По горизонтали» → «Справа налево», и таким образом кнопки меню будут выровнены по правому краю страницы. 

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Вы также можете выбрать типографику для пунктов меню.

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Меню готово.

Шаг 4. Создайте и стилизуйте слайд-шоу

  • Теперь выберите вкладку «Слайд-шоу» на панели инструментов выше, и здесь вы можете выбрать один из вариантов, чтобы установить его функции.

Как создать тему WordPress с нуля: руководство для начинающих (2020)

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

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Шаг 5: отредактируйте контент (основная область)

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

Как создать тему WordPress с нуля: руководство для начинающих (2020)

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

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Если вы хотите добавить изображение, просто удалите содержимое из первого столбца с помощью вкладки «Редактор».

Вкладка «Редактор» → Изображение → Просмотреть изображение → Открыть → ОК

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Точно так же вы можете легко спроектировать остальные столбцы, как показано ниже.

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Шаг 6. Дизайн / настройка нижнего колонтитула

  • Теперь перейдите на вкладку Нижний колонтитул. Он отобразит множество вариантов дизайна нижнего колонтитула. Во-первых, установите фон для нижнего колонтитула. Вы также можете установить изображение в качестве фона из стоковых изображений или просмотреть собственное изображение.
  • Затем с помощью параметра «Ячейка нижнего колонтитула» установите количество строк, столбцов и ширину нижнего колонтитула. Как и здесь, выбраны 4 столбца в первой строке и всего 2 строки. Разместите значки социальных сетей там, где вы сочтете их подходящими.

Как создать тему WordPress с нуля: руководство для начинающих (2020)

  • Поместите контент и стилизуйте его с помощью параметров типографии. Вы также можете установить разные цвета шрифта в разных состояниях ссылок, таких как Active, Hover, Normal.
  • Точно так же вы можете стилизовать Designed by Text & Link во второй строке. Тем не менее, вы также можете в любое время выбрать отображение / скрытие этого флажка.
  • Окончательный вид нижнего колонтитула будет примерно таким. Таким образом, чтобы создать красивый дизайн, вам достаточно всего нескольких щелчков мыши.

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Итак, домашняя страница создана красиво. Точно так же вы можете создавать другие страницы своего сайта. Все, что вам нужно сделать, это щелкнуть значок «+» слева и добавить столько страниц, сколько хотите.

Как создать тему WordPress с нуля: руководство для начинающих (2020)

Однако, если вы хотите добавить дочернюю страницу для какой-либо конкретной страницы, вы также можете это сделать. И все, что вам нужно сделать, это нажать на многоточие (три точки), соответствующие имени страницы, при этом нужно щелкнуть правой кнопкой мыши на нужной странице и выбрать «Добавить дочернюю страницу». Что-то вроде показа виртуальной иерархии.

Имя страницы → ⋮ → Добавить дочернюю страницу

Здесь вы также можете увидеть другие параметры, например «Удалить», «Изменить» и «Клонировать». Вы можете использовать их для выполнения подходящих действий.

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

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

Какой метод вы используете для создания темы WordPress?

Итак, это подводит нас к концу этого подробного руководства. Я уверен, что это поможет вам создать собственную тему WordPress, а также объяснит основные аспекты создания темы WordPress с нуля. Создать тему WordPress довольно просто, и выбор CMS зависит от цели создания вашего сайта. Например, если вы собираетесь начать разработку веб-сайта электронной коммерции или хотите создать дочернюю тему в WordPress, или вы даже можете захотеть узнать, что это за тема WordPress, используется другой веб-сайт, или вы хотите начать разработку темы WordPress с помощью Bootstrap и т.д.. Перед тем, как выбрать тему WordPress, следует помнить об определенных вещах, потому что выбор лучшей темы WordPressэто не детская игра. Ознакомьтесь с лучшими темами WordPress и бесплатными темами WordPress.

Источник записи: https://blog.templatetoaster.com

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