Разработка темы для wordpress с нуля

3 способ: Установка темы wordpress, с помощью загрузки файлов темы на хостинг.

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

1) Установка темы wordpress на локальный сервер: Для установки на сервер, необходимо папку темы скопировать в папку themes. Найти ее можно по следующему пути: C/Webservers/home/localhost/www/ваша папка с установленным движком wp/wp-content/themes. Копируем папку шаблона в папку themes и перезапускаем локальный сервер. После этого, идем в админку wordpress и во вкладке «управление темами», находим наш шаблон. И нажимаем «активировать». Шаблон для вордпресс на локальный сервер установлен.

2) Установка темы вордпресс на хостинг. Здесь зависит от вашего хостинга, который вы используете и ваших предпочтений. На хостинге, который я использую, можно загрузить в нужную папку архив и уже там его распаковать. И после этого, достаточно перейти в «управление темами» и активировать ее. Все очень просто. Но более распространенный способ — это воспользоваться FTP-клиентом, например FileZilla. Это бесплатный FTP-клиент для загрузки или скачивания с FTP-серверов.

Итак, для загрузки темы на хостинг, нужно запустить программу и в поля хост, имя пользователя, пароль и порт вписать ваши данные, предоставленные для работы с FTP, при покупке доменного имени. После заполнения всех необходимых полей нажимаем на кнопку «быстрое соединение». В правом окне, под названием «удаленный сайт» ищем папку themes. Она должна находится по следующему пути: Ваш домен.ru/public_html/wp-content/themes.

Открываем папку и сюда копируем папку с темой. Я, это делаю просто перетаскиванием. То есть, просто перетаскиваю папку с шаблоном в папку themes в правом окошке FTP-клиента.

После копирования, нужно перейти во вкладку «управление темами» и активировать тему.

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

Да, и не забываем постоянно себя развивать. Для ускорения вашего развития, я вам рекомендую видео курс: Все Технические Моменты Онлайн Бизнеса в Видеоформате, от известного автора видео курсов — Евгения Попова.

Template File Articles

General References

Stepping Into Templates 
Introduction to the building blocks of WordPress Themes, the template files. Explains how they work together to build a web page and how template files can be included in other template files.
Template Hierarchy 
Description of the order of preference of templates for the generation of various pages. Briefly lists the various templates that WordPress checks for in the process of generating a requested page on the weblog.
The Loop 
Description of the WordPress Loop, which is the part of a template file that generates the content
The Loop in Action 
More about the WordPress Loop
WP Query 
WP Query is a class that refers to the $wp_query object used in the WordPress Loop. There are times when you may have to interact with the WP Query, for instance when creating multiple Loops, or when dealing with Conditional_Tags.

Header, Footer, Sidebar, and Content Sections

Designing Headers 
Customizing the header.php template file.
Adding Post Feeds to the Header 
How to add RSS feed links to your header template file
Customizing Your Sidebar 
Customizing the sidebar.php template file.
Customizing the Read More 
Customizing the look of Read More links on your excerpts
Next and Previous Links 
Customizing the look of next/previous post/page links
Styling Page-Links 
How to break up single posts into multiple pages, and customize their links
Separating Categories 
Putting custom separators in the category list for your posts
Using Custom Fields 
How to add custom meta-data to your blog posts, and how to display it
Adding Asides 
How to add side notes to your blog posts
How to make comments come in a pop-up window

Archives, Categories, and Special Pages

Creating a Static Front Page 
How to make a static home page, or splash page, for your blog
Author Templates 
Customizing the author.php template file which showcases information about the author and their posts.
Category Templates 
All about defining and customizing templates for the various category archives for your blog.
Tag Templates 
All about defining and customizing templates for the various tag archives for your blog.
Alphabetizing Posts 
How to make a category page use alphabetical rather than chronological order
Creating an Archive Index 
Customizing the archives.php template file which showcases posts by date.
Pages 
Describes WordPress Pages, and the relationship between Templates and Pages feature.
Page Templates 
Describes the Template Hierarchy for Pages and Custom Page Templates.
Styling Theme Forms 
Describes how to make forms in your templates for comments, search, etc.
Creating a Search Page 
Customizing the search.php template file.
Creating an Error 404 Page 
Creating a template file Page to feature a customized Error 404 Page.
Displaying Posts Using a Custom Select Query
Modifying which posts are displayed on a page
External Resources

