10 бесплатных тем WordPress и как их правильно использовать

Ищите надежную отправную точку

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

Темы WordPress в изобилии: 10 лучших бесплатных новинок этой осени

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

1. Канук

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

[Green-Button url=»https://wordpress.org/themes/canuck/» text=»Download on WordPress»] | [Green-Button url=»https://wp-themes.com/canuck/» text=»Theme Demo»]

2. Мерсия

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

[Green-Button url=»https://wordpress.org/themes/mercia/» text=»Download on WordPress»] | [Green-Button url=»https://preview.themezee.com/mercia» text=»Theme Demo»]

3. Риндзай

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

[Green-Button url=»https://wordpress.org/themes/rinzai/» text=»Download on WordPress»] | [Green-Button url=»https://demo.webminimalism.com/rinzai/» text=»Theme Demo»]

4. Гестия

Hestia уже предлагает довольно много дочерних спинов. Hestia придерживается принципов Material Design, поэтому выглядит очень современно. Тема ориентирована на творческих работников, которым нужна абсолютно гибкая основа для построения любого клиентского проекта. Он даже готов к WooCommerce.

[Green-Button url=»https://wordpress.org/themes/hestia/» text=»Download on WordPress»] | [Green-Button url=»https://themeisle.com/demo/?theme=Hestia» text=»Theme Demo»]

5. Невилл

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

[Green-Button url=»https://wordpress.org/themes/neville/» text=»Download on WordPress»] | [Green-Button url=»http://demo.acosmin.com/themes/neville/» text=»Theme Demo»]

6. Косой

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

[Green-Button url=»https://wordpress.org/themes/oblique/» text=»Download on WordPress»] | [Green-Button url=»https://themeisle.com/demo/?theme=Oblique» text=»Theme Demo»]

7. ХитМаг

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

[Green-Button url=»https://wordpress.org/themes/hitmag/» text=»Download on WordPress»] | [Green-Button url=»https://themezhut.com/demo/hitmag/» text=»Theme Demo»]

8. Старт

Headstart — очень гибкая тема как для блогов, так и для менее динамичных веб-сайтов. Его адаптивный дизайн можно полностью настроить с помощью виджетов, которые содержат практически любой тип контента, который вам нравится. Создайте динамичный блог или создайте статическую современную целевую страницу. Так же будет отлично работать. Headstart построен на популярной платформе Foundation.

[Green-Button url=»https://wordpress.org/themes/headstart/» text=»Download on WordPress»] | [Green-Button url=»https://wp-themes.com/headstart» text=»Theme Demo»]

9. Клубный фитнес

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

[Green-Button url=»https://wordpress.org/themes/clubfitness/» text=»Download on WordPress»] | [Green-Button url=»https://demo.thewpclub.com/clubfitness/» text=»Theme Demo»]

10. Редксун

Redxun — это тема для писателей. Основанный на Bootstrap и предоставляющий доступ ко всем шрифтам Google, он предлагает почти идеальную игровую площадку для всех, кто хочет видеть, как их контент работает на любой платформе.

[Green-Button url=»https://wordpress.org/themes/redxunlite/» text=»Download on WordPress»] | [Green-Button url=»http://www.wowthemes.net/preview/index.php?theme=redxun» text=»Theme Demo»]

Больше отличных тем

Не подходящая тема для вас здесь? Взгляните на эту постоянно растущую коллекцию 100 лучших бесплатных тем WordPress. Есть что-то для всех.

Что такое дочерняя тема и как ее создать?

Дочерняя тема — это дочерняя часть полноценной обычной темы, как мы показали вам десять из вышеперечисленных. Он использует файлы родительской темы для отображения. Сюда входят все файлы шаблонов, таблица стилей для дизайна, JavaScript — все. Поэтому обе темы должны быть в папке с темами. wp-content/themes во все времена.

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

Все изменения сохраняются даже после обновления

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

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

Подготовка к созданию дочерней темы

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

• Я могу порекомендовать FTP-программу «FileZilla», так как она многофункциональна и бесплатна как для Windows, так и для Mac.
• HTML-редактор, который я бы порекомендовал, — это программа Brackets. Он также бесплатный, и благодаря многочисленным расширениям его можно настроить в соответствии с вашими потребностями.

Конечно, есть и другие разумные HTML-редакторы. Итак, мы составили список программ и для Windows, и для Mac.

Создание и использование дочерних тем

Я буду использовать популярную тему WordPress Twenty Fifteen Standard в качестве примера для создания дочерней темы. Вы научитесь создавать дочерний дизайн, использовать собственную таблицу стилей для CSS и настраивать файлы темы. Я также познакомлю вас со всеми ловушками, которые могут возникнуть при работе с дочерними макетами.

1 — Создание и активация базовой дочерней темы

Для дочерней темы требуются только три вещи: индекс родительской темы, style.css файл и functions.php.

Сначала создайте папка на рабочем столе и назовите его «twentyfifteen-child». Затем создайте пустой файл с именем style.css с помощью HTML-редактора. Введите следующее в файл CSS:

/*
  Theme Name:   Twenty Fifteen Child
  Description:  Twenty Fifteen Child Theme
  Author:       Your Name
  Author URI:   http://yourdomain.com
  Template:     twentyfifteen
  Version:      1.0.0
  Text Domain:  twenty-fifteen-child
  */
/* Enter All of Your Changes at the Bottom */

Этот заголовок определяет следующие вещи:

• Название вашей темы
• Описание, в котором говорится, что это дочерняя тема темы Twenty Fifteen.
• В разделе «Шаблон» вы найдете «адрес», который нужен вашей теме для отображения файлов шаблона. Это имя папки темы родительской темы. При создании дочерней темы для другой темы, конечно же, необходимо указать имя папки вашей темы. Итак, если вам нужна дочерняя тема для популярной темы «Hueman», здесь будет написано «hueman».
• В текстовом домене ваша дочерняя тема находит файлы перевода, чтобы тема по-прежнему отображалась на выбранном вами языке.

Затем настройте пустой файл с именем functions.php. Следующее имеет чтобы войти в этот файл:

Optional: Create a Preview Image For Your Theme
Each theme has a screenshot, so it is easy to tell apart from the other themes in the dashboard. All you have to do for that is to set up a preview image with the name screenshot.png. This graphic goes into the folder of the child theme. There, it has to be placed in the main index, not in a separate folder.
The recommended size is 880 x 660 pixels. However, it will be displayed in 387 x 290 pixels. The large file size allows the screenshot to be shown well on retina screens. You may also use other image formats like JPG, or GIF, but PNG is recommended.
2 - Activating the Child Theme
Now, upload the folder twentyfifteen-child into the theme index (wp-content/themes) of your WordPress, and activate your new child theme under "Design => Themes."

Now, the child theme is active. Thanks to the new screenshot, it is effortless to find within your theme index. Of course, there have not been any changes made to the design yet, so your adjustments will have to follow.
3 - Настройка дочерних тем - CSS
Теперь запишите все изменения в файл вашей дочерней темы. style.css.  Несколько очень простых настроек: изменение цвета фона, цвета, размера и шрифта заголовка и так далее.  Всего несколькими строками CSS мы уже полностью изменили дизайн темы:
/* Название темы: Дочерняя тема Twenty Fifteen Описание: Дочерняя тема Twenty Fifteen Автор темы: Ваше имя URI автора: http://yourdomain.com Шаблон: двадцатьпятнадцать Версия: 1.0.0 Текстовый домен: двадцать-пятнадцать-ребенок */ /* Введите все ваших изменений ниже */ body { color: #666;  фон: #444;  } h1.site-title { размер шрифта: 38px;  } h1.site-title a { color: #900;  } #main { padding-top: 10px;  } h2.entry-title { семейство шрифтов: Arial, без засечек;  размер шрифта: 38px;  } h2.entry-title a { color: #900;  }

4 - Работа с файлами шаблонов
Ваша новая тема полностью настраиваема, вы также можете использовать свои собственные шаблоны или пересматривать файлы родительской темы.  WordPress сначала проверяет папку дочерней темы на наличие файлов шаблонов.  Если их нет, будут использованы файлы из родительской темы.
Это означает, что файл header.php в папке дочерней темы вместо файла в родительской теме.  Если вы хотите изменить отображение определенного файла, просто скопируйте его из родительской темы в дочернюю.  Теперь вы можете либо изменить всю презентацию, либо добавить только определенные элементы.
Два примера: изменение изображений постов и статических кнопок общего доступа
Пример 1: реверсирование отображения изображений публикации
Скопируйте файл content.php от вашего родителя в дочернюю папку.  Исходный код файла в строках с 14 по 27 выглядит следующим образом:

Ради интереса давайте перевернем код и вставим изображение поста под заголовок.

Конечно, наш CSS нуждается в некоторых корректировках, чтобы конечный результат выглядел превосходно.
/*   
Theme Name:   Twenty Fifteen Child   
Description:  Twenty Fifteen Child Theme   
Author: Your Name 
Author URI: http://yourdomain.com 
Template:     twentyfifteen   Version:      1.0.0   
Text Domain:  twenty-fifteen-child  
*/    
/* 
Enter your changes below 
*/    
body {      
color: #666;      
background: #444;  
}  
h1.site-title {      
font-size: 38px;  
}  
h1.site-title a {      
color: #900;  
}  
#main {      
padding-top: 10px;  
}  
h2.entry-title, h1.entry-title {      
font-family: Arial, sans-serif;      
font-size: 38px;      
padding-top: 20px;      
margin-bottom: 20px;  
}  
h2.entry-title a{      
color: #900;  
}  
h1.entry-title {      
color: #444  
}

Скриншот окончательного результата:

Пример 2. Добавление статических кнопок общего доступа
Эта задача также выполняется с помощью content.php файл.  Вам не нужно помещать другой файл в дочернюю папку.
Часть 1: Фрагмент для functions.php
  
The buttons need two functions. Number one creates the buttons, and number two adds the required icon font "Font Awesome" to your header.
Part 2: The CSS
For the buttons to be displayed correctly, we need a bit of CSS. Depending on the theme, the width of the single buttons in line nine may need to be adjusted. I have already done that for our Twenty Fifteen child.
/* 
=============================================================================   
STATIC SHARE-BUTTONS  
============================================================================= */    

div.share-buttons.top {margin-top: 0 !important; max-width: 100%; margin-bottom: 15px }  
div.share-container {padding-bottom: 20px; border-bottom: 3px solid #eee}  
.share-buttons { padding: 10px; margin: 20px 0 0 0; background: #f5f5f5;  max-width: 100%; display: inline-block; overflow: hidden}  
.share-buttons a, .share-buttons a:hover { color: #fff !important; text-decoration: none !important; border-bottom: none !important}  
.share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.print, .share-buttons a.fb-like { display: block; width: 112px;  font-size: 16px; font-size: 1rem; padding: 6px 0; text-align: center; opacity: 0.7; filter: alpha(opacity=70); color: #fff; float: left; font-family: Arial, sans-serif;}  
.share-buttons a:hover, .share-buttons a:active, .share-buttons a:focus { opacity: 1; filter: alpha(opacity=100); text-decoration: none !important; color: #fff !important; border-bottom: none !important}  
.share-buttons a.facebook { background: #3e64ad; }  
.share-buttons a.twitter { background: rgb(0, 172, 237); }  
.share-buttons a.googleplus { background: #cd3627; }  
.share-buttons a.fb-like {background: #4267b2}  
.share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.fb-like { margin-right: 5px; }  
.share-buttons a.print{ margin-right: 0;}  
a.print{background:#13475e;}  
a.print:before{content:'f02f';font-family:FontAwesome;font-size:16px;padding-right:8px}  
a.facebook:before{content:'f09a';font-family:FontAwesome;font-size:16px;padding-right:8px}  
a.twitter:before{content:'f099';font-family:FontAwesome;font-size:16px;padding-right:8px}  
a.googleplus:before{content:'f0d5';font-family:FontAwesome;font-size:16px;padding-right:8px}  
a.fb-like:before{content:'f164';font-family:FontAwesome;font-size:16px;padding-right:8px}

Часть 3: Правильное размещение в content.php
  
', '', false )  
) );    
wp_link_pages( array(      
'before'      => '
' . __( 'Pages:', 'twentyfifteen' ) . '',      
'after'       => '
',      
'link_before' => '',      
'link_after'  => '',      
'pagelink'    => '' . __( 'Page', 'twentyfifteen' ) . ' %',      
'separator'   => ', ',  
) );  
?>  
  

 
Правильная позиция все еще находится в DIV .entry-contentпрямо над закрытием