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

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

Создать блог на 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 плагины расширяют возможности сайта, а именно позволяют сделать чпу ссылки; оптимизировать контент под поисковые системы; добавить слайдер изображений, генерацию содержимого статей; защитить от спама; сохранять резервные копии записей, файлов сайта и многое другое.

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

Вот и список плагинов для вордпресс проектов:

Child Theme Configurator – этот модуль нужен при разработке любых веб-сайтов. Он создает дочернюю тему для родительской. Благодаря этому правки(изменить шрифт, дизайн шапки и тд.), сделанные в файлах дочерней темы, не удалятся при обновлении родительской темы.

Cyr To Lat — данный модуль преобразует кириллические символы в латиницу в названиях записей, рубриках, метках. Cyr to Lat делает ссылки блога ЧПУ(человекопонятные урлы).

Yoast SEO – добавляет элементы для сео оптимизации. В частности генерирует метатеги title, description; закрывает от индексации ненужный контент с помощью значений noindex, nofollow. Кроме того создает автообновляемую xml карту для более быстрого уведомления поисковых роботов о новом или обновленном контенте.

UpdraftPlus WordPress Backup Plugin — создает копии статей и файлов темы, плагинов по расписанию в автоматическом режиме. Отправляет резервные копии на удаленное хранилище(напр. Google диск).

Simple Lightbox — вордпресс плагин позволяет увеличить изображение по клику по нему.

LuckyWP Table of Contents – автоматически генерирует содержание статей. Умеет наследовать css стили проекта, поэтому нет потребности править вручную. Якоря в содержании или оглавлении имеют «красивый» вид(напр. example.ru/faq.html#yakor).

Hierarchical HTML Sitemap — добавляет HTML карту с поддержкой многоуровневых рубрик.

Akismet Anti-Spam — мощный плагин для защиты от спама блогов на WordPress.

Subscribe To Comments Reloaded — модуль внердяет функцию подписки на новые комментарии. Читатели блога, при условии подписки на статью, будут получать уведомления по электронной почте об появлении новых комментариев. Также плагин создает страницу для редактирования подписок. Она позволяет читателям изменить статус подписки на статью(отписаться, подписаться только на ответы, на все комментарии, приостановить).

Заключение

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

Подытожим наши шаги по созданию блога:

1 Установка среды разработки(локальный сервер и текстовый редактор), либо напрямую делать сайт на хостинге.

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

3 Создать базу данных в PhpMyAdmin

4 Скачать тему и активировать у админке сайта

5 Добавить дополнительные функции с помощью плагинов

6 И все! Можно приступать к блогингу.

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