Как настроить внешний вид сайта в редакторе WordPress

Настроить внешний вид     Добавить фавикон     Добавить горизонтальное меню     Добавить вертикальное меню     Добавить логотип    Добавить иконки социальных сетей   Добавить форму регистрации

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

  Мы разберёмся как всё это делается.  Будем «наводить красоту» с помощью настроек выбранной вами темы. В разделе настроек присутствуют практически все основные функции для оформления. Вы прошли уже целых два этапа и уверена кое-какие навыки по работе с редактором сумели получить.

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

 

Как это сделать смотрите здесь

Как настроить внешний вид

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

Меню настроек в теме

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

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

Как добавить фавикон

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

    Ширина и высота сторон фавикона должны быть одинаковыми, проще говоря он должен быть квадратным. Стандартными размерами фавикона считались размеры 16х16рх и 32х32рх, а стандартный формат — .ico. Но технологии не стоят на месте и современные браузеры начали распознавать формат .png и немного больший размер изображения для них стал не критичен. Лишь бы он не сказался на качестве отображения при сжатии его браузером до нужного размера. И всё же по моему мнению лучше всего подойдёт 32х32рх.

    Так вот, в любом редакторе создайте изображение с таким размером, назовите favicon и выберите формат .png или .ico. Загрузите в библиотеку файлов через админпанель. Затем в настройках внешнего вида найдите вкладку «Значок сайта» или «Свойства сайта» и добавьте туда иконку. Значок сайта

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

  Кстати, фавиконы можно создавать и онлайн в генераторах. Не вижу смысла перечислять их, потому что много. Достаточно в поисковик вбить фразу «фавикон создать онлайн» и вам будет предоставлена куча генераторов фавиконов, выбирай — не хочу.

Как добавить горизонтальное меню

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

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

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

Включение верхнего меню в настройках темы

Не забывайте сохранять настройки.

Как добавить вертикальное меню

  Чаще всего вертикальное меню располагают справа или слева от контента. И в этом вам помогут виджеты. Перейдите в настройки виджетов на любой странице кроме главной.Выбор виджета

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

   Добавьте виджет «Меню навигации».

Выбор виджета для меню

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

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

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

Как добавить логотип

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

 Логотип может быть и квадратным и прямоугольным, это роли не играет, но не очень большим. Примерный размер используемого изображения 250х100рх. Вы можете создать его самостоятельно в каком-либо редакторе или сгенерировать онлайн, как и фавикон. Изображение делается в формате .png и на прозрачном фоне. И желательно на всех ваших работах сохранять постоянный его размер.

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

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

Выбор изображения логотипа в настройках темы

Как добавить иконки социальных сетей

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

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

Конструктор блока "Поделиться" от Яндекс

  В админке создайте виджет html-код в подходящем для вас месте на своём проекте

Вставляем виджет на страницу проекта

и вставьте туда код скрипта, скопированный с яндекса.

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

Иконки социальных сетей на страницах проекта

Быстро и удобно. Распологать виджет вы можете где вам удобнее.

Как добавить форму регистрации

  Вполне возможно, что в дальнейшем вам понадобится форма регистрации на сайт. Её мы создадим с помощью уже установленного у нас плагина Profile Builder. Нужно просто правильно его настроить. Этим сейчас и займёмся. 

Создайте новую страницу, обзовите «Регистрация». Вставьте на место текста шорткод wppb-register в квадратных скобках, опубликуйте.

Шорткод на странице регистрации

  Теперь переходите в админ панель WordPress. В боковом меню найдите «Profile Builder»-«Form Fields«, откроется страница, где вы можете редактировать поля регистрации. Например, удалить лишнее, отредактировать и заменить названия полей на свой язык, а можете оставить как есть, смотрите сами.

Редактирование полей регистрации в плагине панели WordPress

  Это мы создали страницу, теперь нам нужна сама кнопка регистрации и мини поле для входа-выхода под своим логином.

  Код кнопки мы поместим в виджет html-код, такой же, как для иконок, который разместим на страницах нашего проекта. 

Добавление виджета для кнопки регистрации

 Теперь скопируйте вот этот код, только адрес сайта (там где красным выделено) поменяйте на свой (это адрес страницы регистрации), а wppb-login заключите в квадратные скобки [ ]:                                         

wppb-login <a href="https://mysite/%d1%80%d0%b5%d0%b3%d0%b8%d1%81%d1%82%d1%80%d0%b0%d1%86%d0%b8%d1%8f/"><input type="submit" value="Регистрация" onclick="this.disabled=true; this.form.submit(); return false;"></a>

 Код для получения кнопки регистрации

Результат должен получиться такой:

Мини-поле входа в аккаунт

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

 

 

 

 

Добавить комментарий