Creating Multiple Single Posts for Different Categories

Правильное подключение скриптов

Мы вывели скрипты прямо в шаблоне указав путь до них через функцию . Вы конечно можете оставить это и так. Я и сам так делал. Но по правилам WordPress скрипты должны подключаться через специальную функцию в файле functions.php. Давайте подключим их правильно. Делается это следующим образом:

function it-blog_style_frontend() {
 	wp_enqueue_style('bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.min.css');
	wp_enqueue_style('styles', get_stylesheet_directory_uri() . '/css/style.css');
}
 
add_action('wp_enqueue_scripts', 'it-blog_style_frontend');

function it-blog_include_myscript(){
	wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', '', '1.0', false);
 	wp_enqueue_script('bootstrap', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', '', '1.0', false);
}
 
add_action('wp_enqueue_scripts', 'it-blog_include_myscript');

Как вы можете заметить ещё я подключил файл style.css, в нём будут находится пользовательские CSS стили, которые рано или поздно вам понадобятся.

Template Tags Articles

Stepping Into Template Tags 
Introduction to the use of template tags in template files.
Template Tags 
The core set of functions used to draw information from the database and display it on the web. For example, the Content of a Post is displayed with the Template Tag the_content().
Anatomy of a Template Tag 
Understanding the structure, usage, and parameters of template tags used in template files.
Include Tags 
A document describing the tags that are available to include and use WordPress’ template files.
Conditional Tags 
These tags (always of the form is_*(), such as is_home()), report what sort of page is being displayed (e.g. the Main Page, a Category Archive, etc.) and can be used within a Template to control the Template’s output depending on what the tags report.
Query Posts Template Tag 
A description of the query_posts template tag, which is used to control which posts are displayed on a page. Query posts alters the main query that WordPress uses, and is therefore not recommended to display different posts than those that would normal show up at a specific URL. It is best to use pre_get_posts for any changes that need to be made to the main query.
Get Posts Template Tag 
A description of the get_posts tag, which is used to retrieve a list of posts matching criteria set through the tags parameters. This is the preferred method for quickly creating new criteria for your Loop, or to create a specific array of posts.

Добавляем API WordPress

Первым делом добавим в тему поддержку API WordPress, а так же выведем тайтл. В тег добавляем следующее:

<title><?php wp_title('|', true, 'right');?></title>

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

И ниже подключаем API. Код должен находится внутри тега :

<?php wp_head();?>

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

Далее нужно перед закрывающим тегом добавить следующий код:

<?php wp_footer();?>

Эта функция выведет панель инструментов WordPress вверху сайта.

Темы (шаблоны) для блога на WordPress

Для начала объясню, что такое шаблоны в WP. Да, понимаю, например, в Joomla принято называть шаблоном, но в Вордпресс немного иначе. Шаблон для WP – часть темы.

Это всё шаблоны, которые являются составляющей темы

Например, стрелками я отметил шаблоны подвала (footer.php), шапки (header.php), главной страницы (index.php). И в папке templates можно найти ещё под десяток шаблонов, способных кардинально изменить внешний вид сайта.

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

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

Во-вторых, блоговые темы для WordPress не всегда могут быть хорошо заточены под поисковую оптимизацию (SEO). Неопытному человеку такие мелочи заметить трудно, но придётся учиться. Давайте банальный пример.

Пример плохой поисковой оптимизации у блоговой темы для WP

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

К примеру, можно купить красивую тему, которая полностью на Ajax. А продвигать её станет очень трудно, ибо поисковые системы до сих пор с Ajax работают с треском.

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

Если решите покопаться самостоятельно, вот несколько моментов, на которые следует обратить внимание при выборе темы. В общем, рассказал в видео

Template Tags Articles

Stepping Into Template Tags 
Introduction to the use of template tags in template files.
Template Tags 
The core set of functions used to draw information from the database and display it on the web. For example, the Content of a Post is displayed with the Template Tag the_content().
Anatomy of a Template Tag 
Understanding the structure, usage, and parameters of template tags used in template files.
Include Tags 
A document describing the tags that are available to include and use WordPress’ template files.
Conditional Tags 
These tags (always of the form is_*(), such as is_home()), report what sort of page is being displayed (e.g. the Main Page, a Category Archive, etc.) and can be used within a Template to control the Template’s output depending on what the tags report.
Query Posts Template Tag 
A description of the query_posts template tag, which is used to control which posts are displayed on a page. Query posts alters the main query that WordPress uses, and is therefore not recommended to display different posts than those that would normal show up at a specific URL. It is best to use pre_get_posts for any changes that need to be made to the main query.
Get Posts Template Tag 
A description of the get_posts tag, which is used to retrieve a list of posts matching criteria set through the tags parameters. This is the preferred method for quickly creating new criteria for your Loop, or to create a specific array of posts.

single.php и page.php

Как я уже говорил single.php выводит запись, а page.php страницу. В нашем шаблоне эти страницы будут идентичные. Они похожи на другие шаблоны, в них так же подключается хедер и футер, но только без цикла WP:

<?php get_header();?>

<?while(have_posts()):
	the_post();?>
	<h1 class="my-4 page-title"><?wp_title();?></h1>
	<img class="img-fluid rounded" src="<?php echo get_the_post_thumbnail_url(null, 'full');?>" alt="<?the_title();?>">
	<p><small class="text-muted"><?the_time('j F Y');?> <?php the_tags('');?></small></p>
	<?the_content();?>
	<?php comments_template(); ?>
<?endwhile;?>

<?php get_footer();?>

Adv — шаблон Вордпресс для сайта рекламного агентства

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

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

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

Добавляем меню

Давайте изменим статичное меню из нашего шаблона так, чтобы его можно было редактировать из админки WordPress. Для начала регистрируем меню в файле functions.php:

register_nav_menus(array(
  'top'  => 'Верхнее меню', // идентификатор меню и название
));

Теперь в разделе Внешний вид → Меню добавляем пункты меню и сохраняем:


Добавление пунктов меню

Осталось вывести меню в шаблоне. Заменяем в файле header.php код нашего статичного меню следующей функцией с указанием идентификатора меню:

<?php wp_nav_menu('theme_location=top');?>

Более подробно о том, как сделать меню в WordPress читайте в этой статье.

HTML шаблон


Bootstrap v4 начальный шаблон

Для его работы понадобятся файлы bootstrap.min.css и bootstrap.min.js, которые мы соответственно добавляем в папки css и js нашей темы. Скачать их можно по кнопке Download source code на той же странице.

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/starter-template/">

    <!-- Bootstrap core CSS -->
    <link href="<?=get_template_directory_uri();?>/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="<?=get_template_directory_uri();?>/css/starter-template.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <main role="main" class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </main><!-- /.container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="<?=get_template_directory_uri();?>/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="<?=get_template_directory_uri();?>/js/vendor/popper.min.js"></script>
    <script src="<?=get_template_directory_uri();?>/js/bootstrap.min.js"></script>
  </body>
</html>

Если все сделано верно, то на главной странице сайта отобразится тема Bootstrap 4.

Требования к SEO шаблонам

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

  • Валидная микроразметка
  • Скорость больше 90% по pagespeed insights
  • H1-H6 заголовки только в контенте
  • Необязательно – семантическая разметка по стандартам HTML5
  • Скрипты в подвале
  • Нет цикличных ссылок (статья не ссылается сама на себя)
  • H1 на главной это название блога, на страницах постов H1 заголовок записи
  • В коде первым должен идти контент, а потом сайдбар и подвал
  • Скрытие внешних ссылок от индексации
  • Поддержка адаптивности всех элементов, например распространенная ошибка нет адаптации к роликам с youtube
  • Правильный код
  • Нет раздела SEO в самом шаблоне, грубейшее нарушение, потому что есть специальные плагины, а создатели тем зачастую далеки от продвижения
  • Наличие переводов
  • Социальные кнопки и вывод ссылок на группы и страницы
  • Адаптивный дизайн (mobile friendly)

Travelbiz / Шаблон туристического агентства

Скачать тему бесплатно Посмотреть демо

Красивый современный шаблон для продажи туристических путёвок. Превью, описания курортов, рейтинги отелей, возможность поиска туров по фильтрам, путеводители, цены, страховки – всё это уложено в приятный интерфейс с большим количеством пустого пространства. Весь фокус на фотографиях и формах бронирования поездок. Интересно выглядит эффект параллакса в сочетании с криволинейными областями секций. Есть иконки социалок и формы, стилизованные под всё остальное на макете. Секций куча. В дополнение к основному профилю идёт раздел магазина сопутствующих отпускам товаров. То есть даже без дополнительного eCommerce плагина можно выложить витрину и продавать. Практичный макет.

General Theme Articles

Использование_тем 
Основная информация об использовании и установке тем и шаблонов
Миграция плагинов и тем 
Content information how to upgrade a theme for compatibility with new versions of WordPress
Разработка темы 
Как создать свою собственную тему
Framework (каркас) темы 
Build a child theme on the foundation of a parent theme. You can start with a theme that you like and easily modify the parts you want to change. Do more in less time.
Обзор темы  
How to prepare your Theme for public release and submission to Theme Directory
I18n для разработчиков WordPress  
Internationalization, including a section on how to internationalize your theme
Theme Compatibility List 
List of which Themes are compatible with various Versions WordPress
Creating Admin Themes 
How to create a plugin that modifies the look of the Admin section
Интеграция_WordPress_в_Ваш_сайт_—_Введение 
Using WordPress with your existing website

category.php и archive.php

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

<?php get_header();?>

<h1 class="my-4 page-title"><?wp_title();?></h1>
<?php if (have_posts()): while(have_posts()): the_post();?>
<h2 class="card-title"><a href="<?the_permalink();?>"><?the_title();?></a></h2>
<div class="card mb-4">
	<a href="<?the_permalink();?>"><img class="card-img-top" src="<?php echo get_the_post_thumbnail_url(null, 'full'); ?>" alt="<?the_title();?>"></a>
	<div class="card-body">
		<p class="card-text"><small class="text-muted"><?the_time('j F Y');?></small> <?php the_tags('');?></p>
		<?the_content('');?>
		<a href="<?the_permalink();?>" class="btn btn-primary shadow-none">Читать далее →</a>
	</div>
</div>
<?php endwhile; else:?>
	<p>Записей не найдено.</p>
<?php endif;?>
<?php the_posts_pagination(array(
	'mid_size' => 4,
	'end_size' => 2,
));?>

<?php get_footer();?>

Лучшие бесплатные темы WordPress

Hueman — многофункциональная бесплатная тема WordPress. С большим количеством настроек и простой панелью администратора.

У Hueman есть несколько вариантов макета, два варианта расположения навигационного меню. Вы можете выбрать один, два или три вида расположения столбцов.

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

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

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

Главную страницу можно настроить с помощью виджетов и полноэкранного слайдера.

Customizr одна из самых популярных и настраиваемых бизнес-тем WordPress. Она полностью адаптирована для мобильных устройств.

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

Make — это тема со встроенной функцией drag & drop, с помощью которой вы можете создать собственный бизнес-сайт. Она имеет полностью адаптивный дизайн, поэтому отлично смотрится на любом устройстве.

Также есть несколько вариантов макета на выбор.

Vantage — бесплатная тема с адаптивным дизайном, которая может использоваться практически для любого вида сайта. Большой набор настроек с плагином Page Builder и функцией drag-and-drop.

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

Enigma — это отзывчивая бизнес-тема WordPress на базе Bootstrap. Она включает встроенный слайдер для главной страницы и довольно большое количество настроек.

Также адаптирована для мобильных устройств.

Бизнес-тема WordPress с плоским (flat/minimal) и полностью адаптивным дизайном. Функции этой темы дает возможность сделать по-настоящему уникальный сайт.

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

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

Spacious это многофункциональная бизнес-тема WordPress. Включает слайдер для главной страницы, 5 настраиваемых виджетов и 2 макета страницы. Также вы можете установить светлое или темное цветовое оформление сайта.

Тема адаптирована и прекрасно смотрится на любых устройствах.

Moesia — адаптированная бизнес-тема WordPress с полной поддержкой parallax. Она оптимизирована для мобильных устройств и предлагает 11 готовых блоков для создания страницы.

У каждого блока есть свое фоновое параллакс изображение.

Идеальная бизнес-тема WordPress, которая предлагает полноэкранный макет сайта с большим слайдером для главной страницы.

Также имеет панель управления с большим набором функций.

Как следует из названия, Full Frame — это тема c полноэкранным макетом сайта и адаптивным дизайном. Она включает встроенный функциональный слайдер, кнопки с призывом к действию, настраиваемые виджеты и набор макетов страниц.

Adamos — многофункциональная бизнес-тема WordPress. Она содержит встроенный  слайдер, настраиваемый фон и заголовок, а также готовые макеты страниц.

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

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

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

Она совместима с популярными бесплатными редакторами (плагинами) сайта и предлагает бесплатную поддержку WooCommerce. Также включает редактор страниц в режиме реального времени.

Заключение

Бесплатные темы WordPress — это хороший вариант для знакомства c платформой. Пробуйте и, пожалуйста, не расстраивайтесь, если у вас не будет что-то получаться. Со временем вы обязательно научитесь.

Полезные ссылки:

«Как установить тему WordPress» — видео на примере темы Ronneby.

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

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

Надеюсь, эта статья была полезна. Теперь вы знаете самые популярные бесплатные темы WordPress.

И подписывайтесь на нас в , Instagram и .

General Theme Articles

Using Themes 
Basic information about using and installing themes and templates
Migrating Plugins and Themes 
Content information how to upgrade a theme for compatibility with new versions of WordPress
Theme Development 
How to develop and build your own themes
Theme Frameworks 
Build a child theme on the foundation of a parent theme. You can start with a theme that you like and easily modify the parts you want to change. Do more in less time.
Theme Review 
How to prepare your Theme for public release and submission to Theme Directory
I18n for WordPress Developers 
Internationalization, including a section on how to internationalize your theme
Theme Compatibility List 
List of which Themes are compatible with various Versions WordPress
Creating Admin Themes 
How to create a plugin that modifies the look of the Admin section
Integrating WordPress with Your Website 
Using WordPress with your existing website

Создание темы WordPress

Если вы ещё не установили CMS WordPress, то пришло время это сделать. Про то, как установить WordPress можно прочитать в этой статье. Если система уже установлена, то продолжаем.

Итак, приступим к созданию собственной темы. Для начала нам понадобится создать папку с названием темы в разделе /wp-content/themes/. Я назову её it-blog. Как я уже говорил, чтобы WordPress не выдавал ошибку, внутри этой папки необходимо создать файл стилей style.css. Теперь в панели администрирования в разделе Внешний вид → Темы появится наша тема, где её можно применить к сайту, нажав кнопку активировать. Название темы будет такое же, как и название её папки. На сайте теперь конечно же будет открываться только белая страница, так как тема ещё совсем пустая.


Активация новой темы

Вы можете создать свое изображение темы, добавив файл screenshot.png в папку с темой, а в файле style.css установить название, описание, автора и другую информацию добавив в начало файла примерно такой текст:

/*
Theme Name: Progme
Version: 1.0
Description: Тема Bootstrap 4
Author: Progme
Author URI: https://it-blog.ru
*/

Лично я считаю, что это лишнее, но для эстетики можно потратить немного времени.

Теперь внутри папки с нашей новой темой нам нужно создать все файлы в соответствии со структурой описанной выше. Можно создать их все сразу пустыми или создавать отдельно по мере написания кода.

index.php

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

<?php if (have_posts()): while (have_posts()): the_post(); ?>
	Здесь HTML код и функции вывода значений поста (заголовок, дата, ссылка, текст и т.д.)
<?php endwhile; else: ?>
	<p>Записей не найдено.</p>
<?php endif; ?>

А вот основные функции цикла, которые нам понадобятся:

the_title() — выводит заголовок постаthe_content() — выводит текст анонса или полный текст, если цикл находится внутри записиthe_permalink() — ссылка на постthe_time() — дата и время создания постаthe_posts_pagination() — пагинация

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

В итоге получился следующий код главной страницы:

<?php get_header();?>

<h1 class="my-4"></h1>
<?php if (have_posts()): while(have_posts()): the_post();?>
<h2 class="card-title"><a href="<?the_permalink();?>"><?the_title();?></a></h2>
<div class="card mb-4">
	<a href="<?the_permalink();?>"><img class="card-img-top" src="<?php echo get_the_post_thumbnail_url(null, 'full'); ?>" alt="<?the_title();?>"></a>
	<div class="card-body">
		<p class="card-text"><small class="text-muted"><?the_time('j F Y');?></small> <?php the_tags('');?></p>
		<?the_content('');?>
		<a href="<?the_permalink();?>" class="btn btn-primary shadow-none">Читать далее →</a>
	</div>
</div>
<?php endwhile; else:?>
	<p>Записей не найдено.</p>
<?php endif;?>
<?php the_posts_pagination(array(
	'mid_size' => 4,
	'end_size' => 2,
));?>
		
<?php get_footer();?>

10 SEO настроенных шаблонов для WordPress

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

Reboot – лучший сео шаблон

Reboot

Reboot

  1. Уникальный слайдер записей, с разными форматами вывода
  2. Полная совместимость с Gutenberg
  3. Новые блоки внимания
  4. Блок автора
  5. Расширенные настройки социальных кнопок
  6. Форма обратной связи
  7. Карта сайта для людей
  8. Рейтинг звездочек для снипета в гугле
  9. Уникальный конструктор главной страницы WordPress
  10. Типографика
  11. Новый формат вывода карточек постов в виде произвольной сетки
  12. Настройки шрифтов и написания с возможностью делать курсивный, жирный, подчеркнутый текст.

Множество других способностей, которые описаны в статье. В ребут, вы ставите себе полностью адаптированый под «русское seo» шаблон. Создавался отечественными разработчиками, которые спрашивали мнения у специалистов – что должно присутствовать на сайте, а чего нет.

Root – второй по рейтингу

Тема Рут

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

Шаблон Root

Root более облегченный вариант, ввиду того что нет некоторых функций, представленных в первом. Если говорить о сфере применения, то подойдет для блогов и информационных проектов. Соответствует всем пунктам из списка требований и имеет:

  • Большинство настроек ребут
  • Виджет топ комментаторов
  • Изменение хлебных крошек в архивах
  • Больше изменений с кнопкой вверх

Cook It – SEO шаблон для кулинарных сайтов

Cook It

С правильной микроразметкой вебмастера добиваются отличий в выдаче поисковых систем. В Shema org существует специальная разметка для кулинарных сайтов с рецептами. Cook It, полностью валиден, и если статья интересная, то поисковой робот выведен максимально широкий сниппет для кулинарных блогов.

Забрать Cook ItРасширенный снипет

Шаблон умеет все что есть в ROOT и несколько дополнительных возможностей:

  • Легкий вывод рецептов
  • Автоматический расчет количества ингредиентов по количеству персон
  • Добавление видео рецептов
  • Кнопка распечатки на принтере
  • Время приготовления
  • Можно добиться не плохого результата, например, такой вариант

Journal X – адаптивный Seo friendly тема wordpress для информационных сайтов

Journal X

Рассматривая дальше шаблоны от WPshop приведу шаблон Journal X – один из лучших тем для информационных сайтов. Главнейший фактор ранжирования информационников это количество времени, затративший посетитель на просмотр материалов ресурса, что сделано:

Получить JournalX

  • Все достоинства root, только без слайдера
  • Оригинальная сетка вывода постов на главной и архивах
  • Автоматическая подгрузка следующего поста при прочтении статьи до конца
  • Бесконечный список записей при прокрутке
  • Расширенная типографика, для лучшего предоставления текста

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

Интервью про темы WPShop

Yelly – для социального продвижения

Тема Yelly

Посмотреть Yelly

  • К репостам для Facebook можно приставить UTM метки
  • После просмотра роликов с YouTube появляется всплывающее окно предложением подписаться
  • Случайный пост под меню
  • Разбивка больших по тексту постов на мелкие
  • Замена стандартной формы комментирования на FB

Выводы и рекомендации

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

Создать сайт на WordPress + Bluehostустановка CMS в 1-клик на хостинг ↵

Быстрый, простой и безопасный хостинг с автоматической установкой WordPress. Включена БЕСПЛАТНАЯ регистрация домена на 1 год + SSL сертификат в подарок!Цена: от $2.95

В официальном магазине нельзя посмотреть демо-версии сайтов на размещённых там шаблонах. Зато можно увидеть то, как будут выглядеть галереи, заголовки и оформление постов, кнопки переходов, формы и прочие элементы – общую схему, формат всего, что есть в теме оформления. После установки выбранный шаблон, скорее всего, будет выглядеть иначе, чем на скриншотах, – ведь там уже задействованы демо данные (какие-то изображения, лого, тексты и т. д.). Их можно загрузить отдельно, если потребуется для наглядности. В общем, не пугайтесь отличий от образца после установки. Рекомендуем выбирать тему по перечню её возможностей, прежде всего. Картинки, цвета, шрифты вы и так сможете поставить любые.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector