Что нужно для создания сайта на WordPress и продвижения его онлайн

Опубликовано: 01.09.2018

видео Что нужно для создания сайта на WordPress и продвижения его онлайн

Как правильно создать многостраничный сайт? Функционал и структура сайта

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



1. E-mail (Имейл) адрес, то есть электронную почту. Через почту проходит всё — чтобы где-то зарегистрироваться вам нужно указать её, а потом подтвердить с помощью её, её же (например у хостинг-провайдера и регистратора вашего домена). Это делается для того чтобы потом никто кроме вас не мог войти в эти сервисы, менять пароли и другие данные. Все они будут прикреплены только к вашей почте и в некоторых случаях (по желанию) к вашему телефону. Ну и конечно почта нужна для своего прямого назначения, для того чтобы переписываться с другими людьми. Для более продвинутых e-mail нужен чтобы входить в разные сервисы с которыми будет связан ваш веб-проект, то есть — веб аналитика ( Яндекс.Метрика , Google Analytics и др.), аккаунты вебмастера (опять же основные — это в Яндексе и Google) и многие другие сервисы, которые призваны решать разные вопросы при создании и продвижении проекта. Их очень много, особенно если считать англоязычные.


С ЧЕГО НАЧАТЬ СОЗДАНИЕ САЙТА | О чем нужно знать до создания сайта

2. Понимать основные принципы пользования интернетом и компьютером. Например, как найти нужную информацию в интернете, как пользоваться браузером, ориентироваться по любым сайтам в интернете. Как устроено взаимодействие: хост — DNS — домен. Как устанавливаются разные программы и приложения: антивирус, браузер, программы для редактирования текста и т.д. Понимать термины использующиеся в интернете. Например, что такое поисковик, юзер, гиф, png, jepg, пиксель, браузер, адресная строка, поиск, SERP, rar, SEO, кеш, ссылка, окно, css, html, php, фотошоп, код, плагин, файл, скопировать, вставить, обновить, сохранить, апдейт, апгрейд и т.д. Обычно, если человек очень хочет овладеть этими знаниями и навыками, он добивается этого за относительно короткое время. Это просто происходит само собой в процессе того, как вы чего-нибудь делаете за компьютером.


6 правил SEO оптимизации на этапе разработки сайта. Как оптимизировать сайт на этапе разработки

3. Уметь проводить денежные операции — online banking. Теоретически вы конечно можете распечатать квитанцию для Сбербанка и пойти оплатить её в ближайшем офисе. Большинство систем электронных платежей и онлайн расчётов нацеленных на русскую аудиторию позволяют это сделать. Но оперируя разными сервисами вам нужно будет рассчитываться за их услуги на постоянной основе и тогда вы просто замучаетесь бегать в Сбербанк. Гораздо приятнее и разумнее нажать несколько кнопок на клавиатуре и вуаля, платёж зачислен. За что может понадобится заплатить онлайн? За хостинг, рекламу, покупку разных файлов (видео, графика, плагины, шаблоны, скрипты, статьи и т.д.), услуги фрилансера, онлайн сервисы и программы (например Dropbox , Антивирус, Photoshop, ad1.ru, e-kontur.ru, SEMrush , разные SaaS и т.д.). Чтобы иметь возможность делать онлайн платежи вам нужно иметь пластиковую карту любого банка и аккаунты желательно в нескольких электронных платёжных системах, таких как: Яндекс.Деньги, WebMoney, PayPal и других.

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

Понимать, хотя-бы немного, из чего состоит сайт, как строится HTML каркас, как это всё стилизовано с помощью таблиц CSS, как генерируются PHP страницы. Знать где все эти файлы хранятся, как иметь к ним доступ если чего и т.д. Уметь хотя-бы на начальном уровне, типа: скопировал — вставил, писать CSS код и HTML теги, там всё не так уж сложно, правда:), пользоваться, например, инструментами DevTools в браузере Chrome для инспекции и тестирования разного CSS и другого кода. Понимать основные принципы работы сайтов на ВордПресс. Например, что такое Шаблон, чем отличается запись от страницы, что такое Виджеты, что такое Плагины, как они устанавливаются и работают, как работает Меню, что такое Дочерняя Тема и многое, многое другое.

Ещё не маловажным компонентом для успешной работы в интернете, в том числе создания сайтов и развития своего онлайн бизнеса, является знание английского языка . Что уж говорить, наверно 90% всех терминов в онлайн — это английские слова. Много очень нужных сервисов в интернете являются англоязычными. Знание хотя-бы на среднем уровне English даст вам огромную фору в продвижении своей карьеры и онлайн и офлайн. В следующей главе мы поговорим об одном из основных понятий WordPress платформы — это Шаблоны WordPress или как дословно звучит перевод с английского слов WordPress Themes — Темы ВордПресс.

 

WordPress шаблоны — основное понятие платформы

WordPress шаблоны — это как бы готовые сайты, которые надо только установить и настроить. Но это слишком обобщённо. Когда человек хочет создать себе тот или иной сайт на WordPress он чаще всего сначала ищет подходящий шаблон-тему. Например, ему нужно создать интернет магазин где будет продаваться постельное бельё. Для этого он идёт или на сайт самого ВордПресса https://wordpress.org/themes/ где есть тысячи бесплатных шаблонов, которые можно скачать даже не регистрируясь или там же можно найти тему и за деньги (вы там платите или за саму тему один раз или за доступ к разным темам и другому функционалу ежемесячно/ежегодно/на всю жизнь или за VIP поддержку и т.д.) или он пойдёт на один из тех сайтов где можно купить супер современный и красивый шаблон (в районе 50$) с уже встроенным функционалом для торговли через интернет. Лидером среди таких сайтов безусловно является ресурс http://themeforest.net/ ( часть экосистемы Envato ). На этом сайте сейчас около 10 000 шаблонов для WP и около 30 000 шаблонов включая другие платформы, такие как Joomla и Magento . По поводу перевода на русский язык. Многие шаблоны переведены на русский — это называется локализацией. Когда вы устанавливаете шаблон себе на платформу, он автоматически видит какой язык у вас изначально выставлен и всё у вас показывается на русском. По поводу документации и тех-поддержки. Про то как всё работает в WordPress многое переведено на русский в самом кодексе. Кодекс — это справочник ВордПресса , там всё очень подробно описано, с примерами и т.д.. Ещё есть русские форум ВордПресса и ответы на частые вопросы. Но помимо платформы, каждая тема имеет свои собственные настройки и особенности. Документация про то как пользоваться теми или иными настройками каждой конкретной темы скорее всего будет на английском. То же касается и форумов и FAQ этих шаблонов ( напоминаю — шаблон и тема — это одно и то же ). Если вы не знаете как сносно изьясняться на английском и при этом понимать собеседника, то вам лучше или обратиться к тому кто может и захочет вам помочь или поискать ответ на этом же форуме с помощью Google Translate — вы должны открыть эту страницу форума в браузере Chrome, кликнуть где-нибудь на пустом месте правой кнопкой мыши и выбрать «Перевести на русский». Такой перевод будет далеко от идеального, но быть может вы сможете извлечь от туда какую-нибудь пользу.

 

Респонсивность шаблонов и плагинов — неоспоримое преимущество в современном интернете

Почти все современные WP Темы являются респонсивными, то есть, когда ваш сайт автоматически подстраивается к разрешению экрана пользователя. Этот термин — респонсивный или адаптивный веб-дизайн ( responsive web design ) — впервые был придуман веб-дизайнером и разработчиком Итеном Маркоттом (Ethan Marcotte) в Мае 2010 года в публикации в журнале A List Apart . Если сейчас вы попробуете изменить ширину вашего браузера, то заметите что все элементы мгновенно подстроятся под выбранную вами ширину. Вы можете попробовать это с любой страницей этого сайта. Это означает что мой сайт тоже является респонсивным. Респонсивность достигается при помощи специальных параметров таблиц CSS, LESS или SASS — это код находящийся в соответствующих файлах с такими расширениями, например: style.css или style.less. В CSS для каждой ширины экрана, будь то экран планшета, смартфона или любого компьютера, указывается правило @media. Например:

@media screen and (max-width: 980px)

{

.someclass {width: 950px;}

}

Этот код говорит что элемент с классом .someclass, должен иметь ширину в 950 пикселей пока экран устройства не больше 980 пикселей. 980px — это может быть шириной какого-нибудь планшета. Для того, чтобы все главные элементы вашего WordPress сайта были респонсивными, для начала вам не обязательно писать весь этот код для каждого класса и других частей всей конструкции. Для того чтобы иметь респонсивный сайт, перед установкой понравившейся WP Темы убедитесь, что в описании данная Тема обозначена, как респонсивная. По английски это может выглядеть так: Responsive Layout, responsive design, fully responsive, responsive framework from Bootstrap и так далее. Огромное множество WordPress разработчиков, и не только, используют при создании своих сайтов и шаблонов именно Bootstrap framework . Это читается как Бутстрап Фреймворк. Это бесплатный набор инструментов для создания респонсивных вебсайтов от создателей Twitter, включающий в себя разнообразные формы, кнопки, элементы навигации и типографии. Разработчики всего мира доверяют этой технологии ещё и потому, что её сравнительно легко применять ( легко конечно не для новичка ) для своих проектов. Эта технология избавляет вебмастера от самостоятельного писания огромного количества кода. Bootstrap framework — это набор множества уже готовых решений для функционирования и дизайна сайта и один из самых популярных репозиториев на GitHub . Но это не единственный фреймворк для создания сайтов на WordPress. Ещё есть такие как Genesis, Cherry, Thesis, Gantry и другие. Они все различаются по разным пораметрам и ценам, но все они значительно облегчают работу разработчиков. Говорят: хороший фреймворк — 80% работы сделано.

Я это рассказываю для того чтобы дать преблизительное представление из чего состоит WordPress сайт. Что, где, как и для чего работает.

 

Постоянное обновление и усовершенствование шаблонов и плагинов

Ещё одна тема — это обновления всех этих программ, шаблонов и плагинов. Понимаете, люди постоянно работают над усовершенствованием своих знаний и как следствие своих продуктов. У сайта множество разных параметров над которыми можно работать и давать своим клиентам всё лучший и лучший продукт делая переодические обновления тех или иных файлов. На общепринятом среди разработчиков и других продвинутых юзеров языке — это называется апдейтом (update). Давайте перечислим какие параметры есть у сайта над которыми нужно работать.

1. Быстрота загрузки — что это? WordPress сайт может состоять из множества разных файлов и скриптов, графики и фотографий. Каждый скрипт, например ява-скрипт (файл с расширением .js), имеет свою, достаточно медленную, скорость загрузки в браузере, также, как и другие файлы и графика. Например фотография весящая 2 и более мегабайта появится на сайте не сразу, а постепенно, сверху вниз, секунды за три-четыре она загрузится целиком и только тогда человек сможет оценить всю неимоверную красоту вашего сайта, но…все ли будут ждать этих пяти-десяти-двадцати секунд (прибавим сюда скорость загрузки всех остальных файлов, картинок и скриптов ) или нет? Конечно нет. В среднем человек попадая на незнакомый сайт ждёт не более трёх секунд и если он так и не увидел сайт — покидает его и возвращается на поиск для нахождения там ответа на свой вопрос или решения своей проблемы. Поисковики (Яндекс, Google, Mail, Rumbler, bing, yahoo! и другие) замечая такие медленные сайты, ранжируют их хуже чем конкурентов чья скорость выше. Это значит убирая их всё ниже и ниже в результатах поиска ( результаты поиска — это то, что вам высветилось после того, как вы ввели слова в строку поиска и нажали на кнопку ). Человек врятли пойдёт на третью, четвёртую и т. д. страницу поисковой выдачи в поиске подходящего варианта. Скажу даже хуже, по статистике более 50% всех кликов получают первые три позиции в выдаче. Да да, первые три сайта, а не три страницы выдачи. Уже даже на вторую страницу мало кто пойдёт искать. Вспомните себя. Итак, все владельцы сайтов и разработчики хотят чтобы их сайты загружались как можно быстрее, чтобы человек пришедший на него сразу не ушёл и чтобы поисковики не писсимизировали его в своей выдаче. Для этого разроботчики делают разные полезные вещи — улучшают код разными способами и меняют старые файлы на новые с улучшенным кодом. Чтобы получить эти обновления нужно просто следить за ними в своей админке своего WordPress сайта. Если там написанно, что появилось обновление для Темы или плагина — просто нажимаете на кнопку «Обновить» и ждёте несколько секунд. Перед каждым обновлением нужно делать Бэкап (значит копию) баз данных на всякий случай, а после обновления нужно удостовериться — всё ли работает как надо?

2. Полезные элементы функцианала сайта и его навигации. Разработчики WP Шаблонов стремятся к тому чтобы их шаблоны загружали как можно чаще, а для этого нужно сделать их как можно более многосторонними и превлекательными для потенциальных пользователей/покупателей. Для этих целей разработчики постоянно улучшают существующие элементы шаблонов и добавляют новые. Какие бывают элементы? Их существует так много и каждый день люди придумывают всё новые вариации, а иногда изобретают что-нибудь чего раньше небыло, что всё перечислять я здесь не буду, а дам несколько примеров для общего понимания. Например: возможность выбора — шрифта, цвета разных элементов, расположения иконок и изображений, вида записей, расположения любых элементов на отдельно взятой странице. Реализация совместимости шаблона с разнообразными плагинами и/или онлай/офлайн сервисами ( например могут писать, что шаблон идёт с плагином WP-eCommerce ). Реализация какого-либо счетчика на сайте с помощью ajax технологии. Наличие в шаблоне интуитивно понятного Page Builder для визуального строительства своего сайта с помощью разных модулей и блоков, которым может овладеть даже тот кто не знает программирования.Почти все Шаблоны ВордПресса подготовлены для локализации. Что это значит? Это значит что их код имеет некоторые добавления благодаря которым любой человек знающий эту технологию может перевести Шаблон (его текст) на любой язык. Многие шаблоны уже переведены на разные языки. Для перевода шаблона в котором существует такая возможность можно использовать специальные плагины, например крутой плагин WPML или бесплатный qTranslate или по старинке, через программу Poedit .

3. Писать код семантически корректно. Это значит чтобы все теги и другая разметка использовались по их прямому назначению. Например если вы пишите <table> то это правда должна быть таблица содержащая строки и столбцы, а не элемент расположения других блоков разметки.

 

Использование Дочерней Темы рекомендовано всеми профессионалами и самими создателями WordPress

Ещё одна фишка — дочерняя тема. По английски Child Theme. Если вы планируете делать те или иные модификации вашей темы, то всё это должно быть сделано только с использованием дочерней темы. Что это такое? Это файлы расположенные в новой дериктории на хостинге, в коде которых вы делаете нужные вам изминения и они перекрывают код таких же файлов основной темы и не исчезают после её обновлений. Сейчас скажу поподробнее. Допустим ваша тема это Customizr . Для того чтобы установить дочернюю тему достаточно одного лиш файла css. Вы просто делаете новый файл style.css и внутри него в верху вставляете шапку типа этой:

 

/*  Theme Name: Customizr Child Theme

Theme URI: http://presscustomizr.com/customizr/

Description: Child theme for customizr

Author: Evgeny

Author URI: http://mysite.com

Template: customizr

Version: 1.0.0  */

@import url(«../customizr/style.css»);

 

Далее делаете новую папку с названием типа Customizr Child Theme, ложете туда этот style.css и загружаете эту папку на сервер по средством ftp клиента в раздел Тем, это папка themes. Дальше заходите в админку и активируете вашу дочернюю тему. Если всё прошло успешно то можно добавлять в эту папку новые файлы и они будут командовать над теми что в родительской теме. Например вы хотите убрать некоторые ссылки из футера и добавить туда знак авторских прав, год и телефон. Для этого просто скопируйте файл футера родительской темы и вставьте его в вашу новую папку. Теперь редактируйте как хотите этот футер в вашей дочерней теме и после сохранения эти изменения сразу будут видны на вашем сайте и не потеряются после обновлений самой темы.

rss