Создать блог бесплатно за 1 день. Практическое руководство
👁 232
Создать блог на wordpress можно за 1 день. При этом глубоких знаний в программировании и верстки не потребуется. Благодаря готовым темам, уже написанными программистами под систему управления контентом(вкратце, cms) wordpress, создать блог под силу каждому человеку.
К тому же вы получите готовый сайт бесплатно, так как код движка вордпресс можно скачать безвозмездно. Если вам интересно, то приступим к настройке блоговой темы «tortuga».
Если у Вас нет желания разбираться в основах сайтостроения, устанавливать на ПК дополнительный софт, то можете заказать у меня услугу «Создам блог на wordpress. Настройка тем» на бирже фриланса Кворк всего за 500 рублей.
В результате мы получим полноценный сайт для введения блога со всеми необходимыми элементами: поиск, форма комментирования, рекламный баннер, иконки соц сетей, облако меток, список рубрик и др.
Вдобавок тема «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"> © Все права защищены. Копирование статей запрещено! Использована тема WordPress - <a href="https://themezee.com/themes/tortuga/">Tortuga</a> </div> <!-- .site-info -->
Заключение
Практически я описал подробный план создания блога на wordpress. В процессе создания сайта у вас могут возникнуть вопросы и ошибки — это нормально. Поэтому задавайте вопросы, даже если по вашему мнению они глупые и простые, в форме комментариев.
Поделиться статьей с друзьями!
Добавить комментарий