Как создать тему WordPress с нуля: руководство для начинающих (2020).
Как создать тему WordPress с нуля: руководство для начинающих (2020).
Создать тему может быть очень просто, если вы знаете основы HTML, CSS и JavaScrip. Однако, если вы новичок в , все, что вам нужно сделать, это выполнить шаги, упомянутые в этом руководстве для начинающих. Я перечислил необходимые шаги и обсудил важные аспекты создания темы . Итак, давайте прочитаем это руководство и узнаем, как создать тему с нуля.
– это широко используемая во всем мире система управления контентом (CMS) с открытым исходным кодом. В общей сложности
Итак, без лишних слов, давайте начнем с пошагового создания темы .
Как создать тему ? Учебник для новичков
Дизайнеры и разработчики подсознательно относятся к темам на основе не по одной, а по нескольким причинам. Иногда какой-то клиент специально запрашивает сайт . И главная причина огромной популярности кроется в его простоте. По сути, это очень гибкая и мощная CMS. Следовательно, те, кто работает с любыми другими CMS, такими как Joomla, Drupal и т.д., Могут иногда захотеть перейти, например, с
Каковы требования для создания темы ?
1. Установка локально
Первым делом вам необходимо установить . Не волнуйтесь, научиться
2. Процедура создания темы с нуля.
- Руководство – создание темы с помощью кодирования
- Автоматизировано – создание темы с помощью
Для темы все будет сделано только в каталоге wp_content. Просто создайте новую подпапку темы в папке wp_content → Themes. Предположим, вы назвали его «мифема».
Второе – определиться с оформлением темы. Здесь в руководстве показан базовый макет, состоящий из заголовка, основной области, нижнего колонтитула и боковой панели.
По сути, нужно всего 2 файла, т.е. style.css и index.php. Но для этого макета вам нужно 5 файлов, как показано ниже;
- header.php – содержит код заголовочного раздела темы.
- index.php – содержит код для основной области и указывает, куда будут включены другие файлы. Это основной файл темы.
- sidebar.php – содержит информацию о боковой панели.
- footer.php – обрабатывает нижний колонтитул.
- style.css – отвечает за стилизацию вашей темы.
- bootstrap.css – отдельный CSS-код не требуется; очень отзывчивый.
- bootstrap.js – предоставляет собственные js для панели навигации, вкладок и т. д.
Вам необходимо скачать
Как шаг за шагом создать собственную тему ?
-
Создание темы с нуля путем кодирования (вручную)
-
Создайте тему с TemplateToaster (автоматически)
Вы можете создавать эти файлы локально с помощью текстового редактора, например Блокнота. Ниже приведены файлы, которые необходимо создать, чтобы начать работу.
Шаги по созданию темы с нуля путем кодирования
Шаг 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'); ?>">Эта строка, добавленная после заголовка, указывает загрузить файл style.css, который будет обрабатывать стили веб-сайта.
Вот,
<?php bloginfo('stylesheet_url'); ?>– это функция , которая фактически загружает таблицу стилей.
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/bootstrap.css'; ?>">Здесь мы используем Bootstrap. Это один из хорошо известных
Затем добавляется «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: ?>Приведенный выше код отображает основное содержимое сообщения, созданного вами в административной области .
Затем добавьте файл 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>В этом файле вызываются внутренние функции для отображения различных категорий и архивов сообщений. Функция возвращает их как элементы списка, поэтому вам нужно заключить фактические функции в несортированные списки (теги
- ).
Добавьте следующие строки кода в файл 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 и . Таким образом, лучшей альтернативой является использование мощного
Желая узнать об этом решении, я говорю о вашем собственном программном обеспечении для создания тем TemplateToaster. Он предоставляет множество фантастических функций с простым в использовании интерфейсом перетаскивания. Итак, не теряя ни минуты, давайте начнем разработку темы с нуля с TemplateToaster.
Как создать тему с TemplateToaster?
TemplateToaster довольно легко установить и вообще не требует программирования. Просто посетите веб-сайт и
Выполните следующие действия, чтобы создать тему и начать разработку темы
Шаг 1. Выберите платформу
Здесь вы можете выбрать CMS. Поскольку мы создаем тему , очевидным выбором для меня является .
Теперь вы можете увидеть экран с двумя вариантами: «Использовать образцы шаблонов» и «Начать с нуля». Вы можете легко найти один подходящий шаблон для своего веб-сайта из множества
Теперь вы увидите самое первое всплывающее окно, то есть для выбора цвета и типографики из заданных параметров. И нажмите кнопку ОК.
Шаг 2. Создайте заголовок
Здесь нужно выбрать ширину и высоту заголовка. Вы можете оставить ширину на полную ширину, равную ширине контейнера, также можно установить произвольную ширину.
Выберите для него цвет фона. Вы можете установить цвет, градиент или просмотреть изображение из встроенной галереи стоковых изображений или использовать собственное изображение.
Теперь вы можете добавить в заголовок «Текстовую область» и «Социальные значки» и сделать его настолько интерактивным, насколько захотите.
Заголовок готов.
Теперь пришло время разработать меню. Перейдите на вкладку меню и выберите ширину и высоту, которые вы хотите установить для своего меню, из соответствующих параметров.
Вы также можете установить цвет фона, градиент или изображение в меню из опции «Фон».
Теперь поместите логотип в меню из заданных параметров. Однако вы также можете создать собственный логотип.
Теперь выберите «Свойства кнопки меню», а затем выровняйте кнопку, например, «Выравнивание» → «По горизонтали» → «Справа налево», и таким образом кнопки меню будут выровнены по правому краю страницы.
Вы также можете выбрать типографику для пунктов меню.
Меню готово.
Шаг 4. Создайте и стилизуйте слайд-шоу
- Теперь выберите вкладку «Слайд-шоу» на панели инструментов выше, и здесь вы можете выбрать один из вариантов, чтобы установить его функции.
- Вы можете выбрать, какой цвет фона вы хотите для слайд-шоу, фонового изображения и т.д. Кроме того, примените такие свойства, как положение слайд-шоу, эффекты перехода, ширина, высота и текстовая область, чтобы сделать его настолько красивым, насколько вы хотите. А такие компоненты, как Slideshow, могут улучшить ваше взаимодействие в Интернете. И есть определенные
компоненты, которые лучшие разработчики включают в свои темы, чтобы сделать их яркими и привлекательными.
Шаг 5: отредактируйте контент (основная область)
Теперь идет основная область, т.е. область содержимого. Прежде всего, установите количество столбцов в одной строке.
Просто нажав на текст, вы сможете добавить контент на свой сайт. Однако вы можете использовать различные параметры, например, установить типографику, цвет шрифта, выравнивание текста, размер шрифта и т.д. И подготовить текст.
Если вы хотите добавить изображение, просто удалите содержимое из первого столбца с помощью вкладки «Редактор».
Вкладка «Редактор» → Изображение → Просмотреть изображение → Открыть → ОК
Точно так же вы можете легко спроектировать остальные столбцы, как показано ниже.
Шаг 6. Дизайн / настройка нижнего колонтитула
- Теперь перейдите на вкладку Нижний колонтитул. Он отобразит множество вариантов дизайна нижнего колонтитула. Во-первых, установите фон для нижнего колонтитула. Вы также можете установить изображение в качестве фона из стоковых изображений или просмотреть собственное изображение.
- Затем с помощью параметра «Ячейка нижнего колонтитула» установите количество строк, столбцов и ширину нижнего колонтитула. Как и здесь, выбраны 4 столбца в первой строке и всего 2 строки. Разместите значки социальных сетей там, где вы сочтете их подходящими.
- Поместите контент и стилизуйте его с помощью параметров типографии. Вы также можете установить разные цвета шрифта в разных состояниях ссылок, таких как Active, Hover, Normal.
- Точно так же вы можете стилизовать Designed by Text & Link во второй строке. Тем не менее, вы также можете в любое время выбрать отображение / скрытие этого флажка.
- Окончательный вид нижнего колонтитула будет примерно таким. Таким образом, чтобы создать красивый дизайн, вам достаточно всего нескольких щелчков мыши.
Итак, домашняя страница создана красиво. Точно так же вы можете создавать другие страницы своего сайта. Все, что вам нужно сделать, это щелкнуть значок «+» слева и добавить столько страниц, сколько хотите.
Однако, если вы хотите добавить дочернюю страницу для какой-либо конкретной страницы, вы также можете это сделать. И все, что вам нужно сделать, это нажать на многоточие (три точки), соответствующие имени страницы, при этом нужно щелкнуть правой кнопкой мыши на нужной странице и выбрать «Добавить дочернюю страницу». Что-то вроде показа виртуальной иерархии.
Имя страницы → ⋮ → Добавить дочернюю страницу
Здесь вы также можете увидеть другие параметры, например «Удалить», «Изменить» и «Клонировать». Вы можете использовать их для выполнения подходящих действий.
Ура!! Вы завершили процесс создания скретча формы темы . И вы можете зарабатывать
Какой метод вы используете для создания темы ?
Итак, это подводит нас к концу этого подробного руководства. Я уверен, что это поможет вам создать собственную тему , а также объяснит основные аспекты создания темы с нуля. Создать тему довольно просто, и выбор CMS зависит от цели создания вашего сайта. Например, если вы собираетесь начать
Источник записи:
