Устанавливаем тему, меняем дизайн сайта

Итак, двигаемся дальше! Сейчас будет самая интересная тема, которая поменяет в корне ваше мировоззрение по поводу сайтостроение. Это те моменты, когда ваша жизнь больше не будет прежней. Мы сегодня будем делать именно «конфету» из вашего сайта. В данный момент, сайт выглядит у нас вот так. Как вам? Достаточно грустно! Что мы делаем? Мы сейчас будем устанавливать тему в WordPress.

Итак, двигаемся дальше! Сейчас будет самая интересная тема, которая поменяет в корне ваше мировоззрение по поводу сайтостроение. Это те моменты, когда ваша жизнь больше не будет прежней. Мы сегодня будем делать именно «конфету» из вашего сайта. В данный момент сайт у нас выглядит остаточно грустно!

Что мы делаем? Мы сейчас будем устанавливать тему в WordPress. Тема — это значит дизайн сайта. Мы заходим во вкладочку «внешний вид», выбираем «темы» и вот у нас есть три варианта темы.

В данный момент, у нас установлена «Twenty Sixteen». Посмотрим, какую-то другую. Вот эту.

главные темы

Как по мне, так она поярче. Вы также вместе со мной пробуйте и тестируйте. Вы можете нажать «просмотреть», и оно покажет как это будет выглядеть. Грустно показывает! Поэтому нажимаем «активировать». Активировали! Возвращаемся на наш сайт, нажимаем «обновить». Вот! Одним кликом наш сайт уже поменялся. Появилась левая колонка. Да и все, в принципе. Вот статьи внутри как-то смотрятся уже по-другому.

Возвращаемся! Так, пробуем другую. Активируем «Twenty fifteen». Обновляем! Наш сайт уже совсем другой. Одним кликом мы полностью меняем внешний вид сайта. Но это детский сад. Давайте по-взрослому, теперь. Теперь мы добавим абсолютно новую тему. Сразу делаю акцент на том, что мы сейчас просто пробуем. Тестируем, Давайте смотреть! «Добавить новую» тему. Будем экспериментировать. И тут их просто безграничное количество. Это «избранное».

новая тема

Мы сможем взять «популярные». 2220 тем.

популярные темы

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

фильтрация тем

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

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

Сразу скажу, что вот все темы, которые устанавливаем, зачастую не русифицированы. И вам будет очень сложно с ними работать, поэтому можно чуть-чуть обмануть систему и вбить в поиске «Russian».

Руссификация тем

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

Обратите внимание, Вот хоть и избранные темы, но они попроще смотрятся. Также можно ещё обмануть систему в Яндексе. Пишем, ждём «темы для вордпресса на русском языке бесплатно» или можно же без «бесплатно». И вот тут просто немерено сайтов, которые вам предложат самые крутые темы.

Руссифицированные темы в Яндексе

Но я обязана вас предупредить, что эти темы могут иметь ряд недостатков:
1) они могут некорректно отрабатывать
2) там могут быть вирусы, которые могут проявить себя не сразу.

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

Удаляем лишнее с хостинга

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

Вот у нас осталось три первых темы. И сейчас мы будем их настраивать. Скачиваем тему franklinfree

Устанавливаем скачанную тему

также загружаем в формате Zip, устанавливаем нераспакованной и активируем,

Новая тема

 

 

 

И

Активируем тему

И я Вас поздравляю!Давайте теперь посмотрим, как с ним можно работать. Вкладочка «внешний вид», «настроить» и смотрим как мы с вами можем экспериментировать с темой. Мы настраиваем.

Свойства сайта

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

Есть иконка сайта и так мы выбираем «изображение» (она подсказывает что должно быть не менее 512 пикселей. Она врёт) эта картинка, которая будет называться favicon.

фавиконка

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

фавиконка

Мы загружаем и видим ее вот здесь. Вот здесь нажимаем «выбрать».

фавиконка

Вот она появляется такая маленькая.

Подберете ту, которая вам удобнее всего и нажимаем «сохранить». Смотрим, какой результат того, что у нас уже получилось. Сохранено! Заходим на сайт, обновляем. Видите его здесь. Появилась картиночка. Это и есть favicon.

Где она видна? Когда мы в Яндексе что-либо ищем или Google и мы  видим маленькие иконочки сайта перед названием. Это вот они и есть. Это называется favicon.

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

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

Вкладка «Upload Logo». Мы можем загрузить логотип. Можно поставить вот этот же. Посмотрите. Если мы загружаем логотип, то он у нас будет вместо надписи сайта

фавиконка

Как по мне, так лучше пусть пока будет надпись. Нажимаю «удалить». У нас будет куча времени, чтобы поэкспериментировать. Нажимаем «цветовая схема» и тут самое интересное.

Цветовая схема

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

Цветовая схема

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

адаптивность сайта

Все свернулось. Очень удобно. Это формат, когда сайт называется адаптивным. У него нет отдельной версии под мобильные устройства, он просто сжимается под то устройство, на котором вы открывайте сайт. Открывайте на большой плазме — он максимально широкий. Открывайте на маленьком ноутбуке — он чуть-чуть сжимается. Открывайте на планшете — ещё чуть-чуть. Открывайте на мобильном устройстве, на телефоне, к примеру, он ещё больше сжимается.

Все! Вот, в данный момент, у нас есть сайт. Вот он такой симпатичный. И мы будем двигаться дальше. Сейчас по его настройкам будем создавать меню, настраивать его, адаптировать под вас, чтобы он был именно таким, как вы хотите. Я думаю после вот этого урока, Вы больше никогда не будете переживать: «А как же сделать новый сайт?». И мир чуть-чуть перевернулся.

Идём дальше! Мы заходим в «виджеты».

виджеты

И вот, в данный момент, у нас справа куча разных виджетов. Нам нужно поэкспериментировать. Вот у нас справа вверху «поиск». И вот просто у нас есть правая колонка. Можем менять местами просто перетаскивая. Мы поменяли, зашли и посмотрели, как выглядет на сайте. Поменяли место. Наверху поставили. Обновили.  К примеру, можем что-либо убрать. Я вот, как обычно, настраиваю. Я оставлю «рубрики» наверху. После них ставлю «поиск».

меняем местами виджеты

Мне не нравится вкладка «мета». Я считаю, что она вообще не нужна. На данный момент как мы удаляем? Вот сюда.

Удаляем лишние виджеты

Удалить архивы. Мне они тоже не нравится. Нажимаем «архивы», « удалить». Обновляем сайт. Вот уже как-то симпатичнее. «Комментарии» пусть будут.

Давайте сразу перенесём сюда «календарь», нажимаем.  Если у нас будет заголовок «супер календарь», Сохранить. Обновляем.

Заголовок виджета

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

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

Тема «ionmag». Она вообще огромная. Видите сколько всего. Это вот стандартная тема. Ваши посты разбивает по категориям. Выводит сразу на главную и делает просто МЕГА МЕГА красоту. Тут должно быть много контента.

Тема «jongmag»

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

Чуть-чуть попроще тема «PLACID». Как по мне минимализм. Все аккуратненько. Все красиво. Везде всё понятно. Она также легко адаптируется, легко настраивается. Она вот такая черно-белая.

Тема «PLACID».

 

Третья тема «shamrock».

тема «shamrock»

Я настраивала вначале для своего личного сайта. Минималистично, большие картинки, красивенький текст, красивенькие вот все плашечки.

Я бы рекомендовала начать с placid или shamrock. А если Вы почувствуете, что готовы на большее., то выбирайте вот эту тему «ionmag», потому что в ней есть миллионы вариантов настроек. Достаточно сложно будет её настроить.

На данный момент выбирайте ту тему, которая тебе нравится. Протестируй, покрути, поверти.

Все! Двигайтесь дальше по уроку: Выбор темы для сайта (дополнительный урок)

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.