Главное руководство по созданию личного сайта

Оглавление

4 причины, почему вам нужно сделать личный сайт
Убеждены?
Шаг 1: Получить доменное имя и хостинг
Как выбрать отличное доменное имя
Время, чтобы получить доменное имя и веб-хостинг.
Шаг 2. Установите WordPress и настройте свой сайт
Настройка вашего сайта
Активация SSL на вашем сайте
Знакомство с WordPress
Изменить структуру постоянных ссылок
Настройка структуры страницы
Создание страницы «О себе»
Установите страницу «Обо мне» в качестве домашней страницы
Необязательно: добавление страницы блога
Теперь все будет вместе.
Шаг 3: Настройте дизайн вашего сайта с темой
4 большие тематические рекомендации
Установите свою тему
Проверьте инструмент настройки
Настройте свое меню
Шаг 4. Улучшите свой сайт с помощью плагинов и виджетов
Основные плагины
Давайте Widgetize!
Готово!
Шаг 5 (необязательно): сделайте ваш сайт еще лучше
Персональный сайт SEO: убедитесь, что вы показываетесь в поиске Google
Обновление вашего мозга
Обнови свой сайт
Вывод: куда идти отсюда

Это руководство было впервые опубликовано в марте 2012 года. С тех пор сотни студентов (и даже не студентов!) Создали свои собственные веб-сайты, используя его. Поскольку это одна из самых популярных статей о данных колледжа, я постоянно обновляю это руководство, и оно актуально на июнь 2020 года.

Какой сетевой инструмент № 1 вы можете иметь в своем арсенале, будучи студентом? Я скажу вам это прямо сейчас: это не ваше резюме.



Резюме скучные. Специалисты по карьере советуют сделать ваше резюме на одной странице, размер 11 Time New Roman, напечатанный черными чернилами без рисунков. Шутки в сторону? Как вы должны представлять и дифференцировать себя с этим?

Кроме того, ваше резюме становится статичным и устаревшим с того момента, как вы передаете его кому-то. Вы не можете обновлять резюме, которые вы уже раздали — вам нужно сделать новые копии.

Вот почему вам нужно создать персональный сайт.

Сайт является полной противоположностью резюме. Все плохое в резюме можно исправить, просто имея веб-сайт. Я бы сказал, что отсутствие веб-сайта — это все равно, что выстрелить себе в ногу — это очень полезно.
4 причины, почему вам нужно сделать личный сайт

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

2) Наличие веб-сайта делает вас более доступным. Если все, что у вас есть, это резюме, вы должны выйти и передать его людям, чтобы вывести ваше имя. Если кто-то хочет найти вас в Интернете, а у вас нет веб-сайта, все, что он может получить, это профиль в Facebook или Twitter.

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

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



Убедитесь, что вас могут найти!

3) Не много людей имеют один. Персональные сайты могут быть более распространены в 2020 году, чем десять лет назад, но подавляющее большинство студентов и соискателей по-прежнему полагаются на резюме и сайты поиска работы.

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

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

Скажем, вы подаете заявку на работу в рекламе. Если вы можете сказать интервьюеру, что вы не только отличный маркетолог, но и знаете интернет, вы становитесь более привлекательным кандидатом.
Убеждены?

Я очень на это надеюсь, потому что это руководство научит вас, как создать этот замечательный сайт!

Я потратил более 15 часов на написание этого руководства (а также на создание снимков экрана и их редактирование) с целью сделать его идеальным ресурсом для выхода в Интернет. Когда вы закончите, вы получите отличное присутствие в Интернете.

Если вы хотите увидеть некоторые личные примеры на веб-сайте, прежде чем начать, вот как выглядит мой сегодня:

(Кстати — если вам нравится дизайн моего сайта, позже в руководстве вы найдете подробное видео-учебник, в котором вы узнаете, как я создал его с помощью бесплатной темы. Следите за этим в Шаге 3).

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

личный сайт студента Томаса Фрэнка.

Личный сайт и портфолио, которые я использовал как студент колледжа.

Вот еще один замечательный пример — это сайт-портфолио моей девушки, на котором она демонстрирует свои иллюстрации и работы по графическому дизайну:

Сайт портфолио графического дизайнера Анны.

Сайт портфолио моей подруги Анны — хороший пример, на который стоит обратить внимание, если вы графический дизайнер.

Я усердно работал над тем, чтобы сделать это руководство как можно более полным и в то же время доступным. Оно немного затянулось, но это потому, что от буквального «ничего» до готового сайта.

В этом руководстве вы научитесь:

Получить доменное имя и веб-хостинг для своего сайта.

Легко установить WordPress (выбранный мной конструктор сайтов) и получить весь свой контент в интернете без знания кодов

Сделайте ваш сайт выглядеть хорошо с отлично выглядящей темой

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

Улучшите SEO вашего сайта и найдите ресурсы, которые могут научить вас, как продвинуть ваш сайт еще дальше, если вы хотите.

Вы можете относиться к этому списку как к оглавлению; если вы хотите перейти к определенному разделу, просто щелкните по нему. В противном случае, не стесняйтесь проезжать через весь путеводитель по порядку.

Что вам нужно знать заранее:

Как пользоваться интернетом

Как следовать инструкциям

То, что тебе не нужно знать / иметь заранее:

HTML, PHP, CSS, Javascript, JQuery, XML, XSLT, Ruby, Zend, Python, Flash, MySQL, Nginx, Apache или любой другой язык.

Photoshop, Dreamweaver или любая другая программа — они могут быть очень полезны для настройки вещей в дальнейшем, но для того, чтобы встать и запустить все, что вам понадобится — это веб-браузер.

Кунг-фу, Наруто джуцу или ракетная хирургия.

Серьезно, создать сайт не сложно, и вам не нужно знать никакого кода. Знание кода может пригодиться для дальнейшей доработки и настройки, но вы можете получить базовые знания, не зная так много, как лизкий HTML!

Приблизительное время для завершения этого учебника: 1-2 часа (больше всего времени вы потратите на нетехнические вещи, такие как написание контента).

Примечание #1: Если вы застряли в какой-то момент в этом учебнике и нуждаетесь в помощи, я буду более чем счастлив помочь вам. Вы можете связаться со мной в Твиттере или по электронной почте. Я серьезно — пожалуйста, задавайте вопросы, если застрянете. Я бы не хотел, чтобы кто-то прошел через кучу работы и не закончил с отлично выглядящим сайтом.

Примечание #2: Я рекомендую некоторые специфические продукты и услуги в этом учебнике. Имейте в виду, что это не единственный ваш выбор; это просто то, что я использую лично и рекомендую.

Полный отказ от ответственности: Если вы решите использовать домен и хостинг вариант, который я рекомендую в этом учебнике и нажмите мои ссылки, чтобы добраться до него, я буду зарабатывать комиссионные (хотя нет никаких дополнительных затрат для вас — на самом деле это будет довольно дешевле, так как я могу предложить купон код). Я хочу быть очень ясным, что есть определенно другие хорошие варианты для вашего домена и хостинга там. Это просто тот, который я использую с самого начала, и я очень доволен. Если вы все же решите использовать мою ссылку, спасибо!

Ладно, хватит о предварительных вещах. Давайте начнем строить ваш сайт.

Шаг 1: Получите доменное имя и хостинг

Первый шаг к созданию вашего персонального сайта — это выбор способа его размещения. Существует несколько способов размещения сайта. Например, вы можете просто создать бесплатный блог на Weebly или WordPress.com, или даже Tumblr.

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

Я не единственный, кто так думает. Один из моих любимых предпринимателей, Сринивас Рао, дал этот совет начинающим блоггерам:

«Если вы хотите, чтобы вас воспринимали всерьез, то убедитесь, что у вас есть самопровозглашенный блог WordPress».

Так что, пока все зависит от тебя, я бы порекомендовал самохостинг твоего сайта. Тем не менее, иметь бесплатный сайт на WordPress.com или другое место, если у вас ограниченный бюджет, гораздо лучше, чем не иметь сайт вообще!

Теперь, прежде чем мы вникнем во все эти ничтожные пошаговые штучки, я хочу, чтобы вы сначала подумали об одной вещи: о вашем доменном имени. И первое правило выбора доменного имени…

Не регистрируй SailorMoonFreak94435.biz, тупица.

Не могу это так подчеркнуть: тебе нужно хорошее доменное имя. Что делает хорошее доменное имя? Для личного сайта или портфолио я бы рекомендовал придерживаться следующих критериев.

Как выбрать хорошее доменное имя

Во-первых, если это вообще возможно, сделайте ваше доменное имя вашим первым именем + ваша фамилия.com. Это действительно лучший вариант для запоминания и SEO (так же известный, как и то, как высоко вы появляетесь в Google).

Если у вас есть общее имя (как у меня), это, скорее всего, уже принято. Я, конечно, не смог получить thomasfrank.com, так что мне пришлось пойти с thomasjfrank.com вместо этого. Если ваше имя будет взято, вы можете бросить средний инициал или, может быть, даже ваше полное среднее имя, если это не делает домен слишком длинным.

Вы также можете использовать умную игру на ваше имя, если ничего из вышеперечисленного не работает. Например, мое имя пользователя в Instagram — TomFrankly — поэтому я также зарегистрировал tomfrankly.com.

Не используйте номера в вашем доменном имени, а используйте тире, только если это абсолютно необходимо.

Когда речь идет о расширениях домена:

Используйте: .com (предпочтительно), .me, .org, .co

Избегайте: .info, .biz и всего, что звучит непрофессионально.

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

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

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

Пора получить доменное имя и веб-хостинг.

Раньше вам приходилось покупать доменное имя отдельно от веб-хостинга. Теперь, однако, Вы можете получить их из одного и того же места, в одно и то же время. Купить их отдельно — это все равно вариант, но гораздо проще собрать их вместе.

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

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

Существует буквально миллион вариантов веб-хостинга. Вы можете использовать общий аккаунт, VPS или сойти с ума и заплатить за собственный выделенный сервер.

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

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

Учитывая это, я рекомендую просто получить базовый план виртуального хостинга от HostGator. (Опять же, полное раскрытие, я заработаю комиссионные, если вы купите через эту ссылку — если вы решите это сделать, спасибо!).

Есть много хороших хостов, так что HostGator, безусловно, не единственный, который вы можете использовать, однако, я размещаю все свои сайты через них более трех лет, и я всегда был более чем доволен, потому что:

Их планы довольно дешевы (и, в частности, дешевле, чем планы премиум-класса от таких компаний, как Squarespace и Wix).

Вы получаете бесплатное доменное имя (при условии, что это домен .com, .org или .net, вы становитесь новым клиентом и получаете 12-месячный план или более).

Почти никогда не бывает простоев

Мне нравится иметь опции быстрой установки для установки сборщиков сайтов, таких как WordPress (то, что мы будем использовать в этом руководстве).

Их поддержка — это просто крутой засранец.

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

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

Вы также можете получить довольно хорошую скидку.

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

Итак, используйте код купона COLLEGEINFOGEEK, чтобы получить 55,87% скидку от вашей первоначальной покупки хостинга (или даже 62% скидку, если вы выберете 3-летний план).

Это на самом деле на 30-40% больше экономии, чем вы бы получили с кодом купона по умолчанию, который они вам дают, так что определенно используйте его, если вы решите использовать HostGator. (Если вы нажали на одну из ссылок выше, код должен быть заполнен автоматически).

Так что да. Это руководство предполагает, что вы используете HostGator; однако, если вы выберете другой хост, эти инструкции должны быть довольно похожими на то, что вам нужно сделать.

Перейдите на HostGator и нажмите на большую кнопку с надписью «Начать прямо сейчас». (Опять же, я сделаю комиссию, если вы купите через эту ссылку — если вы выберете это, спасибо!).

Начните свое путешествие с выбора плана Хэтчлинга, который является самым дешевым и это все, что вам нужно, если вы просто строите один сайт.

Выберите план Хэтчлинга

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

Кроме того, если вы выберете план хостинга на 12 месяцев или дольше, вы сможете получить свой домен бесплатно на один год. Есть несколько предостережений — это только для доменов .com, .net и .org, вам нужно быть новым клиентом, и вы должны купить его одновременно с покупкой хостинга — но это все равно довольно большая сделка.

Регистрация нового домена

Под всеми вариантами расширения домена вы увидите опцию добавления защиты конфиденциальности домена.

Это услуга, которая предотвращает появление вашего имени, адреса и номера телефона в WHOIS поиске. Большинство людей не знают о WHOIS, и раньше это могло сойти вам с рук.

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

Опция Защита конфиденциальности домена

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

Далее прокрутите вниз и завершите следующие несколько разделов:

Убедитесь, что выбран пакет Hatchling, и выберите, сколько месяцев хостинга вы хотите получить вперёд. Я рекомендую как минимум один год.

Выберите имя пользователя и PIN-код безопасности.

Введите свой личный и расчетный мусор.

Необходимо выбрать план хэтчлинга. Я рекомендую получить, по крайней мере, год.

Необходимо выбрать план хэтчлинга. Я рекомендую получить не менее года.

Далее вы увидите раздел для дополнений к хэтчлингу. Честно говоря, я не думаю, что вам понадобится что-либо из этого, включая дополнение SSL-сертификата.

Для ясности, я думаю, что у вас должен быть SSL. Это позволит вашему сайту иметь маленькую иконку блокировки «Secure», которую вы, вероятно, увидите в адресной строке для этого сайта. Наличие этого значка делает ваш сайт более надежным для посетителей.

Однако, если вы прочитаете мелкий шрифт под надстройкой, вы увидите, что HostGator уже включает бесплатный SSL-сертификат. Дополнение — это просто «обновлённый» SSL-сертификат, который совершенно не нужен.

Поэтому вы можете оставить все коробки незамеченными, чтобы сэкономить себе немного денег. В разделе «Плагины» я покажу вам некоторые способы обеспечения безопасности вашего сайта, регулярное создание резервных копий и, скорее всего, высокое появление в результатах поиска Google (или «оптимизированных для SEO», как мы, веб-дизайнеры, любим говорить) — и все это бесплатно.

Хостинг дополнений. Я не думаю, что вам действительно нужно что-то из этого.

Наконец, просмотрите ваш заказ, чтобы убедиться, что все в порядке, и убедитесь, что код COLLEGEINFOGEEK есть, чтобы получить до 62% скидка — на 42% больше, чем их код по умолчанию дает вам 🙂.

Наконец, нажмите на большую синюю кнопку, чтобы создать свой аккаунт.

Просмотрите ваш заказ, затем создайте свой аккаунт.

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

Шаг 2: Установите WordPress и настройте Ваш сайт

Пора начинать строить свой сайт

Как я уже упоминал в начале, вы будете использовать инструмент под названием WordPress (самохостинг, а не WordPress.com), чтобы настроить ваш сайт. Возможно, вы слышали, что WordPress в основном является платформой для ведения блогов, что полностью соответствует действительности.

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

WordPress известен тем, что его установка занимает всего 5 минут; я говорю, что это слишком долго. Давайте сделаем это за 2 минуты.

Одна из лучших особенностей HostGator — это возможность быстрой установки практически для всех популярных CMS (Content Management System — система управления контентом). Конечно, у них есть одна для WordPress. Давайте его настроим. (Еще раз, я сделаю комиссионные, если вы купите через эту ссылку — если вы решите это сделать, спасибо!).

Для начала введите этот URL в ваш браузер (но замените «yourcoolnewdomain» на доменное имя вашего сайта): yourcoolnewdomain.com/cpanel.

Если по какой-то причине вы еще не можете связаться с вашим доменом (иногда это может занять некоторое время на настройку), воспользуйтесь ссылкой, которую вы получили в письме HostGator, в списке вашей панели управления.

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

Теперь вы будете смотреть на вашу панель управления. Чтобы установить WordPress, зайдите в раздел «Учетные данные» и найдите ссылку на WordPress Installer.

Щелкните WordPress Installer в cPanel HostGator.

WordPress Installer — инструмент, который поможет вам автоматически установить WordPress за считанные секунды.

На появившейся странице выберите из выпадающего меню свое доменное имя. Это должен быть единственный из перечисленных вариантов.

Убедитесь, что вы оставили поле каталога пустым — таким образом, ваша домашняя страница будет установлена на ваш домен (т.е. yourcoolnewdomain.com), а не в подпапку.

Установка WordPress — выбор домена

Выберите свой домен из выпадающего списка.

Затем заполните форму на следующей странице:

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

Выберите имя администратора. Не используйте «admin», т.к. оно небезопасно (т.к. обычно используется). Все остальное в порядке 🙂.

Введите ваше имя и фамилию — они также могут быть изменены позже при необходимости.

Введите адрес электронной почты администратора. Убедитесь, что это тот, который Вы используете.

Отметьте оба поля под текстовыми полями.

Нажмите Установить сейчас.

Установка WordPress — имя пользователя и подробная информация о сайте.

Завершение процесса установки.

После этого вы должны увидеть большую зеленую галочку и слова «Установка завершена».

Вы также должны увидеть раздел под названием «Детали установки». Здесь вы найдете имя пользователя WordPress и сгенерированный пароль. Убедитесь, что вы храните их для дальнейшего использования.

Установка WordPress Завершена

Найдите здесь свое имя пользователя и пароль WordPress.

Под подробной информацией об установке Вы увидите некоторые предложения по премиум-темам, которые Вы можете использовать. Я бы рекомендовал пропустить их — я укажу тебе на некоторые удивительные бесплатные темы позже в этом руководстве. На самом деле, мой личный сайт построен на бесплатной теме.

Теперь у вас должна быть полнофункциональная инсталляция WordPress! Если Вы посетите свой сайт прямо сейчас, то увидите страницу «Website Coming Soon» — которая исчезнет и будет заменена Вашим новым сайтом после того, как Вы войдёте в WordPress Dashboard и запустите его.

Чтобы попасть на Приборную панель, введите в браузере yourcoolnewdomain.com/wp-admin — здесь Вы сделаете все остальное, что связано со сборкой/настройкой Вашего сайта. Наверное, было бы неплохо сделать закладку по этой ссылке!

URL-адрес администратора WordPress

Добавьте «/wp-admin» к вашему домену, чтобы попасть в WordPress Dashboard.

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

Настройка вашего сайта

Обычно WordPress не держит руку на пульте; как только вы войдете в Dashboard, вы получите доступ ко всем инструментам, и только от вас зависит, что они все сделают.

Однако, версия WordPress, которую устанавливает скрипт cPanel HostGator, поставляется с коротким мастером, который может помочь вам в процессе настройки некоторых вещей. Но мы не будем его использовать.

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

Чтобы начать, нажмите на ссылку «Мне не нужна помощь» под кнопками «Бизнес» и «Личное».

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

На левой стороне приборной панели нажмите Плагины.

Установите флажок рядом с Jetpack by WordPress.com, MOJO Marketplace и OptinMonster API.

Щелкните выпадающее меню с надписью «Bulk Actions» (Массивные действия) и выберите «Deactivate» (Деактивировать). Нажмите «Применить».

Теперь установите флажок рядом со всеми плагинами — кроме Akismet.

Щелкните еще раз выпадающее меню «Bulk Actions» и выберите Удалить. Нажмите Применить.

Что такое Акисмет, спрашиваешь? Akismet — это плагин, который помогает держать разделы комментариев блога подальше от спама. Если вы решили добавить блог на свой сайт (что очень просто с помощью WordPress), и вы хотите включить возможность комментировать ваши сообщения, Akismet пригодится вам. Если нет, вы всегда можете вернуться позже и удалить его.

Активация SSL на Вашем сайте

Перед тем, как добавить какой-либо контент на ваш сайт, вы захотите пройти быстрый процесс активации бесплатного SSL-сертификата вашего сайта.

Это позволит гарантировать, что посетители автоматически попадут на защищенный «https://yourcoolnewdomain.com», а не на незащищенный «http://yourcoolnewdomain.com».

Если эта разница для вас ничего не значит, ну… все, что вам нужно знать, это то, что при этом ваш сайт будет выглядеть более надежным и безопасным. Например, если вы посмотрите в адресную строку этого сайта, вы, вероятно, увидите либо значок замка, либо слово «Безопасный» рядом с URL моего сайта.

Пример SSL

Это потому, что у меня есть активный SSL-сертификат для моего сайта. Без него в адресной строке было бы написано «Небезопасно». Если вы хотите узнать больше об этом, посмотрите статью Google о том, почему HTTPS имеет значение.

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

И — к счастью, это действительно легко сделать, если только вы это сделаете перед тем, как добавлять контент на ваш сайт.

(Если Вы уже по каким-то причинам добавили контент на свой сайт, надежда не пропадает. Однако, этот процесс может быть немного более сложным. Ознакомьтесь с этой статьей для пошагового процесса решения проблем, которые могут возникнуть).

Итак — прежде чем Вы начнете строить свой сайт — давайте сделаем одну вещь быстро. Если вас еще нет, перейдите в раздел Plugins (Плагины) на Dashboard (Приборная панель):

Нажмите Добавить Новое.

Поиск действительно простого SSL. Это плагин, который автоматически включит SSL на вашем сайте.

Установите плагин, активируйте его, а затем нажмите на кнопку, которая появится после этого, чтобы полностью активировать SSL.

Вот и все!

(Примечание: Бесплатный SSL-сертификат иногда может занять до 24 часов для активации на вашем аккаунте после покупки хостинга. Если действительно простой SSL-сертификат сначала не работает, попробуйте подождать 24 часа, а затем активировать его снова. В этом случае вы все равно сможете безопасно создавать новые страницы и добавлять текст — я просто советую вам подождать загрузки любых изображений до тех пор, пока Really Simple SSL не заработает).

Теперь, прежде чем мы испачкаем свои руки бизнесом по созданию страниц и все такое, давайте потратим несколько минут на то, чтобы почувствовать WordPress Dashboard.

Знакомство с WordPress

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

Вот снимок того, что вы должны увидеть при входе в систему:

Обзор приборной панели WordPress…

Приборная панель WordPress — где выполняется вся работа.

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

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

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

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

Медиа — центральный репозиторий для любых изображений, звуковых файлов, видео и других носителей, которые вы загружаете на свой сайт. Здесь Вы можете просматривать и редактировать медиа, которые Вы загрузили в свои сообщения и загрузить ещё больше.

Страницы — здесь вы можете создать Страницы, которые вы будете использовать для основного контента на вашем сайте. Страницы отличаются от Позиций тем, что они будут отображаться в основной навигации Вашего сайта вместо того, чтобы заходить в Ваш список сообщений в блоге. Это делает Pages полезными для «вневременного» контента, такого как ваша биография, история работ и контактная информация.

Комментарии — здесь вы можете увидеть комментарии в вашем блоге (если вы решите иметь).

Внешний вид — здесь вы сможете настроить внешний вид вашего сайта. Есть варианты темы вашего сайта, меню и виджеты, которые вы хотите отобразить. Есть также рудиментарный редактор кода, но он не очень хорош. Если вы доходите до того, что хотите вручную отредактировать тему вашего сайта, я рекомендую CodeAnywhere.

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

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

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

Настройки — в этом разделе собраны все общие настройки для вашего сайта. Здесь много всего.

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

Однако, прежде чем Вы начнете создавать свои страницы, давайте позаботимся о паре важных вещей!

Измените свою структуру Permalink

Когда вы создаете страницу, WordPress делает так, чтобы URL отображал заголовок страницы. Например, страница под заголовком «Контакт» получит URL как yourcoolnewdomain.com/contact. Это то, что вы хотите.

Однако, по умолчанию WordPress не делает этого для постов в блогах. Вместо этого, он создает эти уродливые цифровые URL типа yourcoolnewdomain.com/?p=123. Эти URL ничего не значат — это гораздо лучше, чтобы заголовок вашей записи блога быть URL.

Для этого вам нужно изменить структуру пермалинки. Это довольно просто:

Наведите курсор на «Настройки» и нажмите «Пермалинки».

Выберите опцию «Имя сообщения».

Сохраните изменения.

Настройка Пермалинка

Выберите настройку пермалинки для имени сообщения.

Теперь URL сообщения в вашем блоге будут намного более запоминающимися.

Теперь, когда вы закончили заботиться об этой маленькой детали, пришло время создать свои страницы и получить свой контент в Интернете!

Настройка структуры страницы

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

Взгляните еще раз на навигацию моего сайта, чтобы понять, к чему Вы клоните:

Так как мой текущий личный сайт в основном использует одностраничный дизайн (нажатие на ссылки просто перемещает вас в соответствующий раздел страницы), вы также можете взглянуть на один из моих предыдущих дизайнов сайта, в котором использовался многостраничный подход:

Навигационная структура сайта, которую я использовал в колледже.

Главное меню на моем предыдущем сайте

Поскольку вы смотрите на эти два разных подхода, вы можете спросить себя:

«Должен ли я использовать одностраничный или многостраничный дизайн?»

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

Если вы изучите мой текущий сайт, вы увидите, что большинство моих основных разделов ссылаются на другие места в Интернете — мой канал на YouTube, мои подкасты, говорящая страница здесь на College Info Geek и т.д. Это стратегическое решение — как профессиональный YouTuber/writer, это лучшие места для меня, чтобы направлять людей, так как я получаю выгоду от того, что люди подписываются на мой контент, а не оценивают его.

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

Так что спросите себя — какова цель моего сайта? Кто является целевой аудиторией? Используйте эту информацию для принятия решения.

Если вы студент, то, скорее всего, вашим основным приоритетом будет прием на работу или отбор на получение стипендий/возможностей для научных исследований/ и т.п. Я думаю, что многостраничный дизайн лучше всего подходит для этих целей. В конце концов, это ваш выбор!

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

Краткое описание страницы «Обо мне», которую вы установите в качестве своей домашней страницы.

Более подробная страница биографии

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

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

Другие страницы, которые Вы, возможно, подумаете о добавлении, если они применимы к Вашей жизни:

Портфолио для демонстрации любой работы, которую вы проделали — графический дизайн, программирование проектов, написание — все, что угодно. На моем предыдущем сайте я создал портфолио своих работ в Интернете, используя обычный шаблон страницы. Таким образом Вы можете сделать свое портфолио или получить тему с определенным шаблоном портфолио. Загляните на сайт моей подруги Анны для примера.

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

Блог. По умолчанию WordPress настроен на ведение блога, но вы установите свою домашнюю страницу как статическую страницу About Me. Таким образом, вам нужно будет настроить свой блог вручную, что все еще очень просто. Вы также можете оставить блог, если хотите, но я думаю, что это отличный способ показать свои знания и мысли. Вот как я внедрил блог на своем личном сайте.

Страница для прессы, где вы можете перечислить любые интервью или упоминания, которые вы получили в средствах массовой информации. Посмотрите мою страницу Пресса/СМИ для примера.

Невозможный список. Я думаю, что создание такой страницы — это действительно весело и может помочь вам закрепить ваши жизненные цели.

Если вы хотите получить более подробное объяснение о страницах, которые вы должны включить, ознакомьтесь с моим сообщением об основных компонентах сайта — которое также включает в себя несколько замечательных примеров других персональных сайтов. (Хотите даже БОЛЬШЕ примеров? Посмотрите коллекцию из 50 потрясающих личных сайтов и портфолио, которые мы недавно опубликовали).

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

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

Сначала избавитесь от образца сообщения, перейдя в раздел «Сообщения» на панели управления WordPress. Найдите сообщение с заголовком «Hello World!» и нажмите кнопку «Корзина».

Затем перейдите в раздел Pages и сделайте то же самое для страницы под названием Sample Page.

Создание страницы «Обо мне»

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

Давайте создадим ее!

Вы уже должны быть в разделе Pages панели WordPress. Найдите кнопку в верхней части, на которой написано Добавить Новое. Вы увидите этот экран:

Пустая страница в редакторе WordPress

Как видите, создание страниц в WordPress довольно просто. Чтобы начать работу со своей страницей About Me, сначала введите заголовок в строке заголовка. Наверное, имеет смысл озаглавить эту страницу «About Me» или «About <you name>».

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

Взгляните на различные инструменты, доступные для форматирования содержимого; как вы узнаете, использование WordPress не так уж сильно отличается от использования Microsoft Word.

Параметры форматирования текста WordPress

Большинство из этих инструментов позволят вам форматировать текст, добавлять ссылки и так далее. Вы также можете добавлять изображения в свой пост, создав блок изображений.

Для этого поместите курсор на ту точку в содержимом, где вы хотите, чтобы фотография появилась. Затем нажмите на иконку «Плюс» слева от содержимого и выберите «Изображение» из появившегося списка.

Добавление блока изображений

Теперь выберите один из вариантов.

Выбор способа добавления изображения

Обычно вы хотите выбрать «Загрузить».

Бум — у тебя есть фото на странице.

После того, как у вас есть фотография и текст, нажмите «Опубликовать». Это сделает вашу страницу живой.

Примечание: На момент последнего обновления этого руководства редактором WordPress по умолчанию является Gutenberg. Мы обновили наши скриншоты, чтобы они отражали новый редактор, но мы, честно говоря, по-прежнему предпочитаем редактор Classic WordPress. Если вас интересует разница (и как переключить ваш сайт в редактор Classic), ознакомьтесь с этим руководством.

Установите вашу страницу «About Me» в качестве домашней страницы.

На данный момент твоя страница «Обо мне» должна выглядеть примерно так:

About Me Страница с Темой по умолчанию

Как будет выглядеть ваша страница с текущей темой по умолчанию WordPress.

Тем не менее, WordPress покажет вам блог раздел как домашнюю страницу по умолчанию, а не эту страницу.

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

На боковой панели наведите курсор на «Настройки» и нажмите кнопку «Чтение».

В разделе Отображение передней страницы нажмите на кнопку с надписью Статическая страница.

Выберите свою страницу About Me, чтобы стать главной страницей.

Если Вы хотите иметь блог, создайте и опубликуйте пустую страницу под названием Блог и установите ее в качестве ПОСТ-страницы.

Сохраните изменения.

Установка статической страницы в качестве главной.

Установка домашней страницы.

Теперь вернитесь в раздел Pages в WordPress и создайте остальные свои страницы. Этот процесс должен быть относительно простым; единственное, что может быть сложнее — это страница Контакты.

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

Сделать свой адрес электронной почты действительно легко — просто выделите любой фрагмент текста (в данном примере я напечатал [фальшивое] электронное письмо, но вы можете использовать любой текст), нажмите на значок Ссылки (или нажмите CTRL/CMD+K) и введите «mailto:whatevertheemailis@domain.com» без кавычек.

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

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

Необязательно: Добавление страницы блога

Если вы хотите добавить страницу блога на свой сайт, это нелегко.

Просто сделайте на сайте еще одну новую страницу под названием «Блог» (или что угодно, неважно). Затем на Dashboard вернитесь к Settings -> Reading (Настройки -> Чтение) и установите страницу Posts (Сообщения) в качестве только что созданной страницы.

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

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

Сейчас все собирается вместе

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

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

Шаг 3: Настройте дизайн вашего сайта с помощью темы

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

Тема в основном является шаблоном или кожей для вашего сайта. Она меняет внешний вид, сохраняя при этом весь созданный вами контент.

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

4 Великие Тематические Рекомендации

Я вышел и нашел четыре темы WordPress, которые, как мне кажется, хорошо работают для персональных сайтов. Имейте в виду, что там буквально тысячи тем, так что это только начало.

Простая тема

Эту тему я использую на своем личном сайте. Она невероятно многогранна, так как это тема в стиле конструктора, которая позволяет настроить каждую страницу в огромной степени. Кроме того, это бесплатно.

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

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

Вербоса

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

На мой взгляд, Verbosa легче учиться, чем Simple, что является справедливым компромиссом за более низкий уровень гибкости.

Загляните на домашнюю страницу темы для получения обновлений и документации.

Lovecraft

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

Ultra

В отличие от трех предыдущих тем, которые я перечислил здесь, Ultra является премиальной темой. Это значит, что она стоит денег — около 50 долларов, как я написал это. Так зачем же платить за тему, если там так много бесплатных тем? Проще говоря, это гибкость.

Ultra — это тема, созданная Themify — теми же самыми людьми, которые сделали Simple, о которой я упоминал выше. В то время как Simple действительно очень гибкая — особенно для бесплатной темы — Ultra поднимает вещи на ступеньку выше.

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

Лично я нахожу бесплатную простую тему достаточной для своих нужд. Если вам нужны дополнительные функции и еще больше гибкости, то Ultra — это моя главная рекомендация. Примечание: Поскольку темы Simple и Ultra создаются одними и теми же людьми и используют одну и ту же основу, вы можете начать с темы Simple и перенести все, что вы создали, в Ultra, если она вам понадобится.

Хотите еще больше тем? Вот несколько замечательных мест для поиска:

Официальный репозиторий тем WordPress — крупнейший источник бесплатных тем.

Themify — мое нынешнее любимое место, где можно найти темы WordPress.

Элегантные темы — моя девушка Анна использует их тему Divi для своего сайта.

Как я уже говорил, у тебя буквально бесконечное количество вариантов тем. Исследуй и найди то, что тебе нравится! Также посмотрите, есть ли в выбранной вами теме шаблон страницы контактов. Если да, то вы сможете разместить форму контакта без использования плагина.

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

Установите вашу тему

Где бы вы ни нашли свою тему, загрузите ее на свой компьютер. Скорее всего, тема попадет в .zip-файл. Загляните внутрь этого zip-файла.

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

Большинство тем будет поставляться с документацией, которая расскажет вам, как или даже если вам нужно это сделать, так что проконсультируйтесь с этим за помощью, если она вам нужна.

Как только у вас будет последний .zip файл, пришло время установить его.

На панели управления WordPress наведите курсор на внешний вид и нажмите Темы.

Перейдите на вкладку вверху, где написано «Установить темы».

Найдите и нажмите на ссылку с надписью Upload (Загрузить).

Выберите свой .zip-файл и нажмите кнопку Install Now (Установить сейчас).

Убедитесь, что тема была успешно установлена, и нажмите Активировать.

Загрузка темы

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

Ознакомьтесь с инструментом «Настройка»

Почти каждая тема WordPress там даст вам несколько вариантов для настройки логотипа вашего сайта, цветов и других особенностей. Некоторые темы могут поставляться в комплекте со специальными областями меню в Dashboard для определенных настроек, но большая часть Вашей настройки будет осуществляться с помощью встроенного инструмента WordPress Customize Tool.

Чтобы получить к нему доступ, наведите курсор на Внешний вид, а затем нажмите кнопку Настроить.

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

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

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

Запомните: В зависимости от вашей темы, инструмент «Настройка» может быть не единственной областью, где вы можете внести изменения! Например, тема, которую я использую на своем личном сайте, Simple (ссылка выше), содержит целый инструмент для создания страниц, доступ к которому можно получить на каждой странице.

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

Настройте ваше меню

Одну вещь я просмотрю, прежде чем мы перейдем к следующему разделу: Функциональность пользовательского меню WordPress.

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

Изменить порядок страниц в их меню

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

Спрашивайте, и вы получите. Я создал короткое видео, которое проведет вас через весь процесс создания пользовательского меню для вашего сайта.

Теперь, когда у вас есть своя тема, пришло время немного подкорректировать ее, добавив плагины и виджеты.

Шаг 4: Усовершенствуйте свой сайт с помощью плагинов и виджетов.

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

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

Установка плагинов довольно проста. В отличие от тем, почти каждый плагин, который вам когда-либо понадобится, хранится в официальном репозитории плагинов WordPress. Поэтому вам не нужно загружать .zip-файлы — вы можете просто искать плагины прямо на Dashboard и устанавливать их! Для этого:

На приборной панели WordPress наведите курсор на Plugins и нажмите Add New.

Ищите нужный вам плагин. Функция поиска не удивительна, так что вы, как правило, получаете лучшие результаты, вводя точное название плагина, который вы ищете.

Нажмите Подробнее, чтобы прочитать о плагине или Установить сейчас, чтобы установить его.

После установки нажмите Активировать.

Если есть какие-либо установки, необходимые для плагина, позаботьтесь об этом.

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

Установка плагинов

Здесь вы будете искать и устанавливать плагины.

Я рекомендую просмотреть плагины в каталоге WordPress Plugin Directory перед их установкой. Если плагин имеет низкий рейтинг звездочек, он может быть сломан — или, что еще хуже, у него могут быть уязвимости в безопасности, которые могут открыть ваш блог для атак. Будьте осторожны там, солдат.

Необходимые плагины

Есть несколько плагинов, без которых я не был бы застигнут в этих открытых морях Интернета. Я тоже рекомендую их использовать. Я сделаю ссылку на страницу каждого из репозиториев, но помните, что вы можете установить их прямо с панели Dashboard, просто выполнив поиск.

Ninja Forms — простой, удобный плагин контактных форм. Просмотрите документацию для получения инструкций о том, как все настроить.

WP Super Cache — проще говоря, этот плагин сделает загрузку Вашего сайта намного быстрее для Ваших посетителей. По умолчанию WordPress извлекает информацию из своей базы данных каждый раз, когда посетитель загружает страницу. Этот плагин будет «кэшировать» большую часть этой информации, позволяя загружать ее очень быстро, без необходимости обращения к базе данных.

UpdraftPlus — пожалуй, лучший бесплатный плагин для резервного копирования сайта, который я видел. Позволяет вручную создавать резервные копии базы данных или всего сайта. Вы также можете установить регулярные, запланированные резервные копии (которые я рекомендую), и отправить их в удаленные пункты назначения, такие как Dropbox, Amazon S3, электронная почта, и т.д.

WP MyLinks — бесплатный плагин, который позволит вам создать простую «страницу ссылок» — a la LinkTree — но размещенную на вашем сайте вместо того, чтобы полагаться на третью сторону. Они отлично подходят для Instagram bios, так как позволяют создавать ссылки на несколько вещей. Вот мой, если вам нужен пример.

Эти плагины — только верхушка айсберга. Если есть что-то, что вы хотите сделать с вашим сайтом, вероятно, есть плагин, который может помочь вам сделать это.

Хорошо, теперь, когда у Вас установлены плагины, давайте перейдем к последнему битовому моменту — виджетам.

Давай Виджет!

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

Примечание: Если вы используете тему в стиле конструктора, например Simple (ту, которую я рекомендовал выше), вам, вероятно, не придется беспокоиться о виджетах WordPress. Темы для сборки обычно включают эти типы вещей в свои инструменты для сборки.

Для редактирования виджетов, отображаемых на вашем сайте, выполните следующие действия:

На панели инструментов WordPress наведите курсор на Внешний вид и нажмите на Виджеты.

В правой части экрана вы увидите все области виджетов, которые были созданы для вашей темы.

Перетащите нужные виджеты из средней области в нужные поля.

Измените все необходимые настройки виджетов.

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

Область Виджеты приборной панели WordPress.

Настройка виджетов

Так как это персональный сайт, есть некоторые специфические виджеты, которые вы, возможно, захотите показать:

Ссылки — если у вас есть друзья, у которых тоже есть персональные сайты, может быть круто дать ссылку на них. Я сделал это на боковой панели моего предыдущего персонального сайта; это был классный способ создать визуальную сеть студенческих предпринимателей.

Текст — как говорится, это виджет для «произвольного текста или HTML». В этот список можно поместить все, что угодно, при условии, что вы знаете смайджен кода. Например, можно добавить фотографию себя и суперкороткий биографию, как я сделал на этом сайте. Или вы можете вставить свои твиты с помощью виджета профилей Twitter. Здесь много возможностей.

Готово!

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

Поздравляем! Вы только что увеличили свой интернет-кредит +1000 и одновременно сделали себя гораздо более привлекательным кандидатом на любую работу, на которую Вы захотите устроиться.

Великий успех!

Вот список быстрых дел, чтобы быть уверенным, что вы получите максимальную отдачу от вашего сайта:

Самое главное: Добавить URL-адрес в верхней части вашего резюме — и если вы отображаете любую работу на вашем сайте, рассмотреть вопрос о маркировке его «портфель», так что рекрутеры знают, чтобы проверить его.

Сделайте себе некоторые пользовательские визитные карточки и не забудьте включить ваш URL на них

Положите ваш URL-адрес в вашем Твиттере биографии

Добавьте свой URL в другие социальные сети — Facebook, Pinterest, LinkedIn, Google+ и др.

Начните думать о своем сайте как о своей онлайн «базе операций».

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

Пришлите мне URL вашего нового сайта в Твиттер! Я с удовольствием проверю его и посмотрю, что вы смогли придумать.

Итак, для тех из вас, кто хочет пойти дальше и выше, давайте сделаем последний шаг.

Шаг 5 (необязательно): Сделайте ваш сайт еще лучше

Целью данного учебника было максимально упростить процесс создания рабочего сайта с нуля. Однако, вы можете сделать гораздо больше для оптимизации дизайна вашего сайта, скорости, SEO, безопасности, навигации, типографии… Ваши возможности бесконечны.

Вот почему я хочу показать вам некоторые вещи, которые вы можете сделать, чтобы поднять ваш сайт на новый уровень. Я также укажу вам на некоторые ресурсы, которые вы можете использовать для начала!

Личный SEO сайта: Чтобы быть уверенным, что вы появитесь в поисках Google.

Один из наиболее часто задаваемых вопросов, который я получаю, связан с созданием сайта:

«Как сделать так, чтобы мой сайт появился в поисковых системах Google?»

Это подводит нас к теме оптимизации поисковых систем, или SEO. Теперь, буду честен — SEO может быть сложным бизнесом. В конце концов, мы говорим о том, чтобы сделать наши сайты хорошо выглядеть на умопомрачительно сложный алгоритм, в котором есть детали, которые Google держит под пристальным вниманием. И, конечно же, миллионы на миллионы других сайтов пытаются сделать то же самое.

Хорошая новость заключается в том, что алгоритм Google (как и алгоритмы других поисковых систем) со временем стал намного, намного лучше. Его миссия всегда заключалась в том, чтобы подавать наиболее релевантные результаты того, что человек ищет, и он получил довольно неплохие результаты.

Он также намного быстрее индексирует новые сайты, которые появляются; когда я начал создавать сайты, я помню, что нужно было вручную отправлять их в поисковые системы, а потом иногда ждать месяцами, чтобы увидеть их появление. Теперь Google будет индексировать ваш сайт автоматически — часто всего за пару дней.

Со всем этим я хочу поделиться некоторыми вещами, которые вы можете сделать для улучшения SEO вашего сайта. Чтобы все было просто, мы используем подход 80/20 — так как в 80% случаев результаты приходятся на 20% от усилий. Да, есть много крошечных небольших изменений, которые вы можете сделать, чтобы немного улучшить SEO — и если вам интересно, вы можете посмотреть этот набор учебников.

Я собираюсь порекомендовать вам набор из трех простых шагов, каждый из которых может оказать большое влияние:

иметь правильный контент на вашем сайте

Получить ссылки с других авторитетных и высоко посещаемых сайтов

Убедитесь, что ваш сайт мобильный

Давайте начнем с содержания вашего сайта. Главный способ, которым Google выясняет, что находится на Вашем сайте — и, следовательно, насколько это актуально для поисковых запросов человека — довольно прост: Он читает ваш сайт! Google использует маленькие кусочки кода, называемые пауками, чтобы «ползти» по содержанию в Интернете и индексировать его.

В результате, главный вопрос, который Вы должны задать себе при создании страниц, заголовков и биографии Вашего сайта:

«С чем я хочу быть связанным?»

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

Я Томас Фрэнк, но Томас Фрэнк также является известным политическим автором с несколькими опубликованными книгами, статьями на известных сайтах и в газетах, а также записью в Википедии.

До недавнего времени его слава гарантировала, что я нигде не появлялся на первой странице Google, когда вы искали «Томас Фрэнк»!

Однако… если бы вы искали «Thomas Frank YouTube» или «Thomas Frank колледж», я бы все-таки появился. Часто первым.

Это потому, что я работал, чтобы ассоциировать себя с терминами, которые описывают мою карьеру, отрасль и интересы — и я убедился, что мой сайт упоминает их.

Вот первый абзац на моем сайте:

«Я — автор, YouTuber, и спикер, который увлечен тем, чтобы помочь студентам добиться успеха». Большая часть моей работы сегодня выполняется в College Info Geek — сайте, который я создал в 2010 году, чтобы поделиться своими экспериментами по превращению в более эффективного студента».

Обратите внимание, что на нем перечислены автор, YouTuber, а также слова «студенты» и «колледж». Google подбирает эти термины и передает их в свой алгоритм. Они не гарантируют, что я буду высоко ценить их, но они помогают.

Скажем так, ты графический дизайнер, как моя девушка Анна. Если это так, то вы, естественно, захотите упомянуть об этом на своем сайте — в идеале на главной странице. Но не останавливайтесь на «графическом дизайнере» — на чем вы специализируетесь? Возможно:

Иллюстрация

Дизайн пользовательского интерфейса

Свадебные приглашения

А как же ваше местоположение? Если вы живете в Портленде и надеетесь устроиться на работу или фрилансерский концерт на месте, то вам стоит указать себя в качестве «графического дизайнера и иллюстратора на базе Портленда».

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

Ссылки с многих сайтов (если они получены законно — не платными или спамовыми способами).

Ссылки с авторитетных сайтов (обычно сайты с большим трафиком или сайты, управляемые такими учреждениями, как правительства или университеты).

Чем более конкурентным является поисковый термин, тем более авторитетные ссылки вашему сайту нужно будет ранжировать за него. Ранжирование за «бейсбол» было бы действительно сложным, в то время как ранжирование за «гориллу, глотающую 18 бейсбольных мячей» было бы проще (и да, я бы посмотрел на это).

Вот почему важно ссылаться на ваш личный сайт с других сайтов, если вы можете. Это включает в себя:

Сайты для команд, в которые Вы входите (школьные организации и т.д.).

Социальные профили — LinkedIn, Twitter, Goodreads и др.

Отмечу, что многие сайты социальных сетей настроены таким образом, что ссылка в вашем профиле не позволяет напрямую повысить ваш рейтинг; однако, убедившись в том, что она есть, вы можете привести на нее других людей (так как Twitter и LinkedIn имеют гораздо больший трафик, чем ваш сайт), и в конечном итоге они могут получить ссылки на нее с других сайтов.

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

Наконец, я хочу упомянуть, что Google придает большое значение удобству работы с мобильными устройствами.

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

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

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

Модернизация вашего мозга

Я начал создавать сайты, когда мне было 12. Сначала я просто использовал супер-старую школьную программу для создания сайтов Geocities, чтобы перетаскивать элементы. Это было весело, но этого было недостаточно. В конце концов, я обнаружил, что мне нужно выучить какой-то код, и начал учить себя HTML.

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

Тем не менее, нажимая вокруг WordPress может получить только вас до сих пор. Наступает момент, когда вы хотите вывести свой сайт на новый уровень, и для этого вам понадобятся некоторые знания в области веб-разработки. Имея это в виду, вот некоторые ресурсы, которые вы можете использовать для начала вашего образования в области веб-разработки.

Чтобы сохранить вещи бесплатно, придерживайтесь этих ресурсов в Интернете:

DevDocs — удивительная вики-программа, полная учебников и ссылок. Если вы изучаете чтение, то это отличное место для начала.

Mozilla Doc Center — еще одно потрясающее место для изучения основ. Я предпочитаю DevDocs, но это отличная альтернатива.

Codecademy — сайт, предлагающий интерактивные курсы по HTML, CSS, программированию и многое другое. Определенно хороший выбор для тех, кто учится на практике.

Code Combat — это супер-веселый сайт в стиле видеоигры, который может научить вас как Javascript, так и Python.

Design Tuts — место, куда можно пойти, если вы хотите отшлифовать свои навыки графического дизайна. У них есть много и много замечательных уроков.

Codecourse — удивительный канал для просмотра бесплатных видео-уроков на различных языках кодирования, включая PHP, который является диском WordPress.

Web Design Tuts — часть очень большой сети Tuts+ под управлением Envato. Ссылаюсь на одну из их замечательных серий для начинающих.

WordPress Codex — официальная документация WordPress. Здесь есть много замечательных учебников, а также полная ссылка на функции, когда вы начинаете становиться действительно странноватым.

Smashing Magazine — удивительный онлайн-журнал со статьями о каждом аспекте веб-разработки.

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

Еще одна замечательная видеотека для обучения — Treehouse. Их библиотека не так обширна, как библиотека Линды, но у них все еще есть что предложить — особенно в области веб-разработки. На самом деле я предпочитаю Treehouse, а не Lynda, так как они включают в себя задачи кода и викторины со своими видео-проектами. На самом деле, я научился создавать приложения для iPhone всего за два дня с помощью Treehouse. К сожалению, я еще не видел никаких школ, предлагающих бесплатные подписки для своих учеников — но это не мешает вам спрашивать!

Конечно, еще один отличный способ научиться веб-разработке — это просто смотреть на код. Если вы используете Google Chrome, вы можете нажать CTRL+U (или, если вы на Mac, просто перейдите в меню View -> Developer -> Source), чтобы увидеть HTML для страницы, на которой вы находитесь. Вы также можете использовать расширение Web Developer, чтобы копнуть еще глубже. Этот метод не будет работать для просмотра кода на стороне сервера, как PHP, но он отлично подходит для копания в HTML, CSS и Javascript.

Если вы изучаете книгу, у меня есть несколько рекомендаций для вашей библиотеки:

HTML и CSS: Дизайн и создание веб-сайтов Джона Дакета — прекрасная книга, которая дает прекрасное представление об основах веб-разработки. Это отличная отправная точка для любого образования в области веб-разработки.

WordPress 24-часовой тренер Джорджа Пламли — если вы ищете книгу для начала WordPress. Честно говоря, я думаю, что ты можешь достаточно хорошо учиться, используя Кодекс и просто играя с вещами. Если вам действительно нужна книга, то это она.

Профессиональная WordPress: Дизайн и разработка Хэла Стерна — только для серьезных гиков. Эта книга глубоко погрузилась в WordPress. Купите ее, только если вы заинтересованы в том, чтобы узнать, как работают Core и Loop, или как начать собирать темы и плагины.

Don’t Make Me Think by Steve Krug — руководство по использованию Интернета. Отличный способ научиться делать веб-сайты удобными и доступными.

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

Обновите свой сайт

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

Вот некоторые из моих любимых блогов, связанных с WordPress, которые я регулярно читаю, чтобы узнать, как сделать мои сайты удивительными:

WPBeginner

Smashing Magazine WordPress

WPTuts+

И для начала, возможно, вы захотите включить в Google Analytics возможность отслеживать статистику посетителей (спасибо Шепу МакАлистеру за напоминание добавить это).

Вывод: куда идти отсюда

Вы можете не почувствовать вес этого слова, особенно если вы только что просмотрели эту статью перед тем, как начать. Для меня, однако, удивительно смотреть на это после более чем 15 часов написания этого учебника.

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

Помните, если вам нужна помощь, вы можете связаться со мной. Я либо помогу вам напрямую, либо укажу вам на людей или ресурсы, которые могут вам помочь. Вы также можете просто связаться со мной в Twitter без необходимости помощи — я с удовольствием встречусь с вами!

Удачи!