Создать блог бесплатно за 1 день. Практическое руководство

4 Сен, 2018 - Автор поста "admin" 👁 129

Создать блог на wordpress можно за 1 день. При этом глубоких знаний в  программировании и верстки не потребуется. Благодаря готовым темам, уже написанными программистами под систему управления контентом(вкратце, cms) wordpress, создать блог под силу каждому человеку.

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

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

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

Установка cms WordPress на локальный сервер

Разработку проекта будем ввести на локальном сервере Open Server, который можно скачать бесплатно на https://ospanel.io/download/. Достаточно версии пакета Basic.

Затем нужно скачать дистрибутив вордпресс с официального сайта https://ru.wordpress.org/download/ и скопировать все файлы в папку проекта. В нашем случае директория называется blog.loc.

Настройка темы Tortuga

1 Подготовка

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

И в нее поместим файл style.css, в котором необходимо вписать такие строчки кода.

/*
Theme Name: Дочерняя тема для темы tortuga(обязательно)
Template: tortuga(обязательно)
Theme URI:
Description:
Author:
Author URI:
Version: 1.0
*/

/*дополнительные стили*/
/* здесь с помощью команд изменяем внешний вид сайта*/

Также потребуется файл functions.php. Вставьте в него этот скрипт(правильно подключает стили родительской темы).

<?php 
/*
* Enqueue the styles of the parent and child themes
*/
add_action('wp_enqueue_scripts', 'my_theme_styles' );
function my_theme_styles() {
	wp_enqueue_style('parent-theme-css', get_template_directory_uri() .'/style.css' );
	// не обязательно, правильная родительская тема подключит его сама.
	//wp_enqueue_style('child-theme-css', get_stylesheet_directory_uri() .'/style.css', array('parent-theme-css') );
}

После чего надо скачать дистрибутив родительской темы и разархивировать файлы в папку themes.

Все на этом подготовка окончена.

2 Логотип и название блога

Чтобы добавить лого, изменить название и описание блога, надо нажать на ссылку «Настроить» в верхней панели.

В результате откроется так называемый Кастомайзер(настройщик) wordpress. Затем выбираем необходимый элемент на странице, нажав на голубую иконку с карандашом, и делам правки. После проделанных изменений не забудьте их сохранить, нажав на «Опубликовать».

3 Вставка кода баннера

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

Итак, чтобы вставить свой рекламный блок, поменяйте путь в атрибуте src=»ссылка на медиафайл».

<a href="#"><img alt="" src="http://blog.loc/wp-content/uploads/2018/08/tortuga_magazine.png"/></a>

4 Вывод статей

Вывести записи можно в 3 форматах: 1, 2, 3(без сайдбара) колонки. Для этого выбираете нужный макет в Кастомайзере. Также есть возможность изменить детали постов: дата, автор, рубрики, количество комментарий.

На отдельной странице в конце записи можно убрать блок меток и навигацию(следующая/предыдущая), а также изображение( по умолчанию данные элементы отображаются).

Если надо поменять количество последних записей на странице блога, зайдите в Админ панель → Настройки → Чтение и вбейте нужное число в пункте «На страницах блога отображать не более».

5 Меню сайта

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

Создать собственное меню блога можно либо через тот же настройщик вордпресс, либо в админке(Внешний вид → Меню), добавляя ссылки на рубрики, записи, страницы, произвольные ссылки, метки. Чтобы сделать вложенное меню, необходимо упорядочить элементы с помощью стрелочек в Кастомайзере.

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

6 Настройка сайдбара(иконки соц сетей, поиск, рубрики и т.д)

В настройке боковой панели помимо дефолтных виджетов используются элементы управления плагина ThemeZee Plugins. Для его установки и активации кликните на Плагины → Добавить новый.

В принципе настроить показ виджетов не сложно(просто отмечаете нужные чекбоксы). Поэтому разберем только Social Icons Menu, так как он требует подключение новых шрифтов и стилей.

Изначально в данный виджет разработчики не включили показ иконок русскоязычных соц сетей(Вконтакте и одноклассники).

Создать подходящий набор соц. иконок можно на сайте http://fontello.com/.  Если вас устраивает данный набор, то скачивайте этот архив. Затем надо поместить папку fonts в дочернюю тему tortuga-child(см. скрин выше). Далее вносим правки в файл стилей style.css

@font-face {
font-family: 'fontello';
src: url('fonts/fontello.eot?50462271');
src: url('fonts/fontello.eot?50462271#iefix') format('embedded-opentype'),
url('fonts/fontello.woff2?50462271') format('woff2'),
url('fonts/fontello.woff?50462271') format('woff'),
url('fonts/fontello.ttf?50462271') format('truetype'),
url('fonts/fontello.svg?50462271#fontello') format('svg');
font-weight: normal;
font-style: normal;
}

.social-icons-menu li a[href*="vk.com"]:before {
content: '\e800';
font-family: 'fontello';
}
.social-icons-menu li a[href*="ok.ru"]:before {
content: '\f30c';
font-family: 'fontello';
}
.social-icons-menu li a[href*="facebook.com"]:before {
content: '\e805';
font-family: 'fontello';
}
.social-icons-menu li a[href*="youtube.com"]:before {
content: '\e804';
font-family: 'fontello';
}
.social-icons-menu li a[href*="twitter.com"]:before {
content: '\e803';
font-family: 'fontello';
}

/*необязательно*/
.icon-vk:before { content: '\e800'; }
.icon-gplus:before { content: '\e801'; }
.icon-twitter:before { content: '\e803'; }
.icon-youtube:before { content: '\e804'; }
.icon-fb:before { content: '\e805'; }
.icon-ok:before { content: '\f30c'; }

Далее создаем новое меню и обязательно напишите адреса социальных сетей.

Потому во вкладке Виджеты в выпадающем списке выбираем нужное меню. Готово!

7 Исправляем недочеты

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

Вставьте этот код в style.css.

.site-branding .custom-logo {
	margin: -1em 0.1em 0 0;
}
.header-widget {
	margin: 1.5em 0 0 1.5em;
}
@media only screen and (max-width: 60em) {
	.site-branding .custom-logo {
		display:none;

	}
}

Если вам надо убрать надпись в футере темы, то скопируйте содержимое footer.php из директории torutga и вставьте его в новый файл, под таким же названием, в дочернюю тему.

Далее добавьте эти строчки.

<div id="footer-text" class="site-info">
&copy; Все права защищены. Копирование статей запрещено!
Использована тема WordPress - <a href="https://themezee.com/themes/tortuga/">Tortuga</a>
</div>

<!-- .site-info -->

Заключение

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

Поделиться статьей с друзьями!