Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

10 способов украсить сайт

#1 nika

nika
  • Пользователь
  • 16 сообщений
  • Репутация: 4
9

Отправлено 26 Октябрь 2012 - 12:33

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

1. Первое с чего мы начинаем украшать сайт – это фон. Каким должен быть фон сайта? Моя ошибка была в том, что я выбрала очень яркий фон. Лично мне он нравился, но как оказалось такой фон был очень неудобным и даже немного раздражающим для посетителей. Поэтому, что нельзя делать – это выбирать яркий фон. Фон должен быть спокойным, неброским, чтобы при чтении материала ничего не мешало и не уставали глаза. Иначе посетители останутся у вас недолго. Я походила на сайты с большой посещаемостью и ни у кого нет ярких фонов, все фоны в спокойных тонах. Также хотелось бы отметить, что при загрузке моего сайта с телефона основной фон моего сайта был красным (такой цвет был установлен в шаблоне), что тоже было неудобно при чтении.

Как узнать какой цвет вашего сайта основной? Можно зайти с телефона (простого) на свой сайт, либо скопировать что-либо у себя на сайте и вставить это в World-документ. Вы сразу увидите. С помощью программы ColorMania или подобной ей узнаете цвет (шестнадцатеричный номер). Затем зайдя в администраторскую часть сайта выберите файл «Таблица стилей (style.css). Нажав в браузере сочетание клавиш Ctrl+F у вас появится поле, где нужно ввести тот цвет, который вы хотите поменять. Обычно это в самом начале таблицы, параметр body: background-color. Ставьте нужный вам цвет и радуйтесь результатам. На моем сайте первоначально основной цвет был кирпичный, а стал нежно-желтый. Читать стало намного приятней.

2. Так как у меня сайт о кулинарии, то на нём много фотографий. А смотреть фотографии приятно в увеличенном виде. Конечно, когда открывается новое окно – это не всегда удобно. Поэтому я установила плагин Auto Highslide. Описывать как устанавливать плагины не буду, так как большинство владельцев своего сайта это знают. Плагин не имеет настроек поэтому трудностей в использовании его у вас возникнуть не должно. Единственное условие – у фотографии должна быть ссылка. Иначе плагин её увеличивать не будет. В результате использования плагина фотография увеличивается прямо на той странице, на которой размещена. Считаю это хорошим способом украсить свой сайт. Красиво и удобно…


3. Если вам понравился какой-нибудь сайт и вы хотите подружиться с его владельцем вы ищете так называемые социальные кнопки. Но не те, с помощью которых люди делятся этой статьей с другими, а те которые ведут к автору. Многие для этого используют плагины, я же использовала для этого простой html-код и разместила его в сайдбаре с помощью виджета «Текст». Иконки для такого кода можно найти в Интернете, благо выбор большой. Так как мой сайт о кулинарии я выбрала такие.

Изображение

А код представила ниже. Думаю, сделать это сможет каждый. Конечно же адреса своих аккаунтов и адреса картинок у вас будут свои. Данный код нужно вставить в виджет "Текст" и поместить в то место, где вы хотите его видеть.

Спойлер


4. Немаловажной частью сайта является постраничная навигация. На многих сайтах этой части уделяется мало внимания. И это очень мешает поиску и просмотру статей. Часто встречаются блоги, на которых вместо постраничной навигации стоят слова «Ранее» или «Предыдущие записи», «Позднее» или «Следующие записи». Есть несколько плагинов, которые решают эту проблему. Для Wordpress я использовала плагин WP-pagenavi, но потом в Интернете нашла способ сделать это без плагина. Он не намного сложней, но зато это способ сделать навигацию такой, какой вы хотите её видеть. Данный способ принадлежит владельцу сайта WP-KAMA Альтернативный взгляд на WordPress Тимуру. За это ему большое спасибо! Необходимо в файл functions.php вставить следующий код:

Спойлер


Настройки описаны прямо в коде, они идентичны настройкам самого wp-pagenavi, с той лишь разницей, что вместо текста "к последней странице" можно вывести номер последней страницы.
В файл style.css добавить стили для красивого отображения номеров страниц. Я оставила настройки от плагина WP-pagenavi, у меня они вписались очень даже ничего.

Спойлер


После проделанных операций осталось сделать совсем немного: в файлах где используется постраничная навигация (index.php , archive.php , single.php) необходимо вставить следующий код

<?php kama_pagenavi(); ?> 


В моей теме уже была похожая функция, выглядела она так:

<?php if (function_exists('wp_pagenavi')) wp_pagenavi(); ?>


Поэтому я просто заменила wp_pagenavi на kama_pagenavi. В результате у меня получилась такая навигация:

Изображение

5. Часто бывает, что на странице много текста, комментариев и прочего и прочитав до конца нужно вернуться наверх. Мотать колесиком мыши не очень удобно. Красивая штука – стрелка «Наверх». Вариантов её исполнения тоже много – и с помощью плагина и с помощью кода. Я выбрала второй, так как это не очень сложно. Для этого я сделала двойную картинку в Фотошопе в виде груши ( ну нравятся мне груши). Двойная нужна она для того, чтобы при наведении одна сменяла другую. Выглядит она так:
Изображение

Сделать её нужно в формате .png, чтобы фон был прозрачный. Затем в файл script.js, который находится внутри моей темы я вставила вот этот код:


Спойлер


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


В параметре background:url() нужно указать адрес, где находится ваша картинка. Чтобы ваша «стрелка» появилась на странице, необходимо перед закрывающем тегом </body> вставить следующий код:

<a id="gotop" class="scrollTop" title="В начало страницы" href="#" onclick="top.goTop(); return false;"></a>

В результате в правом нижнем углу моего сайта можно видеть следующее:
Изображение

6. Для кулинарного сайта очень важно, чтобы статьи были с картинками. И хотелось бы, чтобы люди как можно дольше задерживались и переходили от статьи к статье. Что же в этом поможет? Отличный плагин по перелинковке с картинками. Из всех, которые я перепробовала – этот подошел как нельзя лучше. Называется он Related Posts Thumbnails. Простой в настройке, так как меню на русском языке, а также можно подстроить его под свой сайт. Настраиваются практически все параметры так, что впишется в ваш дизайн идеально. Вот как это выглядит у меня:

Изображение

7. Возвращаясь к теме о социальных кнопках хочу рассказать вам о сервисе share42.com. Многие используют его на своих сайтах – я не исключение. Дело в том, что этот сервис делает настройку таких кнопок в творчество. Вы сами выбираете, какие кнопки будут у вас расположены и как они будут располагаться. Сервис предлагает 2 варианта: горизонтальный и вертикальный плавающий. Также здесь настраиваются размеры кнопок, их порядок (какая за какой будет следовать) и сразу можно посмотреть как это будет выглядеть. Проследовав простой инструкции по установке и сделав все внимательно вы останетесь довольны результатом. У меня сейчас это выглядит так:

Изображение

8. Люди уже давно научились передавать эмоции в виде графических знаков. Конечно же все об этом знают – это смайлики. От самых простых до неимоверно сложных. Поэтому очень приятно читать комментарии людей, сопровождающиеся такими вот забавными рожицами. Я тоже хотела, чтобы на моём блоге были смайлики. Но как, наверное, и многие другие графически могу передать лишь немногие. Поэтому искала плагин, который бы отвечал моим «запросам» и был удобен в использовании. Нашла его на сайте WP-KAMA Альтернативный взгляд на WordPress . Удобней его и красивее мне не попадался. Особенность этого плагина такая, что его можно дополнять своими смайликами. И не только ими. Автор разрешает это делать. И вот как это выглядит сейчас у меня:

Изображение

А при наведении курсора на смайлик

Изображение

Кликнув по «желаемому» смайлику он автоматически вставляется в текст и в итоге комментарий «оживает».

9. Вам нравится когда к Вам обращаются по имени? Когда помнят Вас? Вот и мне очень понравилось, когда я желая оставить комментарий на одном блоге увидела «С возвращением, Ольга». Думаю: «Я же не регистрировалась здесь, обычный блог…». Оказывается тоже ничего сложного здесь не было. Достаточно вставить следующий код в файл script.js
Спойлер


В результате вместо обычной формы комментариев

Изображение

мы увидим такое приятное приветствие

Изображение

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

10. Ещё одна возможность украсить сайт предоставляется посредством расширения визуального редактора в WordPress. Изначально он выглядит вот так:


Изображение

А вот как он выглядит у меня:

Изображение

Благодаря этому можно без лишних движений украсить свою статью различными стилями шрифтов, размерами шрифта, выбрать другой шрифт и тому подобное. Если вы хотите расширить панель так как у меня, то достаточно в файл functions.php вставить следующий код: (вставлять нужно в самый конец перед закрывающемся тегом ?>)


Спойлер


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


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


P.S. Если решили что-то использовать на своем сайте - пишите в комментариях что получилось, а что нет. Также мне это поможет знать какие "фишки" более востребованы! Спасибо!


При поддержке: SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой. Обсудить на форуме.

Изображение

 

 

  • 2

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Вывести сайт в 1ю десятку
  2. 10 способов сделать более заметным свой сайт в поисковой выдаче
  3. Размещу статьи на своих сайтах 30+ тИЦ от 10 до 40 тематика
  4. Подскажите способы продвижения сайта, которому меньше 2-х месяцев
  5. Переделал сайт. Что можно исправить?

#2 metel

metel
  • Пользователь
  • 44 сообщений
  • Репутация: 5

Отправлено 26 Октябрь 2012 - 12:45

Вау!!! Спасибо за информацию! Очень все подробно и доступно написано... Я как-то до этого думала, что украшение ограничивается просто картинками) А главное в сайте - это удобное и простое меню!
  • 1

#3 nika

nika
    Topic Starter
  • Пользователь
  • 16 сообщений
  • Репутация: 4

Отправлено 26 Октябрь 2012 - 13:25

Спасибо, metel! Я тоже считаю, что красота - это в первую очередь удобство. Сейчас ещё думаю о том, как улучшить форму комментирования. Сделать её на Ajax. А то перезагрузка страницы иногда проходит долго, а Интернет не у всех быстрый.
  • 1

#4 Александр Коблов

Александр Коблов
  • Пользователь
  • 16 сообщений
  • Репутация: 5

Отправлено 26 Октябрь 2012 - 21:09

Супер пока что мельком пробежался но уже зацепило. Особенно смайлики именно таких я ещё не встречал как раз на блог Мир приколов прикручу.
  • 1

#5 nika

nika
    Topic Starter
  • Пользователь
  • 16 сообщений
  • Репутация: 4

Отправлено 26 Октябрь 2012 - 21:56

Рада, Александр, что пригодилась моя статейка ^_^ :) :) ! Развития Вашему блогу и красивых сайтов побольше на пути!
  • 0

#6 metel

metel
  • Пользователь
  • 44 сообщений
  • Репутация: 5

Отправлено 31 Октябрь 2012 - 22:03

Спасибо, metel! Я тоже считаю, что красота - это в первую очередь удобство. Сейчас ещё думаю о том, как улучшить форму комментирования. Сделать её на Ajax. А то перезагрузка страницы иногда проходит долго, а Интернет не у всех быстрый.

Да мне-то за что спасибо)? Это вы нам тут помогаете несмышленышам))) А мы стараемся от вас как от старейшин знаний почерпнуть, за что ВАМ спасибо!)
  • 1

#7 nika

nika
    Topic Starter
  • Пользователь
  • 16 сообщений
  • Репутация: 4

Отправлено 01 Ноябрь 2012 - 03:41

Кстати получилось таки сделать комментарии на Ajax - правда из-за особенностей шаблона никак не хотели вставляться коды - перепробовала многие. Остановилась на плагине wp-comment-master. Там и настройки есть хорошие и весит немного и ресурсов почти не берёт. Зато теперь не надо ждать перезагрузки страницы, чтобы увидеть свой комментарий. А это многого стоит, особенно для тех у кого Интернет медленный.
  • 0

#8 nika

nika
    Topic Starter
  • Пользователь
  • 16 сообщений
  • Репутация: 4

Отправлено 06 Ноябрь 2012 - 21:29

Прошло не так много времени, а опять накопились некоторые "украшательства"... Жаль тема статьи ограничивает их число :) :)
  • 0

#9 travaglinidesign

travaglinidesign
  • Пользователь
  • 1 сообщений
  • Репутация: 1

Отправлено 07 Ноябрь 2012 - 10:54

Ольга, добрый день,нашла Вашу статью "как улучшить свой сайт", очень клевая, вот хочу поменять кнопки себе из соц сетей, Dfib больно хороши! закачала папку себе на хостинг, а вот куда вставлять тег,который сгенерировался? "Вставьте в шаблон вашего сайта следующий код (прямо перед или сразу после основного текста страницы):" а как сделать так,чтоб он сам автоматически под всеми статьями был? куда его прописать надо?спасибо заранее
  • 1

#10 Василич

Василич
  • Пользователь
  • 140 сообщений
  • Репутация: 26

Отправлено 07 Ноябрь 2012 - 13:18

пробежал глазами )
что понравилось - что действительно доступно написано, в помощь новичкам и не очень - самое то )
ТС успехов в развитии сайта и далее
  • 1

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru