TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

361

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

Вы можете взять базовую (и однообразную) тему WP, добавить логотип, отредактировать несколько строк кода, изменить свой CSS и быстро создать профессиональный (но привлекательный) веб-сайт. Это простая работа, и из этого туториала Вы узнаете, как это делать.

Вы готовы? Начнем с самого начала; цвета.

Разработка цветовой схемы

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

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

Раскраска вашего сайта WordPress тоже не отличается. Какого цвета вы хотите, чтобы ваши ссылки? Ваш опыт, как вы сделаете его наиболее привлекательным и заставите конкурентов разинутить рот? Какие цвета дополнят (или даже укрепят) ваше сообщение? Как вы хотите, чтобы ваш текст? Нет предела выбора цветов, которые вы можете использовать на своем сайте WP.

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

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

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

216 цветов против 12 цветов

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

Вам повезло, потому что я порыбачил по всему Интернету и нашел для вас следующие инструменты:

KULER


Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

Kuler был разработан Adobe, чтобы помочь веб-разработчикам создавать первоклассные цветовые схемы. Kuler – это онлайн-инструмент, то есть вы можете носить его с собой и использовать где угодно, но есть также настольное приложение, которое поможет вам разрабатывать цветовые схемы прямо с вашего рабочего стола. Кроме того, если у вас есть Adobe ID, вы можете сохранить свои цветовые схемы одним щелчком мыши.

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

Check out Kuler.

ЦВЕТОВАЯ ТАБЛИЦА HTML

Знать, какие цвета вы будете использовать, – это только половина дела. Чтобы реализовать свои цвета, вы должны перевести их в HTML-коды.

Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

Здесь на помощь приходит цветовая диаграмма HTML. Это красочная диаграмма с более чем 200 (на самом деле 216) веб-цветовыми кодами. Вооружившись диаграммой, невозможно реализовать ни один цвет под солнцем.

Коды будут работать с HTML, CSS, Adobe PhotoShop и другими инструментами для работы с графикой, поэтому у вас будет вся свобода в мире, чтобы играть со своими цветами столько, сколько захотите.

Ознакомьтесь с таблицей цветов HTML.

ГЕНОПАЛ

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

Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

С GenoPal вы можете увеличить яркость и контролировать насыщенность оттенков, чтобы получить именно тот оттенок, который вам нужен.

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

COLORHEXA

ColorHexa – это онлайн-версия раскрасок художника. Этот веб-сайт дает вам возможность смешивать цвета, просто вводя цветовые коды. Их предварительное приложение – это инструмент для смешивания цветов, но у них также есть генератор градиента и вычитатель цвета. Разве здесь не работает этот чистый гений?

Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

Как работает блендер ColorHexa? Все, что вам нужно сделать, это ввести свои цветовые коды, разделенные знаком «+», а ColorHexa сделает остальную работу. Например, я пробовал:

# ff0000 + # 0000ff + # ff00ff и я получил # aa00aa. Более того, они предоставляют вам целую страницу с информацией о цвете (о вашем конечном цвете, например, # aa00aa). Это один из инструментов, который вы должны попробовать сами, чтобы испытать смешивание цветов, как никогда раньше.

Проверьте ColorHexa.

ULTIMATE CSS GRADIENT GENERATOR


Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

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

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

Попробуйте Ultimate CSS Gradient Generator.

Выбор шрифтов

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

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

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

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

«Игра со шрифтами похожа на игру с огнем. Иногда он может зажечь спичку на веб-странице, сверкнув красивым текстом. В других случаях он может сжечь весь дом ». – Лорель из cameraontheroad.com.

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

Вот хороший пример:

#menu {font-family:Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; font-size: 0.8em; color:black;}

Приведенный выше код установит размер шрифта в вашем меню на 0.8em и установит черный цвет. Он также установит шрифт на Arial, но если на компьютере пользователя нет Arial, его заменит Helvetica. Если у них нет Helvetica или Arial, вместо них возьмут Verdana, Sans-serif или Times New Roman.

Управляя шрифтами, вы можете создать более единообразный внешний вид.

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

Кроме того, это легкая работа.

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

@font-face{font-family: Museo300; src: url("fonts/museo300-regular.ttf") format: ('truetype'); font-weight:normal;}

ПРИМЕЧАНИЕ. Вы должны указать имя и расположение шрифта. В приведенном выше примере «Museo300» – это шрифт, который был сохранен в папке с именем «fonts».

Например, чтобы использовать шрифт на своем веб-сайте, вы можете написать:

body{font-family:Museo300;}

Вы можете использовать встроенный шрифт для любого элемента вашего сайта. Например…

#menu{font-family:Museo300;}

… Установит Museo300 в ваше меню.

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

Однако, у НУ не нужно загружать любой внешний шрифт вы хотите использовать.

Вы можете просто сослаться на шрифты из раздела head (header.php) следующим образом:

Как и где добавить строку выше? Вам нужно открыть панель администрирования WordPress -> Внешний вид -> Редактор -> header.php

Если вы не хотите или не можете редактировать файл header.php, просто импортируйте шрифты, введя следующую строку в свой style.css :

@import url(http://fonts.googleapis.com/css?family=over+the+rainbow);

Приведенный выше пример позволит вам использовать шрифт Over The Rainbow от Google в любом месте вашего сайта. Например, если вы хотите использовать Over The Rainbow на своем веб-сайте, вы можете использовать этот код:

body{font-family:"Over The Rainbow";}

Google предоставляет более 600 бесплатных семейств шрифтов, так что играйте!

Обновление (12.07.13): если вы хотите легко добавить шрифты Google на свой сайт WordPress, вы можете использовать плагин Google Typography. Помимо этого, вы можете узнать больше о шрифтах Google и о том, как их реализовать, в статье «Улучшите типографику вашего веб-сайта WordPress с помощью шрифтов Google» Тома Эвера.

Дополнительные ресурсы по игре со шрифтами

Плагины WordPress для добавления шрифтов

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

Весело ли тебе? Давайте двигаться дальше…

Форматирование даты и времени

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

Хорошие новости, вы можете отредактировать эту строку кода и удивить своих читателей.

На панели инструментов WP перейдите в раздел Внешний вид, а затем в редактор, как показано ниже:

Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

Оказавшись там, вы сможете увидеть список ваших файлов .php справа:

Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

Нажмите на одном посту (single.php) и когда он открыт, откройте панель поиска, нажав Ctrl + F. В появившейся строке поиска введите:

the_time

Вы сразу же заметите линию, которая может выглядеть примерно так:

Теперь область, которую вы хотите отредактировать, будет (‘F Y').

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

Буква «F» в («F Y») означает полное название месяца, а буква «Y» представляет год в 4-значном формате. Следовательно, если вы используете (‘F Y'), ваша дата будет выглядеть так:

September 2013

Если вы поставите запятую между F и Y, у вас должно получиться что-то вроде:

September, 2013

Если вы хотите добавить день и другие элементы, вы можете использовать следующие символы:

l = полное название дня (строчная L)

F = месяц

j = день месяца (число)

Y = Год в 4-х цифрах

y = Год в 2-х цифрах

Другие символы можно найти в таблице ниже:

Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

А вот несколько примеров:

Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

Всегда помните, что нужно редактировать только символы в квадратных скобках (‘F Y') и, обратите внимание, не удаляйте одинарные кавычки. Не стесняйтесь использовать столько символов, сколько хотите для достижения желаемого эффекта, и не забудьте сохранить все, когда закончите.

Более того, вы можете избавиться от даты, удалив…

… Как я недавно сделал в своем блоге. ? Теперь все, что я получаю, это Размещено Фредом в такой-то категории… бла-бла. Никаких свиданий.

Вы готовы к следующей части? Тебе бы лучше быть.

Не нашли функцию the_time?

Это нормально, потому что многие темы сейчас используют функцию the_date() вместо функции the_time (), что на самом деле является лучшей практикой. Если ваша тема использует функцию the_date (), вам не придется вносить какие-либо изменения, потому что вы можете просто изменить способ отображения данных на панели инструментов в разделе «Настройки-> Общие».

Использование изображений

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

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

Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

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

Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

Эта область находится в правой части утилиты загрузки.

Чтобы узнать больше о добавлении изображений, ознакомьтесь со следующими ресурсами:

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

Видеть? Я же сказал, что это будет самое короткое ?

Добавление фавикона

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

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

Как правило, значок – это квадратный графический файл размером 16 х 16 пикселей с расширением .ico. Расширение означает значок.

Как создать фавикон

Вы можете создать свой значок в Интернете или с помощью программ редактирования изображений, таких как GIMP, или любых других, которые позволяют сохранять файлы .ico. Большинство онлайн-сервисов бесплатны.

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

Если вы используете графический редактор:

  • Обрежьте или добавьте пространство соответственно, чтобы изображение получилось квадратным.
  • Измените размер изображения до 16 X 16 пикселей и
  • Сохраните изображение как favicon.ico

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

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

Как установить свой фавикон в WordPress

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

Для этого урока я использовал faviconer.com, чтобы создать значок для своего блога, и Filezilla, чтобы удалить существующие значки.

Имея в руках файл favicon.ico, загрузите его в основную папку вашей темы. Это папка, в которой хранится ваша текущая тема.

Затем загрузите еще одну копию своего значка в корневую папку (обычно public_html) или в основной каталог, где хранится ваш сайт, чтобы вы могли видеть свой значок, когда набираете yoursite.com/favicon.ico. Это автоматически добавит ваш значок в ваши каналы.

Когда вы закончите загрузку, самое время запустить favicon.ico. Вот что вам следует сделать:

Добавление вашего Favicon с помощью плагина

Лучший способ добавить свой значок – использовать плагин. Я бы порекомендовал использовать плагин «All In One Favicon» для более продвинутого использования. Для очень простого подхода вы можете использовать плагин «The Simplest Favicon », у которого нет никаких дополнительных опций, вам просто нужно загрузить файл с именем favicon. ico в нужном месте на вашем сервере.

Редизайн вашего сайта WordPress (чтобы добавить индивидуальности)

Добавление значка вручную в шаблон

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

  • Войдите в личный кабинет
  • Перейдите к Appearance
  • Затем в редактор (редактор темы)
  • Найдите и откройте файл header.php (заголовок)

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

После завершения сохраните.

Обновите браузер, чтобы увидеть новые изменения.

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

Заключение

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

Чтобы получить максимальную пользу, лучше всего разделить руководство на несколько частей (это часть 1). Со временем мы поделимся новыми трюками с редизайном, так что будьте начеку. Цель этих руководств – помочь вам создать лучший сайт WordPress и подарить вам чувство счастья, потому что вы сделали все это самостоятельно.

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

Источник записи: https://www.wpexplorer.com

